欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目業(yè)務(wù)邏輯模塊介紹

 更新時間:2022年11月22日 08:35:45   作者:爭兒不脫發(fā)  
這篇文章主要介紹了Vue項(xiàng)目業(yè)務(wù)邏輯,不同的項(xiàng)目有不同的功能,不同的功能需要不同的實(shí)現(xiàn),實(shí)現(xiàn)這些核心功能的代碼就叫業(yè)務(wù)邏輯。所以說業(yè)務(wù)邏輯是指一個實(shí)體單元為了向另一個實(shí)體單元提供服務(wù),應(yīng)該具備的規(guī)則與流程

一.什么是業(yè)務(wù)邏輯

我們可以先簡單理解一下業(yè)務(wù)邏輯。不同的項(xiàng)目有不同的功能,不同的功能需要不同的實(shí)現(xiàn),實(shí)現(xiàn)這些核心功能的代碼就叫業(yè)務(wù)邏輯。所以說業(yè)務(wù)邏輯是指一個實(shí)體單元為了向另一個實(shí)體單元提供服務(wù),應(yīng)該具備的規(guī)則與流程。

二.Vue項(xiàng)目中的模塊業(yè)務(wù)

1. 權(quán)限管理功能模塊的業(yè)務(wù)邏輯

首先是頁面框架。明確這個權(quán)限管理模塊分為三個頁面,分別是員工管理,角色管理,菜單管理。

(1)實(shí)現(xiàn)員工管理頁面

01 獲取員工的數(shù)據(jù)(其中有員工列表和搜索框),定義一個獲取員工列表以及刪除員工管理的api方法,可以多次調(diào)用

02 渲染員工管理頁面的數(shù)據(jù)

其中user_group 對應(yīng)的是角色

(2)實(shí)現(xiàn)角色管理頁面

01 定義角色管理的api

02 定義角色管理的路由

03 渲染角色

permission 對應(yīng)的該角色的權(quán)限

(3)實(shí)現(xiàn)菜單管理頁面

01 定義菜單管理的api

02 定義菜單管理的路由

03 渲染菜單

其中id 與角色的permission對應(yīng)

菜單的渲染是如何實(shí)現(xiàn)的

01 用戶登錄,獲取token

02 請求用戶的菜單(帶上token)

03 存儲在vuex中存儲菜單

04 admin頁面根據(jù)vuex中store的menus來動態(tài)的渲染菜單

動態(tài)路由(實(shí)現(xiàn)了動態(tài)路由,也就實(shí)現(xiàn)動態(tài)權(quán)限菜單)

01 獲取后端給到菜單信息

02 把菜單映射為路由配置

03 通過router.addRoute() 動態(tài)添加路由

如何動態(tài)的把菜單,路由,角色聯(lián)動(重要)

01 編輯員工時候,能夠指定不同的角色

02 編輯角色時候,可以給每個角色不同的菜單與權(quán)限

03 對所有的菜單進(jìn)行增刪改查

04 用戶登錄時候

(1)后端通過token來識別當(dāng)前用戶拿到用的角色,通過角色拿到用戶的權(quán)限與菜單

(2)前端把菜單存儲在vuex里面并渲染出來

(3)前端根據(jù)菜單通過addRoute方法動態(tài)的更新路由

2. 訂單管理模塊的業(yè)務(wù)邏輯(子菜單無限分類)

訂單管理分為訂單列表,訂單設(shè)置,退款申請等,他與上一個的不同就是,他的側(cè)邊欄是無限分類的,可以無限點(diǎn)開,點(diǎn)擊一項(xiàng)展開一項(xiàng)。下圖就是一個子菜單無限分類的簡單案例。

將菜單存儲在vuex

01 定義permission權(quán)限模塊,里面設(shè)置api等方法

02 在adminVue獲取菜單

03 在側(cè)邊欄渲染菜單

新創(chuàng)建一個subMenu組件,形成遞歸嵌套。然后在subMenu組件引用subMenu實(shí)現(xiàn)無限分類

根據(jù)用戶自動切換菜單

服務(wù)器是根據(jù)用戶傳遞的token判斷當(dāng)前用戶的

三.實(shí)現(xiàn)上述業(yè)務(wù)邏輯的代碼

定義方法的api

