前端没有后台时需要使用mock情况

当前时间20180409
npm install koa@1 koa-router@5 --save-dev
一定要加上版本 因为koa2 需要最新的node 7.6以上才可以支持


var app = require('koa')();
var router = require('koa-router')();


// 订单列表
const orderList = require('./orderlist/orderList.js')
router.get('/api/orderlist/:username', function *(next) {
    console.log('订单列表')


    const params = this.params
    const username = params.username
    console.log('用户名：' + username)


    this.body = orderList
})


// 开始服务并生成路由
app.use(router.routes())
   .use(router.allowedMethods());
app.listen(3000);


post请求
formdata: ?name=iwen&age=20
x-www-form-urlencode: {name: iwen,age:20}
qs 可以把下边的xhr格式转化为formdata格式
qs.stringify




vue2.0 推荐使用 axios


axios安装 npm install axios --save 需要在生产环境中使用 所以不加入dev


在vue中axios 需要被挂在到vue的原型链上
Vue.prototype.$axios = Axios


GET请求
axios.get('/user?ID=12345')
或
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
then。。。


POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
then。。。


axios拥有拦截器 这使得你在发送请求和接受数据的时候都可以取到和后台交互的数据流




// 添加请求拦截器


Axios.interceptors.request.use(function(config) {




if (config.method == "post") {


config.data = qs.stringify(config.data)


}




return config;


}, function(error) {


// 对请求错误做些什么


return Promise.reject(error);


});






// 添加响应拦截器


Axios.interceptors.response.use(function(response) {




return response;


}, function(error) {


// 对响应错误做点什么


return Promise.reject(error);


});
这里使用了qs 这个内置的一个模块 该模块不需要安装 可以让你的参数不需要穿的那么痛苦 正常传参就可以了


使用vue的 config中index proxy这个变量
proxyTable: {


            '/api': {


                target: 'http://localhost:3000',


                secure: false


            }


        },
这个变量是vue2.0内置的webpack 中的proxy 这个代理属性 可以再开发环境中实现跨域 但是 在真正的生产环境中不可以这样做 生产环境让


后台来处理跨域
这种最好要在main.js中声明一个全局的host 这样在$axios url使用的时候可以统一的用this.HOST来调用 在生产环境的时候要把这行赋值为


空
Vue.prototype.HOST = '/apis'