09前后端分离+SSM整合的小案例
- 前端的Node = 后端的Tomcat，是前端程序的容器。
- 前端的npm = 后端的maven
1. 导入前端项目
node版本：16.16.0
-
配置阿里镜像
npm config set registry https://registry.npmjs.org/
-
更新npm版本
npm install -g [email protected]
-
用vscode打开解压后的项目 , 右上角toggle panel打开命令行
-
npm依赖下载命令
npm install
即可下载所有需要的依赖 -
npm run dev //运行测试.
2. 后端项目
- 数据库脚本:
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);
- 新建一个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 {
//开启静态资源
@Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
//jsp视图解析器前后缀
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
registry.jsp("WEB-INF/views","jsp");
}
//拦截器,指明包含的路径排除的路径
@Override
public 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
*/
@Bean
public 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);
//typeAliases
sqlSessionFactoryBean.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实例扫描工厂,配置
@Bean
public 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;
//数据库连接池配置
@Bean
public 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容器对应的配置类 , 即下面两层
@Override
protected Class<?>[] getRootConfigClasses() {
return new Class<?>[] {MapperJavaConfig.class, ServiceJavaConfig.class, DataSourceJavaConfig.class };
}
//指定web容器对应的配置类
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class<?>[] { WebMvcJavaConfig.class };
}
//指定dispatcherServlet处理路径，通常为 /
@Override
protected String[] getServletMappings() {
return new String[] { "/" };
}
}
- 实体类
/**
* description: 任务实体类
*/
@Data
public class Schedule {
private Integer id;
private String title;
private Boolean completed;
}
- 准备 R(返回结果类)
package com.sunsplanter.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
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 . 查询全部功能实现
/*
需求说明
查询全部数据页数据
请求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 // 当前页码
}
}
*/
- controller层 .
/*
@CrossOrigin 注释在带注释的控制器方法上启用跨源请求
*/
@CrossOrigin
//get请求方式
@RequestMapping("schedule")
@RestController
public class ScheduleController
{
//控制层只做两件事:接收参数,返回结果 , 因此先声明一个业务层对象
@Autowired
private 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);
}
}
- service
@Slf4j
@Service
public class ScheduleServiceImpl implements ScheduleService {
@Autowired
private 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;
}
}
-
mapper
mapper接口
public interface ScheduleMapper {
List<Schedule> queryPage();
}
mapperxml文件
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.ScheduleMapper">
<select id="queryPage" resultType="schedule">
select * from schedule
select>
mapper>