全网营销培训公司/广州seo顾问服务

一、前端程序搭建和运行:

1.整合案例介绍和接口分析:

(1).案例功能预览:

(2).接口分析:

学习计划分页查询

/* 
需求说明查询全部数据页数据
请求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}
*/

2.前端工程导入 

(1).前端环境搭建:

Node.js是前端程序运行的服务器，类似Java程序运行的服务器Tomcat

Npm是前端依赖包管理工具，类似maven依赖管理工具软件

node安装:16.16.0

Index of /download/release/v16.16.0/

node安装和测试:

打开官网https://nodejs.org/en/下载对应操作系统的LTS版本

双击安装包进行安装，安装过程中遵循默认选项即可。安装完成后，可以在命令行终端输入node -v和npm -v查看Node.js和npm的版本号

npm使用(maven):

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven

配置阿里镜像:npm config set registry https://registry.npmjs.org/

更新npm版本:npm install -g npm@9.6.6

npm依赖下载命令:npm install 依赖名 / npm install 依赖名@版本

(2).导入前端程序

3.启动测试:

npm install //安装依赖
npm run dev //运行测试

二、后端程序实现和测试:

1.准备工作:

(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).准备pojo:com.atguigu.pojo

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

(3).准备 R:com.atguigu.utils

*** projectName: com.atguigu.utils** description: 返回结果类*/
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;}
}

(4).准备PageBean:com.atguigu.utils

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {private int currentPage;   // 当前页码private int pageSize;      // 每页显示的数据量private long total;    // 总数据条数private List<T> data;      // 当前页的数据集合
}

2.功能实现:

(1).分页查询:

controller:

/*@CrossOrigin 注释在带注释的控制器方法上启用跨源请求*/
@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){PageBean<Schedule> pageBean = scheduleService.findByPage(pageSize,currentPage);return  R.ok(pageBean);}
}    

service:

@Slf4j
@Service
public class ScheduleServiceImpl  implements ScheduleService {@Autowiredprivate ScheduleMapper scheduleMapper;/*** 分页数据查询,返回分页pageBean** @param pageSize* @param currentPage* @return*/@Overridepublic 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:

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>    

(2).添加:

controller:

@PostMapping
public R saveSchedule(@RequestBody Schedule schedule){scheduleService.saveSchedule(schedule);return R.ok(null);
}

service:

/*** 保存学习计划** @param schedule*/
@Override
public void saveSchedule(Schedule schedule) {scheduleMapper.insert(schedule);
}

mapper:

void insert(Schedule schedule);

mapperXML文件:

<insert id="insert">insert into schedule (title, completed)values(#{title}, #{completed});
</insert>

(3).删除:

controller:

@DeleteMapping("/{id}")
public R removeSchedule(@PathVariable Integer id){scheduleService.removeById(id);return R.ok(null);
}

service:

/*** 移除学习计划** @param id*/
@Override
public void removeById(Integer id) {scheduleMapper.delete(id);
}

mapper:

void delete(Integer id);

mapperXML文件:

<delete id="delete">delete from schedule where id = #{id}
</delete>

(4).修改:

controller:

@PutMappingpublic R changeSchedule(@RequestBody Schedule schedule){scheduleService.updateSchedule(schedule);return R.ok(null);
}

service:

/*** 更新学习计划** @param schedule*/
@Override
public void updateSchedule(Schedule schedule) {scheduleMapper.update(schedule);
}

mapper:

void update(Schedule schedule);

mapperXML文件:

<update id="update">update schedule set title = #{title} , completed = #{completed}where id = #{id}
</update>