《代码实例前端Vue》Security查询用户列表，用户新增
login.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统登录-超市订单管理系统</title><link rel="stylesheet" href="../css/style.css"><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/axios.min.js"></script>
</head>
<body class="login_bg">
<div id="app"><section class="loginBox"><header class="loginHeader"><h1>超市订单管理系统</h1></header><section class="loginCont"><div style="text-align: center;height: 30px; font-size: 20px; color: red;">帐号或密码错误</div><div class="inputbox"><label for="userCode">用户名：</label><input type="text" class="input-text" v-model="username" id="userCode" name="userCode" placeholder="请输入用户名" required/></div><div class="inputbox"><label for="userPassword">密 码：</label><input type="password" id="userPassword" v-model="password" name="userPassword" placeholder="请输入密码" required/></div><div class="subBtn"><button type="button" value="登录" @click="loginBtn">登录</button><button type="button" value="重置">重置</button></div></section></section>
</div><script>new Vue({el: '#app',data() {return {username:'',password:''}}, methods: {loginBtn(){let param = new URLSearchParams();param.append("username",this.username);param.append("password",this.password);axios({url:'http://localhost:8082/login',method:'post',data:param}).then(res=>{console.log(res.data)if(res.data.code==200){//存jwtlocalStorage.setItem("jwt",res.data.data);//跳页面window.location.href="index.html";}})}}, created() {}});
</script>
</body>
</html>
user_list.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超市订单管理系统</title><link type="text/css" rel="stylesheet" href="../../css/style.css"/><link type="text/css" rel="stylesheet" href="../../css/public.css"/><link href="../../css/bootstrap.css" rel="stylesheet"><script src="../../js/jquery-3.4.1.js"></script><script src="../../js/bootstrap.js"></script><script type="text/javascript" src="../../js/vue.js"></script><script type="text/javascript" src="../../js/axios.min.js"></script><style>table tr, td, th {text-align: center;}</style>
</head>
<body>
<div style="width: 100%;height: 100%" id="app"><div class="location"><strong>你现在所在的位置是:</strong> <span>用户管理页面</span></div><div class="search"><span>用户名：</span><input name="queryname" v-model="name" class="input-text" type="text"><span>用户角色：</span><select name="queryUserRole" v-model="gender"><option value="">--请选择--</option><option value="1">男</option><option value="2">女</option></select><input type="hidden" name="pageIndex" value="1"/><input value="查 询" @click="queryUser" type="submit" id="searchbutton" style="position: relative;top: 10px"><a href="./user_add.html" style="width: 120px">添加用户</a></div><!--用户--><table class="providerTable" cellpadding="0" cellspacing="0"><tr class="firstTr"><th width="10%">序号</th><th width="10%">用户编码</th><th width="20%">用户名称</th><th width="10%">性别</th><th width="15%">电话</th><th width="10%">用户角色</th><th width="10%">操作</th></tr><tr v-for="(u,index) in userList"><td><span>{{index+1}}</span></td><td><span>{{u.id}}</span></td><td><span>{{u.username}}</span></td><td><span>{{u.gender==1?'男':'女'}}</span></td><td><span>{{u.phone}}</span></td><td><span>xxx</span></td><td><span><a class="modifyUser" href="./user_update.html"><img src="../../images/xiugai.png" alt="修改" title="修改"/></a></span><span><a class="deleteUser" href="#"><img src="../../images/schu.png" alt="删除" title="删除"/></a></span></td></tr></table><!--分页组件--><center><div style="margin-top:10px"><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">下一页</span></a></li><li class="disabled"><span>当前 x 页/共 x 页/共 x 条</span></li></ul></nav></div></center></section><!--点击删除按钮后弹出的页面--><div class="zhezhao"><div class="remove" id="removeProv"><div class="removerChid"><h2>提示</h2><div class="removeMain"><p>你确定要删除该供应商吗？</p><a href="#" id="yes">确定</a><a href="#" id="no">取消</a></div></div></div></div>
</div>
</div><script>new Vue({el: '#app',data() {return {name:'',gender:'1',userList:[]}}, methods: {queryUser(){//alert(this.name+";"+this.gender)const jwt=localStorage.getItem("jwt");axios.get('http://localhost:8082/user/queryUser?name='+this.name+"&gender="+this.gender,{headers:{'jwt':jwt}}).then(res=>{console.log(res.data)if(res.data.code==200){this.userList=res.data.data}})}}, created() {this.queryUser();}});
</script>
</body>
</html>
user_add.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超市订单管理系统</title><link type="text/css" rel="stylesheet" href="../../css/style.css"/><link type="text/css" rel="stylesheet" href="../../css/public.css"/><link href="../../css/bootstrap.css" rel="stylesheet"><script src="../../js/jquery-3.4.1.js"></script><script src="../../js/bootstrap.js"></script><script type="text/javascript" src="../../js/vue.js"></script><script type="text/javascript" src="../../js/axios.min.js"></script>
</head>
<body>
<div style="width: 100%;height: 100%" id="app"><div class="location"><strong>你现在所在的位置是:</strong><span>用户管理页面 >> 用户添加页面</span></div><div class="providerAdd"><!--div的class 为error是验证错误，ok是验证成功--><div><label for="userCode">用户编码：</label><input type="text" v-model="user.code" name="userCode" id="userCode" value=""><!-- 放置提示信息 --><font color="red"></font></div><div><label for="userName">用户名称：</label><input type="text" name="userName" v-model="user.username" id="userName" value=""><font color="red"></font></div><div><label for="userPassword">用户密码：</label><input type="password" v-model="user.password" name="userPassword" id="userPassword" value=""><font color="red"></font></div><div><label for="ruserPassword">确认密码：</label><input type="password" v-model="user.rusepassword" name="ruserPassword" id="ruserPassword" value=""><font color="red"></font></div><div><label for="phone">用户电话：</label><input type="text" v-model="user.phone" name="phone" id="phone" value=""><font color="red"></font></div><div class="providerAddBtn"><input type="button" value="保存" @click="saveUser"><input type="button" id="back" name="back" value="返回"></div></form></div>
</div><script>new Vue({el: '#app',data() {return {user:{code:'',username:'',password:'',rusepassword:'',phone:''}}}, methods: {saveUser(){console.log(this.user);const jwt=localStorage.getItem("jwt");axios.post('http://localhost:8082/user/addUser',this.user,{headers:{'jwt':jwt}}).then(res=>{console.log(res.data)if(res.data.code==5000){alert("没有操作权限!!!")}if(res.data.code==200){window.location.href="user_list.html"}})}}, created() {}});
</script>
</body>
</html>