学习SSM的记录（八）-- SSM整合项目《任务列表案例》

前端程序搭建和运行

项目预览

接口分析

1.学习计划分页查询

需求：查询对应数据页数据

uri：schedule/{pageSize}/{currentPage}

请求方式：get

响应数据：json

    {"code":200,"flag":true,"data":{//本页数据data:[{id:1,title:'学习java',completed:true},{id:2,title:'学习html',completed:true},{id:3,title:'学习css',completed:true},{id:4,title:'学习js',completed:true},{id:5,title:'学习vue',completed:true}], //分页参数pageSize:5, // 每页数据条数 页大小total:0 ,   // 总记录数currentPage:1 // 当前页码}}

2.学习计划删除

需求：根据id删除数据

uri：schedule/{id}

请求方式：delete

响应数据：json

{"code":200,"flag":true,"data":null
}

3.学习计划保存

需求：添加数据

uri：schedule

请求方式：post

请求体数据：json

    {title: '',completed: false}

响应数据：json

    {"code":200,"flag":true,"data":null}

4.学习计划修改

需求：根据id修改数据

uri：schedule

请求方式：put

请求体数据：json

    {id: 1,title: '',completed: false}

响应数据：json

    {"code":200,"flag":true,"data":null}

前端环境搭建

后端项目部署软件tomcat，前端项目部署软件node

后端项目依赖管理工具maven，前端项目依赖管理工具npm

node安装链接：16.16.0

Index of /download/release/v16.16.0/icon-default.png?t=N7T8https://nodejs.org/download/release/v16.16.0/?spm=wolai.workspace.0.0.3b5838dbCdPrG8cmd窗口输入node -v 和 npm -v 能看到nodejs和npm版本号就说明安装成功了。

npm使用：

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven 。

npm配置阿里镜像：

                npm config set registry https://registry.npmjs.org/        

更新npm版本：node16.16.0对应的npm版本太低，需要升级

                npm install -g npm@9.6.6

npm下载依赖命令：

                npm install 依赖名 / npm install 依赖名@版本

前端项目可以使用vscode编写

导入前端依赖

        https://pan.baidu.com/s/1YbdK5gCv_rx-StffDeNYIQ?pwd=jcp9

使用vscode打开项目

打开vscode终端

npm install //安装依赖
npm run dev //运行测试

后端程序实现和测试

后端环境搭建

数据库脚本
create database mybatis_example;use mybatis_example;CREATE TABLE schedule (id INT NOT NULL AUTO_INCREMENT,title VARCHAR(255) NOT NULL,completed BOOLEAN NOT NULL,PRIMARY KEY (id)
);INSERT INTO schedule (title, completed)
VALUES('学习java', true),('学习Python', false),('学习C++', true),('学习JavaScript', false),('学习HTML5', true),('学习CSS3', false),('学习Vue.js', true),('学习React', false),('学习Angular', true),('学习Node.js', false),('学习Express', true),('学习Koa', false),('学习MongoDB', true),('学习MySQL', false),('学习Redis', true),('学习Git', false),('学习Docker', true),('学习Kubernetes', false),('学习AWS', true),('学习Azure', false);
创建web项目

项目名：ssm-schedule

导入依赖
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>com.qiu</groupId>  <artifactId>ssm-schedule</artifactId>  <version>1.0-SNAPSHOT</version>  <packaging>war</packaging><properties><spring.version>6.0.6</spring.version><jakarta.annotation-api.version>2.1.1</jakarta.annotation-api.version><jakarta.jakartaee-web-api.version>9.1.0</jakarta.jakartaee-web-api.version><jackson-databind.version>2.15.0</jackson-databind.version><hibernate-validator.version>8.0.0.Final</hibernate-validator.version><mybatis.version>3.5.11</mybatis.version><mysql.version>8.0.25</mysql.version><pagehelper.version>5.1.11</pagehelper.version><druid.version>1.2.8</druid.version><mybatis-spring.version>3.0.2</mybatis-spring.version><jakarta.servlet.jsp.jstl-api.version>3.0.0</jakarta.servlet.jsp.jstl-api.version><logback.version>1.2.3</logback.version><lombok.version>1.18.26</lombok.version><maven.compiler.source>17</maven.compiler.source>  <maven.compiler.target>17</maven.compiler.target>  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties><!--需要依赖清单分析:springioc/dispring-context / 6.0.6jakarta.annotation-api / 2.1.1  jsr250aopspring-aspects / 6.0.6txspring-tx  / 6.0.6spring-jdbc / 6.0.6springmvcspring-webmvc 6.0.6jakarta.jakartaee-web-api 9.1.0jackson-databind 2.15.0hibernate-validator / hibernate-validator-annotation-processor 8.0.0.Finalmybatismybatis  / 3.5.11mysql    / 8.0.25pagehelper / 5.1.11整合需要加载spring容器 spring-web / 6.0.6整合mybatis   mybatis-spring x x数据库连接池    druid / xlombok        lombok / 1.18.26logback       logback/ 1.2.3--><dependencies><!--spring pom.xml依赖--><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>${spring.version}</version></dependency><dependency><groupId>jakarta.annotation</groupId><artifactId>jakarta.annotation-api</artifactId><version>${jakarta.annotation-api.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aop</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>${spring.version}</version></dependency><!--springmvcspring-webmvc 6.0.6jakarta.jakartaee-web-api 9.1.0jackson-databind 2.15.0hibernate-validator / hibernate-validator-annotation-processor 8.0.0.Final--><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>${spring.version}</version></dependency><dependency><groupId>jakarta.platform</groupId><artifactId>jakarta.jakartaee-web-api</artifactId><version>${jakarta.jakartaee-web-api.version}</version><scope>provided</scope></dependency><!-- jsp需要依赖! jstl--><dependency><groupId>jakarta.servlet.jsp.jstl</groupId><artifactId>jakarta.servlet.jsp.jstl-api</artifactId><version>${jakarta.servlet.jsp.jstl-api.version}</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>${jackson-databind.version}</version></dependency><!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator --><dependency><groupId>org.hibernate.validator</groupId><artifactId>hibernate-validator</artifactId><version>${hibernate-validator.version}</version></dependency><!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator-annotation-processor --><dependency><groupId>org.hibernate.validator</groupId><artifactId>hibernate-validator-annotation-processor</artifactId><version>${hibernate-validator.version}</version></dependency><!--mybatismybatis  / 3.5.11mysql    / 8.0.25pagehelper / 5.1.11--><!-- mybatis依赖 --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>${mybatis.version}</version></dependency><!-- MySQL驱动 mybatis底层依赖jdbc驱动实现,本次不需要导入连接池,mybatis自带! --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql.version}</version></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>${pagehelper.version}</version></dependency><!-- 整合第三方特殊依赖 --><dependency><groupId>org.springframework</groupId><artifactId>spring-web</artifactId><version>${spring.version}</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>${mybatis-spring.version}</version></dependency><!-- 日志 ， 会自动传递slf4j门面--><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><version>${logback.version}</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>${lombok.version}</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>${druid.version}</version></dependency></dependencies></project>
配置类

控制层配置类

package com.qiu.config;import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@ComponentScan("com.qiu.controller")    //包扫描
@Configuration  //配置类标明
@EnableWebMvc   //json，HandlerAdapter，HandlerMapping
public class WebConfig implements WebMvcConfigurer/*配置springmvc组件*/ {}

业务层配置类

package com.qiu.config;import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.EnableAspectJAutoProxy;
import org.springframework.jdbc.datasource.DataSourceTransactionManager;
import org.springframework.transaction.TransactionManager;
import org.springframework.transaction.annotation.EnableTransactionManagement;import javax.sql.DataSource;@Configuration
@EnableAspectJAutoProxy //AOP
@EnableTransactionManagement    //TX
@ComponentScan("com.qiu.service")
public class ServiceConfig {public TransactionManager transactionManager(DataSource dataSource){DataSourceTransactionManager dataSourceTransactionManager = new DataSourceTransactionManager();dataSourceTransactionManager.setDataSource(dataSource);return dataSourceTransactionManager;}
}

持久层配置类

package com.qiu.config;import com.github.pagehelper.PageInterceptor;
import org.apache.ibatis.logging.slf4j.Slf4jImpl;
import org.apache.ibatis.session.AutoMappingBehavior;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.mapper.MapperScannerConfigurer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import javax.sql.DataSource;
import java.util.Properties;@Configuration
public class MapperConfig {@Beanpublic SqlSessionFactoryBean sqlSessionFactoryBean(DataSource dataSource){SqlSessionFactoryBean sqlSessionFactoryBean = new SqlSessionFactoryBean();sqlSessionFactoryBean.setDataSource(dataSource);org.apache.ibatis.session.Configuration configuration=new org.apache.ibatis.session.Configuration();
//        开启驼峰映射configuration.setMapUnderscoreToCamelCase(true);
//        日志输出configuration.setLogImpl(Slf4jImpl.class);
//        开启resultMap多层自动映射configuration.setAutoMappingBehavior(AutoMappingBehavior.FULL);sqlSessionFactoryBean.setConfiguration(configuration);sqlSessionFactoryBean.setTypeAliasesPackage("com.qiu.pojo");PageInterceptor pageInterceptor = new PageInterceptor();Properties properties=new Properties();properties.setProperty("helperDialect","mysql");pageInterceptor.setProperties(properties);sqlSessionFactoryBean.addPlugins(pageInterceptor);return sqlSessionFactoryBean;}@Beanpublic MapperScannerConfigurer mapperScannerConfigurer(){MapperScannerConfigurer mapperScannerConfigurer = new MapperScannerConfigurer();mapperScannerConfigurer.setBasePackage("com.qiu.mapper");return mapperScannerConfigurer;}}

package com.qiu.config;import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;import javax.sql.DataSource;@Configuration
@PropertySource("classpath:jdbc.properties")
public class DataSourceConfig {@Value("${jdbc.username}")private String username;@Value("${jdbc.password}")private String password;@Value("${jdbc.url}")private String url;@Value("${jdbc.driver}")private String driver;@Beanpublic DataSource dataSource() {DruidDataSource druidDataSource = new DruidDataSource();druidDataSource.setUsername(username);druidDataSource.setPassword(password);druidDataSource.setUrl(url);druidDataSource.setDriverClassName(driver);return druidDataSource;}
}

ioc初始化配置类

package com.qiu.config;import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;public class IocInitConfig extends AbstractAnnotationConfigDispatcherServletInitializer{@Overrideprotected Class<?>[] getRootConfigClasses() {return new Class[]{ServiceConfig.class,MapperConfig.class, DataSourceConfig.class};}@Overrideprotected Class<?>[] getServletConfigClasses() {return new Class[]{WebConfig.class};}@Overrideprotected String[] getServletMappings() {return new String[]{"/"};}
}
创建项目业务相关类

pojo类：Schedule

包：com.qiu.pojo

@Data
public class Schedule {private Integer id;private String title;private Boolean completed;
}

返回结果类：R

包：com.qiu.utils


public class R {private int code = 200; //200成功状态码private boolean flag = true; //返回状态private Object data;  //返回具体数据public  static R ok(Object data){R r = new R();r.data = data;return r;}public static R  fail(Object data){R r = new R();r.code = 500; //错误码r.flag = false; //错误状态r.data = data;return r;}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public boolean isFlag() {return flag;}public void setFlag(boolean flag) {this.flag = flag;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}
}

分页实体类：PageBean

包：com.qiu.utils

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {private int currentPage;   // 当前页码private int pageSize;      // 每页显示的数据量private long total;    // 总数据条数private List<T> data;      // 当前页的数据集合
}
功能实现
创建三层架构对应的类

controller层：java.com.qiu.controller.ScheduleController

@CrossOrigin
@RequestMapping("schedule")
@RestController
public class ScheduleController
{@Autowiredprivate ScheduleService scheduleService;@GetMapping("/{pageSize}/{currentPage}")public R showList(@PathVariable(name = "pageSize") int pageSize, @PathVariable(name = "currentPage") int currentPage){PageBean<Schedule> pageBean = scheduleService.findByPage(pageSize,currentPage);return  R.ok(pageBean);}@PostMappingpublic R saveSchedule(@RequestBody Schedule schedule){scheduleService.saveSchedule(schedule);return R.ok(null);}@DeleteMapping("/{id}")public R removeSchedule(@PathVariable Integer id){scheduleService.removeById(id);return R.ok(null);}@PutMappingpublic R changeSchedule(@RequestBody Schedule schedule){scheduleService.updateSchedule(schedule);return R.ok(null);}
}

service层：java.com.qiu.service.ScheduleService接口

                  java.com.qiu.service.impl.ScheduleServiceImpl

public interface ScheduleService {public PageBean<Schedule> findByPage(int pageSize, int currentPage);public void updateSchedule(Schedule schedule);public void removeById(Integer id);public void saveSchedule(Schedule schedule);
}

@Slf4j
@Service
public class ScheduleServiceImpl  implements ScheduleService {@Autowiredprivate ScheduleMapper scheduleMapper;/*** 分页数据查询,返回分页pageBean** @param pageSize* @param currentPage* @return*/@Overridepublic PageBean<Schedule> findByPage(int pageSize, int currentPage) {//1.设置分页参数PageHelper.startPage(currentPage,pageSize);//2.数据库查询List<Schedule> list = scheduleMapper.queryPage();//3.结果获取PageInfo<Schedule> pageInfo = new PageInfo<>(list);//4.pageBean封装PageBean<Schedule> pageBean = new PageBean<>(pageInfo.getPageNum(),pageInfo.getPageSize(),pageInfo.getTotal(),pageInfo.getList());log.info("分页查询结果:{}",pageBean);return pageBean;}/*** 保存学习计划** @param schedule*/@Overridepublic void saveSchedule(Schedule schedule) {scheduleMapper.insert(schedule);}/*** 移除学习计划** @param id*/@Overridepublic void removeById(Integer id) {scheduleMapper.delete(id);}/*** 更新学习计划** @param schedule*/@Overridepublic void updateSchedule(Schedule schedule) {scheduleMapper.update(schedule);}}

mapper层：java.com.qiu.mapper.ScheduleMapper接口

                   resources/com/qiu/mapper/ScheduleMapper.xml

public interface ScheduleMapper {List<Schedule> queryPage();void insert(Schedule schedule);void delete(Integer id);void update(Schedule schedule);}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qiu.mapper.ScheduleMapper"><select id="queryPage" resultType="schedule">select * from schedule</select><insert id="insert">insert into schedule (title, completed)values(#{title}, #{completed});</insert><delete id="delete">delete from schedule where id = #{id}</delete><update id="update">update schedule set title = #{title} , completed = #{completed}where id = #{id}</update>
</mapper>

前后端联调

后端tomcat项目设置

启动前后端项目自行测试。

测试后代码无误

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/539958.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

未解决的问题：字符数组中元素的个数

未解决的问题：字符数组中元素的个数

情形1&#xff1a; #include<stdio.h> int main() {int arr_int1[10];int arr_int2[]{1,2,3,4,5};char arr_char1[10];char arr_char2[]"world";char arr_char3[]{h,e,l,l,o};int i;i0;while(arr_char2[i]!\0){i;}printf("%d\n",i);i0;while(arr_ch…
阅读更多...
【python】centos 8新装python3.10.0

【python】centos 8新装python3.10.0

1.python源码包准备 2.gcc环境安装 如果系统已具备&#xff0c;可以略过。 有的已经自带了gcc&#xff0c;但是如果编译时启动优化的话&#xff0c;如果gcc版本过老就必须要升级。 3.make环境安装 如果系统已具备&#xff0c;可以略过。 4.更新openssl版本&#xff08;很重…
阅读更多...
【Java多线程】关于多线程的一些案例 —— 单例模式中的饿汉模式和懒汉模式以及阻塞队列

【Java多线程】关于多线程的一些案例 —— 单例模式中的饿汉模式和懒汉模式以及阻塞队列

目录 1、单例模式 1.1、饿汉模式 2.1、懒汉模式 2、阻塞队列 2.1、BlockingQueue 阻塞队列数据结构 1、单例模式 对框架和设计模式的简单理解就是&#xff0c;这两者都是“大佬”设计出来的&#xff0c;让即使是一个代码写的不太好的“菜鸡程序员”也能写出还可以的代码…
阅读更多...
“计算机行业的未来：政策导向、技术创新与发展前景“

“计算机行业的未来：政策导向、技术创新与发展前景“

从政府工作报告探计算机行业发展 政府工作报告作为政府工作的全面总结和未来规划&#xff0c;不仅反映了国家整体的发展态势&#xff0c;也为各行各业提供了发展的指引和参考。随着信息技术的快速发展&#xff0c;计算机行业已经成为推动经济社会发展的重要引擎之一。因此&…
阅读更多...
uniapp报错：[获取文件失败] 以下文件已被配置忽略打包上传，模拟器无法获取...

uniapp报错：[获取文件失败] 以下文件已被配置忽略打包上传，模拟器无法获取...

uniapp分包控制台报错&#xff1a; Error: module ‘pagesMember/address/address.js’ is not defined, require args is ‘pagesMember/address/address.js’ 以及 [获取文件失败] 以下文件已被配置忽略打包上传&#xff0c;模拟器无法获取&#xff1a; pagesMember/address/…
阅读更多...
基于ElasticSearch存储海量AIS数据：AIS数据索引机制篇

基于ElasticSearch存储海量AIS数据：AIS数据索引机制篇

文章目录 引言I 预备知识1.1 索引结构1.2 AIS信息项II AIS数据索引2.1 AIS数据静态数据索引2.2 AIS数据动态信息索引2.3 引入静态信息的AIS数据轨迹信息索引引言 AIS数据信息根据其不同更新频率可分为静态和动态信息。索引结构设计包含了静态、动态和轨迹信息索引。同时，为了…
阅读更多...
ES6：箭头函数中的this指向问题

ES6：箭头函数中的this指向问题

普通函数中的this指向函数的调用者 例子&#xff1a; 黑马程序员的说法&#xff1a;箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this 尚硅谷的说法&#xff1a;this始终指向函数声明时所在作用域下的this的值 通俗理解就是箭头函数中找this&…
阅读更多...
Qt-QPainter drawText方法不同重载之间的区别

Qt-QPainter drawText方法不同重载之间的区别

QPainter类的drawText方法有如下重载&#xff1a; void drawText(const QPointF &position, const QString &text) void drawText(const QPoint &position, const QString &text) void drawText(int x, int y, const QString &text) void drawText(co…
阅读更多...
win11系统qtcreator构建运行程序首次启动卡顿（win11首次启动应用程序卡顿）

win11系统qtcreator构建运行程序首次启动卡顿（win11首次启动应用程序卡顿）

首先可以参考一下这个博客&#xff1a;为什么win11系统开机后第一次打开一个软件很慢&#xff0c;关闭进程重新打开速度就正常了&#xff0c;该怎样解决呢&#xff1f; - 知乎 经过上述博客&#xff0c;但是我没有完全解决&#xff0c;这里说一下自己的方法&#xff1a; 打开任…
阅读更多...
香港理工大学主办！2024年第八届电力能源系统与应用国际会议（ICoPESA 2024）即将召开！

香港理工大学主办！2024年第八届电力能源系统与应用国际会议（ICoPESA 2024）即将召开！

2024年第八届电力能源系统与应用国际会议&#xff08;ICoPESA 2024&#xff09; 2024年6月24日-26日 中国香港 ICoPESA 2024-Hong Kong (icpesa.org)https://icpesa.org/index.html 会议组织单位 会议出版及检索&#xff1a; 会议录用并注册的论文将由IEEE出版&#xff0c;…
阅读更多...
视频监控汇聚管理系统EasyCVR平台RTMP推流异常是什么原因？

视频监控汇聚管理系统EasyCVR平台RTMP推流异常是什么原因？

AI视频智能分析/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff08;专网、内网、局域网、广域网、公网等&#xff09;&#xff0c;支持设备通过4G、5G、WIFI、有线等方式接入&#xff0c;并将设备进行统一集中接入与视频汇聚管理&#xff0c;经平台接入的视频流能实现多…
阅读更多...
ISIS多区域实验简述

ISIS多区域实验简述

为支持大型路由网络&#xff0c;IS-IS在路由域内采用两级分层结构。 IS-IS网络中三种级别的路由设备&#xff1a;将Level-1路由设备部署在区域内&#xff0c;Level-2路由设备部署在区域间&#xff0c;Level-1-2路由设备部署在Level-1和Level-2路由设备的中间。 实验拓扑图&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023