FastCrud

Appearance

On this page

FsAdmin

本项目核心为fast-crud，需要与admin项目结合使用。官方的示例项目就是一个简单的admin项目。

各版本源码地址

FsAdminAntdv

FsAdminElement

FsAdminNaiveUi

TIP

以下帮助说明仅针对FsAdminAntdv 和FsAdminElement
FsAdminNaiveUi的使用文档请参考原项目文档：naive-admin

启动方法

请前往 start

路由与菜单

/src/router/source/modules 目录下配置，每一项具备路由和菜单的双重功能

js
const routeItem = {
    title: "基本特性",//路由或菜单标题
    name: "basis",//路由名称
    path: "/crud/basis", //路由路径
    redirect: "/crud/basis/i18n",//路由跳转
    meta: { //额外的配置
        "cache": true, //是否缓存页面
        "isMenu": true, //是否是菜单，=false则为纯路由配置，不在左侧菜单显示
        "icon": "ion:disc-outline" //菜单图标
    },
    children: []//子路由
}

Api请求

api请求采用axios模块

js
// mock请求
import { requestForMock } from "/src/api/service";
// 真实后端请求
import { request } from "/src/api/service";

mock

示例项目默认为mock数据

如果要改成请求真实后端，请按如下步骤修改

1、requestForMock改成request

js
import { requestForMock } from "../../../api/service";
// 改成请求真实后端 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
import { request } from "../../../api/service";

2. 修改ip和端口

2.1 开发环境

js
//修改 vite.config.ts
export function (){
    
    
    return {
        ...
            server: {
                proxy: {
                // with options
                "/api": {
                    //  修改为你的本地后端服务地址↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
                    target: "http://127.0.0.1:7001"
                }
            }
        }
    };
}

2.2 生产环境

shell
# 修改 .env.production 文件
# 改为你的后端生产环境地址↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
VITE_APP_API=http://www.docmirror.cn:7001/api

Tabs页签

tabs页签由 pageStore 控制

js
const pageStore = usePageStore();

/**
 * @class opened
 * @description 新增一个 tag (打开一个页面)
 * @param {Object} context
 * @param {Object} payload new tag info
 */
pageStore.add({ tag, params, query, fullPath })
/**
 * @class current
 * @description 打开一个新的页面
 * @param {Object} context
 * @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
 */
pageStore.open({ name, params, query, fullPath, meta })

/**
 * @class opened
 * @description 关闭一个 tag (关闭一个页面)
 * @param {Object} context
 * @param {Object} payload { tagName: 要关闭的标签名字 }
 */
pageStore.close({ tagName });
/**
 * @class opened
 * @description 关闭当前标签右边的标签
 * @param opts
 */
pageStore.closeRight(opts = {})
/**
 * @class opened
 * @description 关闭当前标签右边的标签
 * @param opts
 */
pageStore.closeRight(opts = {})

/**
 * @class opened
 * @description 关闭当前激活之外的 tag
 * @param opts
 */
pageStore.closeOther()

/**
 * @class opened
 * @description 关闭所有 tag
 * @param {Object} context
 */
pageStore.closeAll()

/**
 * @class keepAlive
 * @description 从已经打开的页面记录中更新需要缓存的页面记录
 * @param {Object} state state
 */
pageStore.keepAliveRefresh()

页面缓存

页面缓存的效果是：切换页面tabs标签，回到之前打开过的页面，不会重新加载页面数据。

要实现页面缓存需要同时满足以下两个条件：

  • 页面组件需要有 name 属性并且 name 属性的值要与当前页面在路由信息中的 name 字段一致。
  • 页面路由设置中要指定 meta: { cache: true }

下面是两段示例代码,注意箭头指向的行。
页面组件：

vue
<template>
  <fs-page>
    我会被缓存
  </fs-page>
</template>

<script>
export default {
  name: 'foo-page'      // <-----------
}
</script>

该页面组件在路由中的数据：

js
const routeItem = {
    path: '/foo/page',
    name: 'foo-page',   // <-----------
    meta: {
        title: '这是一个会被缓存的页面',
        cache: true     // <-----------
    },
    component: () => import('page/foo/page.vue')
}

国际化

请参考 i18n

图标

请参考 icon

主题颜色

暂不支持