商城网站建设用乐云seo系统,服务器平台,网络营销的现状,商城类小程序文章目录 一、案例功能预览二、接口分析三、前端工程导入四、后端程序实现和测试4.1 准备4.2 功能实现4.2.1 分页查询显示4.2.2 添加计划4.2.2 删除计划4.2.3 修改计划 4.3 前后联调 一、案例功能预览
Github 地址 #xff1a; ssm-integration-part
二、接口分析
学习计划… 文章目录 一、案例功能预览二、接口分析三、前端工程导入四、后端程序实现和测试4.1 准备4.2 功能实现4.2.1 分页查询显示4.2.2 添加计划4.2.2 删除计划4.2.3 修改计划 4.3 前后联调 一、案例功能预览
Github 地址 ssm-integration-part
二、接口分析
学习计划分页查询
/*
需求说明查询全部数据页数据
请求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 // 当前页码}}
*/学习计划删除
/*
需求说明根据id删除日程
请求urischedule/{id}
请求方式 delete
响应的json{code:200,flag:true,data:null}
*/学习计划保存
/*
需求说明增加日程
请求urischedule
请求方式 post
请求体中的JSON{title: ,completed: false}
响应的json{code:200,flag:true,data:null}
*/学习计划修改
/*
需求说明根据id修改数据
请求urischedule
请求方式 put
请求体中的JSON{id: 1,title: ,completed: false}
响应的json{code:200,flag:true,data:null}
*/三、前端工程导入
vscode 需要用管理员模式启动 下载依赖
npm install //安装依赖
npm run dev //运行测试四、后端程序实现和测试 4.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);pojo
Data
public class Schedule {private Integer id;private String title;private Boolean completed;
}工具类 com.wake.utils
package com.wake.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;}
}Data
NoArgsConstructor
AllArgsConstructor
public class PageBeanT {private int currentPage; // 当前页码private int pageSize; // 每页显示的数据量private long total; // 总数据条数private ListT data; // 当前页的数据集合
}4.2 功能实现
4.2.1 分页查询显示 controller
RestController
RequestMapping(schedule)
Slf4j
public class ScheduleController {Autowiredprivate ScheduleService scheduleService;GetMapping(/{pageSize}/{currentPage})public R page(PathVariable int pageSize,PathVariable int currentPage) {R r scheduleService.page(pageSize,currentPage);log.info(查询信息为{},r);return r;}
}service
public interface ScheduleService {/*** 分页查询信息* param pageSize* param currentPage* return*/R page(int pageSize, int currentPage);
}
Service
public class ScheduleServiceImpl implements ScheduleService {Autowiredprivate ScheduleMapper scheduleMapper;Overridepublic R page(int pageSize, int currentPage) {PageHelper.startPage(currentPage,pageSize);ListSchedule scheduleList scheduleMapper.queryList();PageInfoSchedule info new PageInfo(scheduleList);PageBeanSchedule data new PageBean(currentPage,pageSize,info.getTotal(),info.getList());return R.ok(data);}
}mapper
public interface ScheduleMapper {/*** 查询显示全部计划表信息* return*/ListSchedule queryList();
}
mapper namespacecom.wake.mapper.ScheduleMapperselect idqueryList resultTypecom.wake.pojo.Scheduleselect * from schedule/select
/mapperresult 4.2.2 添加计划
实体类 加上不能为空注解
Data
public class Schedule {private Integer id;NotBlankprivate String title;NotNullprivate Boolean completed;
}controller PostMappingpublic R save(Validated RequestBody Schedule schedule, BindingResult result){if (result.hasErrors()){return R.fail(参数为空Null不能保存);}R r scheduleService.add(schedule);return r;}service Overridepublic R add(Schedule schedule) {int row scheduleMapper.insert(schedule);return row 0 ? R.ok(null) : R.fail(null);}Mapper /*** 增加一条数据* param schedule* return*/int insert(Schedule schedule);result
4.2.2 删除计划
controller DeleteMapping(/{id})public R remove(PathVariable Integer id){R r scheduleService.remove(id);return r;}service /*** 根据ID删除日程* param id* return*/R remove(Integer id);Overridepublic R remove(Integer id) {int row scheduleMapper.deleteById(id);if(row 0){return R.ok(null);}else{return R.fail(null);}}Mapper /*** 根据ID删除日程* param id* return*/int deleteById(Integer id);delete iddeleteByIddelete from schedule where id #{id}/deleteresult
4.2.3 修改计划
controller PutMappingpublic R update(Validated RequestBody Schedule schedule, BindingResult result){if (result.hasErrors()){return R.fail(参数为空Null不能修改);}R r scheduleService.update(schedule);return r;}service Overridepublic R update(Schedule schedule) {//判断ID为空if (schedule.getId() null){return R.fail(ID不能为空);}int row scheduleMapper.update(schedule);if (row 0) {return R.ok(null);}return R.fail(null);}Mapper update idupdateupdate schedule set title #{title},completed #{completed} where id #{id}/updateresult
4.3 前后联调
跨域问题 前端是 node 服务器 后端是 tomcat 服务器
解决 在controller类上加注解*也可以单独加方法上*
CrossOrigin //允许其他源访问浏览器就不会拦截success
