Lógica de negócios do módulo de função do projeto Vue

1. O que é lógica de negócios

Podemos primeiro entender brevemente a lógica de negócios. Projetos diferentes têm funções diferentes, e funções diferentes requerem implementações diferentes. O código que implementa essas funções principais é chamado de lógica de negócios. Portanto, a lógica de negócios refere-se às regras e processos que uma unidade de entidade deve ter para fornecer serviços a outra unidade de entidade.

2. Módulo de negócios no projeto Vue

1. Lógica de negócios do módulo de função de gerenciamento de autoridade

1. O primeiro é o quadro da página. É claro que este módulo de gestão de autoridade está dividido em três páginas, nomeadamente gestão de funcionários, gestão de funções e gestão de menu.
   (1) Implemente a página de gerenciamento de funcionários
   01 para obter dados de funcionários (incluindo a lista de funcionários e a caixa de pesquisa), defina um método API para obter a lista de funcionários e exclua o gerenciamento de funcionários e ligue 02 várias vezes para renderizar os dados de gerenciamento de
   funcionários página,
   entre a qual user_group corresponde É uma função
   (2) Implementar a página de gerenciamento de função
   01 Definir a API de gerenciamento de função
   02 Definir a rota de gerenciamento de função
   03 Renderizar
   as permissões da função correspondente à permissão de função
   

   (3) Realizar a página de gerenciamento de menu
   01 Definir a API para gerenciamento de menu
   02 Definir a rota para gerenciamento de menu
   03 Renderizar o menu
   onde o id corresponde à permissão da função

2. Como é realizada a renderização do menu?
   01 Login do usuário, obter token
   02 Solicitar o menu do usuário (com token)
   03 Armazenar o menu no vuex
   04 A página de administração renderiza dinamicamente o menu de acordo com os menus da loja no vuex

3. roteamento dinâmico (Realize o roteamento dinâmico e também o menu de permissão dinâmico)
   01 Obtenha as informações do menu do backend
   02 Mapeie o menu para a configuração da rota
   03 Adicione rotas dinamicamente por meio de router.addRoute()

4. Como adicionar menus, rotas e funções dinamicamenteligação(Importante)
   01 Ao editar funcionários, diferentes funções podem ser atribuídas

02 Ao editar funções, você pode atribuir a cada função diferentes menus e permissões

03 Adicionar, excluir, modificar e verificar todos os menus

04 Quando o usuário faz login
(1) o backend usa o token para identificar a função do usuário atual e obtém as permissões e o menu do usuário por meio da função (2) o frontend
armazena o menu no vuex e o renderiza
(3) o frontend passa pelo menu O método addRoute atualiza dinamicamente a rota

