StudentCourseSystem
1.0.0
- データベースとバックエンド部分を構築し、ビジネス ロジック フロントエンド プロジェクトに基づいて変更と改善を加えて、データベースに適したものにしました。
- プロジェクトがクラウドに展開されました: 学生コース選択システム
- vue-cli を使用してプロジェクトを開発するのは初めてです。詳細なプロジェクト コードに不正確な点や間違いがある場合は、ご指摘いただき、一緒に議論していただければ幸いです。
- このプロジェクトが役に立った場合は、このプロジェクトに星を付けて著者をフォローしてください
Spring+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring は、エンタープライズ アプリケーション開発の複雑さを解決するために作成されたオープン ソース フレームワークです。このフレームワークの主な利点の 1 つは、階層化されたアーキテクチャであり、ユーザーは、J2EE アプリケーション開発用の統合フレームワークを提供しながら、使用するコンポーネントを選択できます。 Spring は基本的な JavaBeans を使用して、以前は EJB でのみ可能であったことを実現します。ただし、Spring の用途はサーバー側の開発に限定されません。すべての Java アプリケーションは、シンプルさ、テスト容易性、疎結合の点で Spring の恩恵を受けることができます。 Spring の中核は制御の反転 (IoC) とアスペクト指向 (AOP) です。簡単に言えば、Spring は階層化された JavaSE/EE ワンストップの軽量オープンソース フレームワークです。
SpringMVC は SpringMVC のモジュールであり、SpringMVC は中間統合層を介して統合する必要はありません。SpringMVC は外部リクエストを受け取り、解析するコントローラーを備えています。パラメータをサービス層に渡します。
MyBatis は、カスタム SQL、ストアド プロシージャ、高度なマッピングをサポートする優れた永続層フレームワークです。 MyBatis は、ほぼすべての JDBC コードと、パラメータの設定と結果セットの取得の作業を排除します。 MyBatis は、単純な XML または注釈を使用して、プリミティブ型、インターフェイス、および Java POJO (Plain Old Java Objects) をデータベース内のレコードに構成およびマッピングできます。 MyBatis-Plus (略して MP) は、MyBatis をベースに、開発を簡素化し、効率を向上させるために、何も変更せずに拡張のみを行うために作成されたツールです。
永続層(Entity) + データアクセス層(Dao) + ビジネスロジック層(Service) + 制御層(Controller)
大まかに理解すると、1 つまたは複数の 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-Charts
Vue.js は、人気のある JavaScript フロントエンド フレームワークであり、ユーザー インターフェイスを作成するためのオープン ソースの JavaScript フレームワークであり、単一ページ アプリケーションを作成するための Web アプリケーション フレームワークです。 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) の 4 つの機能があります。
教師ページはネストされたルーティングを使用し、6 つのサブコンポーネントには、時間割クエリ (TeacherCourse)、コースの追加 (addCourse)、授業時間の追加 (addClass)、成績管理 (manageGrade)、入力の 6 つの機能があります。特定のコースグレード (manageGrade/:cid、パラメーター cid はコース ID を表します) および個人情報の変更 (TeacherInfo)
管理者ページは、ネストされたルーティングを使用します。管理コンポーネントは親コンポーネントであり、5 つのサブコンポーネントには、概要 (schoolInfo)、生徒の管理 (manageStudent)、教師の管理 (manageTeacher)、部門の管理 (manageFacility) の 5 つの機能があります。
ルーティング フック関数の前に、バックエンド ログイン インターフェイスを作成するときに、uuid 文字列で応答し、それをログイン トークンとして sessionStorage に渡し、ユーザーがログインしているかどうかを確認しました。ここでの関数は、に保存されているトークンを確認することです。ルーティングと転送の前に sessionStorage が存在する場合は解放し、存在しない場合は、上で構成した HTML エントリ ファイルを介してログイン コンポーネントにリダイレクトします。
ログインが完了すると、ホームページの Vue プロジェクトにジャンプします。ホームページ プロジェクトの親コンポーネント (App.vue) で、axios を通じてユーザー名、ロール、ID を取得し、要素の前にローカルの sessionStorage を読み取ります。一時停止され、それらを状態オブジェクト (カスタム JSON オブジェクト) に入れてから、状態オブジェクトとトークンを sessionStorage に保存します。
Vuexで状態オブジェクトを定義します。 Vuexで定義した変数はページのローカル変数に相当するため、ページが更新されると消滅します。そのため、ここでの状態は消滅後のセッションから取得され、永続性と動的性が確保されます。 Vuexの使用。
