StudentCourseSystem
1.0.0
- J'ai construit la base de données et les parties back-end, et apporté des modifications et des améliorations basées sur le projet frontal de logique métier pour le rendre plus adapté à ma base de données.
- Le projet a été déployé sur le cloud : système de sélection des cours des étudiants
- C'est la première fois que j'utilise vue-cli pour développer un projet. S'il y a des imprécisions ou des erreurs dans le code détaillé du projet, vous pouvez le signaler et en discuter ensemble.
- Si ce projet vous est utile, merci de donner une étoile à ce projet et de suivre l'auteur
Printemps+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring est un framework open source créé pour résoudre les complexités du développement d'applications d'entreprise. L'un des principaux avantages du framework est son architecture en couches, qui permet aux utilisateurs de choisir les composants à utiliser tout en fournissant un framework intégré pour le développement d'applications J2EE. Spring utilise des JavaBeans de base pour accomplir des choses qui n'étaient auparavant possibles qu'avec les EJB. Cependant, les utilisations de Spring ne se limitent pas au développement côté serveur. Toute application Java peut bénéficier de Spring en termes de simplicité, de testabilité et de couplage lâche. Le cœur de Spring est l’inversion de contrôle (IoC) et l’orientation d’aspect (AOP). En termes simples, Spring est un framework open source léger à guichet unique JavaSE/EE en couches.
SpringMVC est un module du framework Spring. SpringMVC et Spring n'ont pas besoin d'être intégrés via une couche d'intégration intermédiaire. SpringMVC est un framework Web basé sur MVC et possède un contrôleur qui fonctionne comme Struts. paramètres à la couche de service.
MyBatis est un excellent framework de couche de persistance qui prend en charge le SQL personnalisé, les procédures stockées et le mappage avancé. MyBatis élimine presque tout le code JDBC ainsi que le travail de définition des paramètres et d'obtention des jeux de résultats. MyBatis peut configurer et mapper des types primitifs, des interfaces et des POJO Java (Plain Old Java Objects) dans des enregistrements de la base de données via du XML simple ou des annotations. MyBatis-Plus (MP en abrégé) est un outil d'amélioration pour MyBatis, basé sur MyBatis, il s'améliore uniquement sans apporter de modifications. Il est créé pour simplifier le développement et améliorer l'efficacité.
Couche de persistance (Entité) + couche d'accès aux données (Dao) + couche de logique métier (Service) + couche de contrôle (Contrôleur)
Une compréhension approximative consiste à réencapsuler un ou plusieurs DAO dans un service. Après l'encapsulation, il ne s'agira plus d'une opération atomique. Elle nécessite un contrôle des choses et est responsable de la gestion de fonctions spécifiques.
Ici, les interfaces métier pour les administrateurs , les cours , les enseignants et les étudiants sont écrites en fonction des besoins. Dans la classe de mise en œuvre commerciale, les codes sont écrits sur la base de la couche Dao ci-dessus pour mettre en œuvre des activités spécifiques.
<? 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 est un framework frontal JavaScript populaire. Il s'agit d'un framework JavaScript open source pour la création d'interfaces utilisateur et d'un framework d'application Web pour la création d'applications d'une seule page. Le framework Vue est léger, facile à apprendre, dispose d'une liaison de données bidirectionnelle, d'une composantisation, d'une séparation des données et de la structure, d'un DOM virtuel, d'une vitesse d'exécution rapide et Vue dispose d'un écosystème solide.
Element est un ensemble de bibliothèques de composants de bureau basées sur Vue 2.0 développées par Hungry Company pour les développeurs, les concepteurs et les chefs de produit.
v-charts est un composant d'icône encapsulé basé sur Vue2.0 et Echarts. Il doit uniquement fournir uniformément un format de données convivial à la fois pour le front-end et le back-end et définir des éléments de configuration simples pour générer des graphiques communs.
Afin de faciliter le saut des composants entre les pages d'accueil, le composant d'enregistrement de connexion est placé dans un sous-projet vue distinct, et les fichiers html d'entrée pour la connexion et la page d'accueil sont configurés en même temps pour faciliter le basculement du projet vue de connexion vers le projet vue sur la page d'accueil.
Depuis que j'ai rencontré des phénomènes inter-domaines lors du développement back-end, j'ai configuré un proxy réseau et ajouté le préfixe "/api" avant chaque requête dans axios. Le proxy ici surveille la requête avec le préfixe "/api" et transmet la requête. au proxy Accédez au serveur backend et remplacez le "/api" d'origine par un vide
Transfert unifié des routes sans correspondance vers le composant noFound
Page d'accueil
La page étudiant utilise un routage imbriqué. Le composant étudiant est le composant parent. Les quatre sous-composants ont quatre fonctions : requête d'horaire de cours (studentCourse), sélection de cours (chooseClass), gestion des notes (studentGrade) et modification des informations personnelles (studentInfo).
La page enseignant utilise un routage imbriqué. Le composant enseignant est le composant parent, et les six sous-composants ont six fonctions : requête d'horaire (teacherCourse), ajout de cours (addCourse), ajout de temps de cours (addClass), gestion des notes (manageGrade), saisie d'une certaine note de cours (manageGrade/:cid, le paramètre cid représente l'identifiant du cours) et modification des informations personnelles (teacherInfo)
La page administrateur utilise un routage imbriqué. Le composant admin est le composant parent et les cinq sous-composants ont cinq fonctions : présentation (schoolInfo), gestion des étudiants (manageStudent), gestion des enseignants (manageTeacher) et gestion des départements (manageFacility).
Fonction de hook de routage avantEach, lorsque j'écrivais l'interface de connexion back-end, j'ai répondu avec une chaîne uuid et je l'ai transmise à sessionStorage en tant que jeton de connexion pour vérifier si l'utilisateur est connecté. La fonction ici est de vérifier le jeton stocké dans sessionStorage avant le routage et le transfert, s'il existe, libérez-le, s'il n'existe pas, puis redirigez vers le composant de connexion via le fichier d'entrée html configuré ci-dessus.
Une fois la connexion terminée, il passera au projet Vue de la page d'accueil. Dans le composant parent (App.vue) du projet de page d'accueil, j'obtiens le nom d'utilisateur, le rôle et l'identifiant via axios et je lis le sessionStorage local avant l'élément. est suspendu et les place dans l'objet d'état (objet JSON personnalisé), puis stocke l'objet d'état et le jeton dans sessionStorage.
Définissez l'objet d'état dans Vuex. Puisque les variables définies dans Vuex sont équivalentes aux variables locales de la page, elles disparaîtront lors du rafraîchissement de la page. Par conséquent, l'état ici est extrait de la session après sa disparition, garantissant la persistance et la dynamique. de Vuex.
