基于Vue3+Webpack5的独创一代开箱即用的管理平台

// src/pages/product/list.vue

<template>
	<div>...</div>
</template>
<config>
{
    "name": "productManage",
    "title": "产品管理"
}
</config>
<script>
import { ref, reactive, toRaw } from 'vue';
...
</script>
 

Windows 和权限菜单

页面配置完成后，在.fes.js文件中设置菜单和权限。更多信息请访问官方文档网站，这里我们更改内容如下：

export default {
    ... // 其他配置略
    access: {
        roles: {
            superAdmin: ["/", "/product/list", "/order/list", "/order/detail"],
            admin: ["/", "/product/list"]
        }
    },
    layout: {
        ...
        menus: [
            {
                name: 'index'
            },
            {
                name: 'productManage'	// 产品管理
            },
            {
                name: 'orderManage',	// 订单管理
                title: '订单管理',
                children: [
                    {
                        name: 'orderList'	// 订单列表
                    }
                ]
            }
        ]
    }
    ...
};
 

如您所见，我们设置了两个角色，高级经理（superAdmin）和简单经理（admin）。超级管理员可以比普通管理员访问更多的页面，并将角色设置为superAdmin（超级管理员），使用setRole方法翻译页面。请在此处查看 app.js 代码：

import { access } from '@fesjs/fes';

export const beforeRender = {
    loading: <PageLoading />,
    action() {
        const { setRole } = access;
        return new Promise((resolve) => {
            setTimeout(() => {
                setRole('superAdmin');	// 设定角色
                resolve({
                    userName: 'Hello, World!'
                });
            }, 1000);
        });
    }
};
 

同时，menus中的name必须与页面编辑中的name相匹配。例如，menus中的【产品管理】中的name: 'productManage'需要匹配♿中的自定义页面文件src/pages/product/list.vue文件name。

配置menus并设置相应的权限后，我们看到这个界面：

到这里我们就完成了新的自定义页面、菜单、权限等设置的设计。你认为事情有那么简单吗？

接下来简单看一下其他常见的开发配置设置~

常用配置分析

这里以ant-design-vue为例，在.fes.js上添加如下设置：

export default {
    ...
    extraBabelPlugins: [
        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]
    ],
    ...
};
 

只需复制babel的设置即可，太简单了~

2。如何播放HTTP请求？

import { request } from '@fesjs/fes';

export default {
    add: (data, option) => request('/api/product/add', data, option),
    getList: (data, option) => request('/api/product/list', data, option)
};
 

更多游戏，请查看插件请求文档。

3。共享请求处理在哪里配置？

例如，如果想让接口相关的数据统一，可以添加钩子函数responseDataAdaptor。参数data是接口返回消息的部分。例如，如果你想让code在界面中统一，你可以添加errorHandler。

示例：

如果后端返回的数据JSON如下：

{
	"code": "8888",
	"msg": "未登录或登录态过期，请重新登录"
}
 

然后在app.js中进行以下配置：

import { getRouter } from '@fesjs/fes';

export const request = {
    responseDataAdaptor: (data) => {
        // data.code = data.retCode;
        return data;
    },
    errorHandler: {
        8888: (err) => {
            const router = getRouter();
            alert('登录态过期，请重新登录');
            router.push('/account/login');
        }
    }
};
 

在上面的配置中，8888对应于接口的code字段返回的值。如果接口返回的code字段有其他名称，如retCode，可改为responseDataAdaptor ，如：data.code = data.retCode;。

4。是否支持移动应用程序开发？

Fes.js支持PC端和移动端开发，提供PC端和移动端的定制能力。例如PC安装、许可证管理、国际化等；手机屏幕适配、1px问题、hover条件等相信你在启动应用时已经看到了，PC或H5选择~

5。导入别名文件

alias: {
    '@common': 'src/common/',
    '@utils': 'src/utils/',
    '@images': 'src/images/',
    '@services': 'src/services/'
}
 

import xxx from '@/common/xxx.js';
 

export default {
    ...
    layout: {
        title: 'xx管理系统',
        logo: './img/logo.png',
        ...
    },
    ...
};