对Vue做了一层封装。给Vue添加了一些属性,方便使用。
- -双向绑定的值,类似绑定到ng里面scope的值
-- {{data1}} -
-FesMap会自动挂载到FesData
-FesMap: {{FesMap}}
-FesFesx会自动挂载到FesData
-FesFesx: {{FesFesx}}
-进入路由时根据接口查询到的值,并且设置成响应数据
-- -
-- data2: {{data2}} -
- - -日期: {{date}} => {{date | date}}
-日期(带参数): {{date}} => {{date | date('yyyy-MM-dd')}}
-金钱: {{money}} => {{money | money}}
-银行卡: {{card}} => {{card | card}}
-加密: {{safety}} => {{safety | safety(4,3)}}
-数据字典: {{map}} => {{map | map(FesMap.status)}}
-对vue-resource的封装。公共的异常处理,响应处理等。
- -get(url, data, option)
-- 发起一个get请求,返回值是promise对象 -
-post(url, data, option)
-- 发起一个post请求,返回值是promise对象 -
-fetch(url, data, option)
-- 默认调用post请求,返回值是promise对象 -
-option(option)
-- 设置ajax的公共配置,比如root(根路径)、timeout(超时时间)、xhr(xhr对象) -
-setError(errors)
-- 设置当响应状态是非200时触发的事件钩子,比如401啊等 -
-setResponse(constructionOfResponse)
-- 设置响应结构。响应一般会由状态码、错误消息、数据组成。通过此函数设置一个路径,当响应回来是来解析响应。 -
-一个App表示一个应用。管理一些应用级别的状态。
- -this.FesApi
-操作ajax的对象
-this.FesMap
-数据字典,保存数据字典的容器,提供查找函数
-this.FesUtil
-工具函数,操作dom、对象等
-this.FesFesx
-存储全局状态的容器
-this.FesStorage
-操作存储: cookie、sessionStorage、localStorage
-this.router
-当前路由对象,具体api查询vue-router v0.7
-init
-- 初始化整个应用,我们只需要在app.js写入自定义的初始化内容,比如设置菜单、项目名等 -
-get(prop)
-- 根据prop获取在App保存的应用层面的状态值 -
-set(prop, value)
-- 设置应用层面的状态,包括FesName、FesMenu、FesUserName、FesRoleName、FesLogout -
-setRole(role)
-- 我们需要在common/rolesConfig.js中配置角色所属的菜单权限,可以把未登录状态也当作一种角色。根据当前登录状态或者用户设置不同的角色。菜单也会根据角色展示。 -
-getAllowPage()
-- 返回当前能访问的页面 -
-setBeforeRouter(beforeRouter)
-- 设置路由切换之前的事件钩子,可以根据条件判断是否阻止切换 -
-setAfterRouter(afterRouter)
-- 路由切换之后的事件钩子 -
-全局的状态管理容器
- -get(prop)
-- 根据prop获取值 -
-set(prop, value)
-- 设置一个全局的状态 -
-数据字典管理对象。当程序加载时,从common/map.js中读取原始数据,转换成{value: value, text: text},存入FesMap
- -getNameByValue(name, value)
-- 从FesMap[name]中找出值是value的那一条数据 -
-
- 配置公共左侧菜单
-
在调用FesApp.setRole(...)之后,FesMenu只显示当前用户可以访问的菜单
-
-
- 属性 - | -- 说明 - | -- 类型 - | -- 默认值 - | -
---|---|---|---|
- title - | -- 菜单标题 - | -- String - | -- 空 - | -
- path - | -- 菜单项点击后,跳转路径 - | -- String - | -- 空 - | -
- subMenu - | -- 子菜单,每项也有path和title - | -- Array - | -- 空 - | -
- //在app.js文件中设置菜单 - this.set("FesMenu", [{ - title: "接口", - path: '/api', - subMenu: [{ - title: "Fes", - path: '/api/fes', - },{ - title: "FesApp", - path: '/api/fesApp', - },{ - title: "FesApi", - path: '/api/fesApi', - },{ - title: "FesMenu", - path: '/api/fesMenu', - },{ - title: "FesMap", - path: '/api/fesMap', - },{ - title: "FesFesx", - path: '/api/fesFesx', - },{ - title: "FesStorage", - path: '/api/fesStorage', - },{ - title: "FesUtil", - path: '/api/fesUtil', - }] - },{ - title: "简单的列表页", - path: '/list' - },{ - title: "自定义内容列表页", - path: '/list1' - },{ - title: "内容很多的编辑", - path: '/list/edit' - }] - ); --
操作Storage,包含cookie、sessionStorage、localStorage。 category值SESSION对应sessionStorage,LOCAL对应localStorage,COOKIE对应cookie
- -set(key, value, category = SESSION, expired)
-- 往Storage中存入一个值 -
-get(key, category = SESSION)
-- 从Storage中取得值 -
-clear(category = SESSION)
-- 清除所有值 -
-remove(key, category = SESSION)
-- 删除key对应的值 -
-工具集合
- -
- {{$t('i18n.internationalization')}}
- vue-i18n
- {{$t('i18n.achieve')}}
-
- 根路由下所有page共用的外层 -
-
- Fes的路由是根据src/pages目录自动生成的
-
- pages - ├── index.fes # 根路由页面 路径 http://localhost:5000/index.html#!/ - ├── a.fes # 路径 /a - ├── b - │ ├── index.fes # 路径 /b - │ ├── @id.fes # 动态路由 /b/:id - │ └── c.fes # 路径 /b/c(优先于/b/:id进行匹配) - └── layout.fes # 根路由下所有page共用的外层 --