| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> 简单的权限分配 -> 正文阅读 |
|
|
[JavaScript知识库]简单的权限分配 |
|
user.jsp <%--
Created by IntelliJ IDEA.
User: Wangwen
Date: 2022/6/22
Time: 20:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="/css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
<div id="app">
<%-- 模糊查询数据表单--%>
<el-form :inline="true" :model="formInline" class="demo-form-inline" >
<el-form-item label="姓名">
<el-input v-model="formInline.username" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="formInline.roleid" placeholder="选择角色">
<el-option v-for="role in roles" :label="role.roledesc" :value="role.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="success" icon="el-icon-check">添加</el-button>
</el-form-item>
</el-form>
<%-- 用户表格 --%>
<el-table
:data="tableData"
stripe
style="width: 100%;height: 420px">
<el-table-column
prop="id"
label="编号"
>
</el-table-column>
<el-table-column
prop="username"
label="姓名"
>
</el-table-column>
<el-table-column
prop="icon"
label="头像"
>
<%-- temlate自定义标签--%>
<template slot-scope="scope">
<img :src="scope.row.icon" height="50px" width="50px"/>
</template>
</el-table-column>
<el-table-column
prop="roledesc"
label="职位">
<template slot-scope="scope">
{{scope.row.role.roledesc}}
</template>
</el-table-column>
<el-table-column
label="操作"
>
<template slot-scope="scope">
<el-button type="warning" icon="el-icon-edit" round @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" round @click="deleteOne(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<%-- 分页--%>
<el-pagination
background
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="pageSize"
:current-page="currentPage"
:total="total">
</el-pagination>
<%-- 编辑表单弹出层 --%>
<el-dialog
title="修改信息"
:visible.sync="dialogVisible"
width="30%"
>
<span>
<el-form label-width="80px" :model="formLabelAlign">
<el-form-item label="姓名">
<el-input v-model="formLabelAlign.username"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img v-if="formLabelAlign.icon" :src="formLabelAlign.icon" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="职位">
<el-select v-model="formLabelAlign.roleid" placeholder="请选择角色">
<el-option v-for="role in roles" :label="role.roledesc" :value="role.id"></el-option>
</el-select>
</el-form-item>
</el-form>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmEditUser">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
formInline:{},
roles:[],
tableData:[],
//总条数
total:0,
//每页显示数量
pageSize:5,
//当前显示第几页
currentPage:1,
//编辑表单
formLabelAlign:{},
//编辑回显表单
dialogVisible:false,
},
//页面加载完毕执行
created(){
this.loadAllRole();
this.initTable();
},
//所有的方法
methods:{
//删除
deleteOne(id){
axios.post("/login/edit",this.formLabelAlign).then(function (result){
})
},
//确认修改
confirmEditUser(){
var that = this;
axios.post("/login/edit",this.formLabelAlign).then(function (result){
//隐藏编辑层
that.dialogVisible = false;
//重新加载数据
that.initTable();
})
},
//头像上传成功触发的函数
handleAvatarSuccess(res, file) {
this.formLabelAlign.icon = res.data
},
//编辑函数
edit(row){
this.dialogVisible=true;
this.formLabelAlign = row;
},
//onSubmit模糊查
onSubmit(){
this.initTable();
},
//页码发生改变时调用函数
handleCurrentChange(val) {
this.currentPage=val;
this.initTable();
},
//获取所有的角色
loadAllRole(){
var that = this;
axios.get("/role/findAll").then(function (result){
if(result.data.code===2000){
that.roles = result.data.data;
}
})
},
//分页传值
initTable(){
var that = this;
axios.post("/login/findAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.formInline).then(function (result){
if(result.data.code===2000){
that.tableData = result.data.data.list;
that.total = result.data.data.total;
}
})
},
}
})
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
</html>
role.jsp <%--
Created by IntelliJ IDEA.
User: Wangwen
Date: 2022/6/22
Time: 20:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="/css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
<div id="app">
<%-- 用户表格 --%>
<el-table
:data="tableData"
stripe
style="width: 100%;height: 420px">
<el-table-column
prop="id"
label="编号"
>
</el-table-column>
<el-table-column
prop="roledesc"
label="角色"
>
</el-table-column>
<el-table-column
prop="zid"
label="链表id"
>
</el-table-column>
<el-table-column
label="操作"
width="500px">
<template slot-scope="scope">
<el-button type="warning" icon="el-icon-edit" round >编辑</el-button>
<el-button type="danger" icon="el-icon-delete" round >删除</el-button>
<el-button type="success" icon="el-icon-edit" round @click="edit(scope.row.id)">权限管理</el-button>
</template>
</el-table-column>
</el-table>
<%-- 修改权限弹出层--%>
<el-dialog
title="修改信息"
:visible.sync="dialogVisible"
width="30%"
>
<%-- default-expanded-keys默认展开项
default-checked-keys默认选中项
--%>
<el-tree
:data="data"
show-checkbox
node-key="id"
ref="tree"
:default-expanded-keys="[checkedKeys]"
:props="defaultProps">
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmPermission">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
tableData:[],
//控制权限的隐藏与显示
dialogVisible:false,
//树形菜单数据
data: [],
//被选中的id
rid:0,
//被选中的菜单项目
checkedKeys:[],
defaultProps: {
children: 'children',//子菜单
label: 'menuname'//菜单名称
}
},
//页面加载完毕执行
created(){
this.initTable();
},
//所有的方法
methods:{
//确认分配权限
confirmPermission(){
var that = this;
//获取所有被选中的节点
var checkedNodes = this.$refs.tree.getCheckedNodes();
//获取半选节点
var halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes();
//声明一个变量存放被选中的节点id
var menuid = [];
checkedNodes.forEach((item,index)=>{
menuid.push(item.id);
})
halfCheckedNodes.forEach((item,index)=>{
menuid.push(item.id);
})
axios.post("/menu/confirmPermission?rid="+this.rid,menuid).then(function (result){
that.dialogVisible = false;
})
},
//修改权限
edit(rid){
this.rid = rid;
this.dialogVisible = true;
var that = this;
axios.get("/menu/allMenu?rid="+rid).then(function (result){
//查寻所有菜单
that.data = result.data.data.menus;
//查询当前角色具有的菜单id
that.checkedKeys=result.data.data.menuids;
setTimeout(()=>{
that.checkedKeys.forEach(value=>{
that.$refs.tree.setChecked(value,true,false);
})
},100)
})
},
//初始界面
initTable(){
var that = this;
axios.get("/role/findAll").then(function (result){
if(result.data.code===2000){
that.tableData = result.data.data;
}
})
},
}
})
</script>
</html>
<%--
Created by IntelliJ IDEA.
User: Wangwen
Date: 2022/6/20
Time: 19:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="/css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="/js/index.js"></script>
<style>
body{
margin: 0px;
padding: 0px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #fff;
line-height: 60px;
}
.el-aside::-webkit-scrollbar {
display: none;
}
.el-aside {
background-color: #545c64;
color: #333;
height: 600px;
line-height: 600px;
/*overflow: hidden;*/
}
.el-main {
background-color: #E9EEF3;
color: #333;
height: 600px;
line-height: 600px;
}
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: 320px;
}
.el-menu{
border: none;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<span class="el-dropdown-link" style="float: right">
<el-dropdown @command="handleCommand">
<span style="margin-top: 10px;display: inline-block" >
<el-avatar :src="loginInfo.icon"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="info" >用户信息</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</el-header>
<el-dialog
title="查看个人信息"
:visible.sync="editDialogVisible"
width="30%"
>
<!--:model==绑定表单数据-->
<el-form :model="tableData" >
<el-form-item label="编号" label-width="80px">
<el-input v-model="tableData.id" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="姓名" label-width="80px">
<el-input v-model="tableData.username" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="密码" label-width="80px">
<el-input v-model="tableData.password" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="角色id" label-width="80px">
<el-input v-model="tableData.roleid" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="头像地址" label-width="80px">
<el-input v-model="tableData.icon" autocomplete="off" ></el-input>
</el-form-item>
</el-form>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editDialogVisible = false">确定</el-button>
</span>
</el-dialog>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu :index="menu.id+''" v-for="menu in leftMenu">
<template slot="title">
<i :class="menu.icon"></i>
<span>{{menu.menuname}}</span>
</template>
<el-menu-item :index="second.id+''" v-for="second in menu.children">
<i :class="second.icon"></i>
<span slot="title" >
<a @click="showContent(second.href,second.menuname)">{{second.menuname}}</a></span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<%--标签页
v-model当前活跃的tab
@tab-remove移除当前标签
--%>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab(editableTabsValue)">
<%-- v-for循环所有tab标签
editableTabs表示所有tab
--%>
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<%-- {{item.content}}--%>
<iframe :src="item.url" frameborder="0" width="100%" height="600px;"></iframe>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
//登录者头像
loginInfo:"",
//左侧菜单
leftMenu:[],
myUser:[],
tableData:[],
editDialogVisible : false,
//当前活跃的索引
editableTabsValue:'1',
tabIndex:1,
//表示所有tab
editableTabs:[{
//当前活跃的索引
name:'1',
//标签
title:"首页",
url: 'index.jsp'
}],
},
created(){
this.loadAvatar();
this.leftMenus();
},
methods:{
//调用添加tab函数
addTab(url, menuname) {
let newTabName = ++this.tabIndex + '';
//获取所有标签
let tabs = this.editableTabs;
//定义是否已经存在标签
var isHaveTab = false;
//循环所有标签判断该标签是否已经存在
tabs.forEach((tab,index) => {
//判断如果为true，判断该tab已经存在
if(menuname===tab.title){
isHaveTab = true;
newTabName = tab.name;
}
});
//如果不存在，则添加
if(!isHaveTab){
//数组editableTabs 添加新的tab
this.editableTabs.push({
title: menuname,
name: newTabName,
url: url
});
}
this.editableTabsValue = newTabName;
},
//移除标签的方法
removeTab(targetName){
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
},
//左侧点击事件
showContent(url,menuname){
this.addTab(url,menuname);
},
//menu获取菜单
leftMenus(){
var that = this;
axios.get("/menu/leftMenu").then(function (result){
that.leftMenu = result.data.data
})
},
loadAvatar(){
var that = this;
//用户登录
axios.get("/login/loginone").then(function (result){
that.loginInfo = result.data.data
})
},
handleCommand(command) {
//查看个人信息
if(command=='info'){
var that = this;
axios.get("/login/info").then(function (result){
if(result.data.code===2000){
that.editDialogVisible=true
that.tableData = result.data.data
}
})
//退出登录
}else if(command=='logout'){
axios.get("/login/logout").then(function (result){
if(result.data.code===2000){
location.href="/login.jsp";
}
})
}
}
}
})
</script>
</body>
</html>
main.jsp <%--
Created by IntelliJ IDEA.
User: Wangwen
Date: 2022/6/20
Time: 19:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="/css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="/js/index.js"></script>
<style>
body{
margin: 0px;
padding: 0px;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #fff;
line-height: 60px;
}
.el-aside::-webkit-scrollbar {
display: none;
}
.el-aside {
background-color: #545c64;
color: #333;
height: 600px;
line-height: 600px;
/*overflow: hidden;*/
}
.el-main {
background-color: #E9EEF3;
color: #333;
height: 600px;
line-height: 600px;
}
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: 320px;
}
.el-menu{
border: none;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<span class="el-dropdown-link" style="float: right">
<el-dropdown @command="handleCommand">
<span style="margin-top: 10px;display: inline-block" >
<el-avatar :src="loginInfo.icon"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="info" >用户信息</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</el-header>
<el-dialog
title="查看个人信息"
:visible.sync="editDialogVisible"
width="30%"
>
<!--:model==绑定表单数据-->
<el-form :model="tableData" >
<el-form-item label="编号" label-width="80px">
<el-input v-model="tableData.id" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="姓名" label-width="80px">
<el-input v-model="tableData.username" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="密码" label-width="80px">
<el-input v-model="tableData.password" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="角色id" label-width="80px">
<el-input v-model="tableData.roleid" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="头像地址" label-width="80px">
<el-input v-model="tableData.icon" autocomplete="off" ></el-input>
</el-form-item>
</el-form>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editDialogVisible = false">确定</el-button>
</span>
</el-dialog>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu :index="menu.id+''" v-for="menu in leftMenu">
<template slot="title">
<i :class="menu.icon"></i>
<span>{{menu.menuname}}</span>
</template>
<el-menu-item :index="second.id+''" v-for="second in menu.children">
<i :class="second.icon"></i>
<span slot="title" >
<a @click="showContent(second.href,second.menuname)">{{second.menuname}}</a></span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<%--标签页
v-model当前活跃的tab
@tab-remove移除当前标签
--%>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab(editableTabsValue)">
<%-- v-for循环所有tab标签
editableTabs表示所有tab
--%>
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<%-- {{item.content}}--%>
<iframe :src="item.url" frameborder="0" width="100%" height="600px;"></iframe>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
//登录者头像
loginInfo:"",
//左侧菜单
leftMenu:[],
myUser:[],
tableData:[],
editDialogVisible : false,
//当前活跃的索引
editableTabsValue:'1',
tabIndex:1,
//表示所有tab
editableTabs:[{
//当前活跃的索引
name:'1',
//标签
title:"首页",
url: 'index.jsp'
}],
},
created(){
this.loadAvatar();
this.leftMenus();
},
methods:{
//调用添加tab函数
addTab(url, menuname) {
let newTabName = ++this.tabIndex + '';
//获取所有标签
let tabs = this.editableTabs;
//定义是否已经存在标签
var isHaveTab = false;
//循环所有标签判断该标签是否已经存在
tabs.forEach((tab,index) => {
//判断如果为true，判断该tab已经存在
if(menuname===tab.title){
isHaveTab = true;
newTabName = tab.name;
}
});
//如果不存在，则添加
if(!isHaveTab){
//数组editableTabs 添加新的tab
this.editableTabs.push({
title: menuname,
name: newTabName,
url: url
});
}
this.editableTabsValue = newTabName;
},
//移除标签的方法
removeTab(targetName){
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
},
//左侧点击事件
showContent(url,menuname){
this.addTab(url,menuname);
},
//menu获取菜单
leftMenus(){
var that = this;
axios.get("/menu/leftMenu").then(function (result){
that.leftMenu = result.data.data
})
},
loadAvatar(){
var that = this;
//用户登录
axios.get("/login/loginone").then(function (result){
that.loginInfo = result.data.data
})
},
handleCommand(command) {
//查看个人信息
if(command=='info'){
var that = this;
axios.get("/login/info").then(function (result){
if(result.data.code===2000){
that.editDialogVisible=true
that.tableData = result.data.data
}
})
//退出登录
}else if(command=='logout'){
axios.get("/login/logout").then(function (result){
if(result.data.code===2000){
location.href="/login.jsp";
}
})
}
}
}
})
</script>
</body>
</html>
sping.xml <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--1.包扫描-->
<context:component-scan base-package="com.www"/>
<!--2.静态资源放行-->
<mvc:default-servlet-handler/>
<!--3.特殊注解的开启-->
<mvc:annotation-driven/>
<!-- 文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--这里的单位为字节10M*1024K*1024-->
<property name="maxUploadSize" value="10485760"/>
</bean>
<bean id="ds" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/achao?serverTimezone=Asia/Shanghai&characterEncoding=UTF-8"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
<!--初始化连接数量:根据你项目的并发进行评估-->
<property name="initialSize" value="5"/>
<!--最大的连接个数-->
<property name="maxActive" value="10"/>
<!--等待时间 单位是毫秒-->
<property name="maxWait" value="3000"/>
</bean>
<!--sqlSessionFactory 整合mybatis-->
<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="ds"/>
<!--设置mybatis映射文件的路径-->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
<!-- 分页配置-->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
</bean>
</array>
</property>
</bean>
<!--为指定dao接口生成代理实现类。交于spring容器来管理dao接口的代理实现类对象。-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!--basePackage:为那些包下的dao接口生成代理实现类。-->
<property name="basePackage" value="com.www.dao"/>
</bean>
</beans>
UserDao.xml <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.www.dao.UserDao">
<resultMap id="baseUserMap" type="com.www.entity.User" autoMapping="true">
<id property="id" column="uid"/>
<association property="role" javaType="com.www.entity.Role" autoMapping="true">
<id property="id" column="rid"/>
</association>
</resultMap>
<sql id="usersql">
u.id uid,username,roleid,icon,r.id rid,roledesc
</sql>
<!-- 修改用户信息-->
<update id="update">
update tbl_user set username = #{username},icon = #{icon},roleid = #{roleid} where id = #{id}
</update>
<select id="select" resultType="com.www.entity.User">
select
*
from tbl_user where username=#{username} and password=#{password}
</select>
<select id="findAll" resultMap="baseUserMap">
select
<include refid="usersql"/>
from tbl_user u join tbl_role r on u.roleid = r.id
<where>
<if test="username!=null and username!=''">
and username like '%${username}%'
</if>
<if test="roleid!=null">
and roleid=#{roleid}
</if>
</where>
</select>
</mapper>
RoleDao.xml <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.www.dao.RoleDao">
<select id="findAll" resultType="com.www.entity.Role">
select * from tbl_role
</select>
</mapper>
MenuDao.xml <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.www.dao.MenuDao">
<select id="findUserId" resultType="com.www.entity.Menu">
select tbl_menu.* from link_id join tbl_menu on link_id.mid=tbl_menu.id where link_id.rid=#{userid}
</select>
<!-- 查询所有-->
<select id="findAllMenu" resultType="com.www.entity.Menu">
select * from tbl_menu
</select>
<select id="findAllMenuId" resultType="java.lang.Integer">
select mid from rolemenu where rid=#{rid}
</select>
<!--删除角色具有的菜单-->
<delete id="delete">
delete from link_id where id = #{rid}
</delete>
<!-- 批量添加
collection如果有别名写别名
没的话写array-->
<insert id="batchInsert">
insert into link_id values
<foreach collection="menuid" item="mid" separator=",">
(null,#{mid},#{rid})
</foreach>
</insert>
</mapper>
OSSUtils package com.www.utils;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.util.Calendar;
import java.util.UUID;
public class OSSUtils {
public static String show(MultipartFile file)throws Exception {
// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
String endpoint = "111";
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
String accessKeyId = "111";
String accessKeySecret = "111";
// 填写Bucket名称，例如examplebucket。
String bucketName = "11o11";
// 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
//你上传到oss后的名字 会根据日期帮你创建文件夹。
String objectName =fileName(file);
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
try {
InputStream inputStream = file.getInputStream();
ossClient.putObject(bucketName, objectName, inputStream);
} catch (Exception oe) {
} finally {
if (ossClient != null) {
ossClient.shutdown();
}
}
String url="https://"+bucketName+"."+endpoint+"/"+objectName;
return url;
}
//获取上传到oss后的名字
private static String fileName(MultipartFile file){
Calendar calendar=Calendar.getInstance();
String name=calendar.get(Calendar.YEAR)+"/"+(calendar.get(Calendar.MONTH)+1)+"/"+
calendar.get(Calendar.DATE)+"/"+ UUID.randomUUID().toString().replace("-","")+
file.getOriginalFilename();
return name;
}
}
UserService package com.www.service;
import com.www.entity.User;
import com.www.utils.CommonResult;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;
import java.util.Map;
public interface UserService {
//账号密码查询
public User select(Map map);
//查询所有
public CommonResult findAll(Integer currentPage, Integer pageSize, Map map);
//修改
public CommonResult update(User user);
}
RoleService package com.www.service;
import com.www.entity.Role;
import com.www.entity.User;
import java.util.List;
import java.util.Map;
public interface RoleService {
public List<Role> findAll();
}
MenuService package com.www.service;
import com.www.entity.Menu;
import com.www.utils.CommonResult;
import java.util.List;
public interface MenuService {
public List<Menu> findRoleId(Integer roleid);
CommonResult findAllMenu(Integer rid);
CommonResult confirmPermission(Integer rid, Integer[] menuid);
}
UserServiceImpl package com.www.service.impl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.www.dao.UserDao;
import com.www.entity.User;
import com.www.service.UserService;
import com.www.utils.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
public User select(Map map) {
User user = userDao.select(map);
return user;
}
public CommonResult findAll(Integer currentPage, Integer pageSize, Map map) {
PageHelper.startPage(currentPage,pageSize);
List<User> list = userDao.findAll(map);
PageInfo<User> pageInfo = new PageInfo<User>(list);
return new CommonResult(2000,"分页查询成功",pageInfo);
}
// 修改
public CommonResult update(User user) {
Integer update = userDao.update(user);
if(update==1){
return new CommonResult(2000,"修改成功",null);
}
return new CommonResult(5000,"修改失败",null);
}
}
RoleServiceImpl package com.www.service.impl;
import com.www.dao.RoleDao;
import com.www.dao.UserDao;
import com.www.entity.Role;
import com.www.entity.User;
import com.www.service.RoleService;
import com.www.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service
public class RoleServiceImpl implements RoleService {
@Autowired
private RoleDao roleDao;
public List<Role> findAll() {
List<Role> list = roleDao.findAll();
return list;
}
}
MenuServiceImpl package com.www.service.impl;
import com.www.dao.MenuDao;
import com.www.entity.Menu;
import com.www.service.MenuService;
import com.www.utils.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.smartcardio.CommandAPDU;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class MenuServiceImpl implements MenuService {
@Autowired
private MenuDao menuDao;
public List<Menu> findRoleId(Integer roleid) {
List<Menu> userId = menuDao.findUserId(roleid);
//一级菜单
List<Menu> menus = new ArrayList<Menu>();
for(Menu first:userId) {
if(first.getZid()==0){
menus.add(first);
}
}
for(Menu f:menus) {
//二级菜单
List<Menu> menu = new ArrayList<Menu>();
for(Menu s:userId){
if(s.getZid().equals(f.getId())){
menu.add(s);
}
}
f.setChildren(menu);
}
return menus;
}
public CommonResult findAllMenu(Integer rid) {
List<Menu> list = menuDao.findAllMenu();
//一级菜单
List<Menu> menus = new ArrayList<Menu>();
for(Menu first:list) {
if(first.getZid()==0){
menus.add(first);
}
}
for(Menu f:menus) {
//二级菜单
List<Menu> menu = new ArrayList<Menu>();
for(Menu s:list){
if(s.getZid().equals(f.getId())){
menu.add(s);
}
}
f.setChildren(menu);
}
//查询当前角色具有的菜单id
List<Integer> menuids = menuDao.findAllMenuId(rid);
Map map = new HashMap();
map.put("menus",menus);
map.put("menuids",menuids);
return new CommonResult(2000,"查询成功",map);
}
//确认权限
public CommonResult confirmPermission(Integer rid, Integer[] menuid) {
//删除rid具有的权限
menuDao.delete(rid);
//添加rid的权限
menuDao.batchInsert(rid,menuid);
return new CommonResult(2000,"分配成功",null);
}
}
User package com.www.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
private Integer roleid;
private String icon;
private Role role;//用户的角色
public User(Integer id, String username, String password, Integer roleid, String icon) {
this.id = id;
this.username = username;
this.password = password;
this.roleid = roleid;
this.icon = icon;
}
}
Role package com.www.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Role {
private Integer id;
private String roledesc;
private Integer zid;
}
Menu package com.www.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Menu {
private Integer id;
private String menuname;
private String href;
private Integer zid;
private String icon;
private List<Menu> children;
}
UserDao package com.www.dao;
import com.www.entity.User;
import org.apache.ibatis.annotations.Param;
import java.util.List;
import java.util.Map;
public interface UserDao {
//查询按账号密码
public User select(Map map);
//查询所有
public List<User> findAll(Map map);
//修改User数据
public Integer update(User user);
}
RoleDao package com.www.dao;
import com.www.entity.Role;
import com.www.entity.User;
import java.util.List;
import java.util.Map;
public interface RoleDao {
public List<Role> findAll();
}
MenuDao package com.www.dao;
import com.www.entity.Menu;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface MenuDao {
public List<Menu> findUserId(Integer userid);
List<Menu> findAllMenu();
List<Integer> findAllMenuId(Integer roleid);
void delete(Integer rid);
void batchInsert(@Param("rid") Integer rid,@Param("menuid") Integer[] menuid);
}
UserController package com.www.controller;
import com.sun.corba.se.impl.resolver.SplitLocalResolverImpl;
import com.www.entity.User;
import com.www.service.UserService;
import com.www.utils.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpSession;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/login")
public class UserController {
@Autowired
private UserService userService;
//修改数据
@PostMapping("edit")
public CommonResult edit(@RequestBody User user){
return userService.update(user);
}
//获取用户
@RequestMapping("/loadUserInfo")
public CommonResult loadUserInfo(HttpSession session,@RequestBody Map map) {
User user = userService.select(map);
session.setAttribute("user",user);
if(user!=null){
return new CommonResult(2000,"获取当前用户成功",user);
}
return new CommonResult(5000,"获取当前用户失败",null);
}
//用户退出
@GetMapping("/logout")
public CommonResult logout(HttpSession session){
session.removeAttribute("user");
return new CommonResult(2000,"退出成功",null);
}
//用户人人信息
@GetMapping("/info")
public CommonResult info(HttpSession session){
User user = (User) session.getAttribute("user");
return new CommonResult(2000,"显示成功",user);
}
//用户登录
@GetMapping("/loginone")
public CommonResult login(HttpSession session){
User user =(User) session.getAttribute("user");
return new CommonResult(2000,"登录成功",user);
}
//查询用户
@RequestMapping("/findAll")
public CommonResult findAll(@RequestParam(defaultValue = "1") Integer currentPage,@RequestParam(defaultValue = "5") Integer pageSize, @RequestBody Map map){
return userService.findAll(currentPage,pageSize,map);
}
}
UploadController
package com.www.controller;
import com.www.utils.CommonResult;
import com.www.utils.OSSUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
@RestController
@RequestMapping("/upload")
public class UploadController {
@PostMapping
public CommonResult liftMenu(MultipartFile file) throws Exception {
String path = OSSUtils.show(file);
return new CommonResult(2000,"上传成功",path);
}
}
RoleController package com.www.controller;
import com.www.entity.Menu;
import com.www.entity.Role;
import com.www.entity.User;
import com.www.service.MenuService;
import com.www.service.RoleService;
import com.www.utils.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/role")
public class RoleController {
@Autowired
private RoleService roleService;
@RequestMapping("/findAll")
public CommonResult liftMenu(){
List<Role> list = roleService.findAll();
return new CommonResult(2000,"角色查询成功",list);
}
}
MenuController package com.www.controller;
import com.www.entity.Menu;
import com.www.service.MenuService;
import com.www.utils.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("menu")
public class MenuController {
@Autowired
private MenuService menuService;
@GetMapping("/leftMenu")
public CommonResult liftMenu(){
int roleid = 1;
List<Menu> roleId = menuService.findRoleId(roleid);
return new CommonResult(2000,"左侧查询成功",roleId);
}
@GetMapping("/allMenu")
public CommonResult allMenu(Integer rid){
return menuService.findAllMenu(rid);
}
@PostMapping("/confirmPermission")
public CommonResult confirmPermission(Integer rid,@RequestBody Integer[] menuid){
return menuService.confirmPermission(rid,menuid);
}
}
|
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年11日历 | -2025/11/30 1:59:10- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |