先後端分離mockjs以及webpack-dev-server代理

一： 在webpack中使用mockjs  mockjs 也就是模擬數據（mock.js模擬的數據能夠不跨域）

　　安裝mock新建mock.js

var Mock = require('mockjs')
var Random = Mock.Random

const produceData = function() {
let articles = []
for (let i = 0; i < 10; i++) {
let newArticleObject = {
title: Random.csentence(5),
content: Random.cparagraph(5, 7),
time: Random.date() + ' ' + Random.time(),
location: Random.city()
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
// 第三個參數能夠是對象也能夠是返回對象的函數
Mock.mock('/article', 'get', produceData)

　　在代碼中發送http請求

/*這裏使用axios發送請求的 
*在src /index.js 中引入
*import Axios from 'axios'
*import './mock.js'
*Vue.prototype.$http = Axios;
*/
methods（）{
    this.$http.get('/article').then(
          response => {
            console.log(response.data)
        }
}    

mockjs模擬的數據就完成了 其餘的好比boolean images .....去看官網吧 http://mockjs.com/

 

 

 

二：webpack-dev-server代理

　　在配置文件webapck.dev.config.js中

devServer: {
    contentBase: '/',
    port: 8080,
    host: '0.0.0.0',//這能夠經過ip訪問
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3030',
        changeOrigin: true,
        pathRewrite: {
　　　　　　 //重寫路徑這樣訪問的時候就不會一直訪問api了 否則只能訪問localhost:3030 可是訪問不了localhost：3030/data/data.json
          "^/api": "/"
        }
      }
    }
  },

　　如今就能夠訪問http://localhost:3030中的數據了

 methods: {
      onClickLeft(){
         this.$http.get('/api/data/data1.json').then(
              response => {
                console.log(response.data)
              }
          )
      }
}

 

 

小白階段 還望多多指教 （給本身找個記筆記的地方O(∩_∩)O~）