{"id":14983116,"url":"https://github.com/gend-max/studentcoursesystem","last_synced_at":"2025-10-29T21:30:34.352Z","repository":{"id":40608415,"uuid":"505369832","full_name":"GenD-max/StudentCourseSystem","owner":"GenD-max","description":"基于SSM和Vue+ElementUI的学生选课系统","archived":false,"fork":false,"pushed_at":"2023-06-04T06:33:59.000Z","size":3373,"stargazers_count":61,"open_issues_count":1,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T04:41:23.848Z","etag":null,"topics":["element-ui","mybatis-plus","spring","springmvc","v-charts","vue2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GenD-max.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-20T09:09:36.000Z","updated_at":"2025-01-03T03:08:02.000Z","dependencies_parsed_at":"2024-10-12T02:41:05.593Z","dependency_job_id":"afc0c51a-e77d-4525-b2c3-4510411440cd","html_url":"https://github.com/GenD-max/StudentCourseSystem","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"e5e94f82a9c689cea50b9bbd70622cbce5827557"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenD-max%2FStudentCourseSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenD-max%2FStudentCourseSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenD-max%2FStudentCourseSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenD-max%2FStudentCourseSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GenD-max","download_url":"https://codeload.github.com/GenD-max/StudentCourseSystem/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238892219,"owners_count":19548152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-ui","mybatis-plus","spring","springmvc","v-charts","vue2"],"created_at":"2024-09-24T14:06:45.715Z","updated_at":"2025-10-29T21:30:33.983Z","avatar_url":"https://github.com/GenD-max.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 设计文档\n\n\u003e - 本人构建了数据库和后端部分，并根据业务逻辑前端项目上进行了更改和改进，使其更适应我的数据库\n\u003e - 项目已部署至云端：[学生选课系统](http://47.98.157.214:9000/)\n\u003e - 第一次使用vue-cli开发项目，如果详项目代码存在不严谨或错误的地方，欢迎各位指出，共同讨论\n\u003e- 如果这个项目对您有帮助，请各位为本项目**点一点star**、**关注一下作者**\n\n## 一、后端\n\n### （一）系统框架\n\n**Spring+SpringMVC+Mybatis+Mybatis-Plus（SSM）**\n\n#### 1、Spring和SpringMVC\n\n​\tSpring是一个开源框架，它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 J2EE 应用程序开发提供集成的框架。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。Spring的核心是控制反转（IoC）和面向切面（AOP）。简单来说，Spring是一个分层的JavaSE/EE一站式轻量级开源框架。\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612142010997.png\" alt=\"image-20220612142010997\" style=\"zoom:170%;\" /\u003e\n\n​\tSpringMVC是spring框架的一个模块，SpringMVC和Spring无需通过中间整合层进行整合，SpringMVC是一个基于MVC的web框架，SpringMVC 拥有控制器，作用跟Struts类似，接收外部请求，解析参数传给服务层。\n\n#### 2、Mybatis和Mybatis-Plus\n\n​\tMyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。**MyBatis-Plus** （简称 MP）是一个 MyBatis 的**增强工具**，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612141933296.png\" alt=\"image-20220612141933296\" style=\"zoom: 67%;\" /\u003e\n\n### （二）系统架构\n\n**持久层（Entity）+数据访问层（Dao）+业务逻辑层（Service）+控制层（Controller）**\n\n![image-20220612143316309](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612143316309.png)\n\n#### 1、UML类图\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612142537248.png\" alt=\"image-20220612142537248\" style=\"zoom:80%;\" /\u003e\n\n#### 2、持久层\n\n![image-20220612144743993](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612144743993.png)\n\n- 持久层主要作用是与数据库进行数据映射，与数据库的属性值保持一致。\n- Course对应数据库的课程表\n- CoursePlan对应数据库的课程安排表\n- Student对应数据库的学生表\n- Teacher对应数据库的教师表\n- SC对应数据库的成绩表\n- Admin对应数据库的管理员表\n- Faculity对应数据库的院系表\n- 为了让接口更加规范，我编写了**ResponseResult\u003cT\u003e**和**ResultCode**接口响应类，ResponseResult\u003cT\u003e属性**code**是响应码，**message**是响应的状态信息，**data\u003cT\u003e**则是响应数据，泛型T可以是上述定义的类；ResultCode则是定义的具体属性，**常量SUCCESS**是200（表示响应成功），**ERROR**是500（表示响应失败），**ERROR_MESSAGE**表示响应错误信息，**SUCCESS_MESSAGE**表示响应成功信息\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612143558755.png\" alt=\"image-20220612143558755\" style=\"zoom: 67%;\" /\u003e\n\n#### 3、数据访问层\n\n![image-20220612144823218](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612144823218.png)\n\n- 该部分使用Mybatis-Plus让每张表的接口类继承**BaseMapper**接口，BaseMapper封装了CRUD（增加Create、检索Retrieve、更新Update和删除Delete）基本方法\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612145612555.png\" alt=\"image-20220612145612555\" style=\"zoom: 67%;\" /\u003e\n\n- 我们只需要让继承BaseMapper后的接口配置到Mybatis的映射文件即可\n\n![image-20220612145718994](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612145718994.png)\n\n#### 4、业务逻辑层\n\n![image-20220612145852576](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612145852576.png)\n\n- 粗略的理解就是对一个或多个DAO进行的再次封装，封装成一个服务，封装后就不会是一个原子操作了，需要事物控制，负责管理具体的功能\n\n- 这里根据需求编写了**管理员**、**课程**、**教师**和**学生**的业务接口，在业务实现类中根据上述Dao层编写代码实现具体业务\n\n  ![image-20220612150233404](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612150233404.png)\n\n#### 5、控制器\n\n![image-20220612150625129](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612150625129.png)\n\n- 该部分负责请求转发，接受页面过来的参数，传给Service处理，接到返回值，再传给页面，负责**管理业务（Service）调度和管理跳转**\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612151019173.png\" alt=\"image-20220612151019173\" style=\"zoom:67%;\" /\u003e\n\n### （三）相关配置\n\n#### 1、Spring和Mybatis-Plus\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003cbeans xmlns=\"http://www.springframework.org/schema/beans\"\n       xmlns:context=\"http://www.springframework.org/schema/context\"\n       xmlns:aop=\"http://www.springframework.org/schema/aop\"\n       xmlns:tx=\"http://www.springframework.org/schema/tx\"\n       xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\n       xsi:schemaLocation=\"\n        http://www.springframework.org/schema/beans\n        http://www.springframework.org/schema/beans/spring-beans.xsd\n        http://www.springframework.org/schema/context\n        http://www.springframework.org/schema/context/spring-context.xsd\n        http://www.springframework.org/schema/aop\n        http://www.springframework.org/schema/aop/spring-aop.xsd\n        http://www.springframework.org/schema/tx\n        http://www.springframework.org/schema/tx/spring-tx.xsd\"\u003e\n\n    \u003c!-- IoC注解解析器 --\u003e\n    \u003ccontext:component-scan base-package=\"com.gendml\"/\u003e\n\n    \u003c!-- DI注解解析器 --\u003e\n    \u003ccontext:annotation-config/\u003e\n\n    \u003c!-- 加载数据库配置信息 --\u003e\n    \u003ccontext:property-placeholder location=\"classpath:config/druid.properties\" system-properties-mode=\"NEVER\"/\u003e\n    \u003c!-- 连接池对象 --\u003e\n    \u003cbean id=\"dataSource\" class=\"com.alibaba.druid.pool.DruidDataSource\"\n          init-method=\"init\" destroy-method=\"close\"\u003e\n        \u003cproperty name=\"driverClassName\" value=\"${driverClassName}\"/\u003e\n        \u003cproperty name=\"username\" value=\"${username}\"/\u003e\n        \u003cproperty name=\"password\" value=\"${password}\"/\u003e\n        \u003cproperty name=\"url\" value=\"${url}\"/\u003e\n        \u003cproperty name=\"initialSize\" value=\"${initialSize}\"/\u003e\n        \u003cproperty name=\"minIdle\" value=\"${minIdle}\"/\u003e\n        \u003cproperty name=\"maxActive\" value=\"${maxActive}\"/\u003e\n        \u003c!--配置获取连接等待超时的时间--\u003e\n        \u003cproperty name=\"maxWait\" value=\"${maxWait}\"/\u003e\n        \u003c!--配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒--\u003e\n        \u003cproperty name=\"timeBetweenEvictionRunsMillis\" value=\"${timeBetweenEvictionRunsMillis}\"/\u003e\n        \u003c!--配置一个连接在池中最小生存的时间，单位是毫秒--\u003e\n        \u003cproperty name=\"minEvictableIdleTimeMillis\" value=\"${timeBetweenEvictionRunsMillis}\"/\u003e\n    \u003c/bean\u003e\n\n    \u003c!--配置sqlSessionFactory--\u003e\n    \u003cbean id=\"sqlSessionFactory\"\n          class=\"com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean\"\u003e\n        \u003cproperty name=\"dataSource\" ref=\"dataSource\"/\u003e\n        \u003c!-- 加载xxMapper.xml --\u003e\n        \u003cproperty name=\"mapperLocations\"\u003e\n            \u003carray\u003e\n                \u003cvalue\u003eclasspath:mapper/*Mapper.xml\u003c/value\u003e\n            \u003c/array\u003e\n        \u003c/property\u003e\n        \u003c!-- 配置分页插件 --\u003e\n        \u003cproperty name=\"plugins\"\u003e\n            \u003carray\u003e\n                \u003c!--传入分页拦截器--\u003e\n                \u003cbean class=\"com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor\"\u003e\n                    \u003cproperty name=\"interceptors\" ref=\"paginationInnerInterceptor\"/\u003e\n                \u003c/bean\u003e\n            \u003c/array\u003e\n        \u003c/property\u003e\n    \u003c/bean\u003e\n    \u003c!--分页拦截器--\u003e\n    \u003cbean id=\"paginationInnerInterceptor\" class=\"com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor\"\u003e\n        \u003cproperty name=\"dbType\" value=\"MYSQL\"/\u003e\n    \u003c/bean\u003e\n\n    \u003c!--Mapper接口代理扫描器--\u003e\n    \u003cbean class=\"org.mybatis.spring.mapper.MapperScannerConfigurer\"\u003e\n        \u003c!-- 需要生成代理类对象的mapper接口包 --\u003e\n        \u003cproperty name=\"basePackage\" value=\"com.gendml.mapper\"/\u003e\n        \u003c!-- sqlSessionFactory 的name 用于为代理类中生成SqlSession --\u003e\n        \u003cproperty name=\"sqlSessionFactoryBeanName\" value=\"sqlSessionFactory\"/\u003e\n    \u003c/bean\u003e\n\n    \u003c!-- MP 全局配置 --\u003e\n    \u003cbean id=\"globalConfig\" class=\"com.baomidou.mybatisplus.core.config.GlobalConfig\"\u003e\n        \u003c!-- 全局的主键策略 --\u003e\n        \u003cproperty name=\"dbConfig\" ref=\"dbConfig\"/\u003e\n    \u003c/bean\u003e\n    \u003cbean id=\"dbConfig\" class=\"com.baomidou.mybatisplus.core.config.GlobalConfig.DbConfig\"\u003e\n        \u003c!--映射数据库下划线字段名到数据库实体类的驼峰命名的映射--\u003e\n        \u003cproperty name=\"tableUnderline\" value=\"false\"/\u003e\n    \u003c/bean\u003e\n\n\n    \u003c!-- 配置事务 --\u003e\n    \u003cbean id=\"txManager\"\n          class=\"org.springframework.jdbc.datasource.DataSourceTransactionManager\"\u003e\n        \u003cproperty name=\"dataSource\" ref=\"dataSource\"/\u003e\n    \u003c/bean\u003e\n\n\u003c/beans\u003e\n```\n\n#### 2、SpringMVC配置\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003cbeans xmlns=\"http://www.springframework.org/schema/beans\"\n       xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:p=\"http://www.springframework.org/schema/p\"\n       xmlns:context=\"http://www.springframework.org/schema/context\"\n       xmlns:mvc=\"http://www.springframework.org/schema/mvc\"\n       xsi:schemaLocation=\"http://www.springframework.org/schema/beans\n                        http://www.springframework.org/schema/beans/spring-beans-3.1.xsd\n                        http://www.springframework.org/schema/context\n                        http://www.springframework.org/schema/context/spring-context-3.1.xsd\n                        http://www.springframework.org/schema/mvc\n                        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd\"\u003e\n    \u003c!-- 自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器 --\u003e\n    \u003ccontext:component-scan base-package=\"com.gendml\"/\u003e\n    \u003c!--测试的时候把mvc注解掉--\u003e\n    \u003cmvc:annotation-driven\u003e\n        \u003cmvc:message-converters\u003e\n            \u003c!-- 处理响应中文内容乱码 --\u003e\n            \u003cbean class=\"org.springframework.http.converter.StringHttpMessageConverter\"\u003e\n                \u003cproperty name=\"defaultCharset\" value=\"UTF-8\"/\u003e\n                \u003cproperty name=\"supportedMediaTypes\"\u003e\n                    \u003clist\u003e\n                        \u003cvalue\u003etext/html\u003c/value\u003e\n                        \u003cvalue\u003eapplication/json\u003c/value\u003e\n                    \u003c/list\u003e\n                \u003c/property\u003e\n            \u003c/bean\u003e\n            \u003c!-- 配置Fastjson支持 --\u003e\n            \u003cbean class=\"com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter\"\u003e\n                \u003cproperty name=\"charset\" value=\"UTF-8\"/\u003e\n                \u003cproperty name=\"supportedMediaTypes\"\u003e\n                    \u003clist\u003e\n                        \u003cvalue\u003eapplication/json\u003c/value\u003e\n                        \u003cvalue\u003etext/html;charset=UTF-8\u003c/value\u003e\n                    \u003c/list\u003e\n                \u003c/property\u003e\n                \u003cproperty name=\"features\"\u003e\n                    \u003clist\u003e\n                        \u003cvalue\u003eQuoteFieldNames\u003c/value\u003e\n                        \u003cvalue\u003eWriteMapNullValue\u003c/value\u003e\n                        \u003cvalue\u003eWriteDateUseDateFormat\u003c/value\u003e\n                        \u003cvalue\u003eWriteEnumUsingToString\u003c/value\u003e\n                        \u003cvalue\u003eDisableCircularReferenceDetect\u003c/value\u003e\n                    \u003c/list\u003e\n                \u003c/property\u003e\n            \u003c/bean\u003e\n        \u003c/mvc:message-converters\u003e\n    \u003c/mvc:annotation-driven\u003e\n\u003c/beans\u003e\n```\n\n## 二、前端\n\n### （一）系统框架\n\n**Vue2.x+ElementUI+V-Charts**\n\n#### 1、Vue.js\n\n​\tVue.js是一款流行的JavaScript前端框架，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。Vue框架轻量、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快，并且Vue有着强大的生态圈。\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612152106750.png\" alt=\"image-20220612152106750\" style=\"zoom:67%;\" /\u003e\n\n#### 2、ElementUI\n\n​\tElement是饿了吗公司开发的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612152302185.png\" alt=\"image-20220612152302185\" style=\"zoom:150%;\" /\u003e\n\n#### 3、V-Charts\n\n​\tv-charts是基于 Vue2.0 和 Echarts 封装的图标组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，就可以生成常见的图表。\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612152432207.png\" alt=\"image-20220612152432207\" style=\"zoom:67%;\" /\u003e\n\n### （二）总体设计\n\n- 项目使用Vue-Cli脚手架编写，项目具体结构如下图所示\n- 根据角色创建了三个主要模块的组件包括**学生**、**教师**和**管理员**\n\n![image-20220612152901341](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612152901341.png)\n\n#### 1、Vue脚手架配置\n\n- 为了方便主页间组件的跳转，将登录注册组件放在了一个单独的vue子项目，同时配置登录和主页的入口html文件，方便登陆的vue项目向主页的vue项目的切换\n\n  ![image-20220612162324506](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612162324506.png)\n\n\u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612154412255.png\" alt=\"image-20220612154412255\" style=\"zoom: 67%;\" /\u003e\n\n- 由于我在完成后端开发时遇到跨域现象，所以配置了网络代理，在axios中每次发出请求前加上“/api”前缀，这里代理监听“/api”前缀的请求，将请求代理到后端服务器，并将原来的\"/api\"替换为空\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612162300878.png\" alt=\"image-20220612162300878\" style=\"zoom: 67%;\" /\u003e\n\n#### 2、Router配置\n\n- 将匹配不到的路由统一转发到noFound组件\n\n  ![image-20220612154133382](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612154133382.png)\n\n- 主页\n\n  ![image-20220612154657662](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612154657662.png)\n\n  ![image-20220612162805600](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612162805600.png)\n\n- 学生页面使用嵌套路由，student组件是父组件，四个子组件分别是四个功能：课表查询（studentCourse）、选课（chooseClass）、成绩管理（studentGrade）和个人信息修改（studentInfo）\n\n  ![image-20220612162639370](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612162639370.png)\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612154952116.png\" alt=\"image-20220612154952116\" style=\"zoom:80%;\" /\u003e\n\n- 教师页面使用嵌套路由，teacher组件是父组件，六个子组件分别是六个功能：课表查询（teacherCourse）、添加课程（addCourse）、添加上课时间（addClass）、成绩管理（manageGrade）、录入某个课程成绩（manageGrade/:cid，参数cid表示课程id）和个人信息修改（teacherInfo）\n\n  ![image-20220612162716136](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612162716136.png)\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612155305437.png\" alt=\"image-20220612155305437\" style=\"zoom:80%;\" /\u003e\n\n- 管理员页面使用嵌套路由，admin组件是父组件，五个子组件分别是五个功能：概况（schoolInfo）、管理学生（manageStudent）、管理教师（manageTeacher）和管理院系（manageFaculity）\n\n  ![image-20220612162652906](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612162652906.png)\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612155832678.png\" alt=\"image-20220612155832678\" style=\"zoom:80%;\" /\u003e\n\n- 路由钩子函数beforeEach，我在编写后端登录接口时，响应了一段uuid字符串传入sessionStorage，作为登录token验证用户是否处于登陆状态，这里的功能是每次在做路由转发前检查sessionStorage存储的token，如果存在那么放行，如果不存在那么通过上述配置的html入口文件重定向到login组件\n\n  ![image-20220612160314742](https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612160314742.png)\n\n#### 3、Vuex配置\n\n- 登陆完成会跳转到主页的Vue项目，我在主页项目的父组件（App.vue）中在元素挂起前通过axios和读取本地sessionStorage获取用户姓名、角色和id并将其放入state对象中（自定义的JSON对象），再将state对象和token存入sessionStorage中\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612160947544.png\" alt=\"image-20220612160947544\" style=\"zoom: 67%;\" /\u003e\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612161404292.png\" alt=\"image-20220612161404292\" style=\"zoom: 80%;\" /\u003e\n\n- 在Vuex中定义state对象，由于Vuex里定义的变量相当于页面的局部变量，当页面做刷新操作就会消失，所以这里的state每次在消失后从session中取，保证了Vuex的持续且动态地使用\n\n  \u003cimg src=\"https://gendml.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220612161609947.png\" alt=\"image-20220612161609947\" style=\"zoom:80%;\" /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgend-max%2Fstudentcoursesystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgend-max%2Fstudentcoursesystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgend-max%2Fstudentcoursesystem/lists"}