StudentCourseSystem
1.0.0
- I built the database and back-end parts, and made changes and improvements based on the business logic front-end project to make it more suitable for my database
- The project has been deployed to the cloud: student course selection system
- This is my first time using vue-cli to develop a project. If there are any imprecision or errors in the detailed project code, you are welcome to point it out and discuss it together.
- If this project is helpful to you, please give this project a star and follow the author
Spring+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring is an open source framework that was created to solve the complexities of enterprise application development. One of the main advantages of the framework is its layered architecture, which allows users to choose which components to use while providing an integrated framework for J2EE application development. Spring uses basic JavaBeans to accomplish things that were previously only possible with EJBs. However, Spring's uses are not limited to server-side development. Any Java application can benefit from Spring in terms of simplicity, testability, and loose coupling. The core of Spring is Inversion of Control (IoC) and Aspect Orientation (AOP). Simply put, Spring is a layered JavaSE/EE one-stop lightweight open source framework.
SpringMVC is a module of the spring framework. SpringMVC and Spring do not need to be integrated through an intermediate integration layer. SpringMVC is a web framework based on MVC. SpringMVC has a controller, which functions like Struts. It receives external requests and parses parameters to the service layer.
MyBatis is an excellent persistence layer framework that supports custom SQL, stored procedures and advanced mapping. MyBatis eliminates almost all JDBC code and the work of setting parameters and getting result sets. MyBatis can configure and map primitive types, interfaces and Java POJOs (Plain Old Java Objects) into records in the database through simple XML or annotations. MyBatis-Plus (MP for short) is an enhancement tool for MyBatis. Based on MyBatis, it only enhances without making any changes. It is created to simplify development and improve efficiency.
Persistence layer (Entity) + Data access layer (Dao) + Business logic layer (Service) + Control layer (Controller)
A rough understanding is to re-encapsulate one or more DAOs into a service. After encapsulation, it will no longer be an atomic operation. It requires things to be controlled and is responsible for managing specific functions.
Here, the business interfaces for administrators , courses , teachers and students are written according to the needs. In the business implementation class, codes are written according to the above Dao layer to implement specific business.
<? xml version = " 1.0 " encoding = " UTF-8 " ?>
< beans xmlns = " http://www.springframework.org/schema/beans "
xmlns : context = " http://www.springframework.org/schema/context "
xmlns : aop = " http://www.springframework.org/schema/aop "
xmlns : tx = " http://www.springframework.org/schema/tx "
xmlns : xsi = " http://www.w3.org/2001/XMLSchema-instance "
xsi : schemaLocation = "
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd " >
<!-- IoC注解解析器 -->
< context : component-scan base-package = " com.gendml " />
<!-- DI注解解析器 -->
< context : annotation-config />
<!-- 加载数据库配置信息 -->
< context : property-placeholder location = " classpath:config/druid.properties " system-properties-mode = " NEVER " />
<!-- 连接池对象 -->
< bean id = " dataSource " class = " com.alibaba.druid.pool.DruidDataSource "
init-method = " init " destroy-method = " close " >
< property name = " driverClassName " value = " ${driverClassName} " />
< property name = " username " value = " ${username} " />
< property name = " password " value = " ${password} " />
< property name = " url " value = " ${url} " />
< property name = " initialSize " value = " ${initialSize} " />
< property name = " minIdle " value = " ${minIdle} " />
< property name = " maxActive " value = " ${maxActive} " />
<!--配置获取连接等待超时的时间-->
< property name = " maxWait " value = " ${maxWait} " />
<!--配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒-->
< property name = " timeBetweenEvictionRunsMillis " value = " ${timeBetweenEvictionRunsMillis} " />
<!--配置一个连接在池中最小生存的时间，单位是毫秒-->
< property name = " minEvictableIdleTimeMillis " value = " ${timeBetweenEvictionRunsMillis} " />
</ bean >
<!--配置sqlSessionFactory -->
< bean id = " sqlSessionFactory "
class = " com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean " >
< property name = " dataSource " ref = " dataSource " />
<!-- 加载xxMapper.xml -->
< property name = " mapperLocations " >
< array >
< value >classpath:mapper/*Mapper.xml</ value >
</ array >
</ property >
<!-- 配置分页插件 -->
< property name = " plugins " >
< array >
<!--传入分页拦截器-->
< bean class = " com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor " >
< property name = " interceptors " ref = " paginationInnerInterceptor " />
</ bean >
</ array >
</ property >
</ bean >
<!--分页拦截器-->
< bean id = " paginationInnerInterceptor " class = " com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor " >
< property name = " dbType " value = " MYSQL " />
</ bean >
<!-- Mapper接口代理扫描器-->
< bean class = " org.mybatis.spring.mapper.MapperScannerConfigurer " >
<!-- 需要生成代理类对象的mapper接口包 -->
< property name = " basePackage " value = " com.gendml.mapper " />
<!-- sqlSessionFactory 的name 用于为代理类中生成SqlSession -->
< property name = " sqlSessionFactoryBeanName " value = " sqlSessionFactory " />
</ bean >
<!-- MP 全局配置 -->
< bean id = " globalConfig " class = " com.baomidou.mybatisplus.core.config.GlobalConfig " >
<!-- 全局的主键策略 -->
< property name = " dbConfig " ref = " dbConfig " />
</ bean >
< bean id = " dbConfig " class = " com.baomidou.mybatisplus.core.config.GlobalConfig.DbConfig " >
<!--映射数据库下划线字段名到数据库实体类的驼峰命名的映射-->
< property name = " tableUnderline " value = " false " />
</ bean >
<!-- 配置事务 -->
< bean id = " txManager "
class = " org.springframework.jdbc.datasource.DataSourceTransactionManager " >
< property name = " dataSource " ref = " dataSource " />
</ bean >
</ beans ><? xml version = " 1.0 " encoding = " UTF-8 " ?>
< beans xmlns = " http://www.springframework.org/schema/beans "
xmlns : xsi = " http://www.w3.org/2001/XMLSchema-instance " xmlns : p = " http://www.springframework.org/schema/p "
xmlns : context = " http://www.springframework.org/schema/context "
xmlns : mvc = " http://www.springframework.org/schema/mvc "
xsi : schemaLocation = " http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd " >
<!-- 自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器 -->
< context : component-scan base-package = " com.gendml " />
<!--测试的时候把mvc注解掉-->
< mvc : annotation-driven >
< mvc : message-converters >
<!-- 处理响应中文内容乱码 -->
< bean class = " org.springframework.http.converter.StringHttpMessageConverter " >
< property name = " defaultCharset " value = " UTF-8 " />
< property name = " supportedMediaTypes " >
< list >
< value >text/html</ value >
< value >application/json</ value >
</ list >
</ property >
</ bean >
<!-- 配置Fastjson支持 -->
< bean class = " com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter " >
< property name = " charset " value = " UTF-8 " />
< property name = " supportedMediaTypes " >
< list >
< value >application/json</ value >
< value >text/html;charset=UTF-8</ value >
</ list >
</ property >
< property name = " features " >
< list >
< value >QuoteFieldNames</ value >
< value >WriteMapNullValue</ value >
< value >WriteDateUseDateFormat</ value >
< value >WriteEnumUsingToString</ value >
< value >DisableCircularReferenceDetect</ value >
</ list >
</ property >
</ bean >
</ mvc : message-converters >
</ mvc : annotation-driven >
</ beans >Vue2.x+ElementUI+V-Charts
Vue.js is a popular JavaScript front-end framework. It is an open source JavaScript framework for creating user interfaces and a web application framework for creating single-page applications. The Vue framework is lightweight, easy to learn, has two-way data binding, componentization, separation of data and structure, virtual DOM, fast running speed, and Vue has a strong ecosystem.
Element is a set of desktop component libraries based on Vue 2.0 developed by Hungry? Company for developers, designers and product managers.
v-charts is an icon component encapsulated based on Vue2.0 and Echarts. It only needs to uniformly provide a data format that is friendly to both the front and back ends and set simple configuration items to generate common charts.
In order to facilitate the jump of components between homepages, the login registration component is placed in a separate vue sub-project, and the entry html files for login and homepage are configured at the same time to facilitate the switching of the login vue project to the vue project on the homepage.
Since I encountered cross-domain phenomena when completing back-end development, I configured a network proxy and added the "/api" prefix before each request in axios. The proxy here monitors the request with the "/api" prefix and forwards the request to the proxy Go to the backend server and replace the original "/api" with empty
Unified forwarding of unmatched routes to the noFound component
Home page
The student page uses nested routing. The student component is the parent component. The four sub-components have four functions: class schedule query (studentCourse), course selection (chooseClass), grade management (studentGrade) and personal information modification (studentInfo).
The teacher page uses nested routing. The teacher component is the parent component. The six sub-components have six functions: timetable query (teacherCourse), adding courses (addCourse), adding class time (addClass), grade management (manageGrade), entering a certain Course grade (manageGrade/:cid, the parameter cid represents the course id) and personal information modification (teacherInfo)
The administrator page uses nested routing. The admin component is the parent component and the five sub-components have five functions: overview (schoolInfo), manage students (manageStudent), manage teachers (manageTeacher) and manage departments (manageFacility).
Routing hook function beforeEach, when I was writing the back-end login interface, I responded with a uuid string and passed it into sessionStorage as a login token to verify whether the user is logged in. The function here is to check the token stored in sessionStorage before routing and forwarding. , if it exists, then release it, if it does not exist, then redirect to the login component through the html entry file configured above.
After the login is completed, it will jump to the Vue project of the homepage. In the parent component (App.vue) of the homepage project, I obtain the user name, role and id through axios and read the local sessionStorage before the element is suspended and put them into the state object. (custom JSON object), and then store the state object and token in sessionStorage
Define the state object in Vuex. Since the variables defined in Vuex are equivalent to the local variables of the page, they will disappear when the page is refreshed. Therefore, the state here is taken from the session after disappearing, ensuring the persistence and dynamics of Vuex. use
