- Я создал базу данных и серверную часть, а также внес изменения и улучшения на основе внешнего проекта бизнес-логики, чтобы сделать его более подходящим для моей базы данных.
- Проект развернут в облаке: система выбора курсов для студентов
- Я впервые использую vue-cli для разработки проекта. Если в подробном коде проекта есть какие-либо неточности или ошибки, вы можете указать на это и обсудить это вместе.
- Если этот проект вам полезен, поставьте ему звездочку и подпишитесь на автора.
Spring+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring — это платформа с открытым исходным кодом, созданная для решения сложных задач разработки корпоративных приложений. Одним из основных преимуществ платформы является ее многоуровневая архитектура, которая позволяет пользователям выбирать, какие компоненты использовать, обеспечивая при этом интегрированную среду для разработки приложений J2EE. Spring использует базовые JavaBeans для выполнения задач, которые раньше были возможны только с помощью EJB. Однако использование Spring не ограничивается разработкой на стороне сервера. Любое Java-приложение может выиграть от Spring с точки зрения простоты, тестируемости и слабой связи. Ядро Spring — это инверсия управления (IoC) и аспектная ориентация (AOP). Проще говоря, Spring — это многоуровневая универсальная легкая платформа с открытым исходным кодом JavaSE/EE.
SpringMVC — это модуль Spring Framework. SpringMVC и Spring не нуждаются в интеграции через промежуточный уровень интеграции. SpringMVC — это веб-фреймворк, основанный на MVC. SpringMVC имеет контроллер, который работает как Struts. Он получает внешние запросы и выполняет синтаксический анализ. параметры на уровень обслуживания.
MyBatis — это превосходная платформа уровня персистентности, которая поддерживает пользовательский SQL, хранимые процедуры и расширенное сопоставление. MyBatis исключает практически весь код JDBC, а также работу по настройке параметров и получению наборов результатов. MyBatis может настраивать и сопоставлять примитивные типы, интерфейсы и Java POJO (простые старые объекты Java) с записями в базе данных с помощью простого XML или аннотаций. MyBatis-Plus (сокращенно MP) — это инструмент улучшения MyBatis, основанный на MyBatis, он только расширяется без внесения каких-либо изменений. Он создан для упрощения разработки и повышения эффективности.
Уровень персистентности (Entity) + уровень доступа к данным (Dao) + уровень бизнес-логики (Service) + уровень управления (контроллер)
Грубое понимание заключается в повторной инкапсуляции одного или нескольких DAO в сервис. После инкапсуляции это больше не будет атомарной операцией. Она требует контроля и отвечает за управление конкретными функциями.
Здесь бизнес-интерфейсы для администраторов , курсов , преподавателей и студентов пишутся в соответствии с потребностями. В классе бизнес-реализации на основе вышеуказанного уровня Dao пишутся коды для реализации конкретного бизнеса.
<? 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-диаграммы
Vue.js — это популярная интерфейсная платформа JavaScript. Это платформа JavaScript с открытым исходным кодом для создания пользовательских интерфейсов и платформа веб-приложений для создания одностраничных приложений. Фреймворк Vue легкий, простой в освоении, имеет двустороннюю привязку данных, компонентизацию, разделение данных и структуры, виртуальный DOM, высокую скорость работы, а Vue имеет сильную экосистему.
Element — это набор библиотек компонентов рабочего стола на основе Vue 2.0, разработанный Hungry Company для разработчиков, дизайнеров и менеджеров по продуктам.
v-charts — это компонент значков, инкапсулированный на основе Vue2.0 и Echarts. Ему нужно только единообразно предоставить формат данных, удобный как для внешнего, так и для внутреннего интерфейса, и установить простые элементы конфигурации для создания общих диаграмм.
Чтобы облегчить переход компонентов между домашними страницами, компонент регистрации входа в систему помещен в отдельный подпроект vue, а входные html-файлы для входа в систему и домашней страницы настраиваются одновременно, чтобы облегчить переключение проекта входа в систему vue на проект vue на главной странице.
Поскольку при завершении внутренней разработки я столкнулся с междоменными явлениями, я настроил сетевой прокси и добавил префикс «/api» перед каждым запросом в axios. Прокси здесь отслеживает запрос с префиксом «/api» и пересылает запрос. к прокси. Перейдите на внутренний сервер и замените исходный «/api» пустым.
Единая переадресация несовпадающих маршрутов компоненту noFound
Домашняя страница
На странице студента используется вложенная маршрутизация. Компонент Student является родительским компонентом. Четыре подкомпонента имеют четыре функции: запрос расписания занятий (studentCourse), выбор курса (chooseClass), управление оценками (studentGrade) и изменение личной информации (studentInfo).
На странице учителя используется вложенная маршрутизация. Компонент учителя является родительским компонентом, а шесть подкомпонентов имеют шесть функций: запрос расписания (teacherCourse), добавление курсов (addCourse), добавление времени занятий (addClass), управление оценками (manageGrade), ввод определенной оценки за курс (manageGrade/:cid, параметр cid представляет идентификатор курса) и изменение личной информации (teacherInfo)
На странице администратора используется вложенная маршрутизация. Компонент администратора является родительским компонентом, а пять подкомпонентов имеют пять функций: обзор (schoolInfo), управление учащимися (manageStudent), управление учителями (manageTeacher) и управление отделами (manageFacility).
Функция перехвата маршрутизации beforeEach, когда я писал внутренний интерфейс входа в систему, я ответил строкой uuid и передал ее в sessionStorage в качестве токена входа, чтобы проверить, вошел ли пользователь в систему. Функция здесь заключается в проверке токена, хранящегося в sessionStorage перед маршрутизацией и пересылкой, если он существует, то освободите его, если он не существует, то перенаправьте на компонент входа в систему через настроенный выше html-файл записи.
После завершения входа он перейдет к проекту Vue на домашней странице. В родительском компоненте (App.vue) проекта домашней страницы я получаю имя пользователя, роль и идентификатор через axios и читаю локальное хранилище сеансов перед элементом. приостанавливается и помещает их в объект состояния (пользовательский объект JSON), а затем сохраняет объект состояния и токен в sessionStorage.
Определите объект состояния в Vuex. Поскольку переменные, определенные в Vuex, эквивалентны локальным переменным страницы, они исчезнут при обновлении страницы. Таким образом, состояние здесь берется из сеанса после исчезновения, обеспечивая постоянство и динамику. использования Vuex.