StudentCourseSystem
1.0.0
- Ich habe die Datenbank und die Back-End-Teile erstellt und basierend auf dem Geschäftslogik-Front-End-Projekt Änderungen und Verbesserungen vorgenommen, um es besser für meine Datenbank geeignet zu machen
- Das Projekt wurde in der Cloud bereitgestellt: Kursauswahlsystem für Studenten
- Dies ist das erste Mal, dass ich vue-cli zur Entwicklung eines Projekts verwende. Wenn der detaillierte Projektcode Ungenauigkeiten oder Fehler aufweist, können Sie diese gerne gemeinsam besprechen.
- Wenn dieses Projekt für Sie hilfreich ist, geben Sie diesem Projekt bitte einen Stern und folgen Sie dem Autor
Spring+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring ist ein Open-Source-Framework, das entwickelt wurde, um die Komplexität der Entwicklung von Unternehmensanwendungen zu lösen. Einer der Hauptvorteile des Frameworks ist seine mehrschichtige Architektur, die es Benutzern ermöglicht, auszuwählen, welche Komponenten sie verwenden möchten, und gleichzeitig ein integriertes Framework für die J2EE-Anwendungsentwicklung bereitzustellen. Spring verwendet grundlegende JavaBeans, um Dinge zu erreichen, die bisher nur mit EJBs möglich waren. Allerdings sind die Einsatzmöglichkeiten von Spring nicht auf die serverseitige Entwicklung beschränkt. Jede Java-Anwendung kann von Spring hinsichtlich Einfachheit, Testbarkeit und loser Kopplung profitieren. Der Kern von Spring ist Inversion of Control (IoC) und Aspect Orientation (AOP). Einfach ausgedrückt ist Spring ein mehrschichtiges JavaSE/EE-One-Stop-Open-Source-Framework.
SpringMVC ist ein Modul des Spring-Frameworks und SpringMVC ist ein auf MVC basierendes Web-Framework, das wie Struts funktioniert Parameter an die Serviceschicht.
MyBatis ist ein hervorragendes Persistenzschicht-Framework, das benutzerdefiniertes SQL, gespeicherte Prozeduren und erweiterte Zuordnung unterstützt. MyBatis eliminiert fast den gesamten JDBC-Code und die Arbeit, Parameter festzulegen und Ergebnismengen abzurufen. MyBatis kann primitive Typen, Schnittstellen und Java-POJOs (Plain Old Java Objects) über einfaches XML oder Anmerkungen konfigurieren und Datensätzen in der Datenbank zuordnen. MyBatis-Plus (kurz MP) ist ein Erweiterungstool für MyBatis, das nur Verbesserungen vornimmt, ohne Änderungen vorzunehmen. Es wurde entwickelt, um die Entwicklung zu vereinfachen und die Effizienz zu verbessern.
Persistenzschicht (Entität) + Datenzugriffsschicht (Dao) + Geschäftslogikschicht (Dienst) + Kontrollschicht (Controller)
Ein grobes Verständnis besteht darin, ein oder mehrere DAOs erneut in einen Dienst zu kapseln. Nach der Kapselung handelt es sich nicht mehr um eine atomare Operation, die die Steuerung bestimmter Funktionen erfordert.
Hier werden die Geschäftsschnittstellen für Administratoren , Kurse , Lehrer und Studenten entsprechend den Anforderungen geschrieben. In der Geschäftsimplementierungsklasse werden Codes gemäß der oben genannten Dao-Schicht geschrieben, um spezifische Geschäfte zu implementieren.
<? 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 ist ein beliebtes JavaScript-Frontend-Framework. Es handelt sich um ein Open-Source-JavaScript-Framework zum Erstellen von Benutzeroberflächen und ein Webanwendungs-Framework zum Erstellen von Einzelseitenanwendungen. Das Vue-Framework ist leichtgewichtig, leicht zu erlernen, verfügt über bidirektionale Datenbindung, Komponentisierung, Trennung von Daten und Struktur, virtuelles DOM, schnelle Ausführungsgeschwindigkeit und Vue verfügt über ein starkes Ökosystem.
Element ist eine Reihe von Desktop-Komponentenbibliotheken basierend auf Vue 2.0, die von Hungry? Company für Entwickler, Designer und Produktmanager entwickelt wurden.
v-charts ist eine gekapselte Symbolkomponente, die auf Vue2.0 und Echarts basiert. Sie muss lediglich ein einheitliches Datenformat bereitstellen, das sowohl für das Front-End als auch für das Back-End geeignet ist, und einfache Konfigurationselemente festlegen, um gemeinsame Diagramme zu generieren.
Um den Wechsel von Komponenten zwischen Homepages zu erleichtern, wird die Login-Registrierungskomponente in einem separaten Vue-Unterprojekt platziert und die Eingabe-HTML-Dateien für Login und Homepage werden gleichzeitig konfiguriert, um den Wechsel des Login-Vue-Projekts zu erleichtern Das Vue-Projekt auf der Homepage.
Da ich beim Abschluss der Back-End-Entwicklung auf domänenübergreifende Phänomene gestoßen bin, habe ich einen Netzwerk-Proxy konfiguriert und vor jeder Anfrage in axios das Präfix „/api“ hinzugefügt. Der Proxy überwacht hier die Anfrage mit dem Präfix „/api“ und leitet die Anfrage weiter zum Proxy Gehen Sie zum Backend-Server und ersetzen Sie das Original „/api“ durch leer
Einheitliche Weiterleitung nicht übereinstimmender Routen an die noFound-Komponente
Startseite
Die Schülerseite verwendet verschachteltes Routing. Die Schülerkomponente ist die übergeordnete Komponente. Die vier Unterkomponenten haben vier Funktionen: Unterrichtsplanabfrage (studentCourse), Kursauswahl (chooseClass), Notenverwaltung (studentGrade) und Änderung persönlicher Informationen (studentInfo).
Die Lehrerseite verwendet verschachteltes Routing. Die Lehrerkomponente ist die übergeordnete Komponente. Die sechs Unterkomponenten haben sechs Funktionen: Stundenplanabfrage (teacherCourse), Hinzufügen von Kursen (addClass), Notenverwaltung (manageGrade), Eingabe eine bestimmte Kursnote (manageGrade/:cid, der Parameter cid stellt die Kurs-ID dar) und persönliche Datenänderung (teacherInfo)
Die Administratorseite verwendet verschachteltes Routing. Die Admin-Komponente ist die übergeordnete Komponente und die fünf Unterkomponenten haben fünf Funktionen: Übersicht (schoolInfo), Schüler verwalten (manageStudent), Lehrer verwalten (manageTeacher) und Abteilungen verwalten (manageFacility).
Routing-Hook-Funktion beforeEach, als ich die Back-End-Anmeldeschnittstelle schrieb, antwortete ich mit einer UUID-Zeichenfolge und übergab sie als Anmeldetoken an sessionStorage, um zu überprüfen, ob der Benutzer angemeldet ist. Die Funktion hier besteht darin, das darin gespeicherte Token zu überprüfen sessionStorage vor dem Routing und Weiterleiten. Wenn es vorhanden ist, geben Sie es frei. Wenn es nicht vorhanden ist, leiten Sie es über die oben konfigurierte HTML-Eintragsdatei um.
Nachdem die Anmeldung abgeschlossen ist, wird zum Vue-Projekt der Homepage gesprungen. In der übergeordneten Komponente (App.vue) des Homepage-Projekts erhalte ich den Benutzernamen, die Rolle und die ID über Axios und lese den lokalen SessionStorage vor dem Element wird angehalten und in das Statusobjekt (benutzerdefiniertes JSON-Objekt) eingefügt und dann das Statusobjekt und das Token in sessionStorage gespeichert
Definieren Sie das Statusobjekt in Vuex. Da die in Vuex definierten Variablen den lokalen Variablen der Seite entsprechen, verschwinden sie, wenn die Seite aktualisiert wird. Daher wird der Status hier nach dem Verschwinden aus der Sitzung übernommen, um Persistenz und Dynamik sicherzustellen von Vuex
