TP6框架--CRMEB學習筆記:佈置後臺管理框架+配置路由

来源:https://www.cnblogs.com/smileZAZ/archive/2022/09/20/16711622.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 最近在研究一個基於TP6的框架CRMEB,這裡分享下我的開發心得 首先在上篇文章中,我們安裝了CRMEBphp介面項目,需要可以看這一篇 TP6框架--CRMEB學習筆記:項目初始化+環境配置 1.獲取項目 這裡是git地址 https: ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

最近在研究一個基於TP6的框架CRMEB,這裡分享下我的開發心得

首先在上篇文章中,我們安裝了CRMEBphp介面項目,需要可以看這一篇

TP6框架--CRMEB學習筆記:項目初始化+環境配置

1.獲取項目

這裡是git地址

https://gitee.com/ZhongBangKeJi/CRMEB-Min.git

下載後用WebStorm打開

 2.依賴安裝+項目運行

先打開終端,運行

npm install

全局安裝依賴

然後在代碼上修改後臺介面地址,改為上篇中安裝好的後臺介面地址

然後根據運行文件

 運行以下代碼運行項目

npm run serve

 打開網站看效果

 登錄成功後的效果

 3.創建路由

現在,給大家說說創建新頁面,新路由的過程,首先,打開設置,點擊管理許可權,打開許可權規則,我們要先新建一個規則

 設置好參數

 打開代碼,先創建好文件夾和文件

 再去router中創建test文件

 內容如下,可做參考:

import BasicLayout from '@/components/main'

const pre = 'test_'

export default {
  path: '/admin/test',
  name: 'test',
  header: 'test',
  redirect: {
    name: `${pre}wechatMenus`
  },
  meta: {
    auth: ['admin-app']
  },
  component: BasicLayout,
  children: [
    {
      path: 'index',
      name: `${pre}Index`,
      meta: {
        auth: ['test-view'],
        title: '測試頁面'
      },
      component: () => import('@/pages/test/index')
    }
  ]
}

再在router.js中導入test,代碼如下:

import index from './modules/index'
import product from './modules/product'
import order from './modules/order'
import user from './modules/user'
// import echarts from './modules/echarts'
import setting from './modules/setting'
import finance from './modules/finance'
import cms from './modules/cms'
import marketing from './modules/marketing'
import app from './modules/app'
import system from './modules/system'
import BasicLayout from '@/components/main'
import frameOut from './modules/frameOut'
import test from './modules/test'
/**
 * 在主框架內顯示
 */

const frameIn = [
    {
        path: '/admin/',
        meta: {
            title: 'CRMEB'
        },
        redirect: {
            name: 'home_index'
        },
        component: BasicLayout,
        children: [
            // {
            //   path: '/admin/system/log',
            //   name: 'log',
            //   meta: {
            //     title: '前端日誌',
            //     auth: true
            //   },
            //   component: () => import('@/pages/system/log')
            // },
            {
                path: '/admin/system/user',
                name: `systemUser`,
                meta: {
                    auth: true,
                    title: '個人中心'
                },
                component: () => import('@/pages/setting/user/index')
            },
            // 刷新頁面 必須保留
            {
                path: 'refresh',
                name: 'refresh',
                hidden: true,
                component: {
                    beforeRouteEnter (to, from, next) {
                        next(instance => instance.$router.replace(from.fullPath))
                    },
                    render: h => h()
                }
            },
            // 頁面重定向 必須保留
            {
                path: 'redirect/:route*',
                name: 'redirect',
                hidden: true,
                component: {
                    beforeRouteEnter (to, from, next) {
                        // console.log(rom.params.route)
                        next(instance => instance.$router.replace(JSON.parse(from.params.route)))
                    },
                    render: h => h()
                }
            }
        ]
    },
    {
        path: '/admin/widget.images/index.html',
        name: `images`,
        meta: {
            auth: ['admin-user-user-index'],
            title: '上傳圖片'
        },
        component: () => import('@/components/uploadPictures/widgetImg')
    },
    {
        path: '/admin/widget.widgets/icon.html',
        name: `imagesIcon`,
        meta: {
            auth: ['admin-user-user-index'],
            title: '上傳圖標'
        },
        component: () => import('@/components/iconFrom/index')
    },
    {
        path: '/admin/store.StoreProduct/index.html',
        name: `storeProduct`,
        meta: {
            title: '選擇商品'
        },
        component: () => import('@/components/goodsList/index')
    },
    {
        path: '/admin/system.User/list.html',
        name: `changeUser`,
        meta: {
            title: '選擇用戶'
        },
        component: () => import('@/components/customerInfo/index')
    },
    {
        path: '/admin/widget.video/index.html',
        name: `video`,
        meta: {
            title: '上傳視頻'
        },
        component: () => import('@/components/uploadVideo/index')
    },
    index,
    cms,
    product,
    marketing,
    order,
    user,
    finance,
    setting,
    system,
    app,
    test
]

