单体架构项目 后台管理系统 wan字长文 保姆及教学 Vue.js + Element UI 库 + node.js + axios + java +数据库 男女老少皆可使用(三)

简介: 单体架构项目 后台管理系统 wan字长文 保姆及教学 Vue.js + Element UI 库 + node.js + axios + java +数据库 男女老少皆可使用(三)

pom核心配置文件


一个 maven 工程都有一个 pom.xml 文件,通过 pom.xml 文件定义项目的信息、项目依赖、引入插件等等。


创建一个Servlet, 缺少jar包报错, 要解决问题,就是要将 servlet-api-xxx.jar 包放进来,作为 maven工程应当添加 servlet的坐标,从而导入它的 jar。


6e6473141011432493b2456c1ff6bef0.png


pom.xml 文件中引入依赖包的坐标


<dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
  </dependencies>


一个Maven工程就是由 groupId , artifactId 和 version 作为唯一标识, 我们在引用其他第三方库的时候,也是通过这3个变量确定。


1.png


maven 的依赖管理, 是对项目所依赖的 jar 包进行统一管理。


1.png


添加插件


添加编译插件, 设置 jdk 编译版本。使用 jdk11,需要设置编译版本为 11,这里需要使用 maven 的插件来设置

在pom中加入如下配置:


<!-- 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>


运行Maven项目


完善项目代码


ServletDemo01
@WebServlet("/demo01")
public class ServletDemo01 extends HttpServlet {
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
    System.out.println("hello maven!!!!");
 }
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
    doGet(req, resp);
}
}


index.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
  <h1>这是我的第一个maven工程!</h1>
</body>
</html>


配置tomcat ,部署项目


1.png


运行项目, 默认访问 index.jsp


1.png


访问Servlet

http://localhost:8080/hello_maven/demo01


后台系统搭建


课程管理模块功能分析


在本次的项目中,主要完成拉钩教育后台管理系统的 课程管理模块, 课程管理模块包含了添加课程,配置课程相关信息, 以及管理课程章节等功能,我们来一起看一下产品的原型图。


课程管理


实现以下功能:

展示课程列表

根据课程名和状态进行查询

新建课程

课程上架与下架

1.png


营销信息


营销信息,其实就是设置课程的详细信息

回显课程信息

修改课程信息,包含了图片上传

1.png


配置课时


配置课时指的是对课程下所属的章节与课时进行配置(一个课程对应多个章节,一个章节有多个课时)

以树形结构的下拉框形式, 展示课程对应的章节与课时信息

添加章节功能

修改章节功能

修改章节状态功能

1.png


课程管理模块表设计


课程 --> 章节 --> 课时 --> 媒体表暂时用不到

课程表中是要有课程id的,章节表中是要有章节id和课程id的,课时表中是要有课时id和章节id和课程id的,这样子三张表才可以建立关系。

1.png


环境搭建


创建项目


使用Maven快速构建工程, 项目名为: lagou_edu_home

选择maven ,直接next


1.png


填写项目相关信息,创建maven项目


1.png


当前maven项目还不是 一个web项目,进行一下改造 详情见上面内容。


项目目录


改造之后的目录


1.png


导入pom.xml


要以war包进行导入


<groupId>com.lagou</groupId>
  <artifactId>lagou_edu_home</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>


<!-- 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>
    <plugins>
      <!-- maven编译插件 -->
      <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>


依赖


<dependencies>
    <!-- Servlet -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
     </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13</version>
      <scope>test</scope>
    </dependency>
    <!--  Beanutils  -->
    <dependency>
      <groupId>commons-beanutils</groupId>
      <artifactId>commons-beanutils</artifactId>
      <version>1.8.3</version>
    </dependency>
    <!--  DBUtils  -->
    <dependency>
      <groupId>commons-dbutils</groupId>
      <artifactId>commons-dbutils</artifactId>
      <version>1.6</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>
    <!-- 数据库相关 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.37</version>
    </dependency>
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.0.9</version>
    </dependency>
    <!--fastjson工具包 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.3</version>
    </dependency>
    <dependency>
      <groupId>com.colobu</groupId>
3.3.4 导入工具类及配置文件
1) 导入连接池工具类以及数据库配置文件
<artifactId>fastjson-jaxrs-json-provider</artifactId>
      <version>0.3.1</version>
    </dependency>
    <!-- 文件上传 -->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>1.4</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.2.1</version>
    </dependency>
    <!--  Lombok -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.0</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>


导入工具类及配置文件


这里使用的是德鲁伊连接池,然后使用DBUtils进行数据库开发。


image.png


导入实体类


Lombok介绍

