B站视频:100%学会【从0写毕业设计】基于若依Vue前后端分离版本,完成毕业设计
若依框架版本:Vue+SpringBoot前后端分离版

谢良慧,QQ2961633535,Q群868057658,WX JavaXLH

一、准备工作

1.1 Java后端下载JDK

https://docs.qq.com/doc/DQ2twYmRQdkpPem9s?u=d3f197f2ca824befb76c608c7a95a557

检查电脑是否安装JDK

java

检查电脑JDK版本,需要满足 1.8.xxxx

java -version

jdk-8u281-windows-x64.exe 需要Oracle账号

环境变量

JAVA_HOME

D:Program FilesJavajdk1.8.0_281

Path

%JAVA_HOME%bin

classpath好像没要求设置

----20240206上午

1.2 Java后端下载Maven工具

群里有

自动维护jar包的工具

解压保存,修改D:mavenapache-maven-3.8.1confsettings.xml 中 localRepository

D:mavenapache-maven-3.8.1maven-repo

1.3 下载IDEA编译器

自己下载了更好的

https://www.jetbrains.com/idea/download/?section=windows

安装破解

https://www.quanxiaoha.com/idea-pojie/idea-pojie-202325.html

中文

https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----

1.4 Web前端下载Node

群里有

不要安装高于16的

检查版本

node -v

额外选了个下载所需组件,会多下一些东西

1.5 IDEA下载vue.js插件

见二、下载、运行

莫名其妙自己安装好了

1.6 数据库下载MySQL

建议5.5、5.6、5.7

群里5.5

自定义,选文档、改路径,开启wizard,详细,开发测试类,通用多功能,D安装目录,手动15,启用TCPIP、3306、防火墙、严格,手动utf8,windows服务、自动启动、包含至路径,管理员密码123456、允许root远程。安装

1.7 下载Navicat数据库图形化工具

自己下了更好的 16,可破解

https://www.cnblogs.com/kkdaj/p/16260681.html

1.8 中间件下载Redis

若依使用了redis中间件

后端访问数据库 CRUD 创建 查询 更新 删除

后端先访问Redis数据库 没有再访问MySQL 有直接返回给后端

https://blog.csdn.net/Sdnu08gis/article/details/127881780

requirepass 保持被注释掉 不设置密码就行

redis-server --service-install redis.windows.conf --loglevel verbose

在服务中手动将Redis服务启动

-----202402061735

二、下载、运行主角若依框架

2.0 题外话

2.0.1 为什么选择若依?

  1. 登录/注册功能 不仅仅是 账号密码与数据库比对

保持一直是某一账户 保持登录状态 shiro权限框架(不分离版) SpringSecurity权限框架+JWT+Token

登陆完成 会返回token 每次请求后端接口 都会在请求头上存这个token 有过期时间

使用若依,以上功能框架开箱即用

MVC架构 毕业、升学、公司。学历高->科研,没本事->苦力活,技术技能->做网站,解决技术问题

2.0.2 MVC架构

MVC实体类层,MAP持久层、?Server业务逻辑层、控制层?

2.1 设置

2.1.1 IDE及项目设置修改

树形目录设置取消勾选compact middle packages

下载vue.js插件 file->settings->plugins, 莫名其妙自己安装好了

file->project structure -> Project-> jdk1.8 + 语言8

file->project structure -> Modules 每个都是8

file->settings->Build...->Build tools ->Maven ->use mavenwrapper 选择maven3.8.1那层文件夹,两个路径修改后override勾选

maven控件点同步,会自动下载一些组件

2.1.2 前端项目终端操作

IDEA中打开终端,cd 到ui文件夹

cd .\ruoyi-ui
npm i

第一次在idea里失败了,修复下node又好了,此步会运行很久,可以先操作下面内容

2.1.3 文件、数据库配置修改

ruoyi-admin/src/main/resources/application.yml Line12修改上传路径

profile: C:/Users/Hankr/Documents/Study/Ruoyi/StudyRuoYi/RuoYi-Upload

ruoyi-adminsrcmainresourcesapplication-druid.yml Line11修改密码

Line9修改数据库名字eg sty-ry,注意不要有多余的回车将此行断开

使用navicat创建相应数据库sty-ry,将sql文件夹下两个sql文件分别ctrlC复制,navicat中选中sty-ry后CtrlV运行SQL

