vue中的ElementUI的使⽤详解登录+sessionStorage
效果展⽰
登录成功后会把⽤户id存⼊前端的sessionStorage，会根据是否存在⽤户id来进⾏拦截
也可以将⽤户权限存⼊sessionStorage，然后当访问某个页⾯的时候在created⽅法中判断是否具有权限
<template>
<div class="login-wrap">
<el-form class="login-container" ref="loginFormRef" :model="loginForm">
<h1 class="title">⽤户登陆</h1>
<el-form-item label="">
<el-input type="text" placeholder="⽤户账号" v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="text" placeholder="⽤户密码" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item >
<el-radio-group v-model="source">
<el-radio label="管理员"></el-radio>
<el-radio label="普通⽤户"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<template slot-scope="scope">
<el-button type="primary" @click="doLogin()" >⽤户登录</el-button>
<!-- <el-button @click="gotoRegister" >⽤户注册</el-button> -->
</template>
</el-form-item>
<!-- <el-row >
<el-link @click="gotoRegister()">⽤户注册</el-link>
<el-link>忘记密码</el-link>
</el-row> -->
</el-form>
</div>
</template>
<script>
export default {
data: function() {
return {
loginForm: {
username: '',
password: '',
resource: ''
}
}
},
methods: {
gotoRegister: function() {
this.$router.push({
name: 'register'
});
},
doLogin() {
let resource = source
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return;
if (resource == "管理员") {
const {
data: res
} = await this.axios.post("localhost:8088/loginadmin", this.loginForm)
if (res) {
this.$message.success("管理员登录成功")
sessionStorage.setItem("personid","ljhjiayou")
this.$router.push({
path: "/dong"
});
} else {
this.$("账号或密码错误")
}
/
/普通⽤户登录
}else{
const {
data: res
} = await this.axios.post("localhost:8088/loginuser", this.loginForm)
if (res) {
console.log(res)
this.$message.success("普通⽤户登录成功")
sessionStorage.setItem("personid",res)
this.$router.push({
path: "/person"
});
} else {
this.$("账号或密码错误")
}
}
})
}
}
}
</script>
//scoped="scoped" 表⽰样式仅仅规范当前VUE
<style scoped="scoped">
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxL  /* background-color: #112346; */
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.
title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
分页表格
效果展⽰
分页这⼀块是难点也是重点
handleSizeChange⽅法选择分页⼤⼩
handleCurrentChange⽅法选择第⼏页
loadData调⽤后端API接⼝获取分页的数据
<template>
<div>
<el-table :data="tableData" border >
<el-table-column fixed prop="id" label="新闻id" width="150">
</el-table-column>
<el-table-column prop="typeid" label="新闻标题" width="200">
</el-table-column>
<el-table-column prop="otherid" label="新闻摘要" width="200"> </el-table-column>
<el-table-column prop="money" label="新闻内容" width="200">
</el-table-column>
<el-table-column prop="datetime" label="新闻发布时间" width="150"> </el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="w)" size="mesdium" type="primary">修改</el-button>
<el-button @click="w)" type="warning" size="medium">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
//console.log(val)
this.pageSize = val;
this.loadData( this.currentPage, this.pageSize);
},
handleCurrentChange(val) {
console.log(val)
this.currentPage = val;
this.loadData( this.currentPage, this.pageSize);
},
//从服务器读取数据
loadData: function(pageNum, pageSize) {
let _this = this;
console.log(this.pageNum)
("localhost:8088/records/querystudentbypage?pageNum=" + pageNum +
"&pageSize=" + this.pageSize).then(function(res) {
/
/console.log(res.data.pagestudentdata.list)
_this.tableData = res.data.pagestudentdata.list;
_alCount = res.data.number;
}, function() {
console.log('failed');
});
},
},
data() {
return {
// currentPage1: 5,
/
/ currentPage2: 5,
// currentPage3: 5,
// currentPage4: 4,
currentPage: 1,
tableData: null,
pageSize: 5,
totalCount: 15,
pageNum: 1,
};
},
created() {
/
/ let _this = this;
// ("localhost:8088/records").then(function(response) {
//  _this.tableData = response.data
// })
this.loadData(this.pageNum,this.pageSize)
},
}
</script>
后端
@ResponseBody
@RequestMapping(value = "/querystudentbypage", method = RequestMethod.GET)
public Map<String, Object> querystudentbypage(@RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize)    {
PageHelper.startPage(pageNum,pageSize);
List<Records> courses = recordsMapper.selectList(null);
PageInfo<Records> page = new PageInfo<>(courses);
System.out.println("---------------"+page);
Map<String, Object> map = new HashMap<String, Object>();
map.put("pagestudentdata", page);
map.put("number", Total());
return map;
}
开关+标签页
效果展⽰
开关的主要⽅法 switchChange
标签页不难，如果看不懂下⾯代码，可以参考官⽅⽂档
前端开关主要代码
<el-table-column prop="name" label="是否冻结" width="150">
<template slot-scope="scope">
<el-switch v-model="w.statusid" :active-value="1" :inactive-value="2"      @change="switchChange($event, w)" active-color="#13ce66"
inactive-color="#ff4949"></el-switch>
</template>
</el-table-column>
完整代码
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="所有账户" name="first">
<el-table :data="tableData" border >
<el-table-column fixed prop="accoundid" label="账户id" width="150">
</el-table-column>
<el-table-column prop="password" label="密码" width="200">
</el-table-column>
<el-table-column prop="balance" label="余额" width="200"> </el-table-column>    <el-table-column prop="name" label="是否冻结" width="150">
<template slot-scope="scope">
<el-switch v-model="w.statusid" :active-value="1" :inactive-value="2"      @change="switchChange($event, w)" active-color="#13ce66"
inactive-color="#ff4949"></el-switch>
</template>
</el-table-column>
<el-table-column prop="personid" label="personid" width="200">
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="w)" type="warning" size="medium"          >删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="被冻结的账户" name="second">
<el-table :data="tableDatab" border >
<el-table-column fixed prop="accoundid" label="账户id" width="150">
</el-table-column>
<el-table-column prop="alname" label="名字" width="200">
</el-table-column>
<el-table-column prop="password" label="密码" width="200">
</el-table-column>
<el-table-column prop="balance" label="余额" width="200"> </el-table-column>    <el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="w)" type="warning" size="medium"
>启⽤</el-button
>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="已启⽤的账户" name="third">
<el-table :data="tableDatabc" border >
<el-table-column fixed prop="accoundid" label="账户id" width="150">
</el-table-column>
<el-table-column prop="alname" label="名字" width="200">
</el-table-column>
<el-table-column prop="password" label="密码" width="200">
</el-table-column>
<el-table-column prop="balance" label="余额" width="200"> </el-table-column>    <el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="w)" type="warning" size="medium"
>冻结</el-button
>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
tableData: null,
tableDatab: null,
tableDatabc: null,
activeName: 'first'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
switchChange(e, data) {
if (e == 1) {
<('localhost:8088/accounts/kaiqi/' + data.accoundid).then((res) => {
this.$message({
message: "开启成功",
type: "success"
});
// load()
});
} else if (e == 2) {
<('localhost:8088/accounts/dongjie/' + data.accoundid).then((res) => {
this.$message({
message: "冻结成功",
type: "success"
});
// load()
});
}
},
dongjie(row) {
let _this=this
this.$confirm('是否确定冻结'+alname+'的账户?','冻结账户',{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
<('localhost:8088/accounts/dongjie/'+row.accoundid).then(function (response){      if(response.data){
_this.$alert(alname+'的账户冻结成功!', '冻结账户',{
confirmButtonText: '确定',
callback: action =>{
}
});
}
})
}).catch(()=>{
});
},
qiyong(row) {
let _this=this
this.$confirm('是否确定启⽤'+alname+'的账户?','启⽤账户',{
confirmButtonText: '确定',vue element admin
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
<('localhost:8088/accounts/kaiqi/'+row.accoundid).then(function (response){      if(response.data){
_this.$alert(alname+'的账户启⽤成功!', '启⽤账户',{
confirmButtonText: '确定',
callback: action =>{
}
});
}
})
}).catch(()=>{
});
},
deleteExercise(row) {
let _this=this
this.$confirm('是否确定删除账户'+row.accoundid+'?','删除账户',{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
axios.delete('localhost:8088/accounts/'+row.accoundid).then(function (response){
if(response.data){
_this.$alert(row.accoundid+'账户删除成功!', '删除账户',{
confirmButtonText: '确定',
callback: action =>{
}
});
}
})
}).catch(()=>{
});
},
},
created(){
let _this=this;
<("localhost:8088/accounts").then(function (response){
_this.tableData=response.data
})
<("localhost:8088/accounts/dongjie").then(function (response){
_this.tableDatab=response.data
})
<("localhost:8088/accounts/qiyong").then(function (response){
_this.tableDatabc=response.data
})
},
};
</script>
前端
判断路由是否需要登录权限
main.js
router.beforeEach((to, from, next) => {
// next()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。