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

news2024/10/7 19:31:07

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所示。