基于Vue+ElementUI+MySQL+Express的学生管理系统（2）

2.搭建Express Web服务器

1.在E:\vue\shiyan9路径下创建score-server的文件夹放置Express Web服务器的相关文件。

图3 初始化package.json的信息

2.用Vscode打开score-server。并创建如图4所示的项目结构图。

以下目录中的文件依次为：

• 考试信息增删改查的接口。
• 数据库连接的帮助类（存储数据库连接的相关信息）。
• Express Web服务器启动的入口（s设置对应的启动的端口）。
• package.json第2步中生成的。
• sqlMap存储的操纵考试信息表的sql语句。

图4 score-server目录结构

3.score-server文件夹下下载express，mysql以及body-parser和multer的依赖包。用于下载的命令如下。

npm install express mysql body-parser multer

图5 score-server依赖包下载

4.编写DBHelper_Score.js文件的编写。该类的完整的代码如下。

// 数据库连接帮助文件
const mysql = require('mysql');
class DBHelper_Score {
    // 获取数据库连接
    getConn() {
        // 数据库连接配置
        let conn = mysql.createConnection({
            host: 'localhost',//数据库的url
            port: '3306',//数据库的端口号
            user: 'root',//数据库账号
            password: 'root',//数据库密码
            database: 'exam_db'  // 数据库名
        });
        conn.connect();
        return conn;
    }
}
module.exports = DBHelper_Score;

5.编写sqlMap_Score.js文件。编写操纵数据库表的相关的SQL语句。该文件的完整代码如下。

// sql语句
var sqlMap = {
    score: {
        // 获取所有考试信息
        getscores: 'select * from score',
        // 更新考试的信息
        updatescore: 'update score set stuName = ?,ChineseScore = ?,EnglishScore = ?,MathScore = ?,ScienceScore = ? where stuId=? ',
        // 删除考试的信息
        deletescore: 'delete from score  where stuId=?',
        // 添加考试的信息
        addscore: 'insert into score (stuId,stuName,ChineseScore,EnglishScore ,MathScore ,ScienceScore) values(?,?,?,?,?,?)'
    }
}
module.exports = sqlMap;

6.编写scoreApi.js文件。该文件主要提供给前端相关接口的，可以完整增删改查的操作的。完整的代码如下。全部接口均采用的post的方式进行实现的。

// 实现考试信息的增删改查
// 导入需要的包
const express = require('express');
const router = express.Router();
const sqlMap_Score = require('../sqlMap_Score');
const DBHelper_Score = require('../utils/DBHelper_Score');
// ===查询所有考试信息
router.post('/getScores', (req, res) => {
    let sqlStr = sqlMap_Score.score.getscores;
    let conn = new DBHelper_Score().getConn();
    conn.query(sqlStr, (err, result) => {
        if (err) {
            res.json(err);
        } else {
            res.json(result)
        }
    });
    conn.end();
});
// ===删除一条score信息 
router.post('/deleteScore', (req, res) => {
    let sqlStr = sqlMap_Score.score.deletescore;
    let conn = new DBHelper_Score().getConn();
    let params = req.body;
    conn.query(sqlStr, [params.stuId], (err, result) => {
        if (err) {
            res.json(err);
        } else {
            res.json(result)
        }
    });
    conn.end();
});
//  ===添加一条score信息
router.post('/addScore', (req, res) => {
    let sqlStr = sqlMap_Score.score.addscore;
    let conn = new DBHelper_Score().getConn();
    let params = req.body;
    console.log(params);
    //添加信息
    conn.query(sqlStr, [params.stuId, params.stuName, params.ChineseScore, params.EnglishScore, params.MathScore, params.ScienceScore], (err, result) => {
        if (err) {
            res.json(sqlStr + " " + err);
        } else {
            res.json(result)
        }
    });
    conn.end();
});
 
// ===修改一条score的信息
router.post('/updateScore', (req, res) => {
    let sqlStr = sqlMap_Score.score.updatescore;
    let conn = new DBHelper_Score().getConn();
    let params = req.body;
    console.log(params);
    conn.query(sqlStr, [params.stuName, params.ChineseScore, params.EnglishScore, params.MathScore, params.ScienceScore, params.stuId], (err, result) => {
        if (err) {
            res.json(sqlStr + " " + err);
        } else {
            res.json(result)
        }
    });
    conn.end();
});
 
 
 
module.exports = router;   

7.编写index.js，设置Express的启动的入口，完整的代码如下。

// index.js是Express服务器入口文件，代码如下。
// node后端服务器
const http = require('http');
const badyParser = require('body-parser');
const express = require('express');
const scoreApi = require('./api/scoreApi');
let app = express();
let server = http.createServer(app);
// 解析body数据
app.use(express.json())
 
app.use(badyParser.json());
app.use(badyParser.urlencoded({
    extended: false
}));
 
// 后端api路由
app.use('/api/score', scoreApi);
// 启动监听8888端口。
server.listen(8888, () => {
    console.log(' success!! port:8888')
})

8.下面使用接口测试工具测试接口的功能。先在终端下启动web服务器，如6所示。

图6 终端下启动Express Web服务器

(1)使用接口测试工具添加5条数据：

插入数据的接口：http://127.0.0.1:8888/api/score/addScore

下面是插入其中一条数据的效果图。

 

图7 往score表中插入其中一条数据

图8 数据库中查看score中插入的其中1条数据

 

图9 查看score表中插入的5条数据

(3)修改数据库中准考证号为“20231111004”的学生信息的英语成绩为98。并查看数据库中的score表确认删除的效果。

修改数据的接口：http://127.0.0.1:8888/api/score/updateScore

图10 修改准考证号为“20231111004”的学生信息

 

图11 数据中查看修改准考证号为“20231111004”的学生的考试信息

(3)查看score表中的全部数据。

查看数据的接口地址为：http://127.0.0.1:8888/api/score/getScores

 

图12 获取score表的全部信息

(4)删除数据库的准考证号为“20231111004”的学生的考试信息，并查看数据库表确认删除的结果。

删除数据的接口地址为：http://127.0.0.1:8888/api/score/getScores

图13 成功删除学号为20231111004的学生的考试信息

 

图14 查看score表中的所有数据

从第1-7步完成了学生考试信息的接口的设计和测试，下面将编写学生考试信息的前端的页面。