一切都是浮云

# MockJS

目前主流开发模式是前后端分离开发，前端在开发过程中，后端的接口还没有完成，这时我们前端可以制作一些模拟数据，我们可以使用mock插件来制作模拟数据。

  1. 安装mockjs
cnpm install mockjs -S

  1. 在src创建一个mock文件夹，在mock中创建一个index文件

  2. 在项目中的index.js文件中，写入模拟的数据。

    方法1 引入对象文件

    mock/index.js


import Mock from "mockjs"
import banner from "./post/banner"
//引入数据
Mock.mock(/\/banner/, 'post', banner)

​ mock/post/banner.js

module.exports = {
    code: "001",
    carousel: [
        {
            carousel_id: 1,
            imgPath: "public/imgs/cms_1.jpg",
            describes: "123456"
        },
        {
            carousel_id: 2,
            imgPath: "public/imgs/cms_2.jpg",
            describes: "123456"
        },
        {
            carousel_id: 3,
            imgPath: "public/imgs/cms_3.jpg",
            describes: "123456"
        },
        {
            carousel_id: 4,
            imgPath: "public/imgs/cms_4.jpg",
            describes: "123456"
        }
    ]
}

​ 方法2 引入json文件

​ mock/index.js

const Mock = require('mockjs') 

//引入轮播图数据
Mock.mock('/mock/banner','post',require('./json/banner'))

import Mock from "mockjs" 
import banner from "./json/banner"

//引入轮播图数据
Mock.mock('/mock/banner','post',banner)

mock/json/banner.json

{
    "code": "001",
    "carousel": [
        {
            "carousel_id": 1,
            "imgPath": "public/imgs/cms_1.jpg",
            "describes": "123456"
        },
        {
            "carousel_id": 2,
            "imgPath": "public/imgs/cms_2.jpg",
            "describes": "123456"
        },
        {
            "carousel_id": 3,
            "imgPath": "public/imgs/cms_3.jpg",
            "describes": "123456"
        },
        {
            "carousel_id": 4,
            "imgPath": "public/imgs/cms_4.jpg",
            "describes": "123456"
        }
    ]
}

全局引入 main.js

//引入mock
require('./mock'); //引入mock数据，关闭则注释该行

import './mock/index'  //这样也可以

局部引入 home.vue

import '../mock/index'

官网

# Axios

  1. 安装axios
cnpm install axios -S
  1. 因为在项目中很多页面都会用到ajax请求，所以最后给它全局部署，也就是说任何地方都可以直接使用，而不需要每次用都要载入。

在main.js中导入axios.js

import Vue from 'vue';

import axios from 'axios';

/*全局安装，我们可以把axios挂载到vue实例的全局属性中*/
axios.defaults.baseURL = 'http://www.jx-tongan.com/vueapi/';
Vue.prototype.axios = axios;
  1. 在其他页面调用时，参考如下代码：
       methods: {
           getList(){
               //调用时直接this.$http就可以拿到axios对象
               this.$http.get('get_article_list.php').then( res => {
                   this.article = res.data;
               })
           },
       }
  1. 在登录页面调用时，参考如下代码：

没有token 的登录接口

const login = {
    suLoginname: this.login.suLoginname,
    suPwd: this.login.suPwd
}
//全局的方式可以去掉api
axios.post('/api/singleProject/login',login)
    .then(res => {
    console.log(res.data)
    this.$router.push({
        path: '/home'
    })
}).catch(err => {
    console.log(err)
    this.$router.push({
        path: '/404'
    })
})

main.js

import axios from 'axios'
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址
Vue.prototype.axios = axios  //请求以 this.axios.get() 可以去掉请求接口api

//生产环境 bulid
axios.defaults.timeout = 5000 // 请求超时
axios.defaults.baseURL = 'http://api.demourl.com/'  //写服务器地址

//main.js   拓展知识
import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = 'http://180.76.189.68:8911'
Vue.prototype.$http= axios    //封装接口  请求以 this.$http.get()

# axios 封装

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

// 添加请求拦截器
service.interceptors.request.use(config => {

    //在发送请求之前做些什么
  return config
  
}, error => {

   //对请求错误做些什么
  Promise.reject(error)
  
})


//添加响应拦截
service.interceptors.response.use(response => {

      //对响应数据做些什么
      return response.data
      
  },
  error => {
  
      //对响应错误做些什么 
     return Promise.reject(error)
     
  }
)

//暴露出去
export default service

# vueconfig.js

module.exports = {
	runtimeCompiler: true,
	publicPath: "./",  // 设置打包文件相对路径
	devServer: {
        // open: true,
        // host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                 //这里后台的地址模拟的;应该填写你们真实的后台接口
                target: 'http://180.76.189.68:8911/',
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个api就可以
                }
            }
            
        }
    }
}

接口文档 →