userInfoController
//登录
@PostMapping("loginJWT")
//HttpServletRequest用于获取客户端发送的HTTP请求的信息,使用了Spring MVC的@RequestBody注解的参数-HTTP请求的内容体（Body）是JSON或其他格式的数据时，Spring MVC会自动将这个数据转换为Users类型的Java对象。
public Result login_session(/*HttpServletRequest httpServletRequest,*/@RequestBody User user){
User e=userFenyeService.logIn(user);
//JWT登录
if(e!=null){
Map<String,Object> claims=new HashMap<>();
claims.put("id",e.getId());
claims.put("username",e.getUsername());
claims.put("password",e.getPassword());
//使用JWT工具类，生成身份令牌
String token= JwtUtils.generateJwt(claims);
System.out.println("token"+token);
Map<String,String> response=new HashMap<>();
response.put("token",token);
System.out.println("查询不为空"+user.getUsername());
return Result.success(token);
}
else{
System.out.println("查询为空"+user.getUsername());
return Result.error("用户名或密码错误");}
@GetMapping("user_management")
public Result user_manager(){
PageBean userList=userFenyeService.list(1,20);
return Result.success(userList);
}login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--引入组件库-->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="js/element.css">
<title>登录页面</title>
</head>
<body>
<div id="app">
<div class="Login_container">
<div class="Login_box">
<div class="avatar_box">
<img src="./img/head.jpg" alt="">
</div>
<!--登录表单区-->
<el-form :model="form" :rules="rules" ref="loginForm" label-width="80px" class="login_form">
<el-form-item label="用户" prop="username">
<el-input v-model="form.username" ></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<div class="btns">
<el-button type="primary" :plain="true" @click="submitForm('loginForm')">登录</el-button>
<el-button type="primary" @click="resetForm('loginForm')">重置</el-button>
</div>
</el-form>
</div>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return{
//登录表单的数据绑定对象
form:{
username:'',
password:''
},
//表单的验证规则对象
rules:{
//用户名合法
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
//密码合法
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
},
tableData:[],
token:localStorage.getItem("token")||''
};
},
methods:{
//登录,注意，一定要退出登录，才能再次输入密码账号验证，否则session依然有效。
submitForm(formName) {
this.$refs[formName].validate((valid) => {
//表单验证
if(!valid) return;
var URL = 'loginJWT';
axios.post(URL, {
username: this.form.username,
password: this.form.password
}).then(res => {
this.tableData=res.data;
//从服务器响应中提取一个令牌，并将其存储到浏览器的localStorage中，以便在后续的操作中使用。
const token=res.data.data;
localStorage.setItem('token',token);
if (this.tableData.data!=null) {
location.href="user_management.html"
} else {
location.href = 'error.html'
}
}).catch(error => {console.error(error);
this.$message({ message: '登录失败，请检查用户名和密码', type: 'error' });
});
})},
//重置
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})
</script>
<style>
#app{
height:750px;
}
.Login_container{
background-image: url("./img/login.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
/* 如果容器是 body 或其他可能不完全占据视口的元素，你可能需要额外的样式来确保它占据整个视口 */
width: 100%;
}
.Login_box{
width:450px;
height: 300px;
background-color:rgba(255,255,255,0.3);
border-radius: 3px;
position: absolute;
left: 36%;
top:50%;
transform: translate(-50%,-50%);
}
.avatar_box{
height: 130px;
width:130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 8px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
top:4%;
transform: translate(-50%,-50%);
background-color:#fff;
}
img{
width:120px;
border-radius: 50%;
background-color: #eee;
}
.login_form{
position:absolute;
bottom:25px;
left:30px;
}
.btns{
display:flex;
justify-content:flex-end;
}
</style>
</html>user_management.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--引入组件库-->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="js/element.css">
<title>用户管理</title>
</head>
<body>
<div id="app">
<div>
<el-container style="height: 100vh; display: flex; flex-direction: row;">
<!--侧边栏-->
<el-aside width="200px" >
<el-menu background-color="#FEF5E4" text-color="#F09466" active-text-color="#ffd04b" style="position: absolute;top: 100px;">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">
用户管理
</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-document"></i>
<span slot="title">
电影信息管理
</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">
场次管理
</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-document"></i>
<span slot="title">
订单管理
</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<!--头部-->
<el-header style="height:80px; position: sticky; top: 0;z-index: 10" >
<div>
<img src="./img/head.jpg" alt="">
影院管理系统
</div>
<el-button type="info" @click="back" style="height:40px; background-color: #D7A93A">退出</el-button>
</el-header>
<!--查询-->
<h1 style="text-align: center">用户信息</h1>
<p>
<el-form :inline="true" :model="formInline" class="demo-form-inline" align="center">
<el-form-item label="姓名">
<el-input v-model="formInline.username" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="formInline.phone" placeholder="电话"></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning" plain @click="onSubmit">查询</el-button>
</el-form-item>
<el-form-item>
<i class="el-icon-folder-add" @click="add" style="color:#D1A922;">新增</i>
</el-form-item>
</el-form>
<!--新增-->
<el-dialog title="新增信息" :visible.sync="editDialog_insert" width="50%" center>
<el-form label-width="100px">
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="姓名" prop="username">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.username" placeholder="请输入姓名"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="地址" prop="address">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.address" placeholder="请输入地址"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="邮箱" prop="email">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="电话" prop="phone">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.phone" placeholder="请输入电话"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="密码" prop="password">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.password" placeholder="请输入密码"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="checkRule_footer">
<el-button @click="cancelInsert">取 消</el-button>
<el-button type="primary" @click="insert">确 定</el-button>
</span>
</el-dialog>
</p>
<!--主要内容区-->
<el-main style="flex: 1; overflow: auto;">
<el-card>
<!--用户信息表-->
<el-table :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))" style="width: 100%;">
<el-table-column prop="id" label="编号" width="180"></el-table-column>
<el-table-column prop="username" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="password" label="密码"></el-table-column>
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<el-input v-model="search" size="mini" placeholder="输入名字搜索"/>
</template>
<template slot-scope="scope">
<!--编辑信息弹框-->
<el-dialog title="编辑用户信息" :visible.sync="editRule.editDialog" width="50%" center>
<el-form :model="editRule.ruleForm" label-width="100px">
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="编号" prop="id">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.id" placeholder="请输入编号"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="姓名" prop="username">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.username" placeholder="请输入姓名"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="地址" prop="address">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.address" placeholder="请输入地址"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="邮箱" prop="email">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="电话" prop="phone">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.phone" placeholder="请输入电话"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item label="密码" prop="password">
<el-row :gutter="4">
<el-col :span="12" class="checkRule_list">
<el-input v-model="user.password" placeholder="请输入密码"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="checkRule_footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="update">确 定</el-button>
</span>
</el-dialog>
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[20, 30, 40, 50]"
:page-size="pageSize"
:total="total">
</el-pagination>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data(){
return{
tableData:[],
search: '',
currentPage4: 1,
total:null,
pageSize: 20,
//编辑规则
editRule: {
editDialog: false, //弹窗
},
editDialog_insert: false, //新增弹窗
user:{},
//查询
formInline:{
username:'',
phone:''
},
//验证是否登录
resData:{
code:'',msg:'',data:''
},
//尝试从localStorage中获取键名为"token"的项的值，并将其赋值给变量token。如果"token"项不存在，则token将被赋值为空字符串。
token:localStorage.getItem("token")||''
}
},
methods:{
//退出
back(){
var URL='/logout';
axios.get(URL).then(res=>{
location.href='login.html'
})
},
//编辑
handleEdit(index, row) {
this.editRule.editDialog=true;
var URL=`UserFindByID/${row.id}`
axios.get(URL,{
headers:{'token':this.token}
}).then(response=>{
if(response.data.code){
this.user=response.data.data;
}
}).catch(error=>{})
console.log(index, row);
},
//取消弹框
cancel(){
this.editRule.editDialog=false;
},
//弹框编辑信息并确认
update:function(){
var URL='updateData';
//put请求用于更新资源.url 是你想要更新的资源的地址;this.poet是包含更新后数据的对象，这个对象将被发送到服务器以更新资源。
axios.put(URL,this.user,{
headers: {
'token': this.token
}
}).then(res=>{
if(res.data.code){
this.editRule.editDialog=false;
location.href='user_management.html';
}else{alert(res.data.message);}
}).catch(error=>{})
},
//删除
handleDelete(index, row) {
if (window.confirm("确定要删除该记录吗？")) {
axios.post(`/deleteData?id=${row.id}`,{
headers: {
'token': this.token
}
}).then(ans => {
alert("删除成功");
this.findFenyeData();
}).catch(function (error) {console.log(error);})
}
console.log(index, row);
},
//新增
cancelInsert(){
this.editDialog_insert=false;
},
add(){
this.editDialog_insert=true;
},
insert(){
var URL="insertData";
axios.post(URL,this.user,{
headers: {
'token': this.token
}
}).then(res=>{
if(res.data.code){
this.editDialog_insert=false;
this.findFenyeData();
alert("新增成功");}
console.log("user:"+this.user.username)
}).catch(error=>{})
},
//分页
findFenyeData() {
var URL = `/fenyeData/${this.currentPage4}/${this.pageSize}`
axios.get(URL,{
headers: {
'token': this.token
}
}).then(res => {
if (res.data.code) {
this.tableData = res.data.data.rows;
this.total = res.data.date.total;
}
}).catch(error => {
console.error(error);
})
},
handleSizeChange(val) {
this.pageSize = val;
this.findFenyeData();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage4 = val;
this.findFenyeData();
console.log(`当前页: ${val}`);
},
//查询
onSubmit() {
var url = `/UserOne/${this.currentPage4}/${this.pageSize}?username=${encodeURIComponent(this.formInline.username)}&phone=${encodeURIComponent(this.formInline.phone)}`
axios.get(url,{
headers: {
'token': this.token
}
})
.then(res =>{
this.tableData = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableData);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
}
},
mounted() {
var url = `/user_management`
axios.get(url,{
headers:{
'token': this.token
}
}).then(response => {
if(response.data.code){console.log("已登陆")}
else {location.href="error.html"}
})
.catch(error=>{
console.error(error);
})
},
created() {
this.findFenyeData();
}
})
</script>
<style>
a {
color: white;
text-decoration: none;
}
.el-header {
background-color: #FEF5E4;
display: flex;
justify-content: space-between;
align-items: center;
color: #F09466;
font-size: 40px;
}
> div {
display: flex;
align-items: center;
}
img {
width: 55px;
border-radius: 50%;
background-color: #eee;
}
.el-aside {
background-color:#FEF5E4;
height: 100%;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 280px;
}
</style>
</html>error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无权限</title>
</head>
<body>
<div class="center-text">
你还未登录，无权限访问喔！
</div>
</body>
<style>
.center-text {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 假设您想要全屏居中 */
}
</style>
</html>
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
