ruoyi-vue 前后端分离练习

kshine

已于 2024-08-20 08:36:58 修改

阅读量916

点赞数 14

文章标签： vue.js 前端 javascript

于 2024-08-16 21:47:51 首次发布

本文链接：https://blog.csdn.net/kshine/article/details/141270468

版权

数据库数据插入

INSERT INTO table_name (column1, column2, column3, ...) VALUES (value1, value2, value3, ...);

1.程序开发准备

后端

1、idea open导入

2、打开ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java

3、配置jdk,配置数据库密码 resources/application-druid.yml

4、在mysql创建数据库 ry-vue 配置编码 utf8mb4 排序规则 utf8mb4_general_ci

依次导入sql文件夹下的ry_20240629 、quartz 两个sql文件

5、启动

前端

npm install --registry=https://registry.npmmirror.com
npm run dev

数据库表创建

修改和新增数据表

添加外键时，注意设置数据库引擎

2.基础框架搭建

显示用户名

navbar.vue 路径 layout/components/Navbar.vue

在topNav下面复制一段，修改为userName方法

userName: {
  get() {
    return this.$store.state.user.name
  }
}

在个人中心添加 userName并设置成居中显示

style

<div class="avatar-wrapper" style="display: flex;align-items: center">
  <span>{{userName}}</span>
  <img :src="avatar" class="user-avatar">
  <i class="el-icon-caret-bottom" />
</div>

3.权限管理

创建菜单栏

4.用户管理

参考系统管理配置

添加职工管理菜单

添加用户管理

前端修改

\ruoyi-ui\src\views\system\user
index.vue

用户编号下拉菜单，可以从用户状态复制

<el-form-item label="用户编号" prop="userid">
  <el-select
    v-model="queryParams.userId"
    placeholder="请选择用户编号"
    clearable
    style="width: 240px"
  >
    <el-option
      v-for="dict in userList"
      :key="dict.userId"
      :label="dict.userId"
      :value="dict.userId"
    />
  </el-select>
</el-form-item>

权限设置，管理员显示全部，员工只显示个人信息

后端修改

SysUserController.java

LoginUser loginUser = getLoginUser();
Boolean loginIsAdmin = loginUser.getUser().isAdmin();
if(!loginIsAdmin){
    list = list.stream().filter(su->su.getUserName().equals(loginUser.getUser().getUserName())).collect(Collectors.toList());
}

注意点

修改生成信息-上级菜单对应xx管理后提交

包路径和模块名和前面生成菜单保持一致

业务名 xxInfo

考勤管理

（1）添加菜单

（2）生成代码

业务名和前面设置一样，可能产生冲突

（3）导入文件

Java

Vue

Sql

（4）后端

增加实体类字段 domain

attendances.java 创建用户姓名,设置get set方法和 toString方法

/** 员工姓名 */
@Excel(name = "员工姓名")
private String userName;  #nick_name  sql语句查出来是什么就是什么

gen

.append("userName",getUserName())

（5）mapper 修改sql语句

在sql或者select中修改

select a.id,a.personId,a.month,a.days,s.user_name,s.user_id,s.nick_name from attendances a,sys_user s where a.personId = s.user_id

Mapper 新增属性

<result property="userName"    column="user_name"    />

index.vue修改

nick_name

<el-table-column label="员工编号" align="center" prop="personId"  v-if="false"/>
<el-table-column label="员工姓名" align="center" prop="userName" />

下拉菜单从user地方拷贝，和参数名保持一致
注意 quereParams 和form

<el-form-item label="用户姓名" prop="nick_name">
  <el-select
    v-model="queryParams.nick_name"
    placeholder="请输入用户姓名"
    clearable
    style="width: 240px"
  >
    <el-option
      v-for="dict in attendancesInfoList"
      :key="dict.nick_name"
      :label="dict.nick_name"
      :value="dict.nick_name"
    />
  </el-select>
</el-form-item>

数据支持法

前端 index.vue

# 1.script
<script>
import { listUser} from "@/api/system/user";  #导入