刷新数据库表即可出现数据

另,idea里也可连接并查看数据库

2.1.4 前端项目终端操作

npm audit fix

修复node漏洞,需要科学上网,可能需要修复好几遍

2.2 运行

运行目录

ruoyi-adminsrcmainjavacomruoyiRuoYiApplication.java

自动识别运行函数后,点击倒三角编辑 Edit configurations

加号 npm,json选择 ruoyi-uipackage.json

scripts选dev

运行RuoYiApplication启动后端

运行dev启动前端

ctrl+shift点击url可以debug

-------202402062306成功

三、读毕业设计题目分析设计功能

3.1 题目

物流仓储管理系统,三种用户角色:管理员、员工、客户。

管理员:个人信息、客户管理、反馈信息(处理员工与客户反馈)、基础信息(管理员工、管理客户)、货物信息、货物运输。

员工:个人信息、配送范围、货物信息、货物运输、反馈信息。

客户:个人信息、配送范围、货物信息、货物运输、反馈信息。

3.2 分析

管理员、员工、客户

全集:个人信息、客户管理、反馈信息、基础信息、货物信息、货物运输、配送范围

一、个人信息

二、基础信息模块:客户管理、员工管理、供货商

三、货物模块:货物分类(供货商)、货物信息

四、运输模块:货物运输、汽车管理、配送范围(根据员工分配)

五、反馈信息

3.3 角色考虑

管理员添加员工、货物、车辆、客户(或自己注册)

客户进入浏览货物 选择配送范围 输入详细地址 输入联系方式 下单配送

管理员 分配员工 分配车辆去送

员工 拿到已分配运输订单去配送

四、根据分析设计数据库

4.1 梳理建表信息

个人信息:个人id 姓名 性别 年龄 手机号 创建时间 //若依自带了一张用户表

1 张三 男 18

2 李四 男 19

emp-info 员工信息:id 姓名 性别 年龄 手机号 配送范围(一对多)登陆账号 修改密码 创建时间 状态(0休息中、1工作中)

cus-info 客户信息:id 姓名 性别 年龄 手机号 创建时间

sup-info 供货商信息:id 供货商姓名 供货商所属公司 创建时间

goods-info 货物信息:id 货物名称 货物数量 货物单价 货物供应商 创建时间

vehicle-info 车辆信息:id 车辆名称 车辆号牌 创建时间 状态(0休息中、1工作中)

dely-scope 配送范围:id 范围名称 创建时间

fre-tsp 货物运输:id 客户 货物 数量 总价 配送范围 详细地址 联系方式 员工 车辆 状态(0未指派、1未装车、2运输中、3运输完成) 创建时间

feed-info 反馈信息:id 反馈人 反馈内容 客服处理结果 创建时间 状态(0未处理、1已处理)

4.2 使用navicat建表

id要选主键、自动增加

