用户登录注册，我们先需要开发后端的接口，接口一般需要有入参，然后和数据库进行交互。

1 创建表

我们现在先实现用户的登录及注册，建表语句

create database diancan;
use diancan;
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) NOT NULL,
  password VARCHAR(255) NOT NULL
);

连上Mysql在命令行里执行脚本

2 创建后端文件

我们现在要想后端的文件在哪里放，大型项目可能是前后端分离，各有各的目录，因为我们这个是练手项目，就和前端的项目放到一起就可以

vscode里打开我们的前端脚手架项目，在src下边增加一个server文件夹，里边创建一个server.js文件

输入如下代码

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const app = express();
const port = 3000;

// 连接数据库
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '111111',
    database: 'diancan'
});

// 解析请求体
app.use(bodyParser.json());

// 注册接口
app.post('/register', (req, res) => {
    const { username, password } = req.body;
    connection.query('INSERT INTO users SET ?', { username, password }, (err, result) => {
        if (err) {
            console.error(err);
            res.status(500).send('Server Error');
        } else {
            res.send('Register Success');
        }
    });
});

// 登录接口
app.post('/login', (req, res) => {
    const { username, password } = req.body;
    connection.query('SELECT * FROM users WHERE username = ?', username, (err, results) => {
        if (err) {
            console.error(err);
            res.status(500).send('Server Error');
        } else if (results.length === 0) {
            res.status(401).send('User Not Found');
        } else if (results[0].password !== password) {
            res.status(401).send('Password Incorrect');
        } else {
            const token = jwt.sign({
                userId: results[0].id,
                username: results[0].username
            }, 'secret');
            res.send({ token });
        }
    });
});

// 权限验证中间件
const authMiddleware = (req, res, next) => {
    const authHeader = req.header('Authorization');
    if (authHeader) {
        const token = authHeader.replace('Bearer ', '');
        try {
            const decoded = jwt.verify(token, 'secret');
            req.userId = decoded.userId;
            req.username = decoded.username;
            next();
        } catch (err) {
            res.status(401).send('Invalid Token');
        }
    } else {
        res.status(401).send('Unauthorized');
    }
};

// 需要授权的接口
app.get('/protected', authMiddleware, (req, res) => {
    res.send(`Hello, ${req.username}`);
});


app.get('/', (req, res) => {
    res.send('Hello, World!');
});

//const userRouter = require('./userRouter');
//app.use('/', userRouter);
// 启动服务器
app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
});

3 安装依赖

nodejs里凡是使用require语句的，先需要安装npm包，我们一共使用了四个包

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');

安装方法是进入到项目的根目录

在根目录打开cmd，然后输入安装命令

npm install express mysql jsonwebtoken --save

安装完毕后可以去node_modules里查看包是否安装正常

4 启动服务

进入到我们的server文件夹，打开cmd，使用如下命令启动服务

node server.js

可以看到服务已经正常启动

5 接口测试

后端接口编写完毕后，我们需要测试一下接口是否正常，可以使用PostMan来测试

从网络上下载并且安装，我们可以先创建一个collection

collection创建好之后，可以建一个request

首先测试一下注册接口是否正常，接口地址

http://localhost:3000/register

方法选择POST，然后切换到Body页签，我们按照JSON格式传入参数

{
    "username":"test",
    "password":"111111"
}

填写好之后点击send，如果一切正常会返回注册成功的提示

接着测试一下登录接口

http://localhost:3000/login

登录接口测试成功后会返回一个token

接着测试权限验证接口

http://localhost:3000/protected

传入我们的token成功返回结果

6 处理数据库执行不成功的问题

我们如果按照默认配置安装数据库，在首次测试接口的时候后台会报错，主要是因为客户端的密码验证协议和mysql服务端不匹配造成的，需要修改一下

登录到mysql后执行如下命令

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你自己的密码';

然后提交更新

FLUSH PRIVILEGES;

总结

我们本篇主要是解决后端接口的问题，登录注册接口有了之后就需要改造我们的前端，在用户输入用户名密码的时候调用后端接口，验证成功之后进入到我们的系统主页。