TP6框架--CRMEB学习笔记：布置后台管理框架+配置路由

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

最近在研究一个基于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
]

之后还需要一步，因为路由是缓存下来的，需要清除了环境才能查看

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进路，下一篇写如何解决各个模块文件问题，和大家一起解析下各个模块。