/*
 Navicat Premium Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 50562
 Source Host           : localhost:3306
 Source Schema         : sty-ry

 Target Server Type    : MySQL
 Target Server Version : 50562
 File Encoding         : 65001

 Date: 07/02/2024 19:38:38
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for emp_info
-- ----------------------------
DROP TABLE IF EXISTS `emp_info`;
CREATE TABLE `emp_info`  (
  `emp_info_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '员工id',
  `emp_info_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '员工姓名',
  `emp_info_sex` int(2) NULL DEFAULT 0 COMMENT '员工性别(0男 1女 2未知)',
  `emp_info_age` int(11) NULL DEFAULT NULL COMMENT '员工年龄',
  `emp_info_iphone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '员工联系方式',
  `dely_scope_id` int(11) NULL DEFAULT NULL COMMENT '配送范围',
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '登录账号',
  `status` int(2) NULL DEFAULT NULL COMMENT '状态(0休息中 1工作中)',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '登录密码',
  PRIMARY KEY (`emp_info_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '员工信息表' ROW_FORMAT = Compact;

SET FOREIGN_KEY_CHECKS = 1;

五、若依框架自动生成代码

5.1 导入信息表、建立数据字典并绑定

启动若依项目 登陆系统

系统工具->代码生成->导入,选上一步手动建立的员工信息表,确定

员工性别 选择若依自带,配送范围选下拉框

系统管理->字典管理

新建0休息中 成功 排序0, 1工作中 危险 排序1 保存为员工状态

代码生成中状态改为下拉框,绑定到这个字典

5.2 新增菜单及图标

系统管理->菜单管理 新增 主类目.目录,名为 基础信息,图标 log,顺序 0,路由 foundInfo

货物模块,cascader,0,goodsModule,

运输模块,international,0,trans

反馈信息,checkbox,0,feed

5.3 生成代码、将代码导入到项目中

系统工具->代码生成->生成信息,上级菜单选择 基础信息

提交->生成代码,下载一个压缩包

sql用navicat导入

vue(前端)下两个文件夹api和views复制到 ruoyi-uisrc 中:api中是接口,views是页面

main(后端)下两个文件夹java和resources复制到 ruoyi-adminsrcmain 中,实体domain、数据库mapper、业务层service、controller控制层、

导入工程后,需要关掉运行的项目,且退掉ide重启,防止缓存影响出错

5.4 如果进行了修改,如何重新生成并导入

在数据库中修改表结构后,需要在 系统工具->代码生成 中点击同步

系统工具->代码生成->生成信息->生成业务名不要有歧义的,如info,最好empInfo

更新业务代码需要在数据库sys_menu中删除相关数据条目 eg. 2004-2009

目录删掉 ruoyi-adminsrcmainjavacomruoyisystem

​ ruoyi-adminsrcmainresourcesmapper

多的话注意只删除其中部分,如vue中

只删除 ruoyi-uisrcapisysteminfo.js

以及 ruoyi-uisrcviewssysteminfo

重新导入代码

重新启动IDEA

5.5 图标调整、添加数据及思考

系统管理->菜单管理 为 员工信息页面 添加图标

新增数据

1阿慧18176862000121aihui01 123456

此信息是否能登录?

登录用户:aihui01 不存在

因此只是页面展示,没有真正的业务逻辑。

六、修改业务逻辑功能

6.1 思考

若依登录系统,查询的是sys_user表

目前已经能看到所添加的员工信息,怎么实现登录?

考虑:添加员工的时候,其中账号密码添加到表sys_user中

6.2 修改业务逻辑

业务逻辑在 ruoyi-adminsrcmainjavacomruoyisystemserviceimplEmpInfoServiceImpl.java 中

在Line48:* 新增员工信息 处修改

需要在sys_user中修改,要找他的业务层。

在 ruoyi-systemsrcmainjavacomruoyisystemserviceimplSysUserServiceImpl.java 中

Line43处的

    @Autowired
    private SysUserMapper userMapper;

复制到前文业务逻辑 文件 Line22 处

@Service
public class EmpInfoServiceImpl implements IEmpInfoService 
{
    @Autowired
    private EmpInfoMapper empInfoMapper;

的后面,不用加了,换了种方法。

可以找注册的方法:ruoyi-adminsrcmainjavacomruoyiwebcontrollersystemSysRegisterController.java

按住Ctrl键点开Line35

        String msg = registerService.register(user);

中的 register

在这里:ruoyi-frameworksrcmainjavacomruoyiframeworkwebserviceSysRegisterService.java Line41

将上面Line29的复制过来(@Autowired是Spring里的标注)

    @Autowired
    private ISysUserService userService;

复制到ruoyi-adminsrcmainjavacomruoyisystemserviceimplEmpInfoServiceImpl.java

并在

    /**
     * 新增员工信息
     * 
     * @param empInfo 员工信息
     * @return 结果
     */
    @Override
    public int insertEmpInfo(EmpInfo empInfo)
    {
        empInfo.setCreateTime(DateUtils.getNowDate());
        return empInfoMapper.insertEmpInfo(empInfo);
    }

下方插入新的业务代码

参考 register

        SysUser sysUser = new SysUser();
        sysUser.setUserName(username);

等下面代码,删掉了一些

项目 find in files 搜用户,复制一句

 throw new ServiceException("不允许操作超级管理员用户");

到各种if中

