疫情下的学生管理系统

Posted 2021-09-20 So istes immer

代码：https://github.com/FengYongXuan/epidemic_student_managerment

整体采用前后端分离的开发模式

前端技术栈 Vue + Vue-router(Vue.js官方路由插件，实现前端路由) + axios(请求拦截，添加token) + Element-UI

后端技术栈 Node.js + Express(基于Node.js的后端框架) + Jwt(用于身份验证) + Mysql

开发过程中的思考

1.什么是回调函数？

回调函数就是传递一个参数化的函数，就是将这个函数作为一个参数传到另一个主函数里面，当那一个主函数执行完之后，再执行这个函数。

2.异步编程

同步函数：当一个同步函数被调用时，该函数不会立即返回，直到该函数里面的代码全部执行完了才返回
异步函数：当一个异步函数被调用时，该函数会立即返回，尽管这个函数规定的操作任务还没有完成

所以，异步函数不阻塞代码

但是，如果我想要异步函数执行的结果，我怎么获取？

可以用回调函数来接收嘛。而Promise能够以一种更优雅的方式执行异步操作。

 new Promise((resolve, reject) => {
    setTimeout(() => {
      //成功的时候调用resolve
      // resolve('Free Loop');
      //失败的时候调用reject
      reject('Error Message');
    }, 1000)
  }).then((data) => {
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })

而在js中，我们可以用async/await来更简洁地实现基于Promise的异步行为

使用async关键字声明一个异步函数。

await  操作符用于等待一个Promise 对象，只能在异步函数 async function 中使用。

await 会暂停当前 异步函数 的执行，等待 Promise 处理完成。

若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 异步函数下面的代码

若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出

另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();

3.http请求报文

请求行+请求头+请求体

举例：

1 GET/sample.jspHTTP/1.1

2 Accept:image/gif.image/jpeg,*/*

3 Accept-Language:zh-cn

4 Connection:Keep-Alive

5 Host:localhost

6 User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)

7 Accept-Encoding:gzip,deflate

8

9 username=jinqiao&password=1234

第一行为http请求行，包含方法，URI 和http版本

2-7为请求头，包含浏览器，主机，接受的编码方式和压缩方式

第8行表示一个空行 表示请求头结束 这个空行是必须的

第9行是数据体，比如是需要查询的信息

4.跨域问题

从一个域名去请求另一个域名的资源，如果跨域，将无法访问

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

本项目客户端端口为8080，后台项目监听的是5000端口，存在跨域

解决方法①

app.all("*", function (req, res, next) {
  // 设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin", "*")
  // 允许的header类型
  res.header("Access-Control-Allow-Headers", "*")
  // 跨域允许的请求方式
  res.header("Access-Control-Allow-Methods", "*")
  if (req.method.toLowerCase() === 'options')
    res.sendStatus(200)
  else
    next()
})

解决方法②

安装cors模块        npm install cors --save

const cors = require('cors')    //导入

app.use(cors())                 //使用，要放在所有API前面

5.sessionStorage、localStorage、cookie

都用于浏览器本地存储数据

cookie是当你浏览某个网站的时候，由web服务器存储在你的机器硬盘上的一个小的文本文件。它记录了你的用户名、密码、浏览的网页、停留的时间等等信息。当你再次来到这个网站时，web服务器会先看看有没有它上次留下来的cookie。如果有的话，会读取cookie中的内容，来判断使用者，并送出相应的网页内容，比如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后，数据也随之销毁。所以sessionStorage仅仅是会话级别的存储，而不是一种持久化的本地存储。

localStorage是持久化的本地存储，除非是通过js删除，或者清除浏览器缓存，否则数据是永远不会过期的。

客户端收到服务器返回的JWT，可以存储在Cookie里面，也可以存储在localStorage

此后，客户端每次与服务器通信，都要带上这个JWT。你可以把它放在Cookie里面自动发送，但是这样不能跨域，所以更好的做法是放在HTTP请求的头信息Authorization字段里面 

6.基于JWT的身份验证

安装 npm install jsonwebtoken

要访问有权限的接口要携带token

7.登录模块

和教务网类似，无需注册账号，账号即学号，管理员提前注册好，初始化密码都为11111

提交表单之前进行校验：学号、密码不能为空，密码3~15个字符，不合这些要求就报错

重置功能（如果有默认值，那么重置之后为默认值，不为空）

8.主页部分

左侧的菜单可折叠

点击二级菜单高亮显示，刷新之后仍然高亮

不同用户，看到的页面是不一样的（登录后携带identity信息到home.vue，方便根据identity选择不同数据渲染菜单）

后面组件的路由都是home.vue的子路由

9.管理员 - 账号管理功能

可通过搜索框进行查询，可添加、删除账号

账号删除时让用户再确认一次

查询账号依据学号/工号，模糊查询(在sql中用like)

分页，要及时检测当前页码和每页显示数据条数，及时传给url的Params

添加用户，提交表单之前要进行校验，默认身份是学生

关闭添加用户的dialog，数据要重置，确保下次再点开是干净的

已经创建的账号如果再添加，就报错

修改账号，dialog要先获取数据进行渲染，ID不能修改，其余可改

在user表中创建新账号时，student或counselor表也需要初始化记录(例如都为‘空’)，删除账号时同时也要删（通过外键约束中的级联）

10.学生 - 个人信息管理、请假条、提交体温表

11.辅导员 - 个人信息管理、审批假条、查看汇总的体温表

12.其余

对时间戳的格式化处理要用到silly-datetime模块，这个要装一下

获取假条数据为0条时，不去报错

如何消除地址栏中url的/#/?

路由有两种模式 hash 和 history，默认为hash，所以路径会有 # 号，因此我们只需要修改成 history 即可

const router = new VueRouter({
  mode: 'history',
  routes: [
    ...
  ]
})

什么作为假条的主键？ 

可以用序号，不过要注意每次创建假条的序号 = 当前数据库中所有假条序号最大值+1

获取请求的方式

req.params       用于获取url中的参数

req.query         用于获取get请求中的参数(params)中的数据

req.body           用于获取post请求中的数据