/**
 * 在主框架之外顯示
 */

const frameOuts = frameOut

/**
 * 錯誤頁面
 */

const errorPage = [
    {
        path: '/admin/403',
        name: '403',
        meta: {
            title: '403'
        },
        component: () => import('@/pages/system/error/403')
    },
    {
        path: '/admin/500',
        name: '500',
        meta: {
            title: '500'
        },
        component: () => import('@/pages/system/error/500')
    },
    {
        path: '/admin/*',
        name: '404',
        meta: {
            title: '404'
        },
        component: () => import('@/pages/system/error/404')
    }
]

// 導出需要顯示菜單的
export const frameInRoutes = frameIn

// 重新組織後導出
export default [
    ...frameIn,
    ...frameOuts,
    ...errorPage
]

之後還需要一步,因為路由是緩存下來的,需要清除了環境才能查看

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進路,下一篇寫如何解決各個模塊文件問題,和大家一起解析下各個模塊。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 更多技術交流、求職機會,歡迎關註位元組跳動數據平臺微信公眾號,回覆【1】進入官方交流群 摘要 位元組數據中台DataLeap的Data Catalog系統通過接收MQ中的近實時消息來同步部分元數據。Apache Atlas對於實時消息的消費處理不滿足性能要求,內部使用Flink任務的處理方案在ToB場景 ...
  • 2022 年 9 月 16 日,由中國信息通信研究院(以下簡稱“信通院”)主辦的“2022 OSCAR 開源產業大會"活動於北京成功舉辦。會上宣佈,StoneDB 發起廠商杭州石原子科技有限公司正式加入信通院“科技製造開源社區(TMOSC)”,未來石原子將與信通院及各成員單位一起聚焦可信開源全景,推 ...
  • 本篇為Redis性能問題診斷系列的第四篇,也是最後一篇,主要從應用程式、系統、伺服器硬體及網路系統等層面上進行講解,重點分享了哪些配置需要重點關註和調整優化,才能最大程度的發揮Redis的處理能力; ...
  • 一.起步 1.1 配置uni-app開發環境 什麼是uni-app,就是基於vue的一個開發框架,可以將我們寫的一套代碼,同時發佈到ios、安卓、小程式等多個平臺 ==官方推薦使用Hbuilderx來寫uni-app項目== 下載之後可以將預設改為vscode 進入hbuilder插件市場下載scs ...
  • 前端技術的發展不斷融入了很多後端的思想,逐步形成前端的 ”四個現代化“:工程化、模塊化、規範化、流程化。這個主題介紹 *模塊化* ,主要內容包括模塊化前傳(早期模塊化的實現)、模塊化的四個規範(Common JS、AMD、CMD、ESM)。本文就聊聊早期的模塊化。 ...
  • 現在的很多程式應用,基本上都是需要多端覆蓋,因此基於一個Web API的後端介面,來構建多端應用,如微信、H5、APP、WInForm、BS的Web管理端等都是常見的應用。本篇隨筆繼續分析總結一下項目開發的經驗,針對頁面組件化開發經驗方面進行一些梳理總結,內容包括組件的概念介紹,簡單頁面組件的抽取開... ...
  • 每日3題 1 以下代碼執行後,控制臺中的輸出內容為? // index.js console.log(1); import { sum } from "./sum.js"; console.log(sum(1, 2)); //sum.js console.log(2); export const s ...
  • 導讀:面對多種多樣的跨端訴求,有哪些跨端方案?跨端的本質是什麼?作為業務技術開發者,應該怎麼做?本文分享阿裡巴巴ICBU技術部在跨端開發上的一些思考,介紹了當前主流的跨端方案,以及跨端開發的經驗心得。 ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...