SpringBoot+vue前后端分离

1.前端查询（传递封装的参数）

  loadPost(){this.$axios.post(this.$httpUrl+'/user/listPageC1',{pageSize:this.pageSize,pageNum:this.pageNum,param:{name:this.name,sex:this.sex}}).then(res=>res.data).then(res=>{console.log(res)if(res.code==200){this.tableData=res.datathis.total=res.total}else{alert('获取数据失败')}})}

下面代码是后端封装的查询的对象

@Data
public class QueryPageParam {//默认private static int PAGE_SIZE=20;private static int PAGE_NUM=1;private int pageSize=PAGE_SIZE;private int pageNum=PAGE_NUM;private HashMap param = new HashMap();}

2.新增功能

 <el-form ref="form" :rules="rules" :model="form" label-width="80px"><el-form-item label="账号" prop="no"><el-col :span="20"><el-input v-model="form.no"></el-input></el-col></el-form-item><el-form-item label="名字" prop="name"><el-col :span="20"><el-input v-model="form.name"></el-input></el-col></el-form-item><el-form-item label="密码" prop="password"><el-col :span="20"><el-input v-model="form.password"></el-input></el-col></el-form-item><el-form-item label="年龄" prop="age"><el-col :span="20"><el-input v-model="form.age"></el-input></el-col></el-form-item><el-form-item label="性别"><el-radio-group v-model="form.sex"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item><el-form-item label="电话" prop="phone"><el-col :span="20"><el-input v-model="form.phone"></el-input></el-col></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="centerDialogVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></span>

 data() {return {tableData: [],pageSize:10,pageNum:1,total:0,name:'',sex:'',sexs:[{value: '1',label: '男'}, {value: '0',label: '女'}],centerDialogVisible:false,form:{id:'',no:'',name:'',password:'',age:'',phone:'',sex:'0',roleId:'1'},rules: {no: [{required: true, message: '请输入账号', trigger: 'blur'},{min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'},{validator:checkDuplicate,trigger: 'blur'}],name: [{required: true, message: '请输入名字', trigger: 'blur'}],password: [{required: true, message: '请输入密码', trigger: 'blur'},{min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}],age: [{required: true, message: '请输入年龄', trigger: 'blur'},{min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur'},{pattern: /^([1-9][0-9]*){1,3}$/,message: '年龄必须为正整数字',trigger: "blur"},{validator:checkAge,trigger: 'blur'}],phone: [{required: true,message: "手机号不能为空",trigger: "blur"},{pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}]}}},

 doSave(){this.$axios.post(this.$httpUrl+'/user/save',this.form).then(res=>res.data).then(res=>{console.log(res)if(res.code==200){this.$message({message: '操作成功！',type: 'success'});this.centerDialogVisible = falsethis.loadPost()this. resetForm()}else{this.$message({message: '操作失败！',type: 'error'});}})},

后端新增代码

 @PostMapping("/save")public Result save(@RequestBody User user){return userService.save(user)?Result.suc():Result.fail();}

3 登录中心

登录成功之后跳转到主页（重新路由）

  if (valid) { //valid成功为true，失败为false//去后台验证用户名密码this.$axios.post(this.$httpUrl+'/user/login',this.loginForm).then(res=>res.data).then(res=>{console.log(res)if(res.code==200){//存储sessionStorage.setItem("CurUser",JSON.stringify(res.data.user))console.log(res.data.menu)this.$store.commit("setMenu",res.data.menu)//跳转到主页this.$router.replace('/Index');}else{this.confirm_disabled=false;alert('校验失败，用户名或密码错误！');return false;}});

创建路由文件如下：

import VueRouter from 'vue-router';const routes = [{path:'/',name:'login',component:()=>import('../components/Login')},{path:'/Index',name:'index',component:()=>import('../components/Index'),children:[{path:'/Home',name:'home',meta:{title:'首页'},component:()=>import('../components/Home')},

登录后端代码

  //登录@PostMapping("/login")public Result login(@RequestBody User user){List list = userService.lambdaQuery().eq(User::getNo,user.getNo()).eq(User::getPassword,user.getPassword()).list();if(list.size()>0){User user1 = (User)list.get(0);List menuList = menuService.lambdaQuery().like(Menu::getMenuright,user1.getRoleId()).list();HashMap res = new HashMap();res.put("user",user1);res.put("menu",menuList);return Result.suc(res);}return Result.fail();}