Vue Vuex和axios的安装及使用(入门级)axios的简单封装
前言:之所以将Vuex和axios一起讲,是因为,请求服务器之后需要存储一些全局状态,全局属性等一 、axios的安装运行 → cmd回车 → 进入项目路径 → 执行以下命令npm install axios二、Vuex的安装运行 → cmd回车 → 进入项目路径 → 执行以下命令npm install vuex –save三、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)
})
}
实现效果如下
更多推荐
已为社区贡献4条内容
所有评论(0)