4.快速实现增删改查，模糊查询功能
打开springboot项目，在com.example下建包common,在common下新建Result.java
4.1封装统一的返回数据结构
1.在Result.java中编写如下代码：
private static final String *SUCCESS*="0";
private static final String *ERROR*="-1";
private String code;//返回状态码请求成功/失败
private String msg;//报错信息
private Object data;//数据
public static Result success(){
Result result=new Result();
result.setCode(*SUCCESS*);
return result;
}
public static Result success(Object data){
Result result=new Result();
result.setCode(*SUCCESS*);
result.setData(data);
return result;
}
public static Result error(String msg){
Result result=new Result();
result.setCode(*ERROR*);
result.setMsg(msg);
return result;
}
//下面生成getter和setter方法2.在AdminController.java下可修改：
将String 改为Result
运行结果：
{"code":"0","msg":null,"data":[{"id":1001,"name":"lili","sex":"女","age":17,"phone":"13888899999"},{"id":1002,"name":"玛丽","sex":"男","age":20,"phone":"13677777788"}]}
在json.cn上解析后：
4.2 Vue安装axios,封装request
1.在vue项目的根目录下执行命令：npm i axios -s
执行成功：
2.封装request
在src目录下，创建一个utils包，用来存放我们自己定义的工具，在utils包里创建一个request.js,来封装request请求
import **axios** from 'axios';
const **request** =axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
//request拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
**request**.interceptors.*request*.use(config=>{
config.headers['Content-Type']= 'application/json;charset=utf-8';
//config.headers['token']=user.token;//设置请求头
return config
},error => {
return **Promise**.reject(error)
});
// response拦截器
// 可以在接口响应后统一处理结果
**request**.interceptors.*response*.use(
response=>{
// response.data即为后端返回的Result
let res = response.data;
// 兼容服务端返回的字符串数据
if(typeof res ==='string'){
res=res?**JSON**.parse(res):res
}
return res;
},
error => {
**console**.log('err'+error)//for debug
return **Promise**.reject(error)
}
)
export default **request**;5.3 查询所有管理员信息
在AdminView.vue中的标签中添加如下代码：
import **request** from "@/utils/request";//导入的包，
export default {
data() {
return {
input:'',
tableData: [删除之前写入的数据],
}
},
//页面加载的时候做一些事情，在created里面
created(){
this.load();
},
// 定义一些页面上控件触发的事件调用的方法
methods: {
load(){
// alt+shift+enter快捷键引入包
**request**.get("/admin").then(res=>{
if(res.code ==='0'){
// 成功
this.tableData=res.data;
}else{
}
})
},在springboot中(后台项目)：
AdminController.java:
AdminService.java
先运行springboot项目，再运行vue项目。
5.4 按条件查询管理员信息
1.AdminView.vue，如下图所示：
在搜索按钮处加上点击事件
2.操作后台Springboot
①AdminController.java
@GetMapping("/search")
public Result findBySearch(Params params){
List list=adminService.findBySearch(params);
return Result.*success*(list);
} 根据错误提示跳转到AdminService.java中生成相应代码，在此之前，先完成②：
②在entity文件夹下新建Params类，私有化属性，并实现getter/setter方法
//私有化属性
private String name; private String sex; private Integer age; private String phone;
//get,set方法
...自动生成
③AdminService.java
public List findBySearch(Params params) {
return adminDao.findBySearch(params);
} 根据错误提示跳转到AdminDao.java中生成相应代码
③AdminDao.java代码如下：
List
④ 在AdminMapper.xml下编写如下代码：
运行后报错：
解决方法：
MyBits里的配置路径不对，在*与.xml中间多写了一个空格。
3.清空搜索内容
添加清空按钮
methods方法里：
reset(){ this.params={ name: '', phone:'' } this.findBySearch(); },