添加mock 数据

liuqimichale
1 parent cb1ec74e
Showing 10 changed files with 115 additions and 22 deletions
config/dev.env.js
config/prod.env.js
package-lock.json
package.json
src/api/api.js
src/main.js
src/mock/mock.js
src/mock/pda.js
src/utils/request.js
src/views/pdasection.vue
@@ -3,5 +3,7 @@ const merge = require(&#39;webpack-merge&#39;)
 const prodEnv = require('./prod.env')
  
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  NODE_ENV: '"development"',
+  ENV_CONFIG: '"dev"',
+  BASE_API: '"http://192.168.101.26:8089/"'
 })
 'use strict'
 module.exports = {
-  NODE_ENV: '"production"'
+  NODE_ENV: '"production"',
+  ENV_CONFIG: '"prod"',
+  BASE_API: '"https://api-prod"'
 }
@@ -5554,6 +5554,15 @@
         "minimist": "0.0.8"
       }
     },
+    "mockjs": {
+      "version": "1.0.1-beta3",
+      "resolved": "http://registry.npm.taobao.org/mockjs/download/mockjs-1.0.1-beta3.tgz",
+      "integrity": "sha1-0jTzwnJWOXVk8slVFC6JGQlTcgk=",
+      "dev": true,
+      "requires": {
+        "commander": "*"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -31,6 +31,7 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "mockjs": "^1.0.1-beta3",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
 import request from '@/utils/request'
  
-export function fetchList(query) {
+export function fetchList() {
   return request({
     url: '/article/list',
     method: 'get',
-    params: query
   })
 }
  
@@ -12,7 +11,7 @@ export function fetchArticle(id) {
   return request({
     url: '/article/detail',
     method: 'get',
-    params: { id }
+    params: {id}
   })
 }
  
@@ -20,7 +19,7 @@ export function fetchPv(pv) {
   return request({
     url: '/article/pv',
     method: 'get',
-    params: { pv }
+    params: {pv}
   })
 }
  
@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import './mock/mock'
 import '@/styles/reset.css'/*引入重置样式*/
  
 Vue.config.productionTip = false
+import Mock from 'mockjs'
+import pdaApi from './pda'
+
+// 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
+// https://github.com/nuysoft/Mock/issues/300
+Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+Mock.XHR.prototype.send = function () {
+  if (this.custom.xhr) {
+    this.custom.xhr.withCredentials = this.withCredentials || false
+  }
+  this.proxy_send(...arguments)
+}
+
+Mock.mock('/article/list', 'get', pdaApi.getList);
+
+export default Mock
+import Mock from 'mockjs'
+
+const Random = Mock.Random;
+const list = [];
+
+for (let i = 0; i < 10; i++) {
+  let newList = {
+    title: Random.csentence(5, 30),
+    date: Random.date() + ' ' + Random.time()
+  }
+  list.push(newList)
+}
+
+export default {
+  getList: () => {
+    return {
+      total: list.length,
+      items: list
+    }
+  }
+}
+
@@ -2,7 +2,7 @@ import axios from &#39;axios&#39;
  
 // create an axios instance
 const service = axios.create({
-  baseURL: '', // base_url
+  baseURL: process.env.BASE_API, // api 的 base_url
   timeout: 5000 // request timeout
 })
  
@@ -25,20 +25,47 @@ service.interceptors.request.use(
  
 // response interceptor
 service.interceptors.response.use(
+  response => response,
   /**
    * 下面的注释为通过在response里，自定义code来标示请求状态
+   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
+   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
+   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
    */
-    response => {
-      const res = response.data
-      if (res.code !== 200) {
-        alert( res.message)
-      } else {
-        return response.data
-      }
-    },
+    // response => {
+    //   const res = response.data
+    //   if (res.code !== 20000) {
+    //     Message({
+    //       message: res.message,
+    //       type: 'error',
+    //       duration: 5 * 1000
+    //     })
+    //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+    //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+    //       // 请自行在引入 MessageBox
+    //       // import { Message, MessageBox } from 'element-ui'
+    //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+    //         confirmButtonText: '重新登录',
+    //         cancelButtonText: '取消',
+    //         type: 'warning'
+    //       }).then(() => {
+    //         store.dispatch('FedLogOut').then(() => {
+    //           location.reload() // 为了重新实例化vue-router对象 避免bug
+    //         })
+    //       })
+    //     }
+    //     return Promise.reject('error')
+    //   } else {
+    //     return response.data
+    //   }
+    // },
   error => {
     console.log('err' + error) // for debug
-    alert(error.message)
+    // Message({
+    //   message: error.message,
+    //   type: 'error',
+    //   duration: 5 * 1000
+    // })
     return Promise.reject(error)
   }
 )
 <template>
-    <div>
-      <titlesection></titlesection>
-      <totalsection></totalsection>
-      <div class="flexfm"></div>
-    </div>
+  <div>
+    <titlesection></titlesection>
+    <totalsection></totalsection>
+    <div class="flexfm"></div>
+  </div>
 </template>
  
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
+import {fetchList} from '../api/api'
+
 export default {
-    name: 'pdasection',
+  name: 'pdasection',
   components: {
     titlesection,
     totalsection
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      fetchList()
+        .then(res => {
+          console.log(res);
+
+        });
+    },
   }
 }
 </script>