教育平台项目后台管理系统:介绍与搭建
項目架構
項目介紹
教育后臺管理系統是提供給相關業務人員使用的一個后臺管理系統,業務人員可以在這個后臺管理系統中,對課程信息、講師信息、 學員信息等數據進行維護。
課程管理模塊
課程管理
營銷信息 (營銷信息其實就是課程的具體信息)
配置課時(配置課時指的就是對課程內容的配置,課程內容就包括了章節信息和課時信息)
前后端分離開發
前后端分離已成為互聯網項目開發的業界標準使用方式,將前端和后端的開發進行解耦。并且前后端分離會為以后的大型分布式架構、微服務架構、多端化服務(各種客戶端,比如瀏覽器、車載終端、安卓、IOS 等)打下堅實的基礎。
前后端分離的核心思想就是前端HTML頁面通過AJAX調用后端的API接口,并通過JSON數據進行交互。
接口文檔
前后端分離開發方式需要由前后端工程師共同定義接口;編寫接口文檔之后都根據這個接口文檔進行開發,到項目結束前都要一直進行接口文檔的維護。
一個接口的描述至少包括下面幾項:
- 名稱: findCourseList
- 描述: 根據條件查詢課程信息
- URL: http://localhost:8080/edu_home/course/
- 請求方式: GET
- 請求參數 methodName:"findCourseList";
- 響應結果
前后端耦合的缺陷 (以 JSP 為例)
前后端分離的優勢
技術選型
前端技術選型
Vue.js - 是一套用于構建用戶界面的漸進式 JavaScript 框架
Element UI 庫 - 是餓了么前端出品的基于 Vue.js 的后臺組件庫,方便程序員進行頁面快速布局和構建
node.js - 運行在服務端的 JavaScript 運行環境
axios - 對 ajax 的封裝, 簡單來說就是 ajax 技術實現了局部數據的刷新,axios 實現了對 ajax 的封裝
后端技術選型
Web 層:Servlet 前端控制器,Filter 過濾器,BeanUtils 數據封裝
Service 層:業務邏輯處理
Dao 層:MySQL 數據庫,Druid 數據庫連接池,DBUtils 操作數據庫
項目開發環境
開發工具:后端 IntelliJ IDEA,前端 VS code,數據庫 SQLYog
開發環境:JDK 11,Maven 3.6.3,MySQL 5.7
Maven 項目管理工具
Maven 介紹
Maven 是一個跨平臺的項目管理工具。作為 Apache 組織的一個頗為成功的開源項目,其主要服務于基于 Java 平臺的項目創建,依賴管理和項目信息管理。Maven 是 Apache 的頂級項目,意為“專家,內行”,它是一個項目管理的工具,Maven 自身是純 java 開發的,可以使用 Maven 對 java 項目進行構建、依賴管理。
依賴管理:依賴指的就是項目中需要使用的第三方 Jar 包, 一個大一點的工程往往需要幾十上百個 Jar 包,按照之前的方式,每使用一種 Jar 就需要導入到工程中,還要解決各種 Jar 沖突的問題;而 Maven 可以對 Jar 包進行統一的管理,包括快速引入 Jar 包,以及對使用的 Jar 包進行統一的版本控制。
一鍵構建項目:之前創建項目需要確定項目的目錄結構,比如 src 存放 Java 源碼,resources 存放配置文件,還要配置環境比如 JDK 的版本等等,如果有多個項目就需要每次搞一套配置,十分麻煩;而 Maven 提供了一個標準化的 Java 項目結構,可以通過 Maven 快速創建一個標準的 Java 項目。
Maven 的使用
下載地址:http://maven.apache.org/download.cgi
Maven 下載后,將 Maven 解壓到一個沒有中文沒有空格的路徑下,解壓后目錄結構如下:
- bin:存放了 maven 的命令
- boot:存放了一些 maven 本身的引導程序,如類加載器等
- conf:存放了 maven 的一些配置文件,如 setting.xml 文件
- lib:存放了 maven 本身運行所需的一些 jar 包
配置 Maven 環境變量:配置 MAVEN_HOME ,變量值是 maven 安裝的路徑;將 MAVEN_HOME 添加到 Path 系統變量。
最后通過命令行運行 mvn -v 命令檢查 maven 是否安裝成功。
Maven 倉庫
Maven 中的倉庫是用來存放 maven 構建的項目和各種依賴的(Jar包)。
倉庫分類
- 本地倉庫:位于自己計算機中的倉庫,用來存儲從遠程倉庫或中央倉庫下載的插件和 jar 包。
- 遠程倉庫:需要聯網才可以使用的倉庫,阿里提供了一個免費的 maven 遠程倉庫。
- 中央倉庫:在 maven 軟件中內置一個遠程倉庫地址 http://repo1.maven.org/maven2,它是中央倉庫,服務于整個互聯網,它是由 Maven 團隊自己維護,里面存儲了非常全的 jar 包,它包含了世界上大部分流行的開源項目構件。
本地倉庫的配置
Maven 倉庫默認是在 C 盤的 .m2 目錄下,所以這里要重新配置到別的盤符中。
在 Maven 安裝目錄中,進入 conf 文件夾, 可以看到一個 settings.xml 文件;打開 settings.xml 文件,在 localRepository 標簽下配置倉庫目錄。
阿里云遠程倉庫配置
打開 settings.xml,找到 <mirrors> 標簽,將如下內容復制到 <mirrors> 中即可:
<mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url><mirrorOf>central</mirrorOf> </mirror>創建 Maven 項目
IDEA 中配置 Maven
打開 IDEA 創建一個新的 project,然后選擇 File --> Settings --> 搜素 maven,修改默認配置配置。
創建 Maven 工程
在 IDEA 中配置好 maven 后使用 maven 快速的去構建一個 Java Web 項目,不選擇 archetype。
Maven目錄說明:
src/main/java —— 存放項目的 .java 文件 src/main/resources —— 存放項目資源文件,如數據庫的配置文件 src/test/java —— 存放所有單元測試 .java 文件,如 JUnit 測試類 target —— 項目輸出位置,編譯后的 class 文件會輸出到此目錄 pom.xml —— maven 項目核心配置文件Maven 工程改造
當前創建的 maven 項目是一個 普通的 Java 項目,不是 web 項目,所以需要改造。
- 在 main 目錄下創建一個 webapp 文件夾
- 選擇 project Structure —> facets—> 點擊 + 號添加 web —> 選擇當前工程 hello_maven
- 根據新建的 webapp 目錄,來修改 Deployment 和 Resources 的路徑信息
pom.xml 核心配置文件
一個 maven 工程都有一個 pom.xml 文件,通過 pom.xml 文件定義項目的信息、項目依賴、引入插件等等。
- 此時,在項目中直接創建一個 Servlet,會出現缺少 jar 包報錯;要解決問題,就要將 servlet-api-xxx.jar 包放進來;而作為 maven 工程應當添加 servlet 的坐標,從而導入它的 jar。
- 在 pom.xml 文件中可以引入依賴包的坐標
一個 Maven 工程就是由 groupId,artifactId 和 version 作為唯一標識;所以在引用其他第三方庫的時候,也是通過這三個變量確定。
坐標的概念:在 maven 中坐標就是為了定位一個唯一確定的 jar 包;maven 擁有大量的構建,需要一個統一規范來唯一標識一個構建。
Maven 坐標主要組成 - 確定一個 jar 在互聯網位置:
groupId - 定義當前 Maven 組織名稱,通常是公司名 artifactId - 定義實際項目名稱 version - 定義當前項目的當前版本 packaging - 打包類型:打成 jar 包或者打成 war 包maven 的依賴管理,是對項目所依賴的 jar 包進行統一管理:
dependencies表示依賴關系 使用 <dependency> 聲明一個依賴后,Maven 就會自動下載這個依賴包坐標的來源方式:
- 輸入網址,進行查詢:https://mvnrepository.com/
- 使用 IDEA 在 pom.xml 文件中右鍵選擇 Generate --> Dependency --> 搜索輸入名稱
添加插件
在 pom.xml 中加入如下配置:
<project ...>...<!-- properties 是全局設置,可以設置整個 maven 項目的編譯器 JDK 版本 --><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><!-- 重點 --><maven.compiler.source>11</maven.compiler.source><maven.compiler.target>11</maven.compiler.target></properties><!-- 在 build 中需要指定一下項目的 JDK 編譯版本,maven 默認使用 1.5 版本進行編譯 --><!-- 注意 build 與 dependencies 是平級關系,標簽不要寫錯位置 --><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.8.1</version><configuration><release>11</release></configuration></plugin></plugins></build> </project>運行 Maven 項目
- ServletDemo01
- index.jsp
- 配置 Tomcat,部署項目。
- 運行項目, 默認訪問 index.jsp。
- 訪問 Servlet:http://localhost:8080/hello_maven/demo01。
Maven 的常用命令
生命周期:使用 maven 完成項目的構建,項目構建包括:清理、編譯、測試、部署等過程。
Maven 通過執行一些簡單命令即可實現生命周期的各個過程:
- mvn compile - 完成編譯操作 , 執行完畢后,會生成 target 目錄,該目錄中存放了編譯后的字節碼文件。
- mvn clean - 執行完畢后,會將 target 目錄刪除。
- mvn test - 執行完畢后,會在target目錄中生成三個文件夾:surefire、surefire-reports(測試報告)、test-classes(測試的字節碼文件)
- mvn package - 完成打包操作;執行完畢后,會在 target 目錄中生成一個文件,該文件可能是 jar 或 war。
- mvn install - 將打好的 jar 包安裝到本地倉庫的操作,執行完畢后,會在本地倉庫中出現安裝后的 jar 包,方便其他工程引用。
IDEA 界面左側有一個 maven 視圖,里面有對應的命令插件,可以執行上面表格中的命令。
依賴范圍介紹
A 依賴 B,需要在 A 的 pom.xml 文件中添加 B 的坐標,添加坐標時需要指定依賴范圍:
- compile - 編譯范圍,指 A 在編譯時依賴 B,此范圍為默認依賴范圍。編譯范圍的依賴會用在編譯、測試、運行,由于運行時需要所以編譯范圍的依賴會被打包。
- provided - 只有在當 JDK 或者一個容器已提供該依賴之后才使用, provided 依賴在編譯和測試時需要,在運行時不需要,比如:servlet API 被 Tomcat 容器提供。
- runtime - 在運行和測試系統的時候需要,但在編譯的時候不需要。比如:JDBC 的驅動包。由于運行時需要所以 runtime 范圍的依賴會被打包。
- test - 在編譯和運行時都不需要,它們只有在測試編譯和測試運行階段可用, 比如:Junit。由于運行時不需要所以 test 范圍依賴不會被打包。
- system - 與 provided 類似,但是必須顯式的提供一個對于本地系統中 JAR 文件的路徑,需要指定 system Path 磁盤路徑,system 依賴不推薦使用。
后臺系統搭建
課程管理模塊功能分析
課程管理:展示課程列表、根據課程名和狀態進行查詢、新建課程、課程上架與下架。
營銷信息:回顯課程信息、修改課程信息(包含了圖片上傳)。
配置課時(一個課程對應多個章節,一個章節有多個課時):以樹形結構的下拉框形式展示課程對應的章節與課時信息、添加章節功能、修改章節功能、修改章節狀態功能。
課程管理模塊表設計
一個課程信息表對多個課程章節表
一個課程章節表對多個課時信息表
一個課時信息表對一個課程媒體表
環境搭建
使用 Maven 快速構建工程。
導入 pom.xml。
導入工具類及配置文件。
導入實體類。
在項目中添加 Lombok 依賴 jar,Lombok 常用注解:
- @Getter/@Setter: 作用類上,生成所有成員變量的 getter / setter 方法
- @ToString : 作用于類,覆蓋默認的 toString() 方法,可以通過 of 屬性限定顯示某些字段,通過 exclude 屬性排除某些字段
- @AllArgsConstructor:生成全參構造器
- @NoArgsConstructor:生成無參構造器
- @Data: 該注解使用在類上,該注解會提供 getter、setter、equals、hashCode、toString 方法。
導入表對應的實體類。
通用 Servlet
每個模塊下都有很多的功能,比如課程模塊的新建課程,上架課程,下架課程,根據課程名查詢等等功能 ,每一個功能都是一個 Servlet。但是 Servlet 太多了不好管理,而且 Servlet 越多服務器運行就越慢,資源消耗就越多。
Servlet 對應模塊
使用一個 Servlet 對應一個模塊的方式進行開發
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>Title</title> </head> <body><a href="${pageContext.request.contextPath}/test?methodName=addCourse">新建課程</a><a href="${pageContext.request.contextPath}/test?methodName=findByName">根據課程名查詢</a><a href="${pageContext.request.contextPath}/test?methodName=findByStatus">根據課程狀態查詢</a> </body> </html>TestServlet
/*** 模擬課程模塊,模塊中有很多功能* */ @WebServlet("/test") public class TestServlet extends HttpServlet {/*** doGet() 方法作為調度器 控制器,根據請求的功能不同,調用對應的方法** */@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 獲取要調用的方法名String methodName = req.getParameter("methodName");// 判斷執行對應的方法if("addCourse".equals(methodName)){addCourse(req,resp);}else if("findByStatus".equals(methodName)){findByName(req,resp);}else if("findByStatus".equals(methodName)){findByStatus(req,resp);}else{System.out.println("訪問的功能不存在!");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}/*** 模塊對應的功能部分* */public void addCourse(HttpServletRequest req, HttpServletResponse resp){System.out.println("新建課程");}public void findByStatus(HttpServletRequest req, HttpServletResponse resp){System.out.println("根據狀態查詢");}public void findByName(HttpServletRequest req, HttpServletResponse resp){System.out.println("根據課程名稱查詢");} }提高代碼的可維護行
可以使用反射去對代碼進行優化,提升代碼的可維護性/可擴展性
/*** 對應的是課程管理模塊*/ @WebServlet("/test") public class TestServlet extends BaseServlet {/*** 根據請求功能不同,調用不同的方法,起到調度器的作用。*/@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 獲取參數:要訪問的方法名String methodName = req.getParameter("methodName");if (methodName != null) {// 使用反射方式提升代碼的可維護性try {// 獲取字節碼對象Class aClass = this.getClass();// 根據傳入的方法名獲取對應的方法對象Method method = aClass.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);method.invoke(this, req, resp);} catch (NoSuchMethodException | IllegalAccessException | InvocationTargetException e) {e.printStackTrace();System.out.println("請求的功能不存在");}}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}/*** 添加課程*/public void addCourse(HttpServletRequest req, HttpServletResponse resp) {System.out.println("新建課程");}/*** 根據課程名查詢*/public void findByName(HttpServletRequest req, HttpServletResponse resp) {System.out.println("根據課程名查詢");}/*** 根據課程狀態查詢*/public void findByStatus(HttpServletRequest req, HttpServletResponse resp) {System.out.println("根據課程狀態查詢");} }抽取通用的 BaseServlet
將反射相關的代碼抽取到一個類中 BaseServlet,讓 BaseServlet 去繼承 HTTPServlet
BaseServlet
public class BaseServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 獲取參數:要訪問的方法名String methodName = req.getParameter("methodName");if (methodName != null) {// 使用反射方式提升代碼的可維護性try {// 獲取字節碼對象Class aClass = this.getClass();// 根據傳入的方法名獲取對應的方法對象Method method = aClass.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);method.invoke(this, req, resp);} catch (NoSuchMethodException | IllegalAccessException | InvocationTargetException e) {e.printStackTrace();System.out.println("請求的功能不存在");}}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);} }TestServlet 繼承 BaseServlet
@WebServlet("/test") public class TestServlet extends BaseServlet {/*** 添加課程*/public void addCourse(HttpServletRequest req, HttpServletResponse resp) {System.out.println("新建課程");}/*** 根據課程名查詢*/public void findByName(HttpServletRequest req, HttpServletResponse resp) {System.out.println("根據課程名查詢");}/*** 根據課程狀態查詢*/public void findByStatus(HttpServletRequest req, HttpServletResponse resp) {System.out.println("根據課程狀態查詢");}}JSON
JSON 簡述
JSON (JavaScript Object Notation) - JavaScript 對象表示法(JSON 源于 JS)。
- JSON 是一種輕量級的數據交換格式
- JSON 采用完全獨立于語言的文本格式,不同的編程語言 JSON 數據是一致的
- JSON 易于人閱讀和編寫,也易于機器解析和生成(一般用于提升網絡傳輸速率)
對比 XML 與 JSON
XML - 可擴展標記語言,是一種用于標記電子文件使其具有結構性的標記語言。
JSON - 是一種輕量級的數據交換格式。
相同點: 它們都可以作為一種數據交換格式。
區別:
-
XML 是重量級的,JSON 是輕量級的,XML 在傳輸過程中比較占帶寬,JSON 占帶寬少,易于壓縮。
-
XML 和 JSON 都用在項目交互下,XML 多用于做配置文件,JSON 用于數據交互
-
JSON 獨立于編程語言存在,任何編程語言都可以去解析 JSON
JSON 語法格式
{"id" : 1,"name" : "張小明","age" : 25 }JSON 數據的轉換
前后端的 AJAX 通訊用的都是 JSON 格式,所以在開發的過程中經常會涉及到 JSON 數據的轉換
FastJson 介紹
Fastjson 是一個 Java 庫,可以將 Java 對象轉換為 JSON 格式,當然它也可以將 JSON 字符串轉換為 Java 對象。
FastJson 特點如下:
- 能夠支持將 java bean 序列化成 JSON 字符串,也能夠將 JSON 字符串反序列化成 Java bean
- 速度快
- 無其他包的依賴,使用比較方便
FastJson 的使用
在 Maven 項目中使用 FastJson 庫,需要提前在 Maven 的配置文件中添加此 FastJson 包的依賴
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.3</version> </dependency><dependency><groupId>com.colobu</groupId><artifactId>fastjson-jaxrs-json-provider</artifactId><version>0.3.1</version> </dependency>將 Java 對象轉換為 JSON 格式
定義一個名為 Person 的 JavaBean 類
public class Person {private String username;private int age;private String birthday;// getter and setter ... }可以使用 JSON.toJSONString() 將 Java 對象轉換換為 JSON 對象
public class TestFastJson {/*** Java 對象轉換為 Json*/@Testpublic void javaBeanToJSON() {// 創建 Person 對象Person person = new Person("小明", 23, DateUtils.getDateFormat());// 轉換為 JSON 數據String jsonString = JSON.toJSONString(person);System.out.println(jsonString);}/*** Java 中的集合轉換為 JSON*/@Testpublic void listToJSON() {// 創建 Person 對象集Person person1 = new Person("小明", 21, DateUtils.getDateFormat());Person person2 = new Person("小紅", 22, DateUtils.getDateFormat());Person person3 = new Person("小張", 23, DateUtils.getDateFormat());List<Person> personList = new ArrayList<>();Collections.addAll(personList, person1, person2, person3);String jsonString = JSON.toJSONString(personList);System.out.println(jsonString);} }Fastjson 中的 @JSONField 注解
@Data @AllArgsConstructor @NoArgsConstructor public class Person {// 可以通過 name 來指定輸出的 JSON 名稱@JSONField(name = "USERNAME", ordinal = 1)private String username;// 可以使用 ordinal 指定 JSON 的字段順序@JSONField(name = "AGE", ordinal = 2)private int age;// 使用 serialize 指定是否進行序列化@JSONField(ordinal = 3, serialize = true)private String birthday; }將 JSON 字符串轉換為 Java 對象
/*** JSON 轉換為對象*/ @Test public void JSONtoJavaBean() {String json = "{\"USERNAME\":\"小明\",\"AGE\":23,\"birthday\":\"2020-08-22 23:15:52\"}";Person person = JSON.parseObject(json, Person.class);System.out.println(person); }/*** JSON 轉換為集合*/ @Test public void JSONtoList() {String json = "[{\"USERNAME\":\"小明\",\"AGE\":21,\"birthday\":\"2020-08-22 23:17:34\"},{\"USERNAME\":\"小紅\",\"AGE\":22,\"birthday\":\"2020-08-22 23:17:34\"},{\"USERNAME\":\"小張\",\"AGE\":23,\"birthday\":\"2020-08-22 23:17:34\"}]\n";List<Person> personList = JSON.parseArray(json, Person.class);System.out.println(personList); }總結
以上是生活随笔為你收集整理的教育平台项目后台管理系统:介绍与搭建的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梅科尔工作-王少鹏-鸿蒙笔记3
- 下一篇: 教育平台项目后台管理系统:接口文档