使用 vue cli 创建vue 项目并使用 vue- router、axios 前后端交互

安装 vue cli

npm install -g @vue/cli

npm uninstall -g @vue/cli

npm install -g @vue/cli@3.11.0

创建项目

使用vue cli 脚手架创建一个vue的项目， CMD输入一下命令之后，vue 会自动帮助我们下载项目所需要的依赖文件。

vue create projectname

运行项目

cd init 
npm run serve

按照提示操作完成之后，项目会进行自动的构建，构建完成之后， 此时一个Vue的项目就创建完毕并且运行成功了。

在浏览器访问， 项目的地址即可。

localhost:8080

安装 vue 路由

npm install --save vue-router

使用vue 路由

• 新建router 文件夹

  • 新建 index.js

  /**
   * 配置vue-router
   */
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  // 使用插件, 用use
  Vue.use(VueRouter); // 调用一个这个方法
  // 路由的数组
  const routes = [
      {
          path: '/ping',
          component: () => import('@/view/ping'),
      }
  ];
  const router = new VueRouter({
      routes
  });
  export default router;
  
  

• 新建view 文件夹

  • 新建 ping.vue文件

  <template>
      <div>
          ddd
      </div>
  </template>
  <script>
  
  </script>
  
  

• 修改App.vue文件

  <template>
      <div id="app">
        <router-view></router-view>
      </div>
  </template>
  <script>
      export default {
          name: 'app',
      }
  </script>
  <style>
      #app {
      }
  </style>
  
  

此时访问 路由 /ping

安装 axios

npm install --save axios

• 新建utlis文件夹

  • 新建http.js

    import axios from 'axios';
    import * as qs from "cli-highlight";
    
    let instance = axios.create({
        headers: {
            'Content-Type': 'application/json',
        },
        timeout: 900000,
        baseURL: 'http://127.0.0.1:8008',   //接口请求地址
    })
    
    //拦截重复请求
    let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
    let cancelToken = axios.CancelToken;
    let removeRepeatUrl = (config) => {
        let comValue = config.method == 'get' ? qs.stringify(config.params) : qs.stringify(config.data);
        for (let p in pending) {
            if (pending[p].u === config.url + '&' + config.method + '&' + comValue) { //当前请求在数组中存在时执行函数体
                pending[p].f();         //执行取消操作
                pending.splice(p, 1);   //把这条记录从数组中移除
            }
        }
    }
    let saveRepeatUrl = (config) => {
        let comValue = config.method == 'get' ? qs.stringify(config.params) : qs.stringify(config.data);
        // console.log(comValue)
        config.cancelToken = new cancelToken((c) => {
            pending.push({u: config.url + '&' + config.method + '&' + comValue, f: c});  // 自定义唯一标识
        });
    }
    
    
    // 添加请求拦截器
    instance.interceptors.request.use(config => {
        // 在发送请求之前做些什么，比如传token
        removeRepeatUrl(config);       //在一个ajax发送前执行一下取消操作
        saveRepeatUrl(config);         //保存请求地址
        return config
    }, error => {
        // 对请求错误做些什么
        console.log(error) // for debug
        return Promise.reject(error);
    })
    
    // 添加响应拦截器
    instance.interceptors.response.use(response => {
        removeRepeatUrl(response.config);        //执行取消操作，把已经完成的请求从pending中移除
        // 对响应数据做点什么
        const res = response.data;
        //对错误代码做处理
        return response;
    }, error => {
        // 对响应错误做点什么
        console.log('err' + error)// for debug
        return Promise.reject(error);
    });
    
    export default instance;
    
    /**
     * post 请求方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function post(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.post(url, data).then(response => {
                //对接口错误码做处理
                resolve(response.data);
            }, err => {
                reject(err);
            })
        })
    }
    
    /**
     * get 请求方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function get(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.get(url, {
                params: data
            })
                .then(response => {
                    resolve(response);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
    
    /**
     * 封装所有请求
     * @param methed
     * @param url
     * @param data
     * @param headers
     * @returns {Promise}
     */
    export function request(method, url, data = {}, headers) {
        return new Promise((resolve, reject) => {
            instance({
                method: method || 'post',
                url: url,
                params: method === 'get' ? data : '',
                data: method !== 'get' ? data : '',
                headers: headers || {'Content-Type': 'application/json'},
            })
                .then(response => {
                    //对接口错误码做处理
                    resolve(response.data);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
    
    

• 新建api文件夹

  • 新建index.js

    import {request} from '../utils/http'
    
    export function hello() {
        return request('get', '/hello');
    }
    

• 修改 ping.vue

  <template>
      <div>
          ddd
  
          <h2> {{this.text}}</h2>
      </div>
  </template>
  <script>
      import {hello} from '../api/index'
  
      export default {
          data() {
              return {
                  text: ''
              }
          },
          created() {
              hello().then(response => {
                  // eslint-disable-next-line no-console
                  console.info(response)
                  this.text = response
              })
          }
      }
  </script>
  
  

  提前准备好后端的接口以便 提供数据， 再次访问 ping 路由即可 ！

安装CNPM

npm install -g cnpm -registry=https://registry.npm.taobao.org