Introduction and use of Ruoyi framework

Introduction and use of Ruoyi framework

introduction

RuoYi open source framework is a powerful Java development framework that focuses on quickly building enterprise-level backend management systems. It provides a rich set of functions and modules that can help developers quickly build a stable and efficient management system. This blog will help you understand the basic concepts and usage of the Zoey framework and help you get started quickly.

1.What is Ruoyi?

RuoYi-Vue is a Java EE enterprise-level rapid development platform, based on a combination of classic technologies (Spring Boot, Spring Security, MyBatis, Jwt, Vue), with built-in modules such as: department management, role users, menu and button authorization, data permissions, and system Parameters, log management, code generation, etc. Online scheduled task configuration; supports clusters, multiple data sources, and distributed transactions.

2. Use Ruoyi

2.1 System requirements

• JDK >= 1.8
  MySQL >= 5.7
  Maven >= 3.0
  Node >= 12
  Redis >= 3

2.1 Download and run

Here is the official website of Ruoyi , as well as online demonstrations

2.2 Configure database MySQL and Reids

2.2.1MySQL configuration

2.2.2Redis configuration

2.3 Front-end startup

• 1. Install dependenciesnpm install
• 2. Startnpm run dev
• Operation effect
  
  At this point, the start-up of the front-end and back-end separation project is completed.

3. Framework structure and modules

3.1 Backend structure

3.2 Front-end structure

3.3 Built-in functions

• User management: The user is the system operator. This function mainly completes the system user configuration.
• Department management: configure system organization (company, department, group), tree structure display supports data permissions.
• Position management: Configure the positions held by system users.
• Menu management: configure system menus, operation permissions, button permission identification, etc.
• Role management: Assign role menu permissions, set roles, and divide data range permissions by organization.
• Dictionary management: Maintain some relatively fixed data frequently used in the system.
• Parameter management: Dynamically configure common parameters for the system.
• Notification and announcement: System notification and announcement information is released and maintained.
• Operation log: system normal operation log recording and query; system abnormal information log recording and query.
• Login log: The system login log record query contains login exceptions.
• Online users: Monitor the status of active users in the current system.
• Scheduled tasks: Online (add, modify, delete) task scheduling includes execution result logs.
• Code generation: Front-end and back-end code generation (java, html, xml, sql) supports CRUD download.
• System interface: Automatically generate relevant API interface documents based on business code.
• Service monitoring: Monitor the current system CPU, memory, disk, stack and other related information.
• Cache monitoring: Query system cache information, command statistics, etc.
• Online builder: Drag form elements to generate corresponding Vue code.
• Connection pool monitoring: Monitor the current system database connection pool status, and analyze SQL to find system performance bottlenecks.

3.4 Other functions and extensions

3.4.1 Code Generator

First, select the imported data table in the code generation under the system tools,

and then click Preview or Generate to view or download all the CRUD codes generated by Ruoyi for us. Note that it is all codes.

Here you can preview the code

, such as the controller code

package com.lzdongrui.system.controller;

import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.lzdongrui.common.annotation.Log;
import com.lzdongrui.common.core.controller.BaseController;
import com.lzdongrui.common.core.domain.AjaxResult;
import com.lzdongrui.common.enums.BusinessType;
import com.lzdongrui.system.domain.SysRole;
import com.lzdongrui.system.service.ISysRoleService;
import com.lzdongrui.common.utils.poi.ExcelUtil;
import com.lzdongrui.common.core.page.TableDataInfo;

/**
 * 角色信息Controller
 * 
 * @author ruoyi
 * @date 2023-06-29
 */
@RestController
@RequestMapping("/system/role")
public class SysRoleController extends BaseController
{
    
    
    @Autowired
    private ISysRoleService sysRoleService;

    /**
     * 查询角色信息列表
     */
    @PreAuthorize("@ss.hasPermi('system:role:list')")
    @GetMapping("/list")
    public TableDataInfo list(SysRole sysRole)
    {
    
    
        startPage();
        List<SysRole> list = sysRoleService.selectSysRoleList(sysRole);
        return getDataTable(list);
    }

    /**
     * 导出角色信息列表
     */
    @PreAuthorize("@ss.hasPermi('system:role:export')")
    @Log(title = "角色信息", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, SysRole sysRole)
    {
    
    
        List<SysRole> list = sysRoleService.selectSysRoleList(sysRole);
        ExcelUtil<SysRole> util = new ExcelUtil<SysRole>(SysRole.class);
        util.exportExcel(response, list, "角色信息数据");
    }

    /**
     * 获取角色信息详细信息
     */
    @PreAuthorize("@ss.hasPermi('system:role:query')")
    @GetMapping(value = "/{roleId}")
    public AjaxResult getInfo(@PathVariable("roleId") Long roleId)
    {
    
    
        return success(sysRoleService.selectSysRoleByRoleId(roleId));
    }

    /**
     * 新增角色信息
     */
    @PreAuthorize("@ss.hasPermi('system:role:add')")
    @Log(title = "角色信息", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody SysRole sysRole)
    {
    
    
        return toAjax(sysRoleService.insertSysRole(sysRole));
    }

    /**
     * 修改角色信息
     */
    @PreAuthorize("@ss.hasPermi('system:role:edit')")
    @Log(title = "角色信息", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody SysRole sysRole)
    {
    
    
        return toAjax(sysRoleService.updateSysRole(sysRole));
    }

