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);

2. 新建一个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[] { "/" };}}

4. 实体类

/*** description: 任务实体类*/
@Data
public class Schedule {private Integer id;private String title;private Boolean completed;
}

5. 准备 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;}
}

6. 准备 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);}
}    

2. 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>