东软颐养中心系统技术调查

记录项目开发中学习及遇到的技术问题和解决方法。

一、后端

 参考：SpringBoot+Vue项目实例开发及部署-CSDN博客

          postman:api 接口测试工具：Postman、Apifox、Apipost_postman apifox-CSDN博客

1. Springboot框架

SpringBoot就是尽可能地简化应用开发的门槛，让应用开发、测试、部署变得更加简单。

框架主体结构：controller层---dao---entity---form---service

参考学习：SpringBoot2.02官方参考指南（译）_w3cschool

最强SpringBoot实战教程内容通俗易懂springboot微服务开发实战Spring Boot2全套完整版_哔哩哔哩_bilibili

2. Redis缓存与JWT

项目中使用redis缓存生成的token，当接收前端传来的请求时，比较请求头的token是否有效，无效则拦截。当在未登录的情况下访问map路径（如：http://localhost:8000/yysystem/api/outapply/getalloutapply)，无token返回login页面。

（1）Redis

参考：Redis下载安装与配置(windows)-CSDN博客

（2）JWT

<1>定义：JWT（JSON Web Token）是一种用于在网络应用间传递信息的安全传输方式。它是一种紧凑且自包含的方式，通过使用数字签名来验证数据的完整性和真实性。

<2>工作流程：

1.用户使用有效的身份凭证（如用户名和密码）向服务器发送登录请求。
2.服务器验证用户身份信息，如果验证通过，生成一个JWT并将其返回给客户端。
3.客户端在后续的请求中将JWT添加到请求的头部、查询参数或Cookie中进行传递。
4.服务器接收到请求后，使用密钥验证JWT的签名和完整性，并从中提取出有效的用户信息和权限等数据进行处理。
5.如果JWT验证通过，服务器处理请求并返回响应给客户端。

参考：Spring boot框架 JWT实现用户账户密码登录验证_springboot 账号密码登录-CSDN博客

3. Mybatis-plus

项目使用mybatis-plus，相较于mybatis开发更为简洁，基础的SQL语句无需自己实现。

mapper接口继承BaseMapper

service接口继承IService

参考：Mybatis-Plus详解_mybatisplus-CSDN博客

4.定时器

项目中在同意客户A的退住申请后，为保证客户A有足够时间离院及办理其他手续，一致在每天0:30分清除退住申请已被同意但客户表还存在信息的客户，及清除床位等信息。

参考：@Scheduled定时器-CSDN博客

5.Flyway插件

数据库版本控制。

参考：flyway：数据库版本管理_flyway数据库版本控制-CSDN博客

二、前端

本地要提前配置好node.js环境。

Node.js 是一个开源、跨平台的 JavaScript 运行时环境。

参考：Nodejs安装及环境配置 - 简书

1.Vue框架

Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。

vue框架Q：

1-问题：element-ui有问题，无法显示图标，图标都显示为正方形。

  解决方法：node.js版本为最新，下载稳定版本。

2-问题：图片不显示

  解决方法：src会将路径处理为字符串，不会当做路径处理，使用  :src，并require(图片路径)。

             <img :src="require('./assets/'+imgUrl)" alt="">

参考：入门 | Vue Router

Icon 图标 | Element Plus

前端实现动态路由（前端控制全部路由，后端返回用户角色）_前端动态路由-CSDN博客

2.拦截器

当未登录而访问登录界面以外的界面拦截，并跳转至登录界面，保证信息安全。

三、自动测试

1.自动测试框架

首先要下载与浏览器版本匹配的driver。本项目使用Chromedriver，浏览器为最新版本119

使用提供的自动测试框架，在page目录编写代码定位页面元素，test目录下调用方法并判断逻辑是否正确。

2.selenium

自动测试主要使用selenium自动化工具。

参考：selenium-java常用api_selenium jar-CSDN博客

Selenium元素定位方法总结 - 知乎

四、部署到虚拟机

1.基本流程

1.创建虚拟机

2.配置环境，安装redis，jdk，Tomcat，Nginx，mysql

3.打包前后端，修改后端打包方式为war包，前端打包npm run build为dist。后端war包放至虚拟机tomcat/webapps目录下，前端放置位置与Nginx配置文件中location一致即可。

4.开启所有服务，在浏览器输入虚拟机网址即可访问项目。

2.虚拟机部署问题：

springboot+vue项目部署至虚拟机-CSDN博客