StudentCourseSystem
1.0.0
- Construí la base de datos y las partes de back-end, e hice cambios y mejoras basadas en el proyecto de front-end de lógica de negocios para hacerlo más adecuado para mi base de datos.
- El proyecto se ha desplegado en la nube: sistema de selección de cursos para estudiantes
- Esta es la primera vez que uso vue-cli para desarrollar un proyecto. Si hay imprecisiones o errores en el código detallado del proyecto, pueden señalarlo y discutirlo juntos.
- Si este proyecto es útil para usted, dele una estrella y siga al autor.
Primavera+PrimaveraMVC+Mybatis+Mybatis-Plus (SSM)
Spring es un marco de código abierto que se creó para resolver las complejidades del desarrollo de aplicaciones empresariales. Una de las principales ventajas del marco es su arquitectura en capas, que permite a los usuarios elegir qué componentes usar y al mismo tiempo proporciona un marco integrado para el desarrollo de aplicaciones J2EE. Spring utiliza JavaBeans básicos para lograr cosas que antes solo eran posibles con EJB. Sin embargo, los usos de Spring no se limitan al desarrollo del lado del servidor. Cualquier aplicación Java puede beneficiarse de Spring en términos de simplicidad, capacidad de prueba y acoplamiento flexible. El núcleo de Spring es la inversión de control (IoC) y la orientación de aspecto (AOP). En pocas palabras, Spring es un marco de código abierto liviano, integral, JavaSE/EE en capas.
SpringMVC es un módulo del marco Spring. SpringMVC y Spring no necesitan integrarse a través de una capa de integración intermedia. SpringMVC es un marco web basado en MVC que tiene un controlador que funciona como Struts. parámetros a la capa de servicio.
MyBatis es un excelente marco de capa de persistencia que admite SQL personalizado, procedimientos almacenados y mapeo avanzado. MyBatis elimina casi todo el código JDBC y el trabajo de configurar parámetros y obtener conjuntos de resultados. MyBatis puede configurar y mapear tipos primitivos, interfaces y Java POJO (objetos Java antiguos simples) en registros en la base de datos a través de XML simples o anotaciones. MyBatis-Plus (MP para abreviar) es una herramienta de mejora para MyBatis. Basado en MyBatis, solo mejora sin realizar ningún cambio. Fue creado para simplificar el desarrollo y mejorar la eficiencia.
Capa de persistencia (Entidad) + capa de acceso a datos (Dao) + capa de lógica empresarial (Servicio) + capa de control (Controlador)
Una comprensión aproximada es volver a encapsular uno o más DAO en un servicio. Después de la encapsulación, ya no será una operación atómica. Requiere que las cosas estén controladas y es responsable de administrar funciones específicas.
Aquí, las interfaces comerciales para administradores , cursos , profesores y estudiantes se escriben de acuerdo con las necesidades. En la clase de implementación empresarial, los códigos se escriben en función de la capa Dao anterior para implementar negocios específicos.
<? 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 es un marco de interfaz de usuario de JavaScript popular. Es un marco de JavaScript de código abierto para crear interfaces de usuario y un marco de aplicación web para crear aplicaciones de una sola página. El marco de Vue es liviano, fácil de aprender, tiene enlace de datos bidireccional, componenteización, separación de datos y estructura, DOM virtual, velocidad de ejecución rápida y Vue tiene un ecosistema sólido.
Element es un conjunto de bibliotecas de componentes de escritorio basadas en Vue 2.0 desarrolladas por Hungry? Company para desarrolladores, diseñadores y gerentes de productos.
v-charts es un componente de ícono encapsulado basado en Vue2.0 y Echarts. Solo necesita proporcionar de manera uniforme un formato de datos que sea amigable tanto para el front-end como para el back-end y establecer elementos de configuración simples para generar gráficos comunes.
Para facilitar el salto de componentes entre páginas de inicio, el componente de registro de inicio de sesión se coloca en un subproyecto de vue separado y los archivos html de entrada para el inicio de sesión y la página de inicio se configuran al mismo tiempo para facilitar el cambio del proyecto de inicio de sesión de vue a el proyecto vue en la página de inicio.
Como encontré fenómenos entre dominios al completar el desarrollo back-end, configuré un proxy de red y agregué el prefijo "/ api" antes de cada solicitud en axios. El proxy aquí monitorea la solicitud con el prefijo "/ api" y reenvía la solicitud. al proxy Vaya al servidor backend y reemplace el "/api" original con vacío
Reenvío unificado de rutas inigualables al componente noFound
pagina de inicio
La página del estudiante utiliza enrutamiento anidado. El componente del estudiante es el componente principal. Los cuatro subcomponentes tienen cuatro funciones: consulta del horario de clases (studentCourse), selección de cursos (chooseClass), gestión de calificaciones (studentGrade) y modificación de información personal (studentInfo).
La página del profesor utiliza enrutamiento anidado. El componente del profesor es el componente principal y los seis subcomponentes tienen seis funciones: consulta de horarios (teacherCourse), agregar cursos (addCourse), agregar tiempo de clase (addClass), administración de calificaciones (manageGrade), ingresar una determinada calificación del curso (manageGrade/:cid, el parámetro cid representa la identificación del curso) y modificación de información personal (teacherInfo)
La página de administrador utiliza enrutamiento anidado. El componente de administración es el componente principal y los cinco subcomponentes tienen cinco funciones: descripción general (schoolInfo), administración de estudiantes (manageStudent), administración de profesores (manageTeacher) y administración de departamentos (manageFacility).
Función de enlace de enrutamiento antes de cada uno, cuando estaba escribiendo la interfaz de inicio de sesión de back-end, respondí con una cadena uuid y la pasé a sessionStorage como un token de inicio de sesión para verificar si el usuario ha iniciado sesión. La función aquí es verificar el token almacenado en sessionStorage antes de enrutar y reenviar, si existe, libérelo, si no existe, luego redirija al componente de inicio de sesión a través del archivo de entrada html configurado anteriormente.
Una vez completado el inicio de sesión, saltará al proyecto Vue de la página de inicio. En el componente principal (App.vue) del proyecto de la página de inicio, obtengo el nombre de usuario, la función y la identificación a través de axios y leo el almacenamiento de sesión local antes del elemento. se suspende y los coloca en el objeto de estado (objeto JSON personalizado) y luego almacena el objeto de estado y el token en sessionStorage.
Defina el objeto de estado en Vuex Dado que las variables definidas en Vuex son equivalentes a las variables locales de la página, desaparecerán cuando se actualice la página. Por lo tanto, el estado aquí se toma de la sesión después de desaparecer, lo que garantiza la persistencia y la dinámica. de uso
