单体架构项目 后台管理系统 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("根据课程名称查询");
 }
}


提高代码的可维护行


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




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


相关文章
|
3天前
|
前端开发
StringBoot+Vue实现游客或用户未登录系统前、可以浏览商品等信息、但是不能购买商品或者加入购物车等操作。登录系统显示用户的登录名(源码+讲解)
这篇文章介绍了使用StringBoot+Vue实现用户登录状态判断的方法,包括前端加载用户信息和后端设置session的源码示例。
|
4天前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
10 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
|
18天前
|
XML 分布式数据库 数据库
【计算机三级数据库技术】第13章 大规模数据库架构--附思维导图
文章概述了分布式数据库、并行数据库、云计算数据库架构和XML数据库的基本概念、目标、体系结构以及与传统数据库的比较,旨在提供对这些数据库技术的全面理解。
17 1
|
6天前
|
SQL 数据库
拒绝了对对象 ‘GetTips‘ (数据库 ‘vipsoft‘,架构 ‘dbo‘)的 EXECUTE 权限
拒绝了对对象 ‘GetTips‘ (数据库 ‘vipsoft‘,架构 ‘dbo‘)的 EXECUTE 权限
16 0
|
15天前
|
存储 JavaScript 前端开发
什么是 Vue 响应系统
【8月更文挑战第4天】什么是 Vue 响应系统
24 0
|
18天前
|
SQL 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(29)-- 快速构建系统参数管理界面-Vue3+ElementPlus
基于SqlSugar的开发框架循序渐进介绍(29)-- 快速构建系统参数管理界面-Vue3+ElementPlus
|
19天前
|
存储 开发框架 前端开发
Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理
Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理
|
19天前
|
开发框架 JavaScript 前端开发
Vue&Element开发框架中增加工作流处理,查看申请单中整合多个处理类型的处理
Vue&Element开发框架中增加工作流处理,查看申请单中整合多个处理类型的处理
|
19天前
|
开发框架 监控 前端开发
自定义Vue&Element组件,实现用户选择和显示
自定义Vue&Element组件,实现用户选择和显示
|
Java Go 开发工具