首页 > 其他分享 >TP6框架--CRMEB学习笔记:布置后台管理框架+配置路由

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

时间:2022-09-20 16:57:07浏览次数:77  
标签:index name 框架 -- component TP6 path import admin

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

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

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

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

 

标签:index,name,框架,--,component,TP6,path,import,admin
From: https://www.cnblogs.com/smileZAZ/p/16711622.html

相关文章

  • 什么是跨域问题?如何解决?
    跨域问题指的是不同站点之间,使用ajax无法相互调用的问题。跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。但这个保护机制也......
  • Qt官方示例Demo介绍 以及 Qt Examples and Demos(Qt的例子和演示)(转)
    Qt官方示例Demo介绍:https://blog.csdn.net/qq582880551/article/details/123313751QtExamplesandDemos(Qt的例子和演示):https://blog.csdn.net/luoting2017/article/......
  • tomcat启动成功,网页无法使用设定ip地址打开
    1.启动tomcat程序,查看日志catalina.log文件,显示启动成功;2.使用localhost:7788或者127.0.0.1:7788,均可打开对应网页,但不满足要求,不能与后端程序进行通信;3.将以太网的ip......
  • 20220920测试总结
    题目还是挺爽的。P2327[SCOI2005]扫雷原题链接题目分析我们设\(a[i]\)为第\(i\)行的数字,显然如果满足\(a[1]=3\veea[n]=3\)时,方案数为\(0\)呐等于\(0\)。所以接下来......
  • 看cad图纸最好用的软件推荐
    https://www.somode.com/softjc/14854.html使用cad图纸软件看图会大幅提高你的工作效率,但是现在市面上有非常多的cad看图软件,用户不知道应该作何选择,因此今天小编给大家......
  • ACL和NAT
    1 ACL1.1 ACL的作用1).用来对数据包做访问控制(丢弃或者放弃)2).结合其他协议,用来匹配范围1.2 ACL的工作原理 当数据包从接口经过时,由于接口启用了ACL,此时路由器会对......
  • Python学习:len() 函数详解:获取字符串长度或字节数、join()方法:合并字符串
    Python中,要想知道一个字符串有多少个字符(获得字符串长度),或者一个字符串占用多少个字节,可以使用len()函数。语法格式:len(string)string用于指定要进行长度统计的字符串......
  • 安装 UrBackup服务端
    安装UrBackup服务器配置固定IP:https://www.cnblogs.com/congcongdi/p/10149925.html1.1安装urbackupserver系统。cd/etc/yum.repos.d/wgethttps://download.ope......
  • 安装UrBackup Linux客户端
    记录下要备份的客户端的IP和用户名;到UrBackup服务端去手动添加Linux客户端;复制服务端生成的密匙文件到TXT文件,方便接下来在客户端上使用;按第3点生成的TXT文件来在客户端上......
  • 数据类型扩展
     packagemyaction;publicclassDemo1{publicstaticvoidmain(String[]args){//整数拓展     二进制0b十进制八进制0......