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){
//存jwt
localStorage.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>
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
