# 学生信息管理系统

**Repository Path**: evinchan/vue_node_mysql

## Basic Information

- **Project Name**: 学生信息管理系统
- **Description**: vue_node_mysql制作的学生信息管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-03-07
- **Last Updated**: 2023-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学生信息管理系统

## 具体需求描述

(1)  由于该系统的使用对象较多，要求它为不同用户提供不同功能。
(2)  具有身份验证功能，需要登录时输入用户及密码。
(3)  在相应的权限下，删除数据方便简单，数据稳定性好。
(4)  学生可以查询基本信息和成绩。
(5)  各种信息都可被更改。
(6)  能够对用户修改过的信息予以保存。
(7)  管理员能按照学号、姓名进行查询。
(8) 管理员 能对学生信息进行增删改查。
(9) 管理员能对学生课程进行增删改查。
(10) 管理员能对学生成绩进行增删改查。
(11) 用户可以修改密码。

## node_mysql

### mysql

- 学生信息字段设计

```mysql
# 建表约束字段
CREATE TABLE if not exists studentInfo (
  `studentId` int NOT NULL AUTO_INCREMENT COMMENT '用户Id',
  `studentName` varchar(50) NOT NULL unique COMMENT '用户名',
  `sex` enum('男','女') NOT NULL COMMENT '性别',
  `studentTel` varchar(255) NOT NULL COMMENT '联系方式',
	`department` varchar(50) not null comment "系部",
  `calssName` varchar(50) NOT NULL COMMENT '班级',
  `major` varchar(50) NOT NULL COMMENT '专业',
  `studentNumber` varchar(50) NOT NULL COMMENT '学号',
  `studentQQ`varchar(20) NOT NULL COMMENT '联系QQ',
  `studentHobby` varchar(255) NULL COMMENT '爱好',
	state int not null default 0 comment "删除状态",
  PRIMARY KEY (`studentId`)
);
# 插入数据
insert into studentInfo values(1,'何良诚',"男",17673987152,"电子信息","20计应5班","计算机应用技术",202041000946,2728577785,"篮球、排球",0)
```

- 学生成绩字段设计

```mysql
```



## node

### api接口
- 登录： http://127.0.0.1:3000/api/admin/login  	请求： post
- 注册：http://127.0.0.1:3000/api/admin/register   请求： post
- 查询学生: http://127.0.0.1:3000/api/findAllStudentInfo  请求： get
- 分页查询： http://127.0.0.1:3000/api/findPageStudentInfo: 请求：get
- 增加学生：http://127.0.0.1:3000/api/addStudentInfo  请求： post
- 修改学生：http://127.0.0.1:3000/api/updateStudentInfo  请求： put
- 删除学生：http://127.0.0.1:3000/api/deleteStudentInfo  请求： delete

- 分页查询

```js
// 公式： 因为从0开始计算， 当前页 - 1 * 展示页面数据
let data = [(currentPage-1) * limit,limit]
```

- 修改权限接口

```js
// 此处使用 join(',') 将数组转字符串后 第一个元素也会产生一个 ,号， 此时使用 substring 方法从索引为 1 的开始
// 导致的 bug: el-tag当修改权限后 里面的值  第一个为 , 所以 row.roles 里面一直没有内容
let roles = req.body.roles.join(',').substring(1)
```



## Vue
### 面包屑
- 主要利用路由mate来实现
```js
  getBreadcrumb() {
    // console.log(this.$route)
    // 将当前路由有标题的过滤出来
    let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
    // console.log(matched)
    const first = matched[0]
    // 如果此路由不为 home
    if (!this.isHome(first)) {
      // 将当前路由和首页路由连接起来，
      matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
    }
    // console.log('matched',matched)
    this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
  },
  // 判断此路由是否是首页
    isHome(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'home'.toLocaleLowerCase()
    }
```

### 登录和注册

- 利用路由前置守卫
- 当页面 sessionStorage  没有 userName 时 则只能在登录页面

```js
// 当 sessionStorage 里面没有 userName，同时去的页面不是登录页面 则强制返回登录页
  if(!userName && to.path !== '/login'){
    if(to.path === '/register'){
      next()
    }else{
      next('/login')
    }
  }else{
    next()
  }
```

- 登录

```js
// 页面刚进入处于未登录状态 此时是无法进入首页 必须登录后 才能进入页面， 登录不存在账号时 会出现提示， 
// 当用户没有输入任何账号或密码时 也会出现提示 提醒用户账号或密码错误，或者让用户去注册
```

- 注册

```js
// 用户没有账号时 无法访问页面， 此时可以进行注册， 当注册的账号已存在时 会出现提示，
// 注册完成后 自动跳转登录页面， 登录账号即可访问页面
```



### 学生信息

#### 表格导出

- npm i xlsx
- npm i file-saver

```js
if(result.code === 200){
  return result
}else{
   // 此时这条语句已无效
  return Promise.reject(new Error('aaaaaaaaaaaa'))
}
	
if(response.status === 200){
  return res
}else{
   // 在响应拦截器中做出统一错误处理
  return Promise.reject(new Error(`响应拦截，${res.message}`))
}
```

### 学生成绩

- 字符首字母大写

```js
let subject = "abcdefg"
let b = subject[0].toUpperCase() + subject.substr(1)
console.log(b) // Abcdefg
```




## 难点
- node 搭建服务器如果报错则会停止服务， 目前解决方法：利用 try watch 来捕获错误避免程序不执行

```js
} catch (error) {
  res.status(201).json({
    code:201,
    message:'学号已存在'
  })
}
```

- vue: 修改学生时，因为 v-model 是双向绑定所以只要一修改就会立即改变（不管成功还是失败），
- 解决方法： 利用 ... 浅拷贝让第一层不会被立即改变

```js
// 使用浅拷贝： 作用： 当页面修改的时候不会立即改变数据，
//（因为数据是 v-model 绑定的不管你有没有修改成功都会立即修改）
// 当然这个修改只是页面内容发生了改变，但数据库中真正的数据还是未改变状态
// 如有传递数据则存储
if(row){
  this.studentInfo = {...row}
}
```

- 删除时 当只有1页时，删除最后一条数据报警告（目前没解决）

```js
// 初步解决方案， 解决有多页时，删除最后一个跳转到前一页
this.getStudentScore(this.scoreList.length > 1 ?  this.pagination.currentPage : this.pagination.currentPage - 1)
```

- 11月19日12.21分 已解决， 

```js
// 当最后一条删除后 currentPage - 1 * limit  === 负数
if(currentPage < 1) currentPage = 1
// 同时把判断也给去掉
// if(result.length !== 0){
     res.status(200).json({
       code:200,
       message: 'ok',
       data:result,
       currentPage,
       limit,
       total:findResult[0].total
     })
// }
```



## 新知识

- 一个为 [] 的字符串转为数组 解决方式： 利用 JSON.parse

```js
 let a = '[1,5]'
 let b = JSON.parse(a)
 console.log(b)
```

- mysql 创建的时间： 默认时区事在美国那边， 所以会有8小时的时差-
- 解决办法

```js
// 连接数据库时利用 timezone 将时差改会俩 
let db = Mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'studentSystem',
  timezone: '08:00', // 解决mysql时区不一致问题
})

```

- mysql 里面也需要将时差改为本地区时间

```mysql
set global time_zone = '+8:00'; ##修改mysql全局时区为北京时间，即我们所在的东8区
set time_zone = '+8:00'; ##修改当前会话时区
flush privileges; #立即生效
```