// 導(dǎo)入request
import request from '@/utils/request.js'
// 導(dǎo)出登錄方法
export function GetStaffList(data){
    return request.get("/api/user",{params:data})
}
export function DelStaff(id){
    return request.delete("/api/user/"+id)
}
// 導(dǎo)出獲取用戶組件的角色
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})
}
// 獲取當(dāng)前用戶的菜單
export function GetUserMenu(data){
    return request.get("/api/yp/user_permission",{params:data})
}

子菜單無限分類的組件代碼

<template>
    <template v-for="item in children" :key="item.id">
            <!-- 沒有子菜單就是菜單項(xiàng) -->
            <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 {
    // 默認(rèn)有子選項(xiàng)children 默認(rèn)值是[]
    props:{
        children:{type:Array,default:()=>[]}
    }
}
</script>

員工管理的代碼

<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="真實(shí)姓名" width="180" />
            <el-table-column prop="shop" label="所屬門店" />
            <el-table-column prop="tel" label="手機(jī)號" />
            <el-table-column prop="user_group" label="角色id" />
            <el-table-column prop="gname" label="角色" />
            <el-table-column prop="state" label="狀態(tài)" />
            <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>
// 導(dǎo)入api方法
import { GetStaffList,DelStaff} from '@/api/permission.js'
// 導(dǎo)入響應(yīng)式創(chuàng)建方法
import { ref } from 'vue'
// 定義引用對象
const searchRef = ref();
// 定義搜索條件
var searchObj = ref({id:'',order:'asc'})
// 定義員工列表
var staffList = ref([]);
// 執(zhí)行獲取員工列表方法
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導(dǎo)入不用
// import type { FormInstance, FormRules } from 'element-plus'
// 帶泛型的去掉泛型<> 對象或數(shù)組的類型
// const ruleFormRef = ref<FormInstance>()   =>  const ruleFormRef = ref()
// 帶類型的函數(shù)去掉類型  :代表參數(shù)的類型
/* 
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
=>    */  
/* 
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
*/  
function delStaff(row){
    // 正常情況應(yīng)該會有個彈框
    DelStaff(row.id)
    .then(res=>{
        if(res.data.code==0){
            getStaffList() //重新獲取員工列表
        }else{
            alert(res.data.msg)
        }
    })
}
</script>

角色管理的代碼

<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="權(quán)限" 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>
// 導(dǎo)入獲取用組的api
import {GetUserGroup} from '@/api/permission'
// 導(dǎo)入引用對象
import {ref} from 'vue'
// 定義用戶組件數(shù)據(jù)
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>

菜單管理的代碼

<template>
    <div>
        菜單管理
        <!-- 有children的時候默認(rèn)會有子表格 -->
        <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>

以上就是個人vue項(xiàng)目功能模塊的業(yè)務(wù)邏輯的簡單介紹,希望對你有所幫助哈。

到此這篇關(guān)于Vue項(xiàng)目業(yè)務(wù)邏輯模塊介紹的文章就介紹到這了,更多相關(guān)Vue業(yè)務(wù)邏輯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue+element UI實(shí)現(xiàn)樹形表格

    vue+element UI實(shí)現(xiàn)樹形表格

    這篇文章主要為大家詳細(xì)介紹了vue+element UI實(shí)現(xiàn)樹形表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • electron實(shí)現(xiàn)靜默打印的示例代碼

    electron實(shí)現(xiàn)靜默打印的示例代碼

    這篇文章主要介紹了electron實(shí)現(xiàn)靜默打印的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能

    vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能

    這篇文章主要介紹了vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue的data、computed、watch源碼淺談

    Vue的data、computed、watch源碼淺談

    這篇文章主要介紹了Vue的data、computed、watch源碼淺談,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Vue2 Watch監(jiān)聽操作方法

    Vue2 Watch監(jiān)聽操作方法

    這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實(shí)時監(jiān)控?cái)?shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進(jìn)行相應(yīng)的操作,需要的朋友可以參考下
    2023-12-12
  • Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實(shí)現(xiàn)

    Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實(shí)現(xiàn)

    這篇文章主要介紹了Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue項(xiàng)目強(qiáng)制清除頁面緩存的例子

    vue項(xiàng)目強(qiáng)制清除頁面緩存的例子

    今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁面緩存的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果

    Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果

    <Transition> 是一個內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無需注冊,它可以將進(jìn)入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果,需要的朋友可以參考下
    2024-09-09
  • 如何理解Vue的v-model指令的使用方法

    如何理解Vue的v-model指令的使用方法

    這篇文章主要介紹了如何理解Vue的v-model指令的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法

    vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法

    本文通過實(shí)例給大家介紹了vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu),非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04

最新評論