阅读 1365

Vue2.x + Antd + mock 项目实战

本人小白,如有问题,还望指出,虚心求教。

项目说明

GitHub

介绍

  1. 环境 "vue-cli": 3.0
  2. 涉及主要插件
    "ant-design-vue": "^1.7.2",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "crypto-js": "^4.0.0",
    "echarts": "^5.0.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "resize-observer-polyfill": "^1.5.1",
    "vue": "^2.6.11",
    "vue-cookie": "^1.1.4",
    "vue-i18n": "^8.24.1",
    "vue-infinite-scroll": "^2.0.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
复制代码
  1. 内置组件
    • SvgIcon 支持Svg图标引入
    • Ellipsis 文本省略
    • PageScrollable 过长收缩滚动组件
    • EditTable 基于Antd Table 的简单编辑表格

目录结构

  • build(构建配置目录)
  • public(公共资源目录)
  • src(项目目录)
    • api(项目api接口目录)
    • assets(项目资源目录)
    • components(项目组件目录)
    • config(全局配置目录)
    • directives(自定义指令目录)
    • layouts(页面布局文件目录)
    • i18n(多语言配置)
    • mock(mock目录-本地环境开启)
    • plugins(插件目录)
    • router(路由树目录)
    • store(store目录)
    • styles(全局样式目录)
    • utils(工具方法目录)
    • views (项目页面目录)
    • App.vue (项目App)- 提供单页面路由视图 router-view
    • main.js(构建入口 - 加载插件、插件全局配置)

api 目录(封装接口调用)

提供项目涉及的接口配置信息,封装成通用方法 $api ,方便接口调用。

  • index 文件 -解析 modules 目录,获取相关模块接口配置,然后封装成 $api 全局方法。
  • modules 目录(存放模块接口配置文件,必须是 *.js 文件,暴露相应配置对象)

使用 require.context() 方法一次性引入目录文件模块

接口配置

  • key: 作为接口配置的键值,同时也是 $api 调用方法的键值。
  • url: 指定接口地址,支持 restful 接口,地址带有的参数(:key)会从 data 中读取,自动进行数值替换,因此data中必须包含参数字段,否则会导致接口地址错误。
  • method: 接口请求方式
  • description: 接口描述 - 不作为请求参数
  • data: 接口参数列表,所有参数必须填写,包括url上的参数(:key),自动过滤列表以外的参数。配置字段参数不作为默认值,只是作为数据类型使用。

$api 方法

$api['modules/key'](data, config)

  • modules: modules目录的对应文件名
  • key: 接口键值
  • data: 接口参数
  • config: 额外的接口配置

mock 目录(本地接口数据模拟)

本地 .dev 才执行,拦截接口请求,返回mock数据。需要按结构定义相应接口路由及mock数据。

  • index 文件 -mock启用文件
  • utils 文件 -定义mock相关工具方法
  • services 目录(定义模块接口)

使用 require.context() 方法一次性引入目录文件模块

扩展: require.context(directory, useSubdirectories, regExp): function

  • irectory: 要查找的文件路径
  • useSubdirectories: 是否查找子目录
  • regExp: 要匹配文件的正则
  • return: 返回一个函数,通过 .keys() 返回匹配的所有模块地址,传入对应key值,获取对应模块内容。通过正则可解析文件名称作为模块名称。

routes 目录(支持动态路由)

定义项目路由配置。

  • index 文件 -最终路由配置对象。
  • staticRoutes 文件 -配置公共路由,不需要用户权限验证
  • asyncRoutes 文件 -根据接口返回权限码返回动态路由配置 或者 需要根据权限(permitCode)动态计算的路由

注意: 可通过meta的新增字段 menu 指定所属菜单 路由,值为 path路径,用于渲染选中的菜单项。

备注 目前登录页由项目提供,需要登录后才能获取路由权限,不建议使用动态路由,而直接根据路由的permitCode 在全局路由守卫拦截。如果在index.html可以获取账号权限(登录页由其他项目管理)则建议使用动态路由。asyncRoutes 文件提供 getRoutes 方法返回动态路由配置。