函数修改为

    /**
     * 新增员工信息
     * 
     * @param empInfo 员工信息
     * @return 结果
     */
    @Override
    public int insertEmpInfo(EmpInfo empInfo)
    {
        registerEmpin(empInfo);//调用注册方法
        empInfo.setCreateTime(DateUtils.getNowDate());
        return empInfoMapper.insertEmpInfo(empInfo);
    }



    private void registerEmpin(EmpInfo empInfo){
        String username = empInfo.getUsername(),password=empInfo.getPassword();
        SysUser sysUser = new SysUser();
        sysUser.setUserName(username);

        if (StringUtils.isEmpty(username))
        {
            throw new ServiceException("用户名不能为空");
        }
        else if (StringUtils.isEmpty(password))
        {
            throw new ServiceException("用户密码不能为空");
        }
        else if (username.length() < UserConstants.USERNAME_MIN_LENGTH
                || username.length() > UserConstants.USERNAME_MAX_LENGTH)
        {
            throw new ServiceException("账户长度必须在2到20个字符之间");
        }
        else if (password.length() < UserConstants.PASSWORD_MIN_LENGTH
                || password.length() > UserConstants.PASSWORD_MAX_LENGTH)
        {
            throw new ServiceException("密码长度必须在5到20个字符之间");
        }
        else if (UserConstants.NOT_UNIQUE.equals(userService.checkUserNameUnique(sysUser)))
        {
            //msg = "保存用户'" + username + "'失败,注册账号已存在";
            throw new ServiceException("保存用户'" + username + "'失败,注册账号已存在");
        }
        else
        {
            sysUser.setPhonenumber(empInfo.getEmpInfoIphone());
            sysUser.setNickName(empInfo.getEmpInfoName());
            sysUser.setPassword(SecurityUtils.encryptPassword(password));
            boolean regFlag = userService.registerUser(sysUser);

        }
    }

6.3 修改后的业务逻辑

点击新增用户后

  1. 控制层:ruoyi-adminsrcmainjavacomruoyisystemcontrollerEmpInfoController.java

     /**
     * 新增员工信息
     */
    @PreAuthorize("@ss.hasPermi('system:empInfo:add')")
    @Log(title = "员工信息", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody EmpInfo empInfo)
    {
     return toAjax(empInfoService.insertEmpInfo(empInfo));
    }
  2. 业务层:ruoyi-adminsrcmainjavacomruoyisystemserviceIEmpInfoService.java

    /**
     * 新增员工信息
     * 
     * @param empInfo 员工信息
     * @return 结果
     */
    public int insertEmpInfo(EmpInfo empInfo);

具体实现在:ruoyi-adminsrcmainjavacomruoyisystemserviceimplEmpInfoServiceImpl.java

    /**
     * 新增员工信息
     * 
     * @param empInfo 员工信息
     * @return 结果
     */
    @Override
    public int insertEmpInfo(EmpInfo empInfo)
    {
        registerEmpin(empInfo);//调用注册方法
        empInfo.setCreateTime(DateUtils.getNowDate());
        return empInfoMapper.insertEmpInfo(empInfo);
    }
  1. 走 map 的insertEmpInfo

ruoyi-adminsrcmainjavacomruoyisystemmapperEmpInfoMapper.java

    /**
     * 新增员工信息
     * 
     * @param empInfo 员工信息
     * @return 结果
     */
    public int insertEmpInfo(EmpInfo empInfo);
  1. sql语句,ruoyi-adminsrcmainresourcesmappersystemEmpInfoMapper.xml

    <insert id="insertEmpInfo" parameterType="EmpInfo" useGeneratedKeys="true" keyProperty="empInfoId">
    insert into emp_info
    <trim prefix="(" suffix=")" suffixOverrides=",">
     <if test="empInfoName != null">emp_info_name,</if>
     <if test="empInfoSex != null">emp_info_sex,</if>
     <if test="empInfoAge != null">emp_info_age,</if>
     <if test="empInfoIphone != null">emp_info_iphone,</if>
     <if test="delyScopeId != null">dely_scope_id,</if>
     <if test="username != null">username,</if>
     <if test="status != null">status,</if>
     <if test="createTime != null">create_time,</if>
     <if test="password != null">password,</if>
     </trim>
    <trim prefix="values (" suffix=")" suffixOverrides=",">
     <if test="empInfoName != null">#{empInfoName},</if>
     <if test="empInfoSex != null">#{empInfoSex},</if>
     <if test="empInfoAge != null">#{empInfoAge},</if>
     <if test="empInfoIphone != null">#{empInfoIphone},</if>
     <if test="delyScopeId != null">#{delyScopeId},</if>
     <if test="username != null">#{username},</if>
     <if test="status != null">#{status},</if>
     <if test="createTime != null">#{createTime},</if>
     <if test="password != null">#{password},</if>
     </trim>
        </insert>

