用户登录注册，我们先需要开发后端的接口，接口一般需要有入参，然后和数据库进行交互。
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;
总结
我们本篇主要是解决后端接口的问题，登录注册接口有了之后就需要改造我们的前端，在用户输入用户名密码的时候调用后端接口，验证成功之后进入到我们的系统主页。