store 目录(按模块)

  • index 文件 -根store
  • types 文件 -定义mutations、actions名称常量
  • modules 目录(定义store模块)

注意 modules 如果启用 命名空间(namespaced: true),dispatch、commit 要加模块名称前缀,但mapState可以传入模块名称(1参)以及直接使用字符串数组(2参)就能得到模块state,如果禁用 命名空间,dispatch、commit 不需要加模块前缀,但是模块state需要在 mapState 使用对象(1参)参数建立映射关系([string]: (state) => any)。

styles 目录

定义全局样式,避免 .vue 文件嵌套复杂的样式,只需要专注页面结构以及页面逻辑。

  • index -根样式
  • base 文件 -基础样式
  • common 目录(存放公共内容)
    • index 文件 -定义类结构变量
    • mixins 文件 -混合类
    • variable 文件 -定义公共变量
  • components 目录(定义组件样式)
  • layouts 目录(定义布局组件样式)
  • views 目录(定义模块页面样式)

i18n 目录(支持国际化)

定义多语言配置文件,目前只设置中文、英文两个语言版本

  • index 文件 -解析语言配置,创建i18n对象
  • language 目录 -存放对应语言配置,文件名作为语言,并需要在各个语言文件内配置对应名称的文案配置,这一步是为了顶部多语言切换能够正确显示可切换的语言文案。

config 目录

定义项目需要使用的或者需要多处使用的静态内容。

  • index 文件 - 定义左侧菜单树,权限菜单控制,以及权限控制开关字段。
  • cookies 文件 -定义项目涉及的所有cookie的名称。
  • charts 文件 -定义图标配置项默认配置,方便风格统一。
  • router 文件 -定义路由创建所需要的默认配置项,以及全局路由守卫,路由守涉及路由权限控制。
  • axios 文件 -定义axios创建所需要的默认配置项,以及axios全局拦截器,包括interceptor.request 和 interceptor.response

权限控制(待优化)

权限控制包括 路由访问权限控制 、 左侧菜单权限控制 、 功能码权限控制 主要涉及文件 routes/asyncRoutesconfig/indexconfig/routerutils/permissiondirectives/permit

  • 路由访问权限控制
    • 目前通过在 meta 字段中配置 permitCode 字段,在全局路由前置守卫中根据权限数组(接口返回)匹配 permitCode 字段来控制对应路由访问控制。如果路由配置未设置 permitCode 字段,则不校验权限。同时在 config/index 设置是否开启验证路由权限开关字段 PERMIT_ROUTE_OPEN,方便关闭路由权限控制。
    • 同时,也设置另一种权限路由控制方式,在 routes/asyncRouters 文件中暴露 getRoutes 方法用来过滤有权限路由,通过传入 权限数组 参数,返回对应路由配置,在动态添加到router路由对象。(此方法需要进入页面就有路由权限,否则需要控制首次进入路由跳转前完成接口请求以及动态路由添加)
  • 左侧菜单权限控制 左侧菜单权限控制,通过 config/index 文件暴露的 getPermitMenus 方法,传入菜单权限码数组进行过滤,返回对应菜单数据,以供全局左侧菜单栏显示。同时,在 config/index 设置是否开启菜单权限控制开关字段 PERMIT_MENU_OPEN ,方便关闭菜单权限控制。
  • 功能码权限控制 功能码权限控制,主要用来控制按钮以及部分信息展示,根据接口返回功能码集合 func ,全局提供 $havePermission 方法,通过传入权限码(支持单个或者多个)进行权限校验,方法实现位于 utils/permission 文件。同时提供自定义指令 v-permit 控制内容展示。

页面展示

布局

  • 登陆/注册/忘记密码页面 只有内容栏,内容左右,一边是背景,一边是主要表单内容 登录页面

注册页面

  • 异常页面(403、500) 只有内容栏(Content)。直接使用Antd 的 Result组件渲染403页面
  • 主要页面 顶部(Header)-侧边布局(Sider)-内容栏(Content),侧边栏支持收缩

首页 侧边栏收缩效果

其他展示

侧边信息页

分布表单页面 高级表单页面 基础表格页面 基础列表页 基础详情页

文章分类
前端
文章标签