用Express搭建服务器

用Express搭建服务器

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

0、准备工作

• 安装node
• 初始化项目：新建一个文件夹，在里面

  npm init -y
  

• 安装express

  npm install express
  

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}`) })
  
  

2、前端axios.get请求

• 发布服务之后就可以用axios请求啦，请求的代码如下：（但是会有问题，解决方法见 第3节）

    axios.get('http://localhost:3000').then((res) => {
      console.log(res);
    });
    
  

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();  });

• 这样你就可以在本地其他端口的项目上访问3000端口啦

4、后端post接口

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

5、前端axios.post请求

      axios.post(`http://localhost:3000/post`, "向后端发送的数据").then(res => {
        console.log("后端返回的数据res=>", res);
      });

• 这样你在前端就可以向后端发送请求信息，后端接收并验证之后再把数据返回给前端就好了。
• 但是，这样还是会有点问题，第6节解决。

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

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

2. 使用第三方包body-parser

   npm i body-parser
   

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())
   

• 至此使用express搭建的简易服务器就好了，后续可以再连接数据库进行增删查改。

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