投稿
  1. 首页
  2. 随笔

简单的计划任务清单SSM项目40min完成——快速一文整合SSM框架构建的小Demo——内附Github地址

比特币挖矿客户端 • 2022-12-17 • 随笔 • 阅读 25

简单的计划任务清单SSM项目40min完成——快速一文整合SSM框架构建的小Demo——内附Github地址,第1张

简单的计划任务清单SSM项目40min完成——快速一文整合SSM框架构建的小Demo——内附Github地址

本篇内容：SSM框架构建简单的计划任务清单项目——项目实战

 文章专栏：SSM入门到入坟——一站式基础以及进阶栏目

最近更新：2022年1月20日 SpringMVC入门到入坟 一站式基础及进阶——囊括面试点与初学基础——从0到1 Servlet都会了那它就是小case

个人简介：一只二本院校在读的大三程序猿，本着注重基础，打卡算法，分享技术作为个人的经验总结性的博文博主，虽然可能有时会犯懒，但是还是会坚持下去的，如果你很喜欢博文的话，建议看下面一行~（疯狂暗示QwQ）

点赞  收藏 ⭐留言  一键三连 关爱程序猿，从你我做起

本文目录

SSM框架构建简单的计划任务清单项目——项目实战

写在前面1、项目展示

嬨1、页面布局展示嬨2、项目框架结构 2、项目开发环境以及技术栈

1、技术栈✨2、开发环境✨✨3、前置知识掌握✨ 3、计划清单项目

1、新建Maven项目 导入依赖2、设计数据库3、创建web工程 配置web.xml 装配Tomcat 4、编写DAO层与Service层 并且 整合

1、DAO层的编写 与 Spring和Mybatis整合2、编写Sercvice服务层 并且配置spring-service.xml 5、编写Controller层以及对应的前端页面

1、编写首页界面并为之稍微美化✨2、显示计划清单中的所有计划✨✨3、新增计划页面编写 与 显示全部 以及其Controller✨✨4、删除计划Controller层以及跳转处理✨✨5、修改计划Controller以及页面编写✨✨6、对日期计划查询（显示所查询日期需要完成的计划）✨✨✨7、整体的JSP页面（planList）✨✨8、测试项目 6、项目总结写在最后

SSM框架构建简单的计划任务清单项目——项目实战 写在前面

因为这不前几天二刷完SSM这三大框架么~我又没事闲的把我之前做过的简单整合项目又做了一遍，这次下的功夫不只是40多分钟把这个项目写完，同时这次我还利用了Git *** 作将其传至Github上了，也将其打成war包发布在了自己的服务器上，其实这应该利用Nginx负载均衡来部署毕竟我那个小服务器哪里承受的住呀，不过用来测试罢了，废话就这么多，剩下的话全写在这篇文章里了。

用来二刷快速过一遍SSM很有用的哦！ 如果有能力记得用Git *** 作上传到远程仓库，多学点分布式的 *** 作，后面也会用得到是吧！

如果不会Git请看这里：Git就该这么学~ 从入门到 *** 作 学不会 来打我~

Github项目地址：如有需要请自取~

HHXiaoFu/StudyListSSM.github.io: 简单的SSM项目30min快速入门上手

1、项目展示 嬨1、页面布局展示

计划清单进入页面：

计划清单所有计划显示页面：

计划清单中新增计划页面

计划清单中修改计划页面

嬨2、项目框架结构

工程结构图

├─src
│  ├─main
│  │  ├─java
│  │  │  └─com
│  │  │      └─alascanfu
│  │  │          ├─controller
│  │  │          │      PlanController.java
│  │  │          │
│  │  │          ├─dao
│  │  │          │      PlanMapper.java
│  │  │          │      PlanMapper.xml
│  │  │          │
│  │  │          ├─pojo
│  │  │          │      Plan.java
│  │  │          │
│  │  │          └─service
│  │  │                  PlanService.java
│  │  │
│  │  └─resources
│  │          applicationContext.xml
│  │          db.properties
│  │          mybatis-config.xml
│  │          spring-mvc.xml
│  │          spring-mybatis.xml
│  │          spring-service.xml
│  │
│  └─test
│      └─java
│              Test.java
└─web
    │  index.jsp
    │
    └─WEB-INF
        │  web.xml
        │
        └─jsp
                addPlan.jsp
                deletePlan.jsp
                planList.jsp
                updatePlan.jsp

