单体架构项目 后台管理系统 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月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
26天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
98 8
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
21 7
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
35 4
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
37 6
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
20天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
23 2
2024年5月node.js安装(winmac系统)保姆级教程