StudentCourseSystem
1.0.0
- Saya membangun database dan bagian back-end, dan membuat perubahan dan peningkatan berdasarkan proyek front-end logika bisnis agar lebih cocok untuk database saya
- Proyek ini telah diterapkan ke cloud: sistem pemilihan mata kuliah siswa
- Ini adalah pertama kalinya saya menggunakan vue-cli untuk mengembangkan sebuah proyek. Jika ada ketidaktepatan atau kesalahan dalam detail kode proyek, Anda dapat menunjukkannya dan mendiskusikannya bersama.
- Jika proyek ini bermanfaat bagi Anda, silakan beri bintang pada proyek ini dan ikuti penulisnya
Musim Semi+Musim SemiMVC+Mybatis+Mybatis-Plus (SSM)
Spring adalah kerangka kerja sumber terbuka yang diciptakan untuk memecahkan kompleksitas pengembangan aplikasi perusahaan. Salah satu keuntungan utama dari kerangka ini adalah arsitektur berlapisnya, yang memungkinkan pengguna untuk memilih komponen mana yang akan digunakan sambil menyediakan kerangka kerja terintegrasi untuk pengembangan aplikasi J2EE. Spring menggunakan JavaBeans dasar untuk mencapai hal-hal yang sebelumnya hanya mungkin dilakukan dengan EJB. Namun, penggunaan Spring tidak terbatas pada pengembangan sisi server. Aplikasi Java apa pun bisa mendapatkan keuntungan dari Spring dalam hal kesederhanaan, kemampuan pengujian, dan penggabungan yang longgar. Inti dari Spring adalah Inversion of Control (IoC) dan Aspect Orientation (AOP). Sederhananya, Spring adalah kerangka kerja open source ringan terpadu JavaSE/EE.
SpringMVC adalah modul kerangka pegas. SpringMVC dan Spring tidak perlu diintegrasikan melalui lapisan integrasi perantara. SpringMVC adalah kerangka web berbasis MVC. SpringMVC memiliki pengontrol, yang berfungsi seperti Struts parameter ke lapisan layanan.
MyBatis adalah kerangka lapisan persistensi luar biasa yang mendukung SQL khusus, prosedur tersimpan, dan pemetaan tingkat lanjut. MyBatis menghilangkan hampir semua kode JDBC dan pekerjaan mengatur parameter dan mendapatkan kumpulan hasil. MyBatis dapat mengonfigurasi dan memetakan tipe primitif, antarmuka, dan POJO Java (Objek Java Lama Biasa) ke dalam catatan dalam database melalui XML atau anotasi sederhana. MyBatis-Plus (disingkat MP) adalah alat penyempurnaan untuk MyBatis. Berdasarkan MyBatis, alat ini hanya menyempurnakan tanpa melakukan perubahan apa pun.
Lapisan persistensi (Entitas) + Lapisan akses data (Dao) + Lapisan logika bisnis (Layanan) + Lapisan kontrol (Pengontrol)
Pemahaman kasarnya adalah merangkum kembali satu atau lebih DAO ke dalam suatu layanan. Setelah enkapsulasi, ini tidak lagi menjadi operasi atom. Hal ini memerlukan hal-hal yang harus dikontrol dan bertanggung jawab untuk mengelola fungsi tertentu.
Di sini, antarmuka bisnis untuk administrator , kursus , guru , dan siswa ditulis sesuai dengan kebutuhan. Di kelas implementasi bisnis, kode ditulis sesuai dengan lapisan Dao di atas untuk mengimplementasikan bisnis tertentu.
<? 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-Bagan
Vue.js adalah kerangka kerja front-end JavaScript yang populer. Ini adalah kerangka kerja JavaScript sumber terbuka untuk membuat antarmuka pengguna dan kerangka aplikasi web untuk membuat aplikasi satu halaman. Framework Vue ringan, mudah dipelajari, memiliki pengikatan data dua arah, komponenisasi, pemisahan data dan struktur, DOM virtual, kecepatan berjalan cepat, dan Vue memiliki ekosistem yang kuat.
Elemen adalah sekumpulan pustaka komponen desktop berdasarkan Vue 2.0 yang dikembangkan oleh Hungry? Company untuk pengembang, desainer, dan manajer produk.
v-charts adalah komponen ikon yang dienkapsulasi berdasarkan Vue2.0 dan Echarts. Ia hanya perlu menyediakan format data yang ramah baik untuk bagian depan dan belakang secara seragam dan mengatur item konfigurasi sederhana untuk menghasilkan grafik umum.
Untuk memfasilitasi peralihan komponen antar halaman beranda, komponen pendaftaran login ditempatkan dalam subproyek vue terpisah, dan file html entri untuk login dan beranda dikonfigurasikan pada saat yang sama untuk memfasilitasi peralihan proyek login vue ke proyek vue di beranda.
Karena saya mengalami fenomena lintas domain saat menyelesaikan pengembangan back-end, saya mengonfigurasi proxy jaringan dan menambahkan awalan "/api" sebelum setiap permintaan di aksio ke proxy Buka server backend dan ganti "/api" asli dengan yang kosong
Penerusan terpadu dari rute yang tidak cocok ke komponen noFound
Halaman rumah
Halaman siswa menggunakan perutean bersarang. Komponen siswa adalah komponen induk. Keempat sub-komponen memiliki empat fungsi: permintaan jadwal kelas (studentCourse), pemilihan kursus (chooseClass), manajemen nilai (studentGrade) dan modifikasi informasi pribadi (studentInfo).
Halaman guru menggunakan perutean bersarang. Komponen guru adalah komponen induk. Enam sub-komponen memiliki enam fungsi: kueri jadwal (teacherCourse), menambahkan kursus (addCourse), menambahkan waktu kelas (addClass), manajemen nilai (manageGrade), memasukkan nilai Kursus tertentu (manageGrade/:cid, parameter cid mewakili id kursus) dan modifikasi informasi pribadi (teacherInfo)
Halaman administrator menggunakan perutean bertingkat. Komponen admin adalah komponen induk dan lima sub-komponen memiliki lima fungsi: ikhtisar (schoolInfo), mengelola siswa (manageStudent), mengelola guru (manageTeacher) dan mengelola departemen (manageFacility).
Fungsi routing hook beforeEach, ketika saya menulis antarmuka login back-end, saya merespons dengan string uuid dan meneruskannya ke sessionStorage sebagai token login untuk memverifikasi apakah pengguna sudah login. Fungsinya di sini adalah untuk memeriksa token yang disimpan di sessionStorage sebelum routing dan forwarding. , jika ada, lepaskan, jika tidak ada, lalu arahkan ke komponen login melalui file entri html yang dikonfigurasi di atas.
Setelah login selesai, ia akan melompat ke proyek Vue di beranda. Di komponen induk (App.vue) dari proyek beranda, saya mendapatkan nama pengguna, peran, dan id melalui aksio dan membaca sessionStorage lokal sebelum elemen ditangguhkan dan memasukkannya ke dalam objek status (objek JSON khusus), lalu menyimpan objek status dan token di sessionStorage
Tentukan objek status di Vuex. Karena variabel yang ditentukan di Vuex setara dengan variabel lokal halaman, variabel tersebut akan hilang saat halaman di-refresh. Oleh karena itu, status di sini diambil dari sesi setelah menghilang, memastikan persistensi dan dinamika dari Vuex