在项目中使用Lombok可以减少很多重复代码的书写。比如说getter/setter/toString等方法的编写。

IDEA中安装 lombok插件

打开IDEA的Setting –> 选择Plugins选项 –> 搜索lombok –> 点击安装 –> 安装完成重启IDEA


1.png


添加依赖


<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <version>1.18.0</version>
  <scope>provided</scope>
</dependency>


@Data:该注解使用在类上,该注解会提供 getter 、 setter 、 equals 、 hashCode 、toString 方法。

@JSONField(ordinal = 1) 使用 JSONField 设置ordinal的值,来对转换成的JSON数据进行排序


导入表对应的实体类


image.png


通用Servlet


需求分析


课程模块下有两个子模块:

课程模块

营销信息


配置课时(课程内容管理)


每个模块下都有很多的功能, 比如课程模块 的 新建课程, 上架课程,下架课程,根据课程名查询等等功能 , 每一个功能都是一个Servlet.

Servlet太多了,不好管理, 而且Servlet越多 服务器运行就越慢,资源消耗就越多.


Servlet对应模块


我们使用一个Servlet对应一个模块的方式进行开发


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
  <title>$Title$</title>
 </head>
 <body>
 <%--  一个模块对应一个Servlet  --%>
  <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>


/**
* 模拟课程模块 ,模块中有很多功能
* */
@WebServlet("/test")
public class TestServlet extends HttpServlet {
3.4.3 提高代码的可维护行
  /**
  * doGet()方法作为调度器 控制器,根据请求的功能不同,调用对应的方法
  *
  * */
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
    //1.获取参数
    //获取要调用的方法名
    String methodName = req.getParameter("methodName");
    //2.业务处理
    //判断 执行对应的方法
    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("访问的功能不存在!");
   }
 }
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
    doGet(req,resp);
 }
  /**
  * 2.模块对应的功能部分
  * */
  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("根据课程名称查询");
 }
}


提高代码的可维护行


我们可以使用反射去对代码进行优化, 提升代码的可维护性/可扩展性.




反射部分知识讲解 + 浏览器通过反射请求任务 单独抽离出来写到了单体架构项目栏目之下,后续内容也会规整到此栏目下。


相关文章
|
1月前
|
监控 Java API
如何使用Java语言快速开发一套智慧工地系统
使用Java开发智慧工地系统,采用Spring Cloud微服务架构和前后端分离设计,结合MySQL、MongoDB数据库及RESTful API,集成人脸识别、视频监控、设备与环境监测等功能模块,运用Spark/Flink处理大数据,ECharts/AntV G2实现数据可视化,确保系统安全与性能,采用敏捷开发模式,提供详尽文档与用户培训,支持云部署与容器化管理,快速构建高效、灵活的智慧工地解决方案。
|
25天前
|
设计模式 消息中间件 搜索推荐
Java 设计模式——观察者模式:从优衣库不使用新疆棉事件看系统的动态响应
【11月更文挑战第17天】观察者模式是一种行为设计模式,定义了一对多的依赖关系,使多个观察者对象能直接监听并响应某一主题对象的状态变化。本文介绍了观察者模式的基本概念、商业系统中的应用实例,如优衣库事件中各相关方的动态响应,以及模式的优势和实际系统设计中的应用建议,包括事件驱动架构和消息队列的使用。
|
1月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
56 4
|
1月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
1月前
|
Java BI API
Java Excel报表生成:JXLS库的高效应用
在Java应用开发中,经常需要将数据导出到Excel文件中,以便于数据的分析和共享。JXLS库是一个强大的工具,它基于Apache POI,提供了一种简单而高效的方式来生成Excel报表。本文将详细介绍JXLS库的使用方法和技巧,帮助你快速掌握Java中的Excel导出功能。
70 6
|
1月前
|
运维 自然语言处理 供应链
Java云HIS医院管理系统源码 病案管理、医保业务、门诊、住院、电子病历编辑器
通过门诊的申请,或者直接住院登记,通过”护士工作站“分配患者,完成后,进入医生患者列表,医生对应开具”长期医嘱“和”临时医嘱“,并在电子病历中,记录病情。病人出院时,停止长期医嘱,开具出院医嘱。进入出院审核,审核医嘱与住院通过后,病人结清缴费,完成出院。
98 3
|
1月前
|
Java API Apache
|
1月前
|
Java 数据库连接 数据库
深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销,从而显著提升系统性能
在Java应用开发中,数据库操作常成为性能瓶颈。本文通过问题解答形式,深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销,从而显著提升系统性能。文章介绍了连接池的优势、选择和使用方法,以及优化配置的技巧。
41 1
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
2月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。