华安网站建设,临安区做网站的公司,手机上的应用商店,网站建设 广西前端程序搭建和运行
项目预览
接口分析
1.学习计划分页查询
需求#xff1a;查询对应数据页数据
uri#xff1a;schedule/{pageSize}/{currentPage}
请求方式#xff1a;get
响应数据#xff1a;json {code:200,flag:true,data…前端程序搭建和运行
项目预览
接口分析
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 // 当前页码}}
2.学习计划删除
需求根据id删除数据
urischedule/{id}
请求方式delete
响应数据json
{code:200,flag:true,data:null
}
3.学习计划保存
需求添加数据
urischedule
请求方式post
请求体数据json {title: ,completed: false}
响应数据json {code:200,flag:true,data:null}
4.学习计划修改
需求根据id修改数据
urischedule
请求方式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/https://nodejs.org/download/release/v16.16.0/?spmwolai.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 npm9.6.6 npm下载依赖命令 npm install 依赖名 / npm install 依赖名版本 前端项目可以使用vscode编写 导入前端依赖 https://pan.baidu.com/s/1YbdK5gCv_rx-StffDeNYIQ?pwdjcp9
使用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 version1.0 encodingUTF-8?project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd modelVersion4.0.0/modelVersion groupIdcom.qiu/groupId artifactIdssm-schedule/artifactId version1.0-SNAPSHOT/version packagingwar/packagingpropertiesspring.version6.0.6/spring.versionjakarta.annotation-api.version2.1.1/jakarta.annotation-api.versionjakarta.jakartaee-web-api.version9.1.0/jakarta.jakartaee-web-api.versionjackson-databind.version2.15.0/jackson-databind.versionhibernate-validator.version8.0.0.Final/hibernate-validator.versionmybatis.version3.5.11/mybatis.versionmysql.version8.0.25/mysql.versionpagehelper.version5.1.11/pagehelper.versiondruid.version1.2.8/druid.versionmybatis-spring.version3.0.2/mybatis-spring.versionjakarta.servlet.jsp.jstl-api.version3.0.0/jakarta.servlet.jsp.jstl-api.versionlogback.version1.2.3/logback.versionlombok.version1.18.26/lombok.versionmaven.compiler.source17/maven.compiler.source maven.compiler.target17/maven.compiler.target project.build.sourceEncodingUTF-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依赖--dependencygroupIdorg.springframework/groupIdartifactIdspring-context/artifactIdversion${spring.version}/version/dependencydependencygroupIdjakarta.annotation/groupIdartifactIdjakarta.annotation-api/artifactIdversion${jakarta.annotation-api.version}/version/dependencydependencygroupIdorg.springframework/groupIdartifactIdspring-aop/artifactIdversion${spring.version}/version/dependencydependencygroupIdorg.springframework/groupIdartifactIdspring-aspects/artifactIdversion${spring.version}/version/dependencydependencygroupIdorg.springframework/groupIdartifactIdspring-tx/artifactIdversion${spring.version}/version/dependencydependencygroupIdorg.springframework/groupIdartifactIdspring-jdbc/artifactIdversion${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--dependencygroupIdorg.springframework/groupIdartifactIdspring-webmvc/artifactIdversion${spring.version}/version/dependencydependencygroupIdjakarta.platform/groupIdartifactIdjakarta.jakartaee-web-api/artifactIdversion${jakarta.jakartaee-web-api.version}/versionscopeprovided/scope/dependency!-- jsp需要依赖! jstl--dependencygroupIdjakarta.servlet.jsp.jstl/groupIdartifactIdjakarta.servlet.jsp.jstl-api/artifactIdversion${jakarta.servlet.jsp.jstl-api.version}/version/dependencydependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-databind/artifactIdversion${jackson-databind.version}/version/dependency!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator --dependencygroupIdorg.hibernate.validator/groupIdartifactIdhibernate-validator/artifactIdversion${hibernate-validator.version}/version/dependency!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator-annotation-processor --dependencygroupIdorg.hibernate.validator/groupIdartifactIdhibernate-validator-annotation-processor/artifactIdversion${hibernate-validator.version}/version/dependency!--mybatismybatis / 3.5.11mysql / 8.0.25pagehelper / 5.1.11--!-- mybatis依赖 --dependencygroupIdorg.mybatis/groupIdartifactIdmybatis/artifactIdversion${mybatis.version}/version/dependency!-- MySQL驱动 mybatis底层依赖jdbc驱动实现,本次不需要导入连接池,mybatis自带! --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion${mysql.version}/version/dependencydependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper/artifactIdversion${pagehelper.version}/version/dependency!-- 整合第三方特殊依赖 --dependencygroupIdorg.springframework/groupIdartifactIdspring-web/artifactIdversion${spring.version}/version/dependencydependencygroupIdorg.mybatis/groupIdartifactIdmybatis-spring/artifactIdversion${mybatis-spring.version}/version/dependency!-- 日志 会自动传递slf4j门面--dependencygroupIdch.qos.logback/groupIdartifactIdlogback-classic/artifactIdversion${logback.version}/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion${lombok.version}/version/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion${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 //jsonHandlerAdapterHandlerMapping
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 configurationnew 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 propertiesnew 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 PageBeanT {private int currentPage; // 当前页码private int pageSize; // 每页显示的数据量private long total; // 总数据条数private ListT 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){PageBeanSchedule 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 PageBeanSchedule 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 PageBeanSchedule findByPage(int pageSize, int currentPage) {//1.设置分页参数PageHelper.startPage(currentPage,pageSize);//2.数据库查询ListSchedule list scheduleMapper.queryPage();//3.结果获取PageInfoSchedule pageInfo new PageInfo(list);//4.pageBean封装PageBeanSchedule 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 {ListSchedule queryPage();void insert(Schedule schedule);void delete(Integer id);void update(Schedule schedule);}
?xml version1.0 encodingUTF-8?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Mapper 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.qiu.mapper.ScheduleMapperselect idqueryPage resultTypescheduleselect * from schedule/selectinsert idinsertinsert into schedule (title, completed)values(#{title}, #{completed});/insertdelete iddeletedelete from schedule where id #{id}/deleteupdate idupdateupdate schedule set title #{title} , completed #{completed}where id #{id}/update
/mapper
前后端联调
后端tomcat项目设置
启动前后端项目自行测试。 测试后代码无误