    /**
     * 删除角色信息
     */
    @PreAuthorize("@ss.hasPermi('system:role:remove')")
    @Log(title = "角色信息", businessType = BusinessType.DELETE)
	@DeleteMapping("/{roleIds}")
    public AjaxResult remove(@PathVariable Long[] roleIds)
    {
    
    
        return toAjax(sysRoleService.deleteSysRoleByRoleIds(roleIds));
    }
}

index.vue code

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="queryParams.roleName"
          placeholder="请输入角色名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="角色权限字符串" prop="roleKey">
        <el-input
          v-model="queryParams.roleKey"
          placeholder="请输入角色权限字符串"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="显示顺序" prop="roleSort">
        <el-input
          v-model="queryParams.roleSort"
          placeholder="请输入显示顺序"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="数据范围" prop="dataScope">
        <el-input
          v-model="queryParams.dataScope"
          placeholder="请输入数据范围"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="菜单树选择项是否关联显示" prop="menuCheckStrictly">
        <el-input
          v-model="queryParams.menuCheckStrictly"
          placeholder="请输入菜单树选择项是否关联显示"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门树选择项是否关联显示" prop="deptCheckStrictly">
        <el-input
          v-model="queryParams.deptCheckStrictly"
          placeholder="请输入部门树选择项是否关联显示"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="角色ID" align="center" prop="roleId" />
      <el-table-column label="角色名称" align="center" prop="roleName" />
      <el-table-column label="角色权限字符串" align="center" prop="roleKey" />
      <el-table-column label="显示顺序" align="center" prop="roleSort" />
      <el-table-column label="数据范围" align="center" prop="dataScope" />
      <el-table-column label="菜单树选择项是否关联显示" align="center" prop="menuCheckStrictly" />
      <el-table-column label="部门树选择项是否关联显示" align="center" prop="deptCheckStrictly" />
      <el-table-column label="角色状态" align="center" prop="status" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改角色信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色权限字符串" prop="roleKey">
          <el-input v-model="form.roleKey" placeholder="请输入角色权限字符串" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="roleSort">
          <el-input v-model="form.roleSort" placeholder="请输入显示顺序" />
        </el-form-item>
        <el-form-item label="数据范围" prop="dataScope">
          <el-input v-model="form.dataScope" placeholder="请输入数据范围" />
        </el-form-item>
        <el-form-item label="菜单树选择项是否关联显示" prop="menuCheckStrictly">
          <el-input v-model="form.menuCheckStrictly" placeholder="请输入菜单树选择项是否关联显示" />
        </el-form-item>
        <el-form-item label="部门树选择项是否关联显示" prop="deptCheckStrictly">
          <el-input v-model="form.deptCheckStrictly" placeholder="请输入部门树选择项是否关联显示" />
        </el-form-item>
        <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
    
     listRole, getRole, delRole, addRole, updateRole } from "@/api/system/role";

export default {
    
    
  name: "Role",
  data() {
    
    
    return {
    
    
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色信息表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
    
    
        pageNum: 1,
        pageSize: 10,
        roleName: null,
        roleKey: null,
        roleSort: null,
        dataScope: null,
        menuCheckStrictly: null,
        deptCheckStrictly: null,
        status: null,
      },
      // 表单参数
      form: {
    
    },
      // 表单校验
      rules: {
    
    
        roleName: [
          {
    
     required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
        roleKey: [
          {
    
     required: true, message: "角色权限字符串不能为空", trigger: "blur" }
        ],
        roleSort: [
          {
    
     required: true, message: "显示顺序不能为空", trigger: "blur" }
        ],
        status: [
          {
    
     required: true, message: "角色状态不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    
    
    this.getList();
  },
  methods: {
    
    
    /** 查询角色信息列表 */
    getList() {
    
    
      this.loading = true;
      listRole(this.queryParams).then(response => {
    
    
        this.roleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
    
    
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
    
    
      this.form = {
    
    
        roleId: null,
        roleName: null,
        roleKey: null,
        roleSort: null,
        dataScope: null,
        menuCheckStrictly: null,
        deptCheckStrictly: null,
        status: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
    
    
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
    
    
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    
    
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
    
    
      this.reset();
      this.open = true;
      this.title = "添加角色信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
    
    
      this.reset();
      const roleId = row.roleId || this.ids
      getRole(roleId).then(response => {
    
    
        this.form = response.data;
        this.open = true;
        this.title = "修改角色信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
    
    
      this.$refs["form"].validate(valid => {
    
    
        if (valid) {
    
    
          if (this.form.roleId != null) {
    
    
            updateRole(this.form).then(response => {
    
    
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
    
    
            addRole(this.form).then(response => {
    
    
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
    
    
      const roleIds = row.roleId || this.ids;
      this.$modal.confirm('是否确认删除角色信息编号为"' + roleIds + '"的数据项？').then(function() {
    
    
        return delRole(roleIds);
      }).then(() => {
    
    
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
    
    });
    },
    /** 导出按钮操作 */
    handleExport() {
    
    
      this.download('system/role/export', {
    
    
        ...this.queryParams
      }, `role_${
      
      new Date().getTime()}.xlsx`)
    }
  }
};
</script>

Summarize

Through this blog, I learned about the basic concepts and usage of the Zoey framework. Finally, it is also important to learn the underlying programming ideas and design ideas of excellent open source projects and improve your own programming abilities.