idea中的功能结构图


2、项目开发环境以及技术栈 1、技术栈

项目所需掌握的技术栈

Spring+SpringMVC+MyBatis+MySQL+Bootstrap+Tomcat

✨2、开发环境✨

项目开发环境

这里小付用的是Spring5.3.9——MySQL8.0.25——Tomcat8.5.682

✨3、前置知识掌握✨

前置知识掌握

MySQL的最全常用SQL语句 —— 一文可以快速熟悉、回忆sql语句

Mybatis入门到入坟 一站式基础及进阶——囊括面试点与初学基础、框架分析——从0到1 不会私我 我手把手教你

Spring入门到入坟 一站式基础及进阶——囊括面试点与初学基础——源码分析——从0到1

Servlet入门到入坟 一站式基础及进阶——SpringMVC没它都不行 你确定不来看看——囊括初学基础以及进阶

Filter与Listener 快速上手到实战——一文通透——你真的理解了Filter与Listener了么

SpringMVC入门到入坟 一站式基础及进阶——囊括面试点与初学基础——从0到1 Servlet都会了那它就是小case

上述前置知识掌握，写的较为详细，初学者建议直接入手SSM与MySQL的相关知识

3、计划清单项目 1、新建Maven项目 导入依赖

步骤1：新建Maven项目 导入相关项目依赖并且设置pom.xml文件对Maven打包进行过滤

pom.xml



    4.0.0

    com.alascanfu
    StudyPlanSystem
    1.0-SNAPSHOT


    
        
        
            junit
            junit
            4.12
            test
        
        
        
            javax.servlet
            javax.servlet-api
            4.0.1
        
        
        
            javax.servlet.jsp
            jsp-api
            2.2
        
        
            jstl
            jstl
            1.2
        
        
        
            mysql
            mysql-connector-java
            8.0.26
        
        
        
            org.mybatis
            mybatis
            3.5.7
        
        
        
            com.alibaba
            druid
            1.2.6
        
        
        
            org.mybatis
            mybatis-spring
            2.0.6
        
        
        
            org.springframework
            spring-webmvc
            5.3.9
        
        
        
            org.springframework
            spring-jdbc
            5.3.9
        
        
        
            org.springframework
            spring-aop
            5.3.9
        
        
            org.aspectj
            aspectjweaver
            1.9.8.M1
        
    
    

    
        
            
                src/main/java
                
                    ***.properties
                
                true
            
            
                src/main/resources
                
                    ***.properties
                
                true
2、设计数据库

步骤2：设计数据库 并创建相关表 为其中添加部分数据用于进行测试

数据库的创建

CREATE DATAbase plansystem;

CREATE TABLE plan (
	`plan_id` int PRIMARY KEY NOT NULL AUTO_INCREMENT,
	`start_date` VARCHAR(64) NOT NULL,
	`end_date` VARCHAR(64) ,
	`context` VARCHAR(64) NOT NULL
)ENGINE=INNODB DEFAULT charset=utf8

为数据库添加部分数据用于后续测试

3、创建web工程 配置web.xml 装配Tomcat

步骤3：创建web工程，配置web.xml文件

创建好web工程之后切勿忘记配置Artifacts通过Tomcat构建服务器输出

注意点：此时一定要将所有的依赖都要Put into Output Root否则对应的依赖可能无法被正常加载。

web.xml



    
        springmvc
        org.springframework.web.servlet.DispatcherServlet
        
            contextConfigLocation
            classpath:applicationContext.xml
        
        1
    
    
        springmvc
        /
    
    
    
        encodingFilter
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            utf-8
        
    

    
        encodingFilter
        
