StudentCourseSystem
1.0.0
- لقد قمت ببناء قاعدة البيانات وأجزاء الواجهة الخلفية، وقمت بإجراء تغييرات وتحسينات بناءً على مشروع الواجهة الأمامية لمنطق الأعمال لجعلها أكثر ملاءمة لقاعدة البيانات الخاصة بي
- تم نشر المشروع على السحابة: نظام اختيار المقرر الدراسي للطلاب
- هذه هي المرة الأولى التي أستخدم فيها vue-cli لتطوير مشروع. إذا كان هناك أي عدم دقة أو أخطاء في كود المشروع التفصيلي، فنحن نرحب بك للإشارة إليه ومناقشته معًا.
- إذا كان هذا المشروع مفيدًا لك، فيرجى إعطاء هذا المشروع نجمة ومتابعة المؤلف
Spring+SpringMVC+Mybatis+Mybatis-Plus (SSM)
Spring هو إطار عمل مفتوح المصدر تم إنشاؤه لحل تعقيدات تطوير تطبيقات المؤسسات. إحدى المزايا الرئيسية لإطار العمل هي بنيته ذات الطبقات، والتي تسمح للمستخدمين باختيار المكونات التي سيتم استخدامها مع توفير إطار عمل متكامل لتطوير تطبيقات J2EE. يستخدم Spring JavaBeans الأساسية لإنجاز الأشياء التي لم تكن ممكنة في السابق إلا باستخدام EJBs. ومع ذلك، فإن استخدامات Spring لا تقتصر على التطوير من جانب الخادم. يمكن لأي تطبيق Java الاستفادة من Spring من حيث البساطة وقابلية الاختبار والاقتران السائب. جوهر الربيع هو انعكاس التحكم (IoC) وتوجيه الجانب (AOP). ببساطة، Spring عبارة عن إطار مفتوح المصدر متعدد الطبقات وخفيف الوزن لـ JavaSE/EE.
SpringMVC عبارة عن وحدة نمطية لإطار عمل SpringMVC ولا تحتاج إلى التكامل من خلال طبقة تكامل وسيطة. SpringMVC هو إطار ويب يعتمد على MVC. يحتوي SpringMVC على وحدة تحكم تعمل مثل Struts معلمات طبقة الخدمة
MyBatis هو إطار عمل ممتاز لطبقة الثبات يدعم SQL المخصص والإجراءات المخزنة ورسم الخرائط المتقدمة. يقوم MyBatis بإلغاء جميع تعليمات JDBC تقريبًا وعمل إعدادات المعلمات والحصول على مجموعات النتائج. يمكن لـ MyBatis تكوين وتعيين الأنواع البدائية والواجهات وJava POJOs (كائنات Java القديمة البسيطة) في السجلات في قاعدة البيانات من خلال XML البسيط أو التعليقات التوضيحية. MyBatis-Plus (MP للاختصار) هي أداة تحسين لـ MyBatis، وهي تعمل فقط على التحسين دون إجراء أي تغييرات، وذلك لتبسيط عملية التطوير وتحسين الكفاءة.
طبقة الثبات (الكيان) + طبقة الوصول إلى البيانات (داو) + طبقة منطق الأعمال (الخدمة) + طبقة التحكم (وحدة التحكم)
الفهم التقريبي هو إعادة تغليف واحد أو أكثر من DAOs في الخدمة، وبعد التغليف لن تكون عملية ذرية، فهي تتطلب التحكم في الأشياء وتكون مسؤولة عن إدارة وظائف محددة.
هنا، تتم كتابة واجهات الأعمال للمسؤولين والدورات والمعلمين والطلاب وفقًا للاحتياجات. في فئة تنفيذ الأعمال، تتم كتابة الرموز بناءً على طبقة 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 هو إطار عمل جافا سكريبت شائع للواجهة الأمامية، وهو إطار عمل جافا سكريبت مفتوح المصدر لإنشاء واجهات المستخدم وإطار تطبيق الويب لإنشاء تطبيقات من صفحة واحدة. إطار عمل Vue خفيف الوزن، وسهل التعلم، ويحتوي على ربط البيانات في اتجاهين، والمكونات، وفصل البيانات والبنية، وDOM الافتراضي، وسرعة التشغيل السريعة، كما يتمتع Vue بنظام بيئي قوي.
العنصر عبارة عن مجموعة من مكتبات مكونات سطح المكتب المستندة إلى Vue 2.0 التي طورتها شركة Hungry؟
v-charts عبارة عن مكون أيقونات مغلف يعتمد على Vue2.0 وEcharts ويحتاج فقط إلى توفير تنسيق بيانات مناسب لكل من الطرفين الأمامي والخلفي بشكل موحد وتعيين عناصر تكوين بسيطة لإنشاء مخططات مشتركة.
من أجل تسهيل انتقال المكونات بين الصفحات الرئيسية، يتم وضع مكون تسجيل الدخول في مشروع فرعي منفصل vue، ويتم تكوين ملفات html للدخول لتسجيل الدخول والصفحة الرئيسية في نفس الوقت لتسهيل تحويل مشروع تسجيل الدخول vue إلى مشروع vue على الصفحة الرئيسية.
منذ أن واجهت ظواهر عبر المجال عند إكمال التطوير الخلفي، قمت بتكوين وكيل شبكة وأضفت البادئة "/api" قبل كل طلب في axios. يراقب الوكيل هنا الطلب بالبادئة "/api" ويعيد توجيه الطلب إلى الوكيل انتقل إلى الخادم الخلفي واستبدل "/api" الأصلي بفارغ
إعادة توجيه موحدة للطرق غير المتطابقة إلى مكون noFound
الصفحة الرئيسية
تستخدم صفحة الطالب التوجيه المتداخل. مكون الطالب هو المكون الأصلي. تحتوي المكونات الفرعية الأربعة على أربع وظائف: الاستعلام عن جدول الفصل الدراسي (studentCourse)، واختيار المقرر الدراسي (chooseClass)، وإدارة الدرجات (studentGrade)، وتعديل المعلومات الشخصية (studentInfo).
تستخدم صفحة المعلم التوجيه المتداخل، ومكون المعلم هو المكون الأصلي، والمكونات الفرعية الستة لها ست وظائف: الاستعلام عن الجدول الزمني (teacherCourse)، وإضافة المقررات الدراسية (addCourse)، وإضافة وقت الفصل (addClass)، وإدارة الدرجات (manageGrade)، إدخال درجة دورة معينة (manageGrade/:cid، يمثل المعلم cid معرف الدورة) وتعديل المعلومات الشخصية (teacherInfo)
تستخدم صفحة المسؤول التوجيه المتداخل. مكون الإدارة هو المكون الأصلي والمكونات الفرعية الخمسة لها خمس وظائف: نظرة عامة (schoolInfo)، وإدارة الطلاب (manageStudent)، وإدارة المعلمين (manageTeacher)، وإدارة الأقسام (manageFacility).
وظيفة ربط التوجيه من قبل، عندما كنت أكتب واجهة تسجيل الدخول الخلفية، استجبت بسلسلة uuid وقمت بتمريرها إلى sessionStorage كرمز تسجيل دخول للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول. الوظيفة هنا هي التحقق من الرمز المميز المخزن في sessionStorage قبل التوجيه وإعادة التوجيه، إذا كان موجودًا، فقم بتحريره، وإذا لم يكن موجودًا، فقم بإعادة التوجيه إلى مكون تسجيل الدخول من خلال ملف إدخال html الذي تم تكوينه أعلاه.
بعد اكتمال تسجيل الدخول، سينتقل إلى مشروع Vue للصفحة الرئيسية في المكون الأصلي (App.vue) لمشروع الصفحة الرئيسية، أحصل على اسم المستخدم والدور والمعرف من خلال axios وأقرأ تخزين الجلسة المحلية قبل العنصر. تم تعليقه ووضعه في كائن الحالة (كائن JSON مخصص)، ثم قم بتخزين كائن الحالة والرمز المميز في sessionStorage
تحديد كائن الحالة في Vuex نظرًا لأن المتغيرات المحددة في Vuex تعادل المتغيرات المحلية للصفحة، فإنها ستختفي عند تحديث الصفحة، لذلك يتم أخذ الحالة هنا من الجلسة بعد الاختفاء، مما يضمن الثبات والديناميكية من استخدام فيوكس
