StudentCourseSystem
1.0.0
- 데이터베이스와 백엔드 부분을 구축하고 비즈니스 로직 프런트엔드 프로젝트를 기반으로 변경 및 개선하여 내 데이터베이스에 더 적합하도록 만들었습니다.
- 프로젝트가 클라우드에 배포되었습니다: 학생 과목 선택 시스템
- vue-cli를 사용하여 프로젝트를 개발하는 것은 이번이 처음입니다. 자세한 프로젝트 코드에 부정확한 부분이나 오류가 있으면 지적해 주시고 함께 논의해 주시면 감사하겠습니다.
- 이 프로젝트가 도움이 되었다면 이 프로젝트에 별점을 주고 작성자를 팔로우 하세요.
스프링+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring은 엔터프라이즈 애플리케이션 개발의 복잡성을 해결하기 위해 만들어진 오픈 소스 프레임워크입니다. 프레임워크의 주요 장점 중 하나는 계층화된 아키텍처로, 이를 통해 사용자는 J2EE 애플리케이션 개발을 위한 통합 프레임워크를 제공하면서 사용할 구성 요소를 선택할 수 있습니다. Spring은 이전에 EJB를 통해서만 가능했던 작업을 수행하기 위해 기본 JavaBeans를 사용합니다. 그러나 Spring의 용도는 서버측 개발에만 국한되지 않습니다. 모든 Java 애플리케이션은 단순성, 테스트 용이성 및 느슨한 결합 측면에서 Spring의 이점을 누릴 수 있습니다. Spring의 핵심은 IoC(Inversion of Control)와 AOP(Aspect Orientation)입니다. 간단히 말해서 Spring은 계층형 JavaSE/EE 원스톱 경량 오픈 소스 프레임워크입니다.
SpringMVC는 Spring 프레임워크의 모듈이며 Spring은 중간 통합 레이어를 통해 통합될 필요가 없습니다. SpringMVC는 MVC 기반의 웹 프레임워크로 Struts와 같은 기능을 합니다. 매개변수를 서비스 계층에 전달합니다.
MyBatis는 사용자 정의 SQL, 저장 프로시저 및 고급 매핑을 지원하는 탁월한 지속성 계층 프레임워크입니다. MyBatis는 거의 모든 JDBC 코드와 매개변수 설정 및 결과 세트 가져오기 작업을 제거합니다. MyBatis는 간단한 XML이나 주석을 통해 기본 유형, 인터페이스 및 Java POJO(Plain Old Java Objects)를 데이터베이스의 레코드로 구성하고 매핑할 수 있습니다. MyBatis-Plus (약칭 MP)는 MyBatis 를 기반으로 개발을 단순화하고 효율성을 높이기 위해 만들어졌습니다.
지속성 계층(Entity) + 데이터 액세스 계층(Dao) + 비즈니스 로직 계층(서비스) + 제어 계층(Controller)
대략적인 이해는 하나 이상의 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는 Hungry? Company에서 개발자, 디자이너 및 제품 관리자를 위해 개발한 Vue 2.0 기반의 데스크톱 구성 요소 라이브러리 세트입니다.
v-charts는 Vue2.0과 Echarts를 기반으로 캡슐화한 아이콘 컴포넌트로 프론트엔드와 백엔드 모두에 친화적인 데이터 포맷을 일률적으로 제공하고, 간단한 구성 항목만 설정하면 공통 차트를 생성할 수 있습니다.
홈페이지 간 컴포넌트 점프를 용이하게 하기 위해 로그인 등록 컴포넌트를 별도의 vue 하위 프로젝트에 배치하고 로그인 및 홈페이지용 항목 html 파일을 동시에 구성하여 로그인 vue 프로젝트 전환을 용이하게 합니다. 홈페이지의 vue 프로젝트.
백엔드 개발을 완료할 때 도메인 간 현상이 발생했기 때문에 네트워크 프록시를 구성하고 axios의 각 요청 앞에 "/api" 접두사를 추가했습니다. 여기서 프록시는 "/api" 접두사가 있는 요청을 모니터링하고 요청을 전달합니다. 프록시로 백엔드 서버로 이동하여 원래 "/api"를 비어 있는 것으로 바꿉니다.
일치하지 않는 경로를 noFound 구성 요소로 통합 전달
홈페이지
학생 페이지는 중첩된 라우팅을 사용합니다. 학생 구성 요소는 상위 구성 요소입니다. 4개의 하위 구성 요소에는 수업 일정 조회(studentCourse), 과목 선택(chooseClass), 성적 관리(studentGrade) 및 개인 정보 수정(studentInfo)의 네 가지 기능이 있습니다.
교사 페이지는 중첩 라우팅을 사용합니다. 교사 구성 요소는 상위 구성 요소입니다. 6개의 하위 구성 요소에는 시간표 쿼리(teacherCourse), 강좌 추가(addCourse), 수업 시간 추가(addClass), 성적 관리(manageGrade), 입력 등 6가지 기능이 있습니다. 특정 과목 성적(manageGrade/:cid, 매개 변수 cid는 과목 ID를 나타냄) 및 개인 정보 수정(teacherInfo)
관리자 페이지는 중첩 라우팅을 사용합니다. 관리 구성 요소는 상위 구성 요소이고 5개의 하위 구성 요소에는 개요(schoolInfo), 학생 관리(manageStudent), 교사 관리(manageTeacher) 및 부서 관리(manageFacility)라는 5가지 기능이 있습니다.
beforeEach의 라우팅 후크 기능, 백엔드 로그인 인터페이스를 작성할 때 uuid 문자열로 응답하고 이를 로그인 토큰으로 sessionStorage에 전달하여 사용자가 로그인했는지 확인했습니다. 여기서 함수는 저장된 토큰을 확인하는 것입니다. 라우팅 및 전달 전에 sessionStorage가 있으면 해제하고, 없으면 위에서 구성한 html 항목 파일을 통해 로그인 구성 요소로 리디렉션합니다.
로그인이 완료되면 홈페이지 프로젝트의 상위 구성 요소(App.vue)에서 axios를 통해 사용자 이름, 역할 및 ID를 얻고 요소 이전에 로컬 sessionStorage를 읽습니다. 일시 중지되어 상태 객체(사용자 정의 JSON 객체)에 넣은 다음 상태 객체와 토큰을 sessionStorage에 저장합니다.
Vuex에서 상태 객체를 정의합니다. Vuex에 정의된 변수는 페이지의 로컬 변수와 동일하므로 페이지를 새로 고칠 때 사라지므로 여기의 상태는 사라진 후 세션에서 가져오므로 지속성과 역학이 보장됩니다. Vuex를 사용합니다.
