Merge branch 'develop' into 'master'

api管理

See merge request laihua-web/mould-vuecli3!1

.gitignore

 .DS_Store
 node_modules
 /dist
+webpack.js
 
 
 # local env files

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.1.1](https://gitlab.ilaihua.com/laihua-web/mould-vuecli3/compare/v2.1.0...v2.1.1) (2020-09-28)
+
+## [2.1.0](https://gitlab.ilaihua.com/laihua-web/mould-vuecli3/compare/v2.0.0...v2.1.0) (2020-09-28)
+
+
+### Features
+
+* api管理 ([a7b6aed](https://gitlab.ilaihua.com/laihua-web/mould-vuecli3/commit/a7b6aedce7aee0c857b8d17a182885248b9f50dd))
+
 ## [2.0.0](https://gitlab.ilaihua.com/laihua-web/mould-vuecli3/compare/v1.0.0...v2.0.0) (2020-09-08)
 
 

README.md

@@ -29,6 +29,7 @@
 - [x] `standard-version`自动化发版流程及生成规范化的changelog
 - [x] Symbol的在线链接方式引入iconfont
 - [x] 新增axios配置：全局拦截器；防止重复请求；路由切换取消当前页面所有pending（可指定）请求；实例中取消请求等
+- [x] api统一管理
 
 
 ## 运行
@@ -112,7 +113,9 @@ npm run prettier
 │   ├── index.html
 │   └── robots.txt
 ├── src
-│   ├── App.vue  // 入口文件
+│   ├── App.vue
+│   ├── api     // api管理、配置
+│   │   └── index.js
 │   ├── assets  // 静态资源目录（样式、图片等），会被webpack打包
 │   │   ├── logo.png
 │   │   └── style
@@ -177,6 +180,14 @@ npm run prettier
 在`/src/components/global`目录下添加`.vue`组件，并声明`name`属性即可，会自动引入并挂载到vue实例上。<br>
 注意，`name`属性必填，且`name`的值就是使用时的组件名称。<br>
 
+### axios使用说明
+TODO
+
+## CHANGELOG
+
+[查看CHANGELOG](./CHANGELOG.md)
+
+
 ## Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 ****

package.json

 {
   "name": "laihua-toolkit",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,6 +8,7 @@
     "build": "vue-cli-service build",
     "start": "serve -l 3020 dist",
     "lint": "vue-cli-service lint",
+    "inspect": "vue-cli-service inspect > webpack.js",
     "fix": "eslint --fix --ext .js,.vue src",
     "prettier": "prettier --write \"src/**/*.js\" \"src/**/*.vue\" ./*.js",
     "commit": "git cz",

src/api/index.js

+/**api管理页面
+ * apiMap中新增需要的api
+ *
+ * 导出的requestMap是一个对象，属性名为调用时的名称，值为实际请求方法
+ * 方法接收两个对象参数，第一个为需要传递的数据，第二个为请求的配置
+ * 第一个参数：如果为put/post/patch方法中的一种，会被转化为data属性；其余则是params
+ * 第二个参数：请求配置
+ * let xx = await this.$api.getBanner({ account: '18038018084', psw: '2' })
+ * let vv = await this.$api.login({ account: '18038018084', psw: '2' })
+ * 如果类似post的方法需要通过url后缀形式传递参数，在第二个参数config加上params属性即可：
+ * let vv = await this.$api.login({ account: '18038018084', psw: '2' },{ params: {} })
+ * 设置请求信息及请求头：
+ * let xx = await this.$api.getBanner({}, {timeout: 1000, headers:{ aaa: 111 }})
+ */
+import { request } from '@/plugins/axios/index'
+
+const apiMap = {
+    getBanner: { method: 'get', url: '/home/banner' },
+    login: { method: 'post', url: '/login' }
+}
+
+const requestMap = {}
+Object.keys(apiMap).forEach((alias) => {
+    const { method, url, config } = apiMap[alias]
+    requestMap[alias] = (dataOrParams = {}, instanceConf = {}) => {
+        const keyName = ['PUT', 'POST', 'PATCH'].includes(method) ? 'data' : 'params'
+        return request({
+            method: method.toUpperCase(),
+            url,
+            [keyName]: dataOrParams,
+            ...Object.assign(config || {}, instanceConf)
+        })
+    }
+})
+
+export default requestMap

src/main.js

@@ -4,7 +4,8 @@ import router from './router'
 import store from './store'
 import './registerServiceWorker'
 import './assets/style/index.scss'
-import requests from '@/plugins/axios/index'
+import * as requests from '@/plugins/axios/index'
+import api from '@/api/index.js'
 import VueBus from 'vue-bus'
 import VModal from 'vue-js-modal'
 import moment from '@/plugins/moment.js'
@@ -30,6 +31,7 @@ Vue.use(VModal)
 Vue.config.productionTip = false
 Vue.prototype.$request = requests.request
 Vue.prototype.$axios = requests.pureAxios
+Vue.prototype.$api = api
 Vue.prototype.$mt = moment
 Vue.prototype.$ = utils
 new Vue({

src/plugins/axios/axios.handleStatus.js

 // 处理响应错误码
 export default (response) => {
+    console.log('response:', response)
     const status = response.status
-
     // 如果http响应状态码response.status正常，则直接返回数据
-    if ((status >= 200 && status < 300) || status === 304) {
+    if ((status >= 200 && status <= 300) || status === 304) {
         return response.data
     } else {
         // 判断后端返回的code
         let errMsg = ''
         const code = parseInt(response.data && response.data.code)
-        console.log('code:', code)
+        const msg = (response.data || {}).msg
+        console.log('msg:', msg)
         switch (code) {
             case 400:
                 break
@@ -22,6 +23,10 @@ export default (response) => {
                 errMsg = '未登录'
                 // store.commit('changeLogin', {})
                 break
+            case 404:
+                errMsg = '请求地址错误'
+                // store.commit('changeLogin', {})
+                break
             case 412:
                 errMsg = '未找到有效session'
                 break
@@ -50,7 +55,6 @@ export default (response) => {
                 // errMsg = err.response.data.msg
                 break
         }
-        console.log('errMsg:', errMsg)
         return {
             code,
             errMsg

src/plugins/axios/index.js

@@ -7,6 +7,8 @@ import setOptions from '@/plugins/axios/axios.setOptions.js'
 // import store from '@/store/index'
 // import router from '@/router/index.js'
 // import { Message, Notification } from 'element-ui'
+// import qs from 'qs'
+// console.log('qs:',qs)
 
 console.log('axios-process.env:', process.env)
 
@@ -101,7 +103,8 @@ request.removeRequestInterceptors = removeRequestInterceptors
 request.removeResponseInterceptors = removeResponseInterceptors
 request.clearPendingPool = clearPendingPool
 
-export default {
-    pureAxios,
-    request
-}
+// export default{
+//     pureAxios,
+//     request
+// }
+export { pureAxios, request }

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import store from '@/store/index.js'
-import requests from '@/plugins/axios/index'
+import { request } from '@/plugins/axios/index'
 Vue.use(VueRouter)
 
 let routes = []
@@ -57,7 +57,7 @@ const router = new VueRouter({
 // 路由全局前置守卫
 router.beforeEach((to, from, next) => {
     // 路由变化时取消所有非全局的pending状态的请求
-    requests.request.clearPendingPool()
+    request.clearPendingPool()
     // 未登录情况下访问的页面需要登录，自动跳转到指定页面（登录页）
     if (to.meta.needAuth && !store.getters['authed']) next({ name: 'page2' })
     else next()

src/store/global.js

 // 全局vuex信息
 // getter调用示例：this.$store.getters['authed']
 
-import axios from '@/plugins/axios'
+// import axios from '@/plugins/axios/index'
 
 const state = {
     _authed: false
@@ -15,8 +15,8 @@ const mutations = {}
 
 const actions = {
     async testAction(ctx, paylaod) {
-        let result = await axios.get('/home/banner?type=1&category=18')
-        console.log('result:', result)
+        // let result = await axios.get('/home/banner?type=1&category=18')
+        // console.log('result:', result)
     }
 }
 

src/views/home.vue

@@ -55,7 +55,12 @@ export default {
         }
     },
     created() {},
-    mounted() {},
+    async mounted() {
+        let xx = await this.$api.getBanner({ pageSize: 20, pIndex: 2 })
+        console.log('xx:', xx)
+        let vv = await this.$api.login({ account: '18038018084', psw: '2' })
+        console.log('vv:', vv)
+    },
     methods: {
         ttt() {
             this.$store.dispatch('testAction')
@@ -109,6 +114,52 @@ export default {
             setTimeout(() => {
                 cancelFn()
             }, 500)
+        },
+        // get写法1
+        async getMethod1() {
+            let params = {
+                a: 1,
+                type: 1,
+                category: 18
+            }
+            let result = await this.$request.get('/home/banner', { params })
+            console.log('getMethod1 result1:', result)
+        },
+        // get写法2
+        async getMethod2() {
+            let params = {
+                a: 2,
+                type: 1,
+                category: 18
+            }
+            let result = await this.$request({
+                method: 'GET',
+                url: '/home/banner',
+                params: params
+            })
+            console.log('getMethod2 result:', result)
+        },
+        // post写法1
+        async postMethod1() {
+            const paramObj = {
+                account: '18038018084',
+                psw: '111'
+            }
+            let result = await this.$request.post('/login', paramObj)
+            console.log('postMethod1 result:', result)
+        },
+        // post写法2
+        async postMethod2() {
+            const paramObj = {
+                account: '18038018084',
+                psw: '111'
+            }
+            let result = await this.$request({
+                method: 'POST',
+                url: '/login',
+                data: paramObj
+            })
+            console.log('postMethod2 result:', result)
         }
     }
 }