6.4 验证

private void registerEmpin(EmpInfo empInfo){
    String username = empInfo.getUsername(),password=empInfo.getPassword();

函数体第一行打断点,选debug才能看到

观察变量如何改变,如何层层调用函数。

至此,通过表单添加的新用户已经可以正常登录。

6.5 添加普通用户权限

系统管理->角色管理 为普通角色设置各菜单权限

系统管理->用户管理->为小黑 分配普通角色

按理来说应该在业务逻辑中就分配好角色,而不是手动添加。

----------202402072209完成

小问题

当前操作没有权限

小黑的权限坏了

张三没事

重新登陆上又好了。。。

七、修改样式、文字、图标、首页

7.1 修改首页

ruoyi-uisrcviewsindex.vue

修改为

<template>
  <div class="app-container home">
    <div>
      <span style="font-size: 15pt">阿慧物流仓储管理系统</span>
    </div>
  </div>
</template>

又修改为

<template>
  <div class="app-container home">
    <div style="width:100%;height: 800px;text-align: center">
      <div style="line-height: 300px">
        <span style="font-size: 15pt;font-weight: 700;color: #333333;font-family: 'Bauhaus 93'">阿慧物流仓储管理系统</span>
      </div>
    </div>
  </div>
</template>

保存后页面直接自动刷新,不需要重新运行

7.2 修改文字

ruoyi-ui 中 ctrl+shfit+R 替换

若依管理系统->阿慧物仓系统

7.3 修改主题

ruoyi-uisrcsettings.js

Line5 theme-light

7.4 登录页

7.4.1 登录页标题

ruoyi-ui/src/views/login.vue

Line4 修改

      <h3 class="title">物流仓储管理系统</h3>

7.4.2 背景图、头像

ruoyi-ui/src/assets

右键 open in Explorer

修改logo images

推荐站长素材,推荐用ps修改一下分辨率

7.4.3 登录框背景颜色

ruoyi-ui/src/views/login.vue

Line173

.login-form {
  border-radius: 6px;
  background: #ffffff;

->

background: rgb(245,245,245,0.5);

第四个数是透明度

7.4.4 比如修改

ruoyi-ui/src/views/login.vue Line4

<h3 class="title">物流仓储管理系统</h3>

的字体

可以双击选中title,ctrl+F,向下,找到样式

Line167

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

修改颜色 #000333

八、注册功能

8.1 启用注册功能

  1. 先在配置中启动注册功能

系统管理->参数设置

账号自助-是否开启用户注册功能 true

就会自动修改到数据表sys_config中

  1. 在登录页面中启动注册页面的显示

登陆页面login中本来是有注册按钮的

路由管理在 ruoyi-ui/src/router/index.js

  {
    path: '/login',
    component: () => import('@/views/login'),
    hidden: true
  },

@ 表示 src

找到 ruoyi-ui/src/views/login.vue

Line52 注册:

        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>

v-if代表是个开关,往下找到Line93

      // 注册开关
      register: false,
      redirect: undefined

register改成true就可开启注册功能。

8.2 修改样式

如修改其颜色

        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'" style="color: #333333">立即注册</router-link>
        </div>

注册页面改格式

可将login-form样式复制到register-form中

  background: rgb(245,245,245,0.5);

8.3 其他

8.3.1不显示若依官网

在系统管理->菜单管理中删除或者停用即可,不必删除

8.3.2 密码问题

密码是加密存储,不会明文存储,只能重置,无法查看

8.3.3 vue结构

.vue中,一版有三部分<template>为HTML,<script>为js,<style rel="stylesheet/scss" lang="scss">为css

8.3.4 登录自动填充了密码

ruoyi-ui/src/views/login.vue Line69 中有全局变量定义

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",

不想自动填充的话,删除成空字符串即可

九、数据按权限显示

9.0 引子问题:如何注册完自动分配权限?

前文是注册完用户手动添加权限,如何变成自动分配?

9.1 如何读源码,工作原理

前后端分离,没必要跑在同一台服务器上,登陆时有login请求,http://localhost:81/dev-api/login,POST请求,(我跑的是80端口)

返回token

前端通过81访问,后端通过8080访问

配置位置:src/main/resources/application.yml Line21

# 开发环境配置
server:
  # 服务器的HTTP端口,默认为8080
  port: 8080

虽然是8080后端端口,但是请求的还是81/dev-api,为什么?

因为若依前端做了反射

ruoyi-ui/vue.config.js Line35

    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

看不到真实后端地址,只能看到被前端封装的地址,比较安全

选中根目录 ctrl+shift+F 全局搜索 /login

实际调用了 ruoyi-adminsrcmainjavacomruoyiwebcontrollersystemSysLoginController.java Line44

    /**
     * 登录方法
     * 
     * @param loginBody 登录信息
     * @return 结果
     */
    @PostMapping("/login")
    public AjaxResult login(@RequestBody LoginBody loginBody)
    {
        AjaxResult ajax = AjaxResult.success();
        // 生成令牌
        String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
                loginBody.getUuid());
        ajax.put(Constants.TOKEN, token);
        return ajax;
    }

9.2 普通用户只显示自己添加的数据

判断用户类型,如果是普通用户则SQL语句加一个where条件限制

  1. 功能实现逻辑 原理就是sql语句中select查询增加条件,比如

| id | name | sex |
| ---- | ---- | ---- |
| 1 | 张三 | 男 |
| 2 | 李四 | 女 |

select * from user where name=李四
  1. 普通用户 就是角色、权限的判断

可以考虑一登陆就用自动生成的搜索筛选条件

在 系统管理->菜单管理 中查到,员工信息的组件路径是 system/empInfo/index

对应vue页面为 ruoyi-ui/src/views/system/empInfo/index.vue

其中 Line266 created()是个钩子函数

  created() {
    this.getList();
  },

页面刷新出来就会执行里面的东西

后端打印的命令

System.out.print();
System.out.println();

前端打印的命令

console.log();

可以测试一下

  created() {
    console.log(123);
    this.getList();
  },

登陆后会将信息缓存到浏览器缓存中

可以使用 ruoyi-ui/src/store/getters.js 以及 ruoyi-ui/src/store/modules/user.js 等中的函数查看

比如

  created() {
    //console.log(123+321);
    console.log(this.$store.getters.name);
    this.queryParams.username = this.$store.getters.name;
    this.getList();
  },

前端500错误

后端崩了。。。Process finished with exit code 1

好像是数据库崩了,重启电脑后任务栏崩了。任务栏取消显示小组件、搜索、笔等,关掉进程重新打开好了。

数据库好了,后端前端都起来了

下一步,区分用户角色

  created() {
    //console.log(123+321);
    if(this.$store.getters.roles[0] == 'common'){
      //判断当前用户的角色是否为普通角色
      //console.log(this.$store.getters.name);
      this.queryParams.username = this.$store.getters.name;
    }
    this.getList();
  },

但这样有隐藏bug只要手动修改还是可以搜到

可以新加一个角色判断

      // 表单参数
      form: {},

前添加 role: null,

赋值

  created() {
    //console.log(123+321);
    this.role=this.$store.getters.roles[0];
    if(this.role== 'common'){
      //判断当前用户的角色是否为普通角色
      //console.log(this.$store.getters.name);
      this.queryParams.username = this.$store.getters.name;
    }
    this.getList();
  },

搜索控件里Line4就可以使用v-if,控制是否显示

<el-form-item label="员工姓名" prop="empInfoName">

变为

<el-form-item v-if="role !='common'" label="员工姓名" prop="empInfoName">

类似有Line46

<el-form-item v-if="role !='common'" label="登录账号" prop="username">

修改界面中,也可以禁止修改登陆账号 line196

<el-form-item v-if="role !='common'" label="登录账号" prop="username">

9.3 后续推荐

源码合集,https://space.bilibili.com/1533790577/channel/seriesdetail?sid=3284643

都是基于若依的二次开发

--------学习结束202402081706

最后修改:2024 年 02 月 08 日 05 : 12 PM
如果觉得我的文章对你有用,请随意赞赏