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.data
this.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 = false
this.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();
}