Vue之用户登录功能（四）用Express创建后台服务器

创建项目

1、首先创建一个空白文件夹login-server，先在文件夹下输入以下命令创建package.json，输入后会提示输入一系列项目参数，可全部按回车采用默认项
npm init
2、在该文件目录下引入express（会自动安装所需依赖）
npm i express --save
3、最后在项目目录下创建app.js作为启动文件，整个目录结构如下

创建路由

4、编辑app.js文件，创建一条路径为/validate，的POST路由

var express = require('express')
var app = new express();

var users = [
    {name: 'admin', pass: '123456'},
    {name: 'caishaodong', pass: '123'}
]

app.post('/validate', (req, res) => {
    res.send(users)
})

var port = process.env.PORT || 3000

app.listen(port)
console.log('app is listening on port:' + port)

5、最简易的服务器就做好了，输入控制台命令启动服务器
node app.js
可以看到控制台输出
app is listening on port:3000
6、用Postman或firebug等http工具向地址http://localhost:3000/validate发送一条POST请求，可以看到成功地返回了结果

解析请求中的数据

7、为了解析http请求body中json和x-www-form-urlencoded类型的数据，需要引入body-parse中间件
npm install body-parser

bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

8、修改路由方法，输出请求中的数据

app.post('/validate', (req, res) => {
    console.log(req.body)
    res.send(users)
})

9、保存后重新启动服务器，这时候分别再次发送携带数据的POST请求


控制台日志

验证请求数据

10、修改路由方法，若用户名密码正确则返回用户信息，用户名密码错误则返回空对象

app.post('/validate', (req, res) => {
    var user = users.find((item) => {
        return item.name == req.body.name && item.pass == req.body.pass
    })
    res.json(user ? user : {})
})

再次发送POST请求后，结果如下

路由模块化

11、目前已经实现了基本的路由功能，但是有个问题，每增加一条请求方法都直接注册到app上的话，会导致app.js文件无限扩大且难以管理，可以将请求方法注册到该模块的路由上，再将每个模块的路由注册到app上
12、在根目录下创建router文件夹，再在其中创建users.js

var express = require('express')
var router = express.Router()

var users = [
    {name: 'admin', pass: '123456'},
    {name: 'caishaodong', pass: '123'}
]

router.route('/validate').post((req, res) => {
    var user = users.find((item) => {
        return item.name == req.body.name && item.pass == req.body.pass
    })
    res.json(user ? user : {})
})

module.exports = router

13、在app.js中引入路由

var express = require('express')
var app = new express();
var router = require('./router/users')

bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.use('/users',router) // 将路由注册到/users的路径下

var port = process.env.PORT || 3000

app.listen(port)
console.log('app is listening on port:' + port)

14、向地址http://localhost:3000/users/validate用POST方法发送数据{"name":"admin","pass":"123"}，结果如下：

小结

本阶段用Node.js与Express搭建了一个服务器，下个阶段将连接Mongodb数据库，并使用Mongoose来操作数据库中的数据

出现的问题

有时候会出现类似于Unresolved variable or type module这样的问题

勾选即可