2. A lógica de negócios do módulo de gerenciamento de pedidos (Classificação ilimitada de submenus）

O gerenciamento de pedidos é dividido em lista de pedidos, configuração de pedidos, pedido de reembolso, etc. A diferença entre ele e o anterior é que sua barra lateral possui categorias ilimitadas, que podem ser abertas infinitamente, e clicar em um item para expandir um item. A figura abaixo é um caso simples de classificação infinita de submenus.

1. Armazene o menu no vuex
   01 Defina o módulo de permissão, defina a API e outros métodos nele
   02 Obtenha o menu no adminVue
   03 Renderize o menu na barra lateral
2. Crie um novo componente subMenu para formar o aninhamento recursivo. Em seguida, consulte o subMenu no componente subMenu para obter uma classificação infinita
3. Alterna automaticamente o menu de acordo com o usuário
   O servidor julga o usuário atual de acordo com o token passado pelo usuário

3. Código para implementar a lógica de negócios acima

1. API que define o método

// 导入request
import request from '@/utils/request.js'
// 导出登录方法
export function GetStaffList(data){
    
    
    return request.get("/api/user",{
    
    params:data})
}
export function DelStaff(id){
    
    
    return request.delete("/api/user/"+id)
}

// 导出获取用户组件的角色
export function GetUserGroup(data){
    
    
    return request.get("/api/yp/user_group",{
    
    params:data})
}

// 定义菜单管理的api
export function GetMenu(data){
    
    
    return request.get("/api/yp/permission",{
    
    params:data})
}

// 获取当前用户的菜单
export function GetUserMenu(data){
    
    
    return request.get("/api/yp/user_permission",{
    
    params:data})
}

2. Códigos de componentes para classificação ilimitada de submenus

<template>
    <template v-for="item in children" :key="item.id">
            <!-- 没有子菜单就是菜单项 -->
            <el-sub-menu v-if="item.children" :index="item.path">
                <template #title>                    
                    <span>{
    
    {
    
    item.name}}</span>
                </template>  
                <!-- 形成了递归嵌套 -->
                <SubMenu :children="item.children"></SubMenu>          
            </el-sub-menu>
            <el-menu-item :index="item.path" v-else>
            <span>{
    
    {
    
    item.name}}</span>
            </el-menu-item>
    </template>
</template>
<script>
export default {
    
    
    // 默认有子选项children 默认值是[]
    props:{
    
    
        children:{
    
    type:Array,default:()=>[]}
    }
}
</script>

3. Código para gestão de funcionários

<template>
    <div>
        <h1>员工管理</h1>
        <el-form :inline="true"  ref="searchRef"   :model="searchObj"  >
            <el-form-item label="id" prop="id">
                <el-input v-model="searchObj.id"  />
            </el-form-item>           
            <el-form-item>
                <el-button type="primary" @click="getStaffList">查询</el-button>
                <el-button type="primary" @click="resetSearch()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="staffList" style="width: 100%">
            <el-table-column prop="id" label="账号" width="180" />
            <el-table-column prop="name" label="真实姓名" width="180" />
            <el-table-column prop="shop" label="所属门店" />
            <el-table-column prop="tel" label="手机号" />
            <el-table-column prop="user_group" label="角色id" />
            <el-table-column prop="gname" label="角色" />
            <el-table-column prop="state" label="状态" />
            <el-table-column prop="lastTime" label="最后登录时间" />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <span>编辑</span> <span  @click="delStaff(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
// 导入api方法
import {
    
     GetStaffList,DelStaff} from '@/api/permission.js'
// 导入响应式创建方法
import {
    
     ref } from 'vue'
// 定义引用对象
const searchRef = ref();
// 定义搜索条件
var searchObj = ref({
    
    id:'',order:'asc'})
// 定义员工列表
var staffList = ref([]);
// 执行获取员工列表方法
getStaffList();
// 定义获取员工列表的方法（需要多次使用）
function getStaffList() {
    
    
    // 使用api方法
    GetStaffList(searchObj.value)
        .then(res => {
    
    
            if (res.data.code == 0) {
    
    
                staffList.value = res.data.data;
            } else {
    
    
                alert(res.data.msg || "员工列表获取失败")
            }

        })
}
// 重置
function resetSearch(){
    
    
    searchRef.value.resetFields()
    getStaffList();
}
// type导入不用
// import type { FormInstance, FormRules } from 'element-plus'
// 带泛型的去掉泛型<> 对象或数组的类型
// const ruleFormRef = ref<FormInstance>()   =>  const ruleFormRef = ref()
// 带类型的函数去掉类型  :代表参数的类型
/* 
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
=>    */  
/* 
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
*/  
function delStaff(row){
    
    
    // 正常情况应该会有个弹框
    DelStaff(row.id)
    .then(res=>{
    
    
        if(res.data.code==0){
    
    
            getStaffList() //重新获取员工列表
        }else{
    
    
            alert(res.data.msg)
        }
    })
}
</script>

4. Código para gerenciamento de funções

<template>
    <div>
        角色管理
        <el-table :data="userGroup.reverse()" style="width: 100%">
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="名称"  />
            <el-table-column prop="ranges" label="范围" />
            <el-table-column prop="description" label="描述" width="480"  />
            <el-table-column prop="permission" label="权限" width="480"  />
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <span  @click="editGroup(scope.row)">操作</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
// 导入获取用组的api
import {
    
    GetUserGroup} from '@/api/permission'
// 导入引用对象
import {
    
    ref} from 'vue'
// 定义用户组件数据
const userGroup = ref([]);
// 获取用户组
GetUserGroup({
    
    size:30,order:'asc'})
.then(res=>{
    
    
    if(res.data.code==0){
    
    
        // 更新用户组信息
        userGroup.value = res.data.data;
    }else{
    
    
        alert(res.data.msg)
    }
})
// 定义操作api
function editGroup(row){
    
    
    console.log(row)
}
</script>

5. Código para gerenciamento de menu

<template>
    <div>
        菜单管理
        <!-- 有children的时候默认会有子表格 -->
        <el-table :data="menuList" style="width: 100%"  
         row-key="id">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="id" />
            <el-table-column prop="name" label="名称"  />
            <el-table-column prop="icon" label="图表" />
            <el-table-column prop="path" label="URL" />
            <el-table-column prop="des" label="描述" />
            <el-table-column prop="component" label="组件" />
        </el-table>
    </div>
</template>
<script setup>
// 获取菜单api
import  {
    
    GetMenu} from '@/api/permission'
import {
    
    ref} from 'vue';
const menuList = ref([]);
GetMenu()
.then(res=>{
    
    
    if(res.data.code==0){
    
    
        menuList.value = res.data.list;
    }else{
    
    
        alert("菜单获取失败");
    }
})
</script>

O texto acima é uma breve introdução à lógica de negócios do módulo de função do projeto vue pessoal. Espero que seja útil para você. Se você tiver alguma dúvida, fique à vontade para discuti-la. Vamos trabalhar juntos.