Vue項(xiàng)目業(yè)務(wù)邏輯模塊介紹
一.什么是業(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)樹形表格
這篇文章主要為大家詳細(xì)介紹了vue+element UI實(shí)現(xiàn)樹形表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-12-12electron實(shí)現(xiàn)靜默打印的示例代碼
這篇文章主要介紹了electron實(shí)現(xiàn)靜默打印的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能
這篇文章主要介紹了vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Vue 使用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-04vue項(xiàng)目強(qiáng)制清除頁面緩存的例子
今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁面緩存的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果
<Transition> 是一個內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無需注冊,它可以將進(jìn)入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實(shí)現(xiàn)組件切換的過渡效果,需要的朋友可以參考下2024-09-09vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
本文通過實(shí)例給大家介紹了vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04