# 2.data
export default {
  name: "AttendancesInfo",
  data() {
    return {
      //用户列表
      userList:[],   #添加数据
      
# 3.method      
methods: {
  getUserList(){
    listUser().then(response =>{
      this.userList= response.rows;  /* rows 还是data*/
    }).catch(error =>{
      console.error("获取用户信息失败",error);
    });
  },
  
 # 4.created
 created() {
  this.getList();
  this.getUserList();
},

# 5.下拉菜单
<el-select v-model="form.userList"  placeholder="请输入用户姓名">
  <el-option
    v-for="dict in userList"
    :key="dict.userId"
    :label="dict.nickName"
    :value="dict.nickName"
  />
  </el-select>


# 最后在 新增和修复 复制代码
 listUser().then(response =>{
      this.userList= response.rows;  /* rows 还是data*/
    }).catch(error =>{
      console.error("获取用户信息失败",error);
    });

权限管理

最后在mapper sql末尾设置

${params.dataScope}

Mapper

@DataScope(userAlias = "s")

工资管理

后端 salary.java 创建用户对象,设置get set方法和 toString方法

/** 用户*/
private SysUser sysUser;

修改mapper文件，resource/mapper/salaryMapper.xml

<association property="sysUser"    javaType="SysUser">
    <result property="nickName"    column="nick_name"></result>
    <result property="userName"    column="user_name"></result>
</association>

修改sql，注意数据库字段和sql一致下划线、大小写有没有

select s.id, s.personId, s.month, s.salary,su.nick_name,su.user_name from salary s join sys_user su on s.personid = su.user_id

前端 index.vue 窗口显示

<el-table-column label="员工姓名" align="center" prop="sysUser.nickName" />
<el-table-column label="员工编号" align="center" prop="personId" v-if="false"/>

下拉菜单

<el-select
  v-model="queryParams.personId"
  placeholder="请输入员工编号"
  clearable
  style="width: 240px"
>
  <el-option
    v-for="item in salarySysList"
    :key="item.personId"
    :label="item.sysUser.nickName"
    :value="item.personId"
  />
</el-select>

权限控制 salaryController

LoginUser loginUser = getLoginUser();
Boolean loginIsAdmin = loginUser.getUser().isAdmin();
if(!loginIsAdmin){
    list = list.stream().filter(su -> su.getSysUser().getUserName().equals(loginUser.getUser().getUserName())).collect(Collectors.toList());
}

请假管理

请假信息，需要先新增数据字典，再生成代码

测试

身份证验证

system/user/index.vue

添加身份证字段

rules

idCard: [
  { required: true, message: "身份证号码不能为空", trigger: "blur" },
  { validator:(rule,text,callback) =>{
      const textLength = text.length;
      if(textLength == 17 && textLength==19){
        callback(new Error("身份证位数不对"))
      }
    },trigger: "blur"}
]

Methods

idCardChecker(text){
  const textLength = text.length;
  if(textLength !== 18 && textLength !== 15){
    return false;
  }
  return true;
},

Watch

"form.idCard"(val){
  console.log(val);
  console.log(this.idCardChecker(val));
  if(this.idCardChecker(val)){
      let sexCode = val.slice(14,17);
      sexCode =parseInt(sexCode);
      let isEven = sexCode % 2 === 0;
      let sex = isEven?"1":"0";
       console.log(sex);
      this.form.sex= sex;
  }else{
      this.form.sex == undefined;
  }
}

1、Data 初始化

2、method 方法

3、import导入

4、created 调用

暂时无法在飞书文档外展示此内容

export  function  getSysUserOption(){
  return request({
    url: '/system/user/list',
    method: 'get'
  })
}
// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}
sex= sex;
  }else{
      this.form.sex == undefined;
  }
}

1、Data 初始化

2、method 方法

3、import导入

4、created 调用

暂时无法在飞书文档外展示此内容

export  function  getSysUserOption(){
  return request({
    url: '/system/user/list',
    method: 'get'
  })
}
// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}