复盘《新冠疫苗在线预约系统》设计过程Nodejs+express+Mysql+前端

新冠疫苗预约

使用的技术：nodejs +express +Mysql +html+bootstrap
运行环境：vscode

1. 项目的搭建

检验node环境 确认是否安装node

express框架

• /dao 包括对数据库的操作 增删改查等等
• /dbutil 连接数据库
• /node_modules 项目的模块依赖文件夹，通过 npm 安装的模块会保存在该目录下
• /Public 静态资源目录，用于存放如图片image、样式css、js、字体font等资源
• / router 应用的路由文件，这些路由文件中设置的接口最终会以指定的 HTTP 请求方式暴露给用户，并在用户请求之后将结果返回。
• / View 应用的视图文件，在 app.js 中设置好视图引擎和模板之后，该目录即为应用视图的根目录，然后路由文件就会根据 app.js中的设置加载并渲染该目录下的视图文件。（html文件）.
• /app.js 应用的初始化文件，包括引入应用程序的基础依赖项、设置视图即 view 的引擎目录、设置静态资源路径、配置通用的中间件、引入路由和一些错误处理中间件等。
• /Package.json 项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
• / Package-lock.json 记录当前状态下实际安装的各个 npm package 的具体来源和版本号

2.预先需要下载的依赖 安装扩展

init 初始化
express 框架
MySQL 数据库
npm install cookie-parser 缓存客户端信息
npm install express-session 后端

/app.js

app.js 静态托管，是项目的入口文件
在这里要引入外部依赖和所需要的文件（路由文件）

let express = require("express"); //引入 express 框架
let cookie = require('cookie-parser'); //引入 cookie 依赖
let session = require('express-session') //引入 session 依赖
let indexRouter = require("./router/index") //引入路由文件
let body = require("body-parser")

使用use函数

let app = express();
// 使用 express 托管静态资源
app.use(express.static(__dirname + "/public"))
    // 使用 express 解析常用的请求体
app.use(express.urlencoded({
    extended: false
}))
//使用express的json功能
app.use(express.json());
// 添加 cookie，session 依赖
app.use(cookie())
app.use(session({
        secret: 'i love iflytek',
        resave: true,
        cookie: {
            maxAge: 1000 * 30 * 60  //有效期 保护用户
        },
        saveUninitialized: true,
        rolling: true //在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false）
    }))
    //使用路由
app.use("/", indexRouter);
// 监听地址与端口
app.listen(3001, "127.0.0.1", function() {
    console.log("127.0.0.1:3001")
})

/dbutil/db.js

连接数据库

//引入MySQL模块
let mysql = require("mysql");
//连接 
let conn = mysql.createConnection({
    host: "127.0.0.1",//localhost 本地
    user: "root",
    password: "123456",//我的是123456 一般为root
    port: 3306, //数据库端口号
    database: "xgyy", //数据库的名
    timezone: "08:00" // 因为表中有date时间，传值到前端出现显示格林威治时间，设置timezone，则会正确显示北京时间
})
conn.connect(); //连接
module.exports = conn; // 是当前数据库连接模块暴露出去，使得别的.js文件可以引入

/router/index.js

引入模块

let express = require("express");
let path = require("path")
let router = express.Router(); //创建路由实例
let userDao = require("../dao/user")
let recordDao = require("../dao/record")
let doctorDao = require("../dao/doctor")
let moment = require("moment") //引入日期格式类库
    // var dayjs = require("dayjs");
    //具体路由编写区域

//当页面URL为127.0.0.1:3001/ 或127.0.0.1:3001/index是验证是否已经登录，如果登录，跳转index.html否者进/login
router.get(["/", "/index.html"], function(req, res) {
    //判断是否登陆
    if (req.session.uid) {
        res.sendFile(path.join(__dirname, "../view/index.html"))
    } else {
        res.redirect("/login")
    }
})
//.....这里面还有很多
module.exports = router; //将路由暴露出去

此时我们需要有页面在view里 login.html 和index.html

项目运行：

如果不报错则说明项目正确运行起来了

• 这时候填一下坑
• html中
  在页面显示Xget获取不到bootstrap jQuery 的插件，以及图片等静态资源
  这是因为在app.js入口文件设置了静态资源管理

/ 使用 express 托管静态资源
app.use(express.static(__dirname + "/public"))

这样的话所有静态资源在引入html里面的时候，就要相对public的文件夹进行路径的修改，以往我们在html中是<link href =" ../">. ./是在 以相对当前的html来说的 但是引入静态资源管理之后就不能这样了。

• X post 报404 可能是因为在router/index.js 里面配置有问题

接下来我们试一下

登录的操作

首先准备好login.html页面

在页面这里登录有一个方法 点击 进行submit（）
submit() 方法:

    function submit() {
        var username = $("#username").val(); //获取用户名
        var password = $("#password").val(); //获取密码
        if (username.length > 0 && password.length > 0) { //判断用户名密码是否填写
            $.ajax({ //使用 ajax 发送用户数据，进行登陆验证
                url: "/login",
                method: "post",
                data: {
                    username: username,
                    password: password
                },
                success(res) {
                    if (res.code == 1001) {
                        console.log(res)
                            // alert(res.msg)
                        location.href = '/loading';
                    } else {
                        alert("用户名或密码错误 如果没有账户请先注册")
                        location.reload();
                    }
                    // location.href = '/index.html';
                    // window.event.returnValue = false;

                }
            })

        } else {
            alert("账号密码必填") //给出用户提示
        }
    }

我们看到url是/login method：post data有username和password
这时候我们进入router/index.js

// 用户登陆
router.post("/login", function(req, res) {
    let username = req.body.username
    let password = req.body.password
    userDao.getLogin(username, password, function(ret) {

        if (ret.length > 0) {
            req.session.uid = ret[0].uid; //将用户 uid 存储进 session
            res.json({
                // msg: req.session.uid,
                msg: "登陆成功",
                code: 1001
            })
        } else {
            res.json({
                msg: "登陆失败",
                code: 1002
            })
        }
    })
})

我们使用post router.post("/login", function(req, res) { 这里的/login就是和之前的URL对应
下面的 let username = req.body.username let password = req.body.password
就是获取到刚刚data里面的username和password
然后我们使用userDao中的getLogin方法，
那么这个方法 我们进入

/dao/user.js

let dbutil = require("../dbutil/db");//首先引入连接数据库模块

function getLogin(username, password, callback) { //检测用户身份，账号密码是否正确
    let sql = "select * from xg_user where username=? and password=?";
    let sqlparams = [username, password]
    dbutil.query(sql, sqlparams, function(err, result) {
        if (err) {
            console.log(err);
        } else {
            // console.log("query:" + result);
            callback(result);
        }
    });
};

这里的getLogin方法有三个参数，username和password是刚刚传来的callback是回调函数，查询到的话传回result

以上是登录的演示

Login.html也可加入正则表达式判断用户名是汉字以及填写密码是六位数字字母混合，进行检验

    function regName() {

        userName = document.getElementById("username").value;
        var var1 = /^[\u4e00-\u9fa5]{2,5}$/; //用户名
        if (var1.test(userName)) {
            //用户名
            document.getElementById("regName").innerText = "√";
            document.getElementById("regName").style.color = "green";
            $("#regName").css('visibility', 'visible');

        } else {
            document.getElementById("regName").innerText = "请正确输入中文姓名";
            document.getElementById("regName").style.color = "red";

        }
    }

    function regPassword() {
        pwd = document.getElementById("password").value;
        // var var2 = /^[A-Za-z0-9].{6}/; //密码
        // var var2 = /^.{6}$/;
        var var2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/
        if (var2.test(pwd)) {
            //密码
            document.getElementById("regPwd").innerText = "√";
            document.getElementById("regPwd").style.color = "green";
            $("#regPwd").css('visibility', 'visible');
        } else {
            document.getElementById("regPwd").innerText = "请输入密码为 6位数字字母符号混合";
            document.getElementById("regPwd").style.color = "red";
        }
    }

注册

• html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset