- 前端的Node = 后端的Tomcat，是前端程序的容器。
- 前端的npm = 后端的maven
1. 導(dǎo)入前端項目
node版本：16.16.0
-
配置阿里鏡像
npm config set registry https://registry.npmjs.org/
-
更新npm版本
npm install -g npm@9.6.6
-
用vscode打開解壓后的項目 , 右上角toggle panel打開命令行
-
npm依賴下載命令
npm install
即可下載所有需要的依賴 -
npm run dev //運行測試.
2. 后端項目
- 數(shù)據(jù)庫腳本:
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
('學(xué)習(xí)java', true),
('學(xué)習(xí)Python', false),
('學(xué)習(xí)C++', true),
('學(xué)習(xí)JavaScript', false),
('學(xué)習(xí)HTML5', true),
('學(xué)習(xí)CSS3', false),
('學(xué)習(xí)Vue.js', true),
('學(xué)習(xí)React', false),
('學(xué)習(xí)Angular', true),
('學(xué)習(xí)Node.js', false),
('學(xué)習(xí)Express', true),
('學(xué)習(xí)Koa', false),
('學(xué)習(xí)MongoDB', true),
('學(xué)習(xí)MySQL', false),
('學(xué)習(xí)Redis', true),
('學(xué)習(xí)Git', false),
('學(xué)習(xí)Docker', true),
('學(xué)習(xí)Kubernetes', false),
('學(xué)習(xí)AWS', true),
('學(xué)習(xí)Azure', false);
- 新建一個module,轉(zhuǎn)web項目. 先寫配置類
因為涉及了數(shù)據(jù)庫, 還要寫連接池的配置類 , 但是將數(shù)據(jù)庫連接池和mapper的配置寫到一起 . 總計還是4個配置類 , Controller放到Web容器 , Service/mapper+連接池/數(shù)據(jù)源 放到root容器.
此外,還要一個初始化IoC容器的初始化類
把上節(jié)的四個復(fù)制粘貼即可
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.實現(xiàn)Springmvc組件聲明標(biāo)準(zhǔn)化接口WebMvcConfigurer 提供了各種組件對應(yīng)的方法
* 2.添加配置類注解@Configuration
* 3.添加mvc復(fù)合功能開關(guān)@EnableWebMvc
* 4.添加controller層掃描注解
* 5.開啟默認處理器,支持靜態(tài)資源處理
*/
@Configuration
@EnableWebMvc
@ComponentScan("com.sunsplanter.controller")
public class WebMvcJavaConfig implements WebMvcConfigurer {
//開啟靜態(tài)資源
@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注解,開啟事務(wù)注解支持
* 3. 聲明@EnableAspectJAutoProxy注解,開啟aspect aop注解支持.@Before/@After/@Around
* 4. 聲明@ComponentScan組件掃描
* 5. 聲明式事務(wù)管理. 1.實現(xiàn)對應(yīng)的事務(wù)管理器(DataSourceTransactionManager) 2.開啟事務(wù)注解支持
*/
@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();
//設(shè)置連接池
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實例掃描工廠,配置 <mapper <package 對應(yīng)接口和mapperxml文件所在的包
* @return
*/
@Bean
public MapperScannerConfigurer mapperScannerConfigurer(){
MapperScannerConfigurer mapperScannerConfigurer = new MapperScannerConfigurer();
//設(shè)置mapper接口和xml文件所在的共同包
mapperScannerConfigurer.setBasePackage("com.atguigu.mapper");
return mapperScannerConfigurer;
}
}
數(shù)據(jù)源配置類 , 從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;
//數(shù)據(jù)庫連接池配置
@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容器對應(yīng)的配置類 , 即下面兩層
@Override
protected Class<?>[] getRootConfigClasses() {
return new Class<?>[] {MapperJavaConfig.class, ServiceJavaConfig.class, DataSourceJavaConfig.class };
}
//指定web容器對應(yīng)的配置類
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class<?>[] { WebMvcJavaConfig.class };
}
//指定dispatcherServlet處理路徑，通常為 /
@Override
protected String[] getServletMappings() {
return new String[] { "/" };
}
}
- 實體類
/**
* description: 任務(wù)實體類
*/
@Data
public class Schedule {
private Integer id;
private String title;
private Boolean completed;
}
- 準(zhǔn)備 R(返回結(jié)果類)
package com.sunsplanter.utils
public class R {
private int code = 200; //200成功狀態(tài)碼
private boolean flag = true; //返回狀態(tài)
private Object data; //返回具體數(shù)據(jù)
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; //錯誤狀態(tài)
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;
}
}
- 準(zhǔn)備 PageBean
package com.sunsplanter.utils
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {
private int currentPage; // 當(dāng)前頁碼
private int pageSize; // 每頁顯示的數(shù)據(jù)量
private long total; // 總數(shù)據(jù)條數(shù)
private List<T> data; // 當(dāng)前頁的數(shù)據(jù)集合
}
開始實現(xiàn)功能:
3.1 . 查詢?nèi)抗δ軐崿F(xiàn)
/*
需求說明
查詢?nèi)繑?shù)據(jù)頁數(shù)據(jù)
請求uri
schedule/{pageSize}/{currentPage}
請求方式
get
響應(yīng)的json
{
"code":200,
"flag":true,
"data":{
//本頁數(shù)據(jù)
data:
[
{id:1,title:'學(xué)習(xí)java',completed:true},
{id:2,title:'學(xué)習(xí)html',completed:true},
{id:3,title:'學(xué)習(xí)css',completed:true},
{id:4,title:'學(xué)習(xí)js',completed:true},
{id:5,title:'學(xué)習(xí)vue',completed:true}
],
//分頁參數(shù)
pageSize:5, // 每頁數(shù)據(jù)條數(shù) 頁大小
total:0 , // 總記錄數(shù)
currentPage:1 // 當(dāng)前頁碼
}
}
*/
- controller層 .
/*
@CrossOrigin 注釋在帶注釋的控制器方法上啟用跨源請求
*/
@CrossOrigin
//get請求方式
@RequestMapping("schedule")
@RestController
public class ScheduleController
{
//控制層只做兩件事:接收參數(shù),返回結(jié)果 , 因此先聲明一個業(yè)務(wù)層對象
@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;
/**
* 分頁數(shù)據(jù)查詢,返回分頁pageBean
*
* @param pageSize
* @param currentPage
* @return
*/
@Override
//調(diào)用mapper對象執(zhí)行查詢語句,結(jié)果封裝進實體對象的列表中-->
public PageBean<Schedule> findByPage(int pageSize, int currentPage) {
//1.設(shè)置分頁參數(shù)
PageHelper.startPage(currentPage,pageSize);
//2.數(shù)據(jù)庫查詢
List<Schedule> list = scheduleMapper.queryPage();
//3.結(jié)果獲取
PageInfo<Schedule> pageInfo = new PageInfo<>(list);
//4.pageBean封裝
PageBean<Schedule> pageBean = new PageBean<>(pageInfo.getPageNum(),pageInfo.getPageSize(),pageInfo.getTotal(),pageInfo.getList());
log.info("分頁查詢結(jié)果:{}",pageBean);
return pageBean;
}
}
-
mapper文章來源：http://www.zghlxwxcb.cn/news/detail-801097.html
mapper接口文章來源地址http://www.zghlxwxcb.cn/news/detail-801097.html
public interface ScheduleMapper {
List<Schedule> queryPage();
}
mapperxml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace等于mapper接口類的全限定名,這樣實現(xiàn)對應(yīng) -->
<mapper namespace="com.atguigu.mapper.ScheduleMapper">
<select id="queryPage" resultType="schedule">
select * from schedule
</select>
</mapper>
到了這里，關(guān)于09前后端分離+SSM整合的小案例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
