09前后端分离+SSM整合的小案例

  • 前端的Node = 后端的Tomcat,是前端程序的容器。
  • 前端的npm = 后端的maven

1. 导入前端项目

node版本:16.16.0

  1. 配置阿里镜像

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

  2. 更新npm版本

    npm install -g npm@9.6.6

  3. 用vscode打开解压后的项目 , 右上角toggle panel打开命令行

  4. npm依赖下载命令

    npm install
    即可下载所有需要的依赖

  5. npm run dev //运行测试.

2. 后端项目

  1. 数据库脚本:
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);
  1. 新建一个module,转web项目. 先写配置类
    因为涉及了数据库, 还要写连接池的配置类 , 但是将数据库连接池和mapper的配置写到一起 . 总计还是4个配置类 , Controller放到Web容器 , Service/mapper+连接池/数据源 放到root容器.
    此外,还要一个初始化IoC容器的初始化类
    把上节的四个复制粘贴即可

controller

package com.sunsplanter.config;import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;/*** projectName: com.atguigu.config** 1.实现Springmvc组件声明标准化接口WebMvcConfigurer 提供了各种组件对应的方法* 2.添加配置类注解@Configuration* 3.添加mvc复合功能开关@EnableWebMvc* 4.添加controller层扫描注解* 5.开启默认处理器,支持静态资源处理*/
@Configuration
@EnableWebMvc
@ComponentScan("com.sunsplanter.controller")
public class WebMvcJavaConfig implements WebMvcConfigurer {//开启静态资源@Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {configurer.enable();}//jsp视图解析器前后缀@Overridepublic void configureViewResolvers(ViewResolverRegistry registry) {registry.jsp("WEB-INF/views","jsp");}//拦截器,指明包含的路径排除的路径@Overridepublic void addInterceptors(InterceptorRegistry registry) {//registry.addInterceptor((new 拦截器的类).addPathPatterns().excludePathPatterns)}
}

service

    package com.sunsplanter.config;import org.springframework.context.annotation.Bean;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.annotation.EnableTransactionManagement;import javax.sql.DataSource;/*** 1. 声明@Configuration注解,代表配置类* 2. 声明@EnableTransactionManagement注解,开启事务注解支持* 3. 声明@EnableAspectJAutoProxy注解,开启aspect aop注解支持.@Before/@After/@Around* 4. 声明@ComponentScan组件扫描* 5. 声明式事务管理. 1.实现对应的事务管理器(DataSourceTransactionManager) 2.开启事务注解支持*/@EnableTransactionManagement@EnableAspectJAutoProxy@Configuration@ComponentScan("com.sunsplanter.service")public class ServiceJavaConfig {//@Bean//IoC容器自动将property中的dataSource注入此中public DataSourceTransactionManager transactionManager(DataSource dataSource){DataSourceTransactionManager transactionManager = new DataSourceTransactionManager();transactionManager.setDataSource(dataSource);return transactionManager;}}

mapper

package com.sunsplanter.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;/*** description: 持久层配置和Druid和Mybatis配置 使用一个配置文件*/
@Configuration
public class MapperJavaConfig {/*** 配置SqlSessionFactoryBean,指定连接池对象和外部配置文件即可* @param dataSource 需要注入连接池对象* @return 工厂Bean*/@Beanpublic SqlSessionFactoryBean sqlSessionFactoryBean(DataSource dataSource){//实例化SqlSessionFactory工厂SqlSessionFactoryBean sqlSessionFactoryBean = new SqlSessionFactoryBean();//设置连接池sqlSessionFactoryBean.setDataSource(dataSource);//settings [包裹到一个configuration对象,切记别倒错包]org.apache.ibatis.session.Configuration configuration = new org.apache.ibatis.session.Configuration();configuration.setMapUnderscoreToCamelCase(true);configuration.setLogImpl(Slf4jImpl.class);configuration.setAutoMappingBehavior(AutoMappingBehavior.FULL);sqlSessionFactoryBean.setConfiguration(configuration);//typeAliasessqlSessionFactoryBean.setTypeAliasesPackage("com.atguigu.pojo");//分页插件配置PageInterceptor pageInterceptor = new PageInterceptor();Properties properties = new Properties();properties.setProperty("helperDialect","mysql");pageInterceptor.setProperties(properties);sqlSessionFactoryBean.addPlugins(pageInterceptor);return sqlSessionFactoryBean;}/*** 配置Mapper实例扫描工厂,配置 <mapper <package 对应接口和mapperxml文件所在的包* @return*/@Beanpublic MapperScannerConfigurer mapperScannerConfigurer(){MapperScannerConfigurer mapperScannerConfigurer = new MapperScannerConfigurer();//设置mapper接口和xml文件所在的共同包mapperScannerConfigurer.setBasePackage("com.atguigu.mapper");return mapperScannerConfigurer;}}

数据源配置类 , 从properties中取

package com.sunsplanter.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 DataSourceJavaConfig {@Value("${jdbc.user}")private String user;@Value("${jdbc.password}")private String password;@Value("${jdbc.url}")private String url;@Value("${jdbc.driver}")private String driver;//数据库连接池配置@Beanpublic DataSource dataSource(){DruidDataSource dataSource = new DruidDataSource();dataSource.setUsername(user);dataSource.setPassword(password);dataSource.setUrl(url);dataSource.setDriverClassName(driver);return dataSource;}}

初始化类:

package com.sunsplanter.config;import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;public class SpringIoCInit extends AbstractAnnotationConfigDispatcherServletInitializer {//指定root容器对应的配置类 , 即下面两层@Overrideprotected Class<?>[] getRootConfigClasses() {return new Class<?>[] {MapperJavaConfig.class, ServiceJavaConfig.class, DataSourceJavaConfig.class };}//指定web容器对应的配置类@Overrideprotected Class<?>[] getServletConfigClasses() {return new Class<?>[] { WebMvcJavaConfig.class };}//指定dispatcherServlet处理路径,通常为 /@Overrideprotected String[] getServletMappings() {return new String[] { "/" };}}
  1. 实体类
/*** description: 任务实体类*/
@Data
public class Schedule {private Integer id;private String title;private Boolean completed;
}
  1. 准备 R(返回结果类)
package com.sunsplanter.utilspublic 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;}
}
  1. 准备 PageBean
package com.sunsplanter.utils@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {private int currentPage;   // 当前页码private int pageSize;      // 每页显示的数据量private long total;    // 总数据条数private List<T> data;      // 当前页的数据集合
}

开始实现功能:

3.1 . 查询全部功能实现

/* 
需求说明查询全部数据页数据
请求urischedule/{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 // 当前页码}}
*/
  1. controller层 .
/*@CrossOrigin 注释在带注释的控制器方法上启用跨源请求*/
@CrossOrigin
//get请求方式
@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);}
}    
  1. service
