Vue Vuex和axios的安装及使用（入门级）axios的简单封装

前言：之所以将Vuex和axios一起讲，是因为，请求服务器之后需要存储一些全局状态，全局属性等
一 、axios的安装
运行 → cmd回车 → 进入项目路径 → 执行以下命令
npm install axios

二、Vuex的安装
运行 → cmd回车 → 进入项目路径 → 执行以下命令
npm install vuex –save

注意：使用store.commit(‘函数名’,函数中的参数名)——这里的“,函数中的参数名”，定义的参数名与实际的参数名需要一致，否则会报错：null

三、axios的使用及封装（除了上传文件，一般是够用了）
① 在这里我创建了一个http文件夹，新建一个httpRequestUtil.js文件，内容如下：

import axios from 'axios'
import store from '../store'

/**
 * 使用Vuex的store之前需要先引入，
 * 1.通过store.state.tokenStr获取属性值
 * 2.通过store.commit('mutations中的方法名',tokenStr)设置属性值
 */

function initAxios() {//初始化配置
  //设置api访问基路径
  axios.defaults.baseURL = 'http://121.11.2012iot.com/';
  axios.defaults.headers.common['tokenStr'] = store.state.tokenStr;//这里使用了Vuex中的常量（需要先引入store）
  axios.defaults.headers.post['Content-Type'] = 'application/json';
}

/**
 * 说明：我这里默认的服务器返回的最外层对象如下，
 * {code: 0, message: null, obj: "1766", tokenStr: "MTc2Nl90b2tlbl8tMTUzMDY5MTE3MTMxNA=="}
 * 如果你们的服务器返回不是这样，需要在 backview 方法中做相应的更改
 *
 * catch 1.捕获请求异常
 *       2.捕获处理异常【包含response使用不当】
 *
 *
 * 提交表单
 *    let formData = new FormData();
 *    formData.append('name', this.name);
 *    formData.append('age', this.age);
 *    formData.append('file', this.file);
 *    axios.post(hasParamUrl, params).then(function (response){}catch(error){}
 *
 */

/**
 * GET 方式请求数据
 * @param hasParamUrl  请求url（已经拼接好的路径）
 * @param callback 回调函数
 */
export function getData(hasParamUrl, callback) {
  if (hasParamUrl == null) return
  initAxios();
  axios.get(hasParamUrl).then(function (response) {
    backView(response, callback)
  }).catch(function (error) {
    callback(null, "请求报错")
    console.log(error);
  })
}

/**
 * POST 方式请求
 * @param hasParamUrl 请求url
 * @param params  (如下的param)
 *      var param = new URLSearchParams;
 *      param.append("name", "mirzhao");
 * @param callback 回调函数
 */
export function postData(requestUrl, params, callback) {
  initAxios();
  axios.post(requestUrl, params).then(function (response) {
    store.commit("setTokenStr", response.data.tokenStr)//存储token到Vuex的state
    backView(response, callback)
  }).catch(function (error) {
    callback(null, "请求报错")
    console.log(error);
  })
}

/**
 * POST 方式请求（传送到服务器的是一个json对象）
 * @param requestUrl 请求url
 * @param params  (如下的param)
 *      var param = new URLSearchParams;
 *      param.append("name", "mirzhao");
 * @param callback 回调函数
 */
export function postStringParamData(requestUrl, params, callback) {
  initAxios();
  axios.post(requestUrl, JSON.stringify(params)).then(function (response) {
    backView(response, callback)
  }).catch(function (error) {
    callback(null, "请求报错" + error)
    console.log(error);
  })
}

/**
 * 上传文件——可以同时上传多个
 * @param uploadFileUrl
 * @param formData
 *      let formData = new FormData(); //创建form对象
 *      param.append('file',file1,fileName1);//通过append向form对象添加数据
 *      param.append('file',file2,fileName2);//通过append向form对象添加数据
 *      param.append('file',file3,fileName3);//通过append向form对象添加数据
 */
export function postFile(uploadFileUrl, formData, callback) {
  let config = {
    headers: {'Content-Type': 'multipart/form-data'}
  }
  axios.post(uploadFileUrl, formData, config).then(function (response) {
    backView(response, callback)
  }).catch(function (error) {
    callback(null, "请求报错" + error)
    console.log(error);
  })
}

/**
 * 获取到数据后——统一处理最外层对象
 * @param response
 * @param callback
 */
function backView(response, callback) {
  console.log(response.data);//打印返回的数据实体  reponse.data才是服务器返回的数据
  if (response != null && response.data != null && response.data.code == 0) {
    console.log("请求成功")
    store.commit("setTokenStr", response.data.tokenStr)
    if (callback != null) {
      callback(response.data.obj, null)
    }
  } else {
    console.log("请求失败")
    if (callback != null) {
      callback(null, response.data.message)
    }
  }
}

// console.log(response.status);//服务器返回的状态
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);

export default {
  getData,
  postData,
  postStringParamData,
  postFile
}

② 调用

