目录:
【*】项目运行启动过程:
(1)注销登录功能实现
(2)首页面包屑效果
(3)未登录菜单Bug解决
(4)基础信息设置
(5)职位管理页面设计
(6)职位管理接口调用
(7)职位管路编辑功能实现
(8)职位管理批量删除功能实现
【*】项目运行启动过程:
由于自己的redis和stracker 和storage分被状态两个虚拟机上所以需要先启动两台虚拟机:
首先启动Redis:
启动命令:指定配置文件的启动命令:
redis-server redis6379P.conf &
redis-cli -h 192.168.23.128 -a root
启动Redis可视化客户端:
在启动tracker 和storage:
启动命令:这里是在根目录下的启动方式,如果进入到目录下直接局就可以启动
tracker:启动命令
/etc/init.d/fdfs_trackerd start
storage启动命令:
/etc/init.d/fdfs_storaged start
nginx启动命令:
cd /usr/local/nginx/sbin
./nginx
上面启动nginx出现了占用端口,先关闭nginx在重新运行nginx
如果启动nginx出现下面的情况:解决方式:
以上连接过程,如果连接不上,尝试一个暂时关闭Linux的防火墙:
systemctl stop firewalld
(1)注销登录功能实现
下面处理头像左边的下拉框的功能实现,首先实现注销登录
这个下拉框是elementUi的下拉框,有专门的事件处理方式
Home.vue:添加:
<template>
<div>
<el-container>
<el-header class="homeHeader">
<div class="title">云E办</div>
<el-dropdown class="userInfo" @command="commandHandler">
<span class="el-dropdown-link">
{{user.name}}
<i><img :src="user.userFace"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
<el-dropdown-item command="setting">设置中心</el-dropdown-item>
<el-dropdown-item command="logout">注销</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-container>
<el-aside width="200px">
<!--router使用router模式,路由进行跳转:把路由数据进行渲染-->
<el-menu router unique-opened>
<!--循环路由,v-if当循环的item是hidden时候不显示-->
<el-submenu :index="index+''" v-for="(item,index) in routes" :key="index" v-if="!item.hidden">
<template slot="title">
<i :class="item.iconCls" style="color: #1accff;margin-right: 5px"></i>
<span>{{item.name}}</span>
</template>
<!--子路由循环 -->
<el-menu-item :index="children.path" v-for="(children,index) in item.children" :key="index">
{{children.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view class="homeRouterView"/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default{
name:"Home",
data() {
return {
//拿到用户对象
user: JSON.parse(window.sessionStorage.getItem("user"))
}
},
//计算属性
computed: {
routes() {
return this.$store.state.routes;
}
},
methods:{
//头像的下拉框功能
commandHandler(cmd) {
//判断command是否为logout,是的话退出
if (cmd == 'logout') {
this.$confirm('此操作将注销登录,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//注销,调用后端接口:/logout
this.postRequest("/logout");
//清除用户信息
window.sessionStorage.removeItem("user");
window.sessionStorage.removeItem("tokenStr");
//清空菜单
this.$store.commit('initRoutes', []);
//跳转登录页
this.$router.replace("/")
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
}
}
}
</script>
<style>
.homeHeader {
background-color: #409eff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 15px;
box-sizing: border-box;
}
.homeHeader .title {
font-size: 30px;
font-family: 华文行楷;
color: #ffffff;
}
.homeHeader .userInfo {
cursor: pointer;
}
.homeWelcome {
text-align: center;
font-size: 30px;
font-family: 华文行楷;
color: #409eff;
padding-top: 50px;
}
.homeRouterView {
margin-top: 10px;
}
.el-dropdown-link img {
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 8px;
}
.el-dropdown-link {
display: flex;
align-items: center;
}
</style>
点击注销:
点取消的话:
点确定的话
(2)首页面包屑效果
在Home.vue添加:
点击首页:
(3)未登录菜单Bug解决
当没有登录直接访问登录后的一个页面,会出现空白页面。解决办法:我们需要判断用户是否登录,登录之后才能跳转到这个页面,没有登录,跳转登录页面,进行登录,登录后才能跳转目的页面
在mian.js:中添加:
在Login.vue:
添加登录时候判断:是否在地址栏输入了目的地址
如果输入目的地址:回车
首先让你登录:
跳到了这个页面:
(4)基础信息设置
接下来实现菜单的功能了,首先实现基础信息设置,对基础信息进行响应的设置,这些基础信息不能只是一个或两个肯定会非常多,比如部门管理、职位管理、职称管理、奖惩规则、权限组 这些都可以称为基础信息设置,接下来我们将在这一个页面,进行相应的展示,展示这么多,怎么去管理呢,使用ElementUI的对应的组件,类似于标签页:
上面已经设置了router了,现在可以删除路由配置里面的:
现在在基础信息设置里面可以写内容了:
每个里面都写的话,内容都放在SysBasic.vue内容非常的多,很难去管理,这时候我们可以把它们分别写在一个组件里面
在component里面创建sys/basic目录,创建组件:
在SysBasic.vue引入创建的组件:
<template>
<div>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="部门管理" name="depmana">
<DepMana></DepMana>
</el-tab-pane>
<el-tab-pane label="职位管理" name="posmana">
<PosMana></PosMana>
</el-tab-pane>
<el-tab-pane label="职称管理" name="JoblevelMana">
<JoblevelMana>
</JoblevelMana>
</el-tab-pane>
<el-tab-pane label="奖惩规则" name="ecmana">
<EcMana></EcMana>
</el-tab-pane>
<el-tab-pane label="权限组" name="permissmana">
<PermissMana>
</PermissMana>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
//引入创建的组件
import DepMana from '../../components/sys/basic/DepMana'
import EcMana from '../../components/sys/basic/EcMana'
import JoblevelMana from '../../components/sys/basic/JoblevelMana'
import PermissMana from '../../components/sys/basic/PermissMana'
import PosMana from '../../components/sys/basic/PosMana'
export default {
name: "SysBasic",
data(){
return{
activeName: 'posmana'
}
},
//引入对应的组件,变成这个页面的组件
components:{
DepMana,
EcMana,
JoblevelMana,
PermissMana,
PosMana
}
}
</script>
<style scoped>
</style>
点击职位管理:
(5)职位管理页面设计
大概页面:
PosManan.vue:简单样式:
<template>
<div>
<div>
<el-input
size="small"
class="addPosInput"
placeholder="添加职位"
suffix-icon="el-icon-plus"
v-model="pos.name">
</el-input>
<el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
</div>
<div class="posManaMain">
<el-table
:data="positions"
border
stripe
size="small"
@selection-change="handleSelectionChange"
style="width: 70%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="编号" width="55"></el-table-column>
<el-table-column prop="name" label="职位名称" width="120"></el-table-column>
<el-table-column prop="createDate" label="创建时间"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "PosMana",
data() {
return {
pos: {
name: ''
},
positions:[]
}
}
}
</script>
<style scoped>
.addPosInput {
width: 300px;
margin-right: 8px;
}
.posManaMain {
margin-top: 10px;
}
.updatePosInput {
width: 200px;
margin-left: 8px;
}
</style>
(6)职位管理接口调用
调用后端的接口,实现相应的功能,首先调用查询接口,进行数据显示
在PosMan.vue中添加:操作一行
添加方法调用后端接口:
显示职位信息列表:
添加职位的方法:
输入名字直接回车就可以添加进来
删除方法:
(7)职位管路编辑功能实现
当点击编辑,弹出来一个编辑框,进行修改
PosMana.vue:添加弹出框
(8)职位管理批量删除功能实现
添加批量删除按钮:
PosManan.vue:
<template>
<div>
<div>
<!-- @keydown.enter.native="addPosition"这是键盘点击事件,回车之后执行添加职位的方法-->
<el-input
size="small"
class="addPosInput"
placeholder="添加职位"
suffix-icon="el-icon-plus"
@keydown.enter.native="addPosition"
v-model="pos.name">
</el-input>
<el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
</div>
<!-- @selection-change="handleSelectionChange":表单选项改变的事件 去获取勾选的对象-->
<div class="posManaMain">
<el-table
:data="positions"
border
stripe
size="small"
@selection-change="handleSelectionChange"
style="width: 70%">
<el-table-column type="selection" width="55"></el-table-column><!--这个是多选框-->
<el-table-column prop="id" label="编号" width="55"></el-table-column>
<el-table-column prop="name" label="职位名称" width="120"></el-table-column>
<el-table-column prop="createDate" label="创建时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="showEditView(scope.$index,scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--更新弹出框-->
<el-dialog title="编辑职位" :visible.sync="dialogVisible" width="30%">
<div>
<el-tag>职位名称</el-tag>
<el-input v-model="updatePos.name" size="small" class="updatePosInput"></el-input>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="doUpdate">确定</el-button>
</span>
</el-dialog>
<!--:disabled:判断数组是否为0,不是0的时候启用-->
<el-button type="danger" size="small" style="margin-top: 8px" :disabled="multipleSelection.length == 0"
@click="deleteMany">批量删除
</el-button>
</div>
</template>
<script>
export default {
name: "PosMana",
data() {
return {
//添加的名字
pos: {
name: ''
},
positions:[],
dialogVisible:false,
//编辑的名字
updatePos: {
name: ''
},
multipleSelection: []
}
},
//当页面刚加载的时候调用initPositions方法调用后端接口,获取所有职位信息
mounted() {
this.initPositions();
},
methods:{
//批量删除方法
deleteMany() {
this.$confirm('此操作将永久删除【' + this.multipleSelection.length
+ '】条记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = '?';
this.multipleSelection.forEach(item => {
ids += 'ids=' + item.id + '&';
})
this.deleteRequest('/system/basic/pos/' + ids).then(resp => {
if (resp) {
this.initPositions();
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//表单勾选的对象,放到multipleSelection数组里面
handleSelectionChange(val){
this.multipleSelection = val;
},
//添加职位方法
addPosition() {
//添加职位
if (this.pos.name) {
//调用后端接口/system/basic/pos
this.postRequest('/system/basic/pos/', this.pos).then(resp => {
if (resp) {
//添加成功后直接再次调用initPositions方法,刷新职位列表信息让他显示出来
this.initPositions();
//添加成功后把输入框设置为空
this.pos.name = '';
}
})
} else {
this.$message.error("职位名称不可以为空!");
}
},
//显示编辑框
showEditView(index, data) {
//在编辑框里显示名字,采用Object.assign()这个方式
Object.assign(this.updatePos, data);
//把日期传过去,否则更改的时候会报错
this.updatePos.createDate = '';
//显示编辑框
this.dialogVisible = true;
},
//编辑框的更新职位方法
doUpdate() {
//修改职位 调用后端接口:/system/basic/pos
this.putRequest('/system/basic/pos/', this.updatePos).then(resp => {
if (resp) {
//更新成功,去刷新职位信息列表
this.initPositions();
this.updatePos.name = '';
//编辑框隐藏
this.dialogVisible = false;
}
})
},
//删除方法
handleDelete(index, data) {
//删除职位 使用elementUI的提示删除确认框
this.$confirm('此操作将永久删除该【' + data.name + '】职位, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//调用后端接口/system/basic/pos
this.deleteRequest('/system/basic/pos/' + data.id).then(resp => {
if (resp) {
//删除完之后,调用获取信息列表的方法,进行刷新
this.initPositions();
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//获取职位信息列表
initPositions(){
this.getRequest('/system/basic/pos/').then(resp => {
if (resp) {
this.positions = resp;
}
})
}
}
}
</script>
<style scoped>
.addPosInput {
width: 300px;
margin-right: 8px;
}
.posManaMain {
margin-top: 10px;
}
.updatePosInput {
width: 200px;
margin-left: 8px;
}
</style>
添加几条数据:
以上整个职位管理的增删改查,就处理完了,职位管理功能实现完成!!