新冠疫苗预约

使用的技术：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 一般为rootport: 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.usernamelet password = req.body.passworduserDao.getLogin(username, password, function(ret) {if (ret.length > 0) {req.session.uid = ret[0].uid; //将用户 uid 存储进 sessionres.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

以上是登录的演示

    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="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="./bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="./js/jquery-3.6.0.js"></script><script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script><style>* {margin: 0px;padding: 0px;}html {height: 100%;}body {/* overflow: hidden; */background-image: url(/static/image/background.jpg);background-position-y: 100px;background-repeat: no-repeat;background-size: 100% 80%;}.modal-dialog {padding-top: 10%;}title {transform: scale(0.1, 0.1);max-width: 100%;max-height: 100%;}.header_left {margin-left: 80px;}#dengluchuangkou {padding-top: 75px;}</style>
</head><body><div class="header"><div class="header_top"><!--logo左侧开始--><div class="header_left"><a href="http://www.gov.cn/index.htm" target="_blank"><img id="title" src="/static/image/title.png" width="600px"></a></div><!--logo左侧结束--><div style="background-color:grey; width: 100%; height: 30px;"></div></div></div><div class="modal-dialog" id="dengluchuangkou"><div class="modal-content"><div class="modal-header"><h4 class="modal-title text-center" id="myModalLabel">注册</h4></div><div class="modal-body" id="model-body"><div class="form-group"><input type="text" name="username" id="username" class="form-control" placeholder="姓名(必须为中文)" autocomplete="off"></div><div class="form-group"><input type="number" name="tel" id="tel" class="form-control" placeholder="手机号" autocomplete="off"></div><div class="form-group"><input type="password" name="password_one" id="password_one" class="form-control" placeholder=" 密 码 ( 必须是包含数字和字母的 6 位 )" autocomplete="off"></div><div class="form-group"><input type="password" name="password_two" id="password_two" class="form-control" placeholder="确认密码" autocomplete="off"></div></div><div class="modal-footer"><div class="form-group"><button type="button" onclick="reg()" class="btn btn-success form-control">注册</button></div><div class="form-group"><a href="/login" class="btn btn-warning form-control">去登录
</a></div></div></div><!-- /.modal-content --></div><!-- /.modal -->
</body>
<script>function reg() {//获取用户填写的个人信息var username = $("#username").val()var tel = $("#tel").val()var password_one = $("#password_one").val();var password_two = $("#password_two").val();var namereg = /^[\u4e00-\u9fa5]{0,}$/;var pasreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;//  /(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;var telreg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; // 此处验证可通过正则匹配if (password_one != password_two) {alert("2 次密码输入不一致")} else if (namereg.test(username) && telreg.test(tel) &&pasreg.test(password_one)) { //验证数据是否符合要求$.ajax({ //使用 ajax 发送用户数据，进行注册验证url: "/register",method: "post",data: {username: username,password: password_one,tel: tel},success(res) {console.log(res)alert(res.msg)if (res.code == 1001) {location.href = "./login"} else {location.reload();}}})} else {alert("数据格式不合法")}}</script></html>

router/index.js

router.post("/register", function(req, res) {//req.body 接收前台发送的数据let username = req.body.username;let password = req.body.password;let tel = req.body.tel;userDao.addUser(username, password, tel, function(ret) {if (ret == 1) {res.json({msg: "注册成功",code: 1001})} else if (ret == 2) {res.json({msg: "注册失败,该手机号已被注册",code: 1002})} else {res.json({msg: "注册失败",code: 1003})}})
})

dao/user.js

function addUser(username, password, tel, callback) { //进行用户的添加let sql = "select * from xg_user where tel=?";let sqlparams = [tel]dbutil.query(sql, sqlparams, function(err, result) {if (err) {console.log(err);} else {//console.log("query:" + result);console.log(result.length)if (result.length > 0) {callback(2);} else {var addSql = 'INSERT INTO xg_user(username,password,tel) VALUES( ?,?,?)';var addSqlParams = [username, password, tel];dbutil.query(addSql, addSqlParams, function(err, result) {if (err) {console.log(err);} else {if (result.affectedRows == 1) {callback(1);} else {callback(-1);}}});}}});
}

添加预约


function addRecord(infoarr, callback) { //添加预约信息let sql = "INSERT INTO xg_record (uid, uname, tel, jztime, address, uptime) VALUES ( ? , ? , ? , ? , ? , ? )";dbutil.query(sql, infoarr, function(err, ret) {if (err) {console.log("error====" + err)return;}if (ret.affectedRows == 1) {callback(1)} else {callback(-1)}})
}

router.post("/yuyue", function(req, res) {// 接收用户填写的预约信息let uname = req.body.unamelet tel = req.body.tellet jztime = req.body.timelet address = req.body.addresslet uid = req.session.uid;var uptime = moment().format('YYYY-MM-DD HH:mm:ss') //使用 moment.js 格式化时间；// `uid`, `uname`, `tel`, `jztime`, `address`, `uptime`// var uptime = uptime.replace("Z", "UTC");// var uptime = moment(uptime).utcOffset(480).format('YYYY-MM-DD HH:mm:ss');recordDao.addRecord([uid, uname, tel, jztime, address, uptime], function(ret) {if (ret == 1) {res.json({msg: "预约成功",code: 1001,})} else {res.json({msg: "预约失败",code: 1002})}})// console.log(uptime)})

修改地址或时间

router.post("/newUserRecord", function(req, res) {// 接收用户填写的预约信息// let jztime = req.body.time// let address = req.body.address// let uid = req.session.uid;// let id = req.body.id;// console.log(jztime, address, id)// const data = req.body;recordDao.newUserRecord(req.body, req.body.id, function(ret) {if (ret == 1) {res.json({msg: "修改成功",code: 1001,})} else {res.json({msg: "修改失败",code: 1002})}})})

function newUserRecord(data, id, callback) {let sql = "UPDATE xg_record SET ? WHERE id=?";sqlppa = [data, id]dbutil.query(sql, sqlppa, function(err, ret) {if (err) {console.log("error======" + err)return;}if (ret.affectedRows !== 1) { //失败callback(-1);} else {callback(1);}})}

OK OK增删改查全齐了

下面展示一下

页面功能实现

哦哦视频还在审核等审核完再传吧
--------------------------------2022-06-04
哦这是演示视频

新冠疫苗预约项目演示

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

开题报告：基于java新冠疫苗在线预约系统毕业设计论文开题报告模板
开发操作系统:windows10 + 4G内存 + 500G 开发环境:JDK1.8 + Tomcat8 开发语言:Java 开发框架:springboot 模板引擎:Thymeleaf 开发工具:I ...
基于php的体育场在线预约系统的设计与实现--毕业论文（可仅作参考）
基于php的体育场在线预约系统的设计与实现–毕业论文可以仅作参考宝子们 ,这个只有论文版本不包含代码哦,不要私我代码了我也没有. 论文word版本我会上传到资源里面供宝子看文章目录基于php的体 ...
Python新冠疫情可视化分析系统计算机专业毕业设计源码08504
摘要文中首先对新冠疫情可视化分析的项目需求进行了背景分析,接着介绍了项目的总体设计思路,然后具体阐述了疫情数据库的设计.疫情数据的查询.疫情数据的展示,并分析了核心代码.文中利用MySQL数据库存 ...
java毕业生设计新冠疫苗预约系统计算机源码+系统+mysql+调试部署+lw
java毕业生设计新冠疫苗预约系统计算机源码+系统+mysql+调试部署+lw java毕业生设计新冠疫苗预约系统计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B/S架构开 ...
springboot新冠疫苗预约系统在线视频点播系统毕业设计毕设作品开题报告开题答辩PPT
springboot新冠疫苗预约系统在线视频点播系统毕业设计毕设作品开题报告开题答辩PPT 用户注册:填写手机账号和密码,注册新用户登录功能:注册普通账号登录:登录后可以修改用户的基本信息,也可以退 ...
基于微信小程序的新冠疫苗预约系统 uinapp
新冠疫苗预约的需求和管理上的不断提升,新冠疫苗预约管理的潜力将无限扩大,新冠疫苗预约小程序在业界被广泛关注,本网站及对此进行总体分析,将新冠疫苗预约信息管理的发展提供参考.新冠疫苗预约小程序对新冠疫苗 ...
计算机毕业设计(36)java毕设作品之新冠疫苗预约系统
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于web网页的新冠疫苗预约系统,整个网站项目使用了B/S架构,基于java的springboot框架下开发::通过后台设置医院信息.录入医院科 ...
软件工程毕业设计课题（36）基于JAVA毕业设计JAVA新冠疫苗预约系统毕设作品项目
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于web网页的新冠疫苗预约系统,整个网站项目使用了B/S架构,基于java的springboot框架下开发::通过后台设置医院信息.录入医院科 ...
疫苗预约管理系统,疫苗预约系统,新冠疫苗预约系统毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于web网页的新冠疫苗预约系统,整个网站项目使用了B/S架构,基于java的springboot框架下开发::通过后台设置医院信息.录入医院科 ...

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

新冠疫苗预约

1. 项目的搭建

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

/app.js

/dbutil/db.js

/router/index.js

项目运行：

登录的操作

/dao/user.js

注册

添加预约

修改地址或时间

页面功能实现

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

最新文章

热门文章

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

新冠疫苗预约

1. 项目的搭建

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

/app.js

/dbutil/db.js

/router/index.js

项目运行：

登录的操作

/dao/user.js

注册

添加预约

修改地址或时间

页面功能实现

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

最新文章

热门文章

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