Merge branch 'dev'

Author: levy

bin/deploy/build.js

@@ -64,7 +64,7 @@ class BuildProcess {
     this.options = {
       cwd: path.join(releaseDir, templateName),
       env: {
-        API_SERVER: 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b',
+        API_SERVER: 'https://mockapi.eolinker.com/jttjNwp60fc1c9e944fdf1cc494b28a7ca4cfe66bbafee1',
         ...process.env,
         ...env,
         PUBLIC_PATH: `${process.env.PUBLIC_PATH || ''}/${this.folderName}`

bin/deploy/env.json

@@ -1,6 +1,6 @@
 {
   "nuxt-admin": {
-    "API_SERVER": "https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b",
+    "API_SERVER": "https://mockapi.eolinker.com/jttjNwp60fc1c9e944fdf1cc494b28a7ca4cfe66bbafee1",
     "APP_ID": "1204701543597604893"
   }
 }

docs/api.md

@@ -23,7 +23,7 @@ this.$axios.$post('/security/users', body)
 ## 使用
 
 ```javascript
-// 创建一个 API 资源，修改文件 src/api/index.js
+// 创建一个 API 资源，修改文件 src/services/basis.js
 
 // 创建了一个菜单资源的 CRUD 接口方法
 + export const menus = new Repository(`${DEEPEXI_CLOUD_TENANT}/${VERSION}/menus`)
@@ -33,23 +33,23 @@ this.$axios.$post('/security/users', body)
 // 在 page 中
 mounted() {
   // 获取资源的服务器路径
-  this.$http.menus.uri()
+  this.$services.basis.menus.uri()
   // 获取所有菜单资源，返回一个列表
-  this.$http.menus.list()
+  this.$services.basis.menus.list()
   // 获取某个菜单资源的详情
-  this.$http.menus.detail(MENUS_ID)
+  this.$services.basis.menus.detail(MENUS_ID)
   // 创建一个菜单资源
-  this.$http.menus.create(payload)
+  this.$services.basis.menus.create(payload)
   // 更新一个菜单资源
-  this.$http.menus.update(MENUS_ID, payload)
+  this.$services.basis.menus.update(MENUS_ID, payload)
   // 删除一个菜单资源
-  this.$http.menus.delete(MENUS_ID)
+  this.$services.basis.menus.delete(MENUS_ID)
 }
 
 // 在 store 中
 export const actions = {
   async getMenus(store, payload) {
-    const data = await this.$http.menus.detail(payload)
+    const data = await this.$services.basis.menus.detail(payload)
     ...
   }
 }
@@ -60,7 +60,7 @@ export const actions = {
 有些时候，后端的接口并不是严格遵循 RESTful 的最佳实践，这个时候就需要自己重新实现默认的方法
 
 ```javascript
-// 在 src/api/repository.js 中增加一个类，继承 Repository
+// 在 src/services/repository.js 中增加一个类，继承 Repository
 export class ExampleRepository extends Repository {
   constructor(resource, id) {
     super(resource)
@@ -78,13 +78,58 @@ export class ExampleRepository extends Repository {
 }
 
 // 基于 ExampleRepository 创建一个 API
-export const example = new ExampleRepository('/example/api')
+export default new ExampleRepository('/example/api')
 
 // 调用
-this.$http.example.uri(appId)
-this.$http.example.detail(id)
-this.$http.example.list()
-this.$http.example.create(payload)
-this.$http.example.update(appId, payload)
-this.$http.example.delete(id)
+this.$services.example.uri(appId)
+this.$services.example.detail(id)
+this.$services.example.list()
+this.$services.example.create(payload)
+this.$services.example.update(appId, payload)
+this.$services.example.delete(id)
 ```
+## 注意
+
+services 会根据文件名作为 scope，将该文件 export 出去的所有值挂在这个 scope 下。
+
+比如 `basic.js`
+```js
+export const login = new Repository(`${SECURITY_CLOUD}/${VERSION}/login`)
+
+export const userInfo = new Repository(`${SECURITY_CLOUD}/${VERSION}/token`)
+
+export const menus = new Repository(`${SECURITY_CLOUD_TENANT}/${VERSION}/menus`)
+
+export const subMenus = new Repository(
+  `${SECURITY_CLOUD_TENANT}/${VERSION}/sub-menus`,
+)
+```
+
+就会将它们挂在 `this.$services.basic` 下：
+```js
+this.$services.basic.menus.list()
+```
+
+如果文件中有 `export default`，则会有些不同。
+
+比如 `example.js`：
+```js
+export default new Repository(`${VERSION}/example/api`)
+
+// 使用
+this.$services.example.list()
+```
+
+如果文件中既有 `export default` 又有 `export const`：
+```js
+export default new Repository(`${VERSION}/example/api`)
+
+export const other = new Repository(`${VERSION}/example/api/other`)
+
+// 使用
+this.$services.example.list()
+this.$services.example.other.list()
+```
+
+**需要注意**：导出的 `service` 名字不能与 `Repository` 的接口名字重复，接口名字列表可以在这里看到：
+https://github.com/femessage/create-nuxt-app/blob/dev/template/modules/service/services/common/repository.js#L8

template/framework-admin/store/index.js

@@ -104,7 +104,7 @@ export const mutations = {
 
 export const actions = {
   async login({commit, dispatch}, {body, redirect = '/'}) {
-    const userInfo = await this.$http.login.create(body)
+    const userInfo = await this.$services.basic.login.create(body)
     commit('setUserInfo', userInfo.payload)
     dispatch('getHeaderMenu')
     dispatch('getSiderMenu')
@@ -114,7 +114,7 @@ export const actions = {
   },
 
   async refresh({commit, dispatch}, token) {
-    const userInfo = await this.$http.userInfo.list({
+    const userInfo = await this.$services.basic.userInfo.list({
       params: {
         token,
       },
@@ -125,7 +125,7 @@ export const actions = {
   },
 
   async getHeaderMenu({commit}) {
-    const menus = await this.$http.menus.list({
+    const menus = await this.$services.basic.menus.list({
       params: {
         appId: process.env.APP_ID,
       },
@@ -134,7 +134,7 @@ export const actions = {
   },
 
   async getSiderMenu({commit}) {
-    const menus = await this.$http.subMenus.list({
+    const menus = await this.$services.basic.subMenus.list({
       params: {
         appId: process.env.APP_ID,
       },

template/framework-base/README.md

@@ -74,10 +74,13 @@ yarn generate
 ├── nuxt.config.js         框架配置文件
 ├── package.json
 ├── src                    开发目录
-│   ├── api                api 资源管理
-│   │   ├── index.js       统一入口，定义 RESTful API 资源
-│   │   ├── repository.js  RESTful 生成类，可以继承实现满足业务需求
-│   │   └── serverList.js  统一管理服务路径和 API version
+│   ├── services           api 资源管理
+│   │   ├── common         service 公用的类库、BASE URL 定义等 
+│   │   │   ├── api.js         统一管理服务路径和 API version
+│   │   │   └── repository.js  RESTful 生成类，可以继承实现满足业务需求
+│   │   ├── basic.js       一些基本的 services
+│   │   ├── example.js     一个 example 的 service
+│   │   └── index.js       统一入口，会导出所有 services
 │   ├── assets             资源，包括样式文件与图片
 │   │   ├── global.less    全局样式类
 │   │   └── var.less       样式变量，支持less变量自动引入，即不用在less中import就能直接使用变量
@@ -130,28 +133,32 @@ Nuxt.js 会依据 `pages` 目录中的所有 `*.vue` 文件生成应用的路由
 
 [推荐使用 service 层管理 API：](https://github.com/FEMessage/create-nuxt-app/blob/dev/docs/api.md)
 
-1. 在 `api/index.js` 中定义一个 API
+1. 在 `services` 中定义一个 API
 
+在 `src/services` 下新建一个 `example.js`
 ```js
-// 创建了一个菜单资源的 RESTful API
-export const menus = new Repository(`${SERVICE}/${VERSION}/menus`)
+// 创建了一个 example 的 RESTful API
+import {Repository} from './common/repository'
+import {VERSION} from './common/api'
+
+export default new Repository(`${VERSION}/example/api`)
 ```
 
 2. 在 `*.vue`、`store/*.js` 的 `actions` 都可以调用
 
 ```js
 // 获取资源的服务器路径
-this.$http.menus.uri()
-// 获取所有菜单资源，返回一个列表
-this.$http.menus.list()
-// 获取某个菜单资源的详情
-this.$http.menus.detail(MENUS_ID)
-// 创建一个菜单资源
-this.$http.menus.create(payload)
-// 更新一个菜单资源
-this.$http.menus.update(MENUS_ID, payload)
-// 删除一个菜单资源
-this.$http.menus.delete(MENUS_ID)
+this.$services.example.uri()
+// 获取所有资源，返回一个列表
+this.$services.example.list()
+// 获取某个资源的详情
+this.$services.example.detail(ID)
+// 创建一个资源
+this.$services.example.create(payload)
+// 更新一个资源
+this.$services.example.update(ID, payload)
+// 删除一个资源
+this.$services.example.delete(ID)
 ```
 
 3. 如果接口是非标准的 RESTful API 可以参考此[文档](https://github.com/FEMessage/create-nuxt-app/blob/dev/docs/api.md#%E8%BF%9B%E9%98%B6)

template/framework-base/_package.json

@@ -57,7 +57,7 @@
     "eslint-config-prettier": "6.15.0",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-plugin-jest": "24.1.3",
-    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-nuxt": "1.0.0",
     "eslint-plugin-prettier": "3.1.4",
     "github-release-notes": "0.17.1",
     "husky": "1.3.1",

template/framework-base/nuxt.config.js

@@ -233,7 +233,7 @@ module.exports = {
   plugins: [
     {src: '~plugins/axios'},
     {src: '~plugins/filters'},
-    {src: '~plugins/api'},
+    {src: '~plugins/services'},
     <%_ if (template === 'mobile') { _%>
     {src: '~plugins/vant'},
     <%_ } else { _%>

template/modules/jest/test/unit/parseServices.test.js

@@ -0,0 +1,59 @@
+const {parseServices} = require('@/utils')
+import {Repository} from '@/services/common/repository'
+
+const moackAxios = {
+  $get() {},
+  $post() {},
+  $put() {},
+  $delete() {},
+}
+
+describe('测试 utils.parseServices 函数', () => {
+  test('普通处理 scope', () => {
+    const serviceModules = {
+      basis: {
+        login: new Repository('login'),
+        menus: new Repository('menus'),
+        subMenus: new Repository('subMenus'),
+        token: new Repository('token'),
+      },
+    }
+    const expected = {
+      basis: {
+        login: serviceModules.basis.login.init(moackAxios),
+        menus: serviceModules.basis.menus.init(moackAxios),
+        subMenus: serviceModules.basis.subMenus.init(moackAxios),
+        token: serviceModules.basis.token.init(moackAxios),
+      },
+    }
+    expect(parseServices(serviceModules, moackAxios)).toMatchObject(expected)
+  })
+
+  test('正常处理导出 default 时直接挂在 scope', () => {
+    const serviceModules = {
+      example: {
+        default: new Repository('example'),
+      },
+    }
+    const expected = {
+      example: serviceModules.example.default.init(moackAxios),
+    }
+    expect(parseServices(serviceModules, moackAxios)).toMatchObject(expected)
+  })
+
+  test('正常处理同时导出 default 和 const', () => {
+    const serviceModules = {
+      example: {
+        default: new Repository('example'),
+        other: new Repository('example/other'),
+      },
+    }
+    const expected = {
+      example: {
+        ...serviceModules.example.default.init(moackAxios),
+        other: serviceModules.example.other.init(moackAxios),
+      },
+    }
+    expect(parseServices(serviceModules, moackAxios)).toMatchObject(expected)
+  })
+})

template/modules/service/api/index.js

@@ -0,0 +1,12 @@
+/**
+ * @see https://github.com/FEMessage/create-nuxt-app/blob/dev/docs/api.md
+ */
+
+import modules from '~/services'
+import {parseServices} from '~/utils'
+
+export default (ctx, inject) => {
+  const services = parseServices(modules, ctx.$axios)
+
+  inject('services', services)
+}

template/modules/service/api/serviceList.js

@@ -0,0 +1,12 @@
+import {Repository} from './common/repository'
+import {VERSION, SECURITY_CLOUD, SECURITY_CLOUD_TENANT} from './common/api'
+
+export const login = new Repository(`${SECURITY_CLOUD}/${VERSION}/login`)
+
+export const userInfo = new Repository(`${SECURITY_CLOUD}/${VERSION}/token`)
+
+export const menus = new Repository(`${SECURITY_CLOUD_TENANT}/${VERSION}/menus`)
+
+export const subMenus = new Repository(
+  `${SECURITY_CLOUD_TENANT}/${VERSION}/sub-menus`,
+)