前后端分离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~）

转载于:https://www.cnblogs.com/hongll/p/9473233.html