用Express搭建服务器

2021-9-18    前端达人 前端及开发文章及欣赏

用Express搭建服务器

之前一直是用axios请求rap2模拟的接口,想试着用express自己写一个简单的,然后连下MySQL数据库。

0、准备工作

  • 安装node
  • 初始化项目:新建一个文件夹,在里面
    npm init -y 
    		
    • 1
  • 安装express
    npm install express 
    		
    • 1

1、第一个小栗子(发布服务)Express 中文网

  • 新建www.js文件,把这段代码写进去,然后直接node www.js启动服务,然后在浏览器访问http://localhost:3000就可以看到后端返回的Hello World!啦。
     const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { //这里面可以先从数据库获取数据,然后返回给前端 res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) 
    		
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

2、前端axios.get请求

  • 发布服务之后就可以用axios请求啦,请求的代码如下:(但是会有问题,解决方法见 第3节
     axios.get('http://localhost:3000').then((res) => { console.log(res); }); 
    		
    • 1
    • 2
    • 3
    • 4

3、前端axios.get请求的跨域问题

  • 第2节介绍了如何用axios请求后台服务,但是在本地访问上面的http://localhost:3000,如果不是同一端口的话会出现跨域不能请求的问题。解决方法是在www.js文件中加上下面这段:
 //加了这句之后就可以跨域请求了??? app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //允许所有来源访问 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //允许访问的方式 next(); }); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 这样你就可以在本地其他端口的项目上访问3000端口啦

4、后端post接口

app.post('/post', (req, res) => { console.log(JSON.stringify(req.body));//前端发送给后端的数据 res.send('ok');//返回给前端的数据 }); 
  • 1
  • 2
  • 3
  • 4

5、前端axios.post请求

 axios.post(`http://localhost:3000/post`, "向后端发送的数据").then(res => { console.log("后端返回的数据res=>", res); }); 
  • 1
  • 2
  • 3
  • 这样你在前端就可以向后端发送请求信息,后端接收并验证之后再把数据返回给前端就好了。
  • 但是,这样还是会有点问题,第6节解决。

6、 在express中获取post请求数据(本节原文链接)

  1. express没有内置的POST请求API,但是有听说将body-parser(详情) 内置到express中了。但是我试了直接使用不了。所以还是直接安装第三方包

  2. 使用第三方包body-parser

    npm i body-parser 
    		
    • 1
  3. app.js

    //1引包 const bodyParser=require('body-parser') //2配置 // 配置模板引擎和 body-parser 一定要在 app.use(router) 挂载路由之前 // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json()) 
    		
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
  • 至此使用express搭建的简易服务器就好了,后续可以再连接数据库进行增删查改。

转载整合自(文中链接) 参考链接:
Express 中文网
在express中获取post请求数据(原文链接)
body-parser(详情)




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档