@Slf4j
@Service
public class ScheduleServiceImpl  implements ScheduleService {@Autowiredprivate ScheduleMapper scheduleMapper;/*** 分页数据查询,返回分页pageBean** @param pageSize* @param currentPage* @return*/@Override
//调用mapper对象执行查询语句,结果封装进实体对象的列表中-->public 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;}}
  1. mapper

    mapper接口

public interface ScheduleMapper {List<Schedule> queryPage();
}    
mapperxml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace等于mapper接口类的全限定名,这样实现对应 -->
<mapper namespace="com.atguigu.mapper.ScheduleMapper"><select id="queryPage" resultType="schedule">select * from schedule</select>
</mapper>    

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

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

相关文章

Scrum.org认证PSM官方认证班Professional Scrum Master™ (PSM)

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架&#xff0c;旨在最短时间内交付最大价值。根据2022年全球敏捷状态报告&#xff0c;Scrum的应用占比已经达到87%。 Scrum.org 由 Scrum 的联合创始人 Ken Schwaber 创立…

三、Redis命令

一、Redis客户端 Redis是一个客户端和服务器结构的程序&#xff0c;Redis的客户端有很多种形态 通过以下的方法实现Redis客户端和服务器交互&#xff0c;必须先进入Redis-cli客户端程序&#xff0c;才能输入Redis命令。 1、自带了命令行客户端 redis-cli //连接本地 redis-…

jQuery的选择器

目录 基本过滤选择器 层次选择器 简单过滤选择器 内容过滤选择器 可见性过滤器 子元素过滤器 表单对象属性顾虑器 表单选择器 jQuery的选择器分类都有哪些&#xff1f; 根据所获取页面中元素的不同&#xff0c;可以将jQuery选择器分为四大类&#xff1a;基本选择器…

深入了解 Pytest Markers:提升测试用例的组织和控制能力

​从这篇开始&#xff0c;逐一解决fixture是啥&#xff1f;mark是啥&#xff1f;参数request是啥&#xff1f;钩子函数是啥&#xff1f;parametrize参数化是啥&#xff1f;这些问题。本片先介绍一下mark是啥&#xff1f;以及如何使用 Markers有啥用&#xff1f; 当使用 Pytest…

ZooKeeper 实战(五) Curator实现分布式锁

文章目录 ZooKeeper 实战(五) Curator实现分布式锁1.简介1.1.分布式锁概念1.2.Curator 分布式锁的实现方式1.3.分布式锁接口 2.准备工作3.分布式可重入锁3.1.锁对象3.2.非重入式抢占锁测试代码输出日志 3.3.重入式抢占锁测试代码输出日志 4.分布式非可重入锁4.1.锁对象4.2.重入…

SAP PI之Rest adapter

一&#xff0c;简介 REST风格接口是以http为传输协议&#xff0c;以xml或json或text为有效负载。下图展示了REST到XI再返回的一个过程&#xff0c;一个REST接口包含的信息有&#xff1a;服务URL、URL中带的参数、http方法(post/get/put等)、http头部、body部分的有效载荷。而X…

Sentinel限流、熔断

1、限流 单个服务节点限流 sentinel 提供了两种不同的隔离机制&#xff1a;信号量隔离和线程池隔离&#xff0c;它们的主要区别如下&#xff1a; 信号量隔离&#xff08;Semaphore Isolation&#xff09;&#xff1a; 原理&#xff1a;信号量隔离基于计数器&#xff08;或称令…

React Hooks大全—useContext

在本文中&#xff0c;我们将重点介绍useContext这个Hook&#xff0c;它可以让你在函数组件中轻松地访问React Context&#xff0c;从而实现跨组件的状态共享。我们将从基本使用&#xff0c;实现原理&#xff0c;最佳实践&#xff0c;以及一些常见的问题和解决方案来探讨useCont…

域名群站开源系统分享开源域名授权系统

一、需要自己安装PHP和MYSQL服务器环境。 二、务必设置伪静态规则&#xff0c;否则将无法访问文章栏目页面。 三、启用伪静态功能&#xff0c;请在站点设置中选择使用thinkphp的伪静态规则。 四、在域名的根目录下找到”data/config.php”文件&#xff0c;填入数据库的账号和…

C++ 中 static 应用

static 实验介绍 在 C/C++ 中都可以使用 static 关键字,但是却需要注意在 C 与 C++ 的使用方法有差异。C++ 除了继承 C 中 static 的使用方法外还增加了新的使用方法。本次实验主要介绍 static 在 C++ 中的使用方法。 静态的成员在实例化对象之前已经产生,并将数据存放在全…

配置zabbix监控平台

目录 内容纯手敲&#xff0c;难免有误&#xff0c;若发现请私信我。 配置zabbix监控平台 一、进入官网 ​编辑​ 二、配置zabbix-server&#xff08;服务端&#xff09; 1.下载zabbix的yum源 2.安装Zabbix服务器、前端、代理 3.安装Zabbix前端 4.编辑文件/etc/yum.rep…

openssl3.2 - quic服务的运行

文章目录 openssl3.2 - quic服务的运行概述笔记运行openssl编译好的quic服务程序todo - 如果自己编译quic服务工程补充 - 超过30秒不连接uqic服务会退出END openssl3.2 - quic服务的运行 概述 在看 官方 guide目录下的工程. 都是客户端程序, 其中有quic客户端, 需要运行quic服…

【算法Hot100系列】旋转图像

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

开发安全之:Cross-Site Scripting (XSS) 漏洞

近期&#xff0c;我会结合研发云陆续发布开发安全相关的文章&#xff0c;欢迎大家关注&#xff01; Overview echo json_encode($arr)&#xff1a;向一个 Web 浏览器发送了未验证的数据&#xff0c;从而导致该浏览器执行恶意代码。 Details Cross-Site Scripting (XSS) 漏洞…

软件测试|python如何去除文件后缀名?

简介 在Python中&#xff0c;我们常常需要操作文件&#xff0c;包括文件的读取、写入、重命名等操作。在文件操作中&#xff0c;我们经常会遇到需要去除文件后缀的问题。那么&#xff0c;Python如何去除文件后缀呢&#xff1f;本文我们将介绍如何使用Python来去除文件后缀。 …

大模型学习与实践笔记(六)

一、finetune 简介 两种微调模式&#xff1a;增量预训练 与指令跟随 1.增量预训练 2.指令微调 二、LoRA 与 QLoRA 介绍 三、XTuner 介绍 四、低显存玩转LLM的方法

Spring Boot整理-Spring Boot的优势

Spring Boot 提供了多个显著的优势,特别是对于快速开发和简化 Spring 应用的配置和部署。这些优势包括: 简化配置:Spring Boot 的“约定优于配置”的原则意味着许多 Spring 应用的常见配置项被自动设置,这减少了开发人员需要编写和维护的配置代码量。快速启动和部署:Sprin…

陶哲轩工作流之人工智能数学验证+定理发明工具LEAN4 [线性代数篇2前置知识]不同求和范围不同函数项结果相等的条件

有空点赞我的视频哦&#xff1a;陶哲轩工作流之人工智能数学验证定理发明工具LEAN4 [线性代数篇2前置知识]不同求和范围不同函数项结果相等的条件_哔哩哔哩_bilibili -- 反向推理 refine sum_bij _ _ _ _ _ -- {s : Finset α} {t : Finset γ} {f : α → β} {g : γ → β…

Linux网络之PXE高效批量装机、Kickstart全自动化安装

一. PXE网络装机简介和相关知识 1. 常见的三种系统安装方式和相关文件 ① 三种系统安装方式 u启动安装&#xff1a;在U盘中下载相关的安装系统及镜像文件&#xff0c;u盘插机安装 光驱安装&#xff1a;将带有所需系统的光盘放进电脑服务器中&#xff0c;按照官方引导装机 …

春节假期出游一些很实用的手机技巧!这样玩,就很哇塞~

随着春节的脚步越来越近&#xff0c;无论是准备出游还是回家&#xff0c;你蠢蠢欲动的心是否已经拦不住了&#xff1f;华为 nova 12系列这些很哇塞的玩法你必须知道&#xff01;这个新年让你旅行出圈有秘籍&#xff01; 出发前智慧播报航班信息不错过。智慧播报的功能就很实…