public class Plan {
    private int planId;
    private String startDate;
    private String endDate;
    private String context;
    
    public Plan() {
    }
    
    public Plan(int planId, String startDate, String endDate, String context) {
        this.planId = planId;
        this.startDate = startDate;
        this.endDate = endDate;
        this.context = context;
    }
    
    public int getPlanId() {
        return planId;
    }
    
    public void setPlanId(int planId) {
        this.planId = planId;
    }
    
    public String getStartDate() {
        return startDate;
    }
    
    public void setStartDate(String startDate) {
        this.startDate = startDate;
    }
    
    public String getEndDate() {
        return endDate;
    }
    
    public void setEndDate(String endDate) {
        this.endDate = endDate;
    }
    
    public String getContext() {
        return context;
    }
    
    public void setContext(String context) {
        this.context = context;
    }
    
    @Override
    public String toString() {
        return "Plan{" +
            "planId=" + planId +
            ", startDate='" + startDate + ''' +
            ", endDate='" + endDate + ''' +
            ", context='" + context + ''' +
            '}';
    }
}

PlanMapper.java

public interface PlanMapper {
    //增加一个计划信息
    public int addPlan(Plan plan);
    //删除指定id的计划信息
    public int deletePlanById(@Param("planId") int id);
    //更新指定id的计划信息
    public int updatePlanById(Plan plan);
    //读取指定id的计划信息
    public Plan queryPlanById(int id);
    //获取全部的计划信息
    public List queryAllPlan();
    
    //获取选定日期中的所有计划
    public List queryDate(Plan plan);
}

PlanMapper.xml





    
        insert into plan(start_date,end_date,context)
        values (#{startDate},#{endDate},#{context})
    
    
        update plan
        set start_date = #{startDate},end_date = #{endDate},context = #{context}
        where plan_id = #{planId}
    

    
        delete from plan
        where plan_id = #{planId}
    

    
        select plan_id,start_date,end_date,context from plan

mybatis-config.xml

db.properties

jdbc.url=jdbc:mysql://localhost:3306/plansystem?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
jdbc.username=root
jdbc.password=123456
jdbc.driverClassName=com.mysql.cj.jdbc.Driver

这里需要注意哈Mybatis8.0以上就必须要增加时区了哦~

spring-mybatis.xml




    

    
        
        
        
        
    

    
        
        
         plans = planService.queryAllPlan();
        model.addAttribute("plans",plans);
        return "planList";
    }
}

用于测试的页面

<%--
  Created by IntelliJ IDEA.
  User: 帝白灬黎墨
  Date: 2022/1/20
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    planList


计划清单：${plans}

可以测试出对应的数据之后我们就需要进行美化页面了

这里应用到了部分Bootstrap的相关技术，栅格化系统挺实用的，不会的去看看官网，大概一个多小时就能速成

PlanList.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 帝白灬黎墨
  Date: 2022/1/20
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    planList
    



    
        
            
                
                    计划清单————显示所有计划
                
            
        
    

    
        
            
                
                    
                        计划编号
                        起始日期
                        截止日期
                        简要内容
                    
                
                
                    
                        
                            ${plan.planId}
                            ${plan.startDate}
                            ${plan.endDate}
                            ${plan.context}

显示如图：

✨3、新增计划页面编写 与 显示全部 以及其Controller✨

对刚才的planList页面进行修改增加一个按钮用于增加计划

planList.jsp

        
            新增计划
            显示全部

将其加入到表格之上

PlanController.java

@RequestMapping("/toAddPlan")
public String toAddPlan(){
    return "addPlan";
}
    
    
@RequestMapping("/addPlan")
public String addPlan(Plan plan){
    planService.addPlan(plan);
        return "redirect:/planSystem/allPlan";
}

addPlan.jsp

<%--
  Created by IntelliJ IDEA.
  User: 帝白灬黎墨
  Date: 2022/1/21
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    addPlan
    



    
        
            
                
                    计划清单————新增计划

进行测试——Test

对数据进行添加查看结果

上述的Controller层次 工作流向 ：当我们在planList页面进行点击新增计划时，我们客户端（浏览器）会向我们的Tomcat服务器发出请求，之后他会被前端控制器接收到Controller进行适配进行Controller层的相关处理，我们这里是通过/toAddPlan的请求到了addPlan页面进行添加数据，当我们添加完数据之后提交表单会再次到达Controller中的/addPlan将数据持久化到数据库中，然后重定向会planList页面显示数据库中现在的所有数据。

✨4、删除计划Controller层以及跳转处理✨

PlanController.java

    
    @RequestMapping("/deletePlan")
    public String deletePlan(int planId){
        planService.deletePlanById(planId);
        return "redirect:/planSystem/allPlan";
    }

对之前的前端页面进行美化以及编写

        
            
                
                    
                        计划编号
                        起始日期
                        截止日期
                        简要内容
                         *** 作
                    
                
                
                    
                        
                            ${plan.planId}
                            ${plan.startDate}
                            ${plan.endDate}
                            ${plan.context}
                            
                                修改
                                  |  
                                删除
✨5、修改计划Controller以及页面编写✨

PlanController.java

    @RequestMapping("/toUpdatePlan")
    public String toUpdatePlan(Plan plan,Model model){
        Plan qPlan = planService.queryPlanById(plan.getPlanId());
        model.addAttribute("QPlan",qPlan);
        return "updatePlan";
    }
    
    
    @RequestMapping("/updatePlan")
    public String updatePlan(Plan plan, Model model){
        planService.updatePlanById(plan);
        return "redirect:/planSystem/allPlan";
    }

这里需要一个由前端进行跳转的Controller处理用来保留数据使得用户无法修改计划编号，以及将计划传入之后后续更新完会重定向到所有计划页面

updatePlan.jsp

<%--
  Created by IntelliJ IDEA.
  User: 帝白灬黎墨
  Date: 2022/1/21
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    updatePlan
    



    
        
            
                
                    计划清单————修改计划
✨6、对日期计划查询（显示所查询日期需要完成的计划）✨

PlanController.java

    
    @RequestMapping("/queryDate")
    public String queryStartDate(Plan plan,Model model){
        List plans = planService.queryDate(plan);
        model.addAttribute("plans",plans);
        return "planList";
    }
✨✨7、整体的JSP页面（planList）✨✨

此时设计的JSP主页面：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 帝白灬黎墨
  Date: 2022/1/20
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    planList
    



    
        
            
                
                    计划清单————显示所有计划
                
            
        
    

    
        
            新增计划
            显示全部
        
        
            
        
    

    
        
            
                
                    
                        计划编号
                        起始日期
                        截止日期
                        简要内容
                         *** 作
                    
                
                
                    
                        
                            ${plan.planId}
                            ${plan.startDate}
                            ${plan.endDate}
                            ${plan.context}
                            
                                修改
                                  |  
                                删除
8、测试项目

新增计划

删除计划

查询指定日期需要完成的计划

6、项目总结

这是一个非常非常简单基础的SSM项目，很快上手，初学大概可能会花上1个小时甚至更多，但是二刷时，这个项目就信手拈来，小付大概写了40分钟左右就拿捏了这个项目了，是不错的一个小项目，大家也可以对其改善完成属于自己的小项目Demo，比如说什么分页查询啊，模糊查询什么的，我会将其传入Github上供大家参阅，一同学习，一起进步，加油，相信自己绝对没啥问题的。

写在最后

SSM框架复习告一段落~

后续小付会二刷SpringBoot 快速开发上手 !

以及期间会继续更新JVM *** 作系统 计算机网络 算法等相关知识

每天学一点，至少有所收获 有所得 这就是美好的一天吧~

最后的最后 xdm加油！！！ 为梦想而进 无怨无悔~

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5712243.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
比特币挖矿客户端 比特币挖矿客户端 一级用户组
0 0
上一篇 2022-12-17
下一篇 2022-12-18

发表评论

登录后才能评论

评论列表（0条）

保存