vue.js实战,知乎日报项目(重点在于代理服务)

1、项目结构

2、请求工具类unti.js

//引入axios
import axios from 'axios';
//设置api接口和imgPath根路径
const Util={
  apiPath:'/apis',
  imgPath:''
}
//声明axios发送请求的方法ajax,设置发送请求的根路径为apiPath,
// 也就是说不管什么地方调用Util.ajax方法
// 路径都为Util.apiPath+req路径
  Util.ajax=axios.create({
    baseURL:Util.apiPath
  });

//声明axios发送请求的方法ajax返回结果后的拦截器
Util.ajax.interceptors.response.use(res=>{
  return res.data;
 })

//导出Util
export default Util;

说明：
是axios请求的工具js，用于在设置axios请求的根路径(/apis),设置返回后结果的处理:
Util.ajax.interceptors.response.use(res=>{
	  return res.data;
 })

3、main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import $ from 'jquery';
import '../static/bootstrap-3.3.7-dist/css/bootstrap.css';
import '../static/bootstrap-3.3.7-dist/js/bootstrap.min';
// 引入util.js
import util from './libs/util.js';
import './css/style.css';
import store from  './modules.js';
Vue.config.productionTip = false;
// 设置全局变量$axios
Vue.prototype.$axios = util;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store
})
说明:
(1)、导入外部js,css等静态资源,
(2)、使用各种插件(vue),
(3)、引入store和路由等,
(4)、引入工具类(import util from './libs/util.js';)
(5)、设置全局变量(Vue.prototype.$axios = util;)

4、APP.vue

<template>
  <div class="container daily">
    <div class="row daily-row">
      <!--  菜单div(左侧)  -->
      <div class="daily-menu col-md-2">
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation" @click="activeType='recommend'" :class="{active:activeType==='recommend'}">
            <a href="#">每日推荐</a>
          </li>
          <li role="presentation"  @click="activeType='daily'" :class="{active:activeType==='daily'}">
            <a @click="showThemes=!showThemes">主题日报</a>
              <ul class="nav nav-pills nav-stacked" v-show="showThemes">
                <li role="presentation" @click="handleToTheme(item.id)" v-for="item in themeList" :class="{active:activeType==='daily' && thementId===item.id}">
                  <a>{{item.title}}</a>
                </li>
              </ul>
          </li>
        </ul>
      </div>
      <!--  列表div(中间)  -->
      <div class="daily-list col-md-2">
        <template v-if="activeType=='daily'">
            <Item :list="list"></Item>
          </ul>
        </template>
      </div>
      <!--  内容(右边)  -->
      <div class="col-md-8">
        <dailyArticle :id="$store.state.dailyVuex.thementId"></dailyArticle>
      </div>
    </div>
  </div>
</template>

<script>

  import Item from './components/item.vue';
  import dailyArticle from './components/daily-article.vue';

  export default {
    name: 'App',
    components:{Item,dailyArticle},
    data(){
      return{
        showThemes:true,
        activeType:'recommend',
        themeList:[],
        thementId:0,
        list:[]
      }
    },
    methods:{
      getThemes(){
        var _this=this;
        this.$axios.ajax.get('/topics',{
          params: {
            page:1,
            limit:6
          }
        }).then(function (res) {
          _this.themeList=res.data;
        })
      },
      handleToTheme(id){
        var _this=this;
        this.thementId=id;
        this.activeType='daily';
        this.$axios.ajax.get('/topics',{
          params: {
            page:1,
            limit:6
          }
        }).then(function (res) {
          _this.list=res.data;
        })
      }
    },
    mounted(){
      this.getThemes();
    }
  }
</script>

<style>
</style>

说明:
(1)、axios请求:
this.$axios.ajax.get('/topics',{
     params: {
       page:1,
       limit:6
     }
}).then(function (res) {
  _this.themeList=res.data;
})
this.$axios代表全局变量(main.js)里面设置的,这个全局变量指向main.js里面引用的util,js
this.$axios.ajax代表util.js里面的util.ajax,
因为util工具包里面设置了跟路径('/apis'),
所以这里请求的路径为:/apis/topics,参数为params: { page:1, limit:6}

5、config/index.js文件

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/apis':{
        target: "https://cnodejs.org/api/v1",
        changeOrigin:true,
        pathRewrite:{
          '^/apis':'/'
        }
      }
    }
    说明:
    vue-lic项目自带服务器,
    当需要请求数据接口的时候,会遇到跨域的问题，这时候就需要修改config/index.js文件的proxyTable属性。
    (1)、'/apis':  这里于util.js里面的axios请求根路径对应,项目中的请求,只要是请求路径为/apis，j就会执行'/apis':{}里面的配置
    (2)、target:目标路径:https://cnodejs.org/api/v1
    (3)、changeOrigin:true:跨域
    (4)、pathRewrite:重写:这里的意思是,当路径里面有apis的时候,就将apis字符替换为''。

以上配置之前,项目中只要是this.$axios.ajax.get或者this.$axios.ajax.post,最终的路径为:
(1)、首先是/apis+url
(2)、请求到本地服务器,因为config/index.js里面配置了proxyTable,所以会根据/apis找到相应的配置
(3)、所有路径就变成了"https://cnodejs.org/api/v1"+"/apis"+url
(4)、因为设置了路径重写,会替换所有的/apis为空,最终的路径为:
https://cnodejs.org/api/v1+url