eyb：注销登录到职位管理批量删除功能实现（二）

---

目录：

【*】项目运行启动过程：

（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:添加：

 

 点击注销：

点取消的话：

点确定的话

（2）首页面包屑效果

在Home.vue添加：

 

点击首页：

 

（3）未登录菜单Bug解决

 

 当没有登录直接访问登录后的一个页面，会出现空白页面。解决办法：我们需要判断用户是否登录，登录之后才能跳转到这个页面，没有登录，跳转登录页面，进行登录，登录后才能跳转目的页面

在mian.js：中添加：

在Login.vue：

添加登录时候判断：是否在地址栏输入了目的地址

 

 如果输入目的地址：回车

首先让你登录： 

 跳到了这个页面：

（4）基础信息设置

接下来实现菜单的功能了，首先实现基础信息设置，对基础信息进行响应的设置，这些基础信息不能只是一个或两个肯定会非常多，比如部门管理、职位管理、职称管理、奖惩规则、权限组 这些都可以称为基础信息设置，接下来我们将在这一个页面，进行相应的展示，展示这么多，怎么去管理呢，使用ElementUI的对应的组件，类似于标签页：

 

 上面已经设置了router了，现在可以删除路由配置里面的：

 

 现在在基础信息设置里面可以写内容了：

每个里面都写的话，内容都放在SysBasic.vue内容非常的多，很难去管理，这时候我们可以把它们分别写在一个组件里面

在component里面创建sys/basic目录，创建组件： 

 在SysBasic.vue引入创建的组件：

 

 

点击职位管理：

 

 （5）职位管理页面设计

大概页面： 

 PosManan.vue：简单样式：

 

（6）职位管理接口调用

 调用后端的接口，实现相应的功能，首先调用查询接口，进行数据显示

 在PosMan.vue中添加：操作一行

添加方法调用后端接口：

显示职位信息列表： 

 

 

 

 添加职位的方法：

 

 输入名字直接回车就可以添加进来

 删除方法：

 

 

（7）职位管路编辑功能实现

 当点击编辑，弹出来一个编辑框，进行修改

PosMana.vue：添加弹出框

 

 

 

 

（8）职位管理批量删除功能实现

 添加批量删除按钮：

 

 

 PosManan.vue：

 添加几条数据：

 

 

以上整个职位管理的增删改查，就处理完了，职位管理功能实现完成！！