<template>
  <div>
    <div id="box">
      <div style="margin-top: 20px">
        <button id="testGet" v-on:click="testget">测试GET方法</button>
        <button id="testPost" v-on:click="testpost">测试POST方法</button>
        <button id="testPostStringParam" v-on:click="testpoststring">测试POST-String方法</button>
      </div>
      <div style="margin-top: 0px">
        <span id="testGet_span">测试GET方法-返回:{{getdataS}}</span>
        <span id="testPost_span">测试POST方法-返回：{{postDataS}}</span>
        <span id="testPostStringParam_span">测试POST-String方法-返回：{{postDataStringS}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import httpUtil from '../http/httpRequestUtil'

  export default {
    name: "findpwd",
    data() {
      return {
        getdataS: '',
        postDataS: '',
        postDataStringS: ''
      }
    },
    methods: {
      testget: function (res) {
        console.log("测试GET方法");
        var that = this;
        var url = "api-common/user/getUserInfo";
        httpUtil.getData(url, function (data, message) {
          console.log(data)
        })
      },
      testpost: function (res) {
        console.log("测试POST方法");
        var url = "api-common/user/updateUserName";
        var param = new URLSearchParams;
        param.append("name", "mirzhao");
        httpUtil.postData(url, param, function (data, message) {
          console.log(data)
        })
      },
      testpoststring: function (res) {
        console.log("测试POST-String方法");
        var url = "api-common/companyConf/updateCompanyConf";
        var param = new URLSearchParams;
        param.append("mtcRemind", "14");
        httpUtil.postStringParamData(url, param, function (data, message) {
          console.log(data)
        })
      },
    },
    created: function (res) {

    }
  }
</script>

<style scoped>
  #box {
    width: 800px;
    height: 320px;
    position: absolute;
    top: 50%;
    margin-left: 50%;
    left: -400px;
    margin-top: -160px;
    border: orange solid 2px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  span {
    font-size: 14px;
    color: black;
  }
</style>

二、Vuex的
1.Vuex使用及配置
①创建一个文件夹store，在其中创建index.js文件，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  tokenStr: '',

  userName: '',
  userPhone: '',
  userUuid: '',
  userHeadPath: '',
  userBirthday: '',
  userIdNum: '',//身份证号码
  userSex: '',//1男，2女

  companyId: '',
  companyName: '',
  companyType: '',

  userRole: ''
}
export const mutations = {
  setTokenStr(state, tokenStr) {//设置tokenStr的值
    state.tokenStr = tokenStr
  },
  setUserUuid(state, userUuid) {
    state.userUuid = userUuid
  },
  setUserInfo(state, userInfo) {
    state.userName = userInfo.userName;
    state.userBirthday = userInfo.dayOfBirth;
    state.userPhone = userInfo.phoneNumber;
    state.userHeadPath = userInfo.headerPath;
    state.userSex = userInfo.sex;
    state.userIdNum = userinfo.idNumber;
    state.companyId = userInfo.companyId;
  },
  setUserRole(state, userRoleStr) {
    state.userRole = userRoleStr;
  },
  setUserCompanyInfo(state, companyInfo) {
    state.companyName = companyInfo.name;
    state.companyType = companyInfo.conpanyType;
  }
}

export default new Vuex.Store({
  state,
  mutations
})

② 在main.js中导入并配置到vue实例中

import Vue from 'vue'

import VueRouter from 'vue-router'
import routes from './router/index.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import store from './store/index'

import header from './components/header.vue'
import footer from './components/footer.vue'

Vue.config.productionTip = false

Vue.component('header-vue', header)
Vue.component('footer-vue', footer)

Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
  routes
})
new Vue({
  router,
  store,
}).$mount('#app')

2.设置Vuex中的state中的属性

<template>
  <div>
    <div id="loginbox">
      <div id="logintitle">登录</div>
      <input type="number" v-model="account" placeholder="请输入您的账号..."/>
      <input type="password" v-model="pwd" placeholder="请输入您的密码..."/>
      <button id="submitbtn" v-on:click="submit">提交</button>
      <div>
        <router-link :to="{path:'register'}" style="font-size: 14px;color: orange;">立即注册</router-link>
        <router-link :to="{path:'findpwd'}" style="font-size: 14px;color: orange;">找回密码</router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import {hex_sha1} from '../util/sha1'
  import store from '../store'

  export default {
    name: "login",
    data() {
      return {
        visible: true,
        account: '',
        pwd: ''
      }
    },
    created: function () {

    },
    methods: {
      submit: function () {
        if (this.pwd.length == 0 && this.account.length == 0) {
          this.account = "13522224186"
          this.pwd = "00000000"
        }
        var pwd_sha1 = hex_sha1(this.pwd)

        var params = new URLSearchParams();
        params.append('username', this.account);
        params.append('password', pwd_sha1);
        params.append('type', '2');
        //这里用axios原生的去请求
        axios.post('http://127.112.2012iot.com/api-login/login', params)
          .then(function (respose) {
            console.log(respose.data);
            store.commit("setTokenStr",respose.data.tokenStr)//设置属性tokenStr的值
          }).catch(function (err) {
          console.log(err)
        })
      }
    }
  }
</script>

<style>
  #logintitle {
    font-size: 22px;
    color: #333;
    margin-top: 20px;
  }

  #loginbox {
    width: 400px;
    height: 320px;
    position: absolute;
    top: 50%;
    margin-left: 50%;
    left: -200px;
    margin-top: -160px;
    border: orange solid 2px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  input {
    margin: 10px;
    height: 30px;
    padding-left: 10px;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }

  #submitbtn {
    height: 30px;
    width: auto;
    margin: 10px;
  }

  .login {
    color: orange;
    font-size: 14px;
  }
</style>

其他：
axios上传文件【可以同时上传多个文件】【验证通过，可以正产上传】
①选择文件

<div>
        <input type="file" style="width: auto;height: 50px" multiple="multiple" @change="changeFn($event)"/>
      </div>

②获取到选择文件后返回的文件，上传文件

//选择图片返回，上传文件
      changeFn(e) {
        let deviceFile = e.target.files;
        let formData = new FormData();
        for (let i = 0; i < deviceFile.length; i++) {
          formData.append("file", deviceFile[0], deviceFile[0].name);
          console.log(deviceFile[i])
        }
        var url = "api-common/filesstorage/uploadFile";
        httpUtil.postFile(url, formData, function (data, message) {
          console.log(data)
        })
      }

实现效果如下