Vue爬坑之路 二：使用Muse-UI前端框架及axios，實現簡單登入頁
阿新 • • 發佈：2019-02-14
一：安裝UI元件
Muse UI 基於 Vue2.0 開發，Vue2.0是當下最快的前端框架之一，小巧，api友好，可用於開發的複雜單頁應用，安裝的方式有很多種，官方推薦的是使用npm輔助安裝：
在專案的根目錄中開啟命令提示符輸入：
npm i muse-ui -S安裝完成後在專案的src目錄下的main,js檔案新增全域性引用
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
Vue.use(MuseUI);
這是其中的引用方式更多的引用方式可以自己到muse-ui的說明文件檢視
二：建立基本的vue元件
目錄基本沒有改動使用vue-cli自動生成的目錄架構，新增一個檢視檔案目錄view，主要是放置我們建立的頁面，預設的入口元件不做更改依然是App.vue元件，刪除vue-cli生成的helloword.vue元件，在view目錄下新增一個起始頁面index.vue,更改預設頁面的路由，在router下的index.js檔案中將預設的路由更改成index
，在compontents增加hearder.vue元件，做為共用的導航欄元件，貼一下程式碼，主要是用了muse-ui的導航欄樣式，登入判斷的是localStorage是否有存有使用者資訊，如果存在就顯示使用者頭像姓名，如果不存在就顯示登陸按鈕，使用v-if判斷，將hearder以區域性元件的方式放到App.vue中，效果如下：
<template>
<div class="hearder">
<mu-appbar style="width: 100%;" color="primary">
<mu-button icon slot="left" @click="open = !open">
<mu-icon value="menu"></mu-icon>
</mu-button>
愛讀
<mu-button flat slot="right"> 三：使用axios與後臺進行資料互動
1：安裝axios
使用cnpm安裝axios，在專案根目錄中開啟命令提示符，使用cnpm安裝axios：
cnpm install axios -S安裝之後為了更好的引用axios我們可以對他進行一個簡單的封裝，在src目錄下建立axios目錄，並且新建index.js檔案
貼一下我在網上找到的一個簡單的封裝程式碼：
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
let axiosIns = axios.create({});
if (process.env.NODE_ENV == 'development') {
axiosIns.defaults.baseURL = '你的api部分地址例http://localhost/';
} else if (process.env.NODE_ENV == 'debug') {
axiosIns.defaults.baseURL = '你的api部分地址例http://localhost/';
} else if (process.env.NODE_ENV == 'production') {
axiosIns.defaults.baseURL = '你的api部分地址例http://localhost/';
}
axiosIns.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
axiosIns.defaults.headers.get['X-Requested-With'] = 'XMLHttpRequest';
axiosIns.defaults.responseType = 'json';
axiosIns.defaults.transformRequest = [function (data) {
//資料序列化
return qs.stringify(data);
}
];
axiosIns.defaults.validateStatus = function (status) {
return true;
};
axiosIns.interceptors.request.use(function (config) {
//配置config
config.headers.Accept = 'application/json';
// config.headers.System = 'vue';
// let token = Vue.localStorage.get('token');
// if(token){
// config.headers.Token = token;
// }
return config;
});
axiosIns.interceptors.response.use(function (response) {
let data = response.data;
let status = response.status;
if (status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
});
let ajaxMethod = ['get', 'post'];
let api = {};
ajaxMethod.forEach((method)=> {
//陣列取值的兩種方式
api[method] = function (uri, data, config) {
return new Promise(function (resolve, reject) {
axiosIns[method](uri, data, config).then((response)=> {
/*根據後臺資料進行處理
*1 code===200 正常資料+錯誤資料 code!==200 網路異常等
*2 code===200 正常資料 code!==200 錯誤資料+網路異常等
* 這裡使用的是第一種方式
* ......
*/
if (response.data.StatusCode) {
//toast封裝： 參考ele-mint-ui
Toast({
message: response.data.Message,
position: 'top',
duration: 2000
});
if (response.data.Message === '未登入') {
Toast({
message: response.data.Message,
position: '',
duration: 2000
});
//使用vue例項做出對應行為 change state or router
//instance.$store.commit('isLoginShow',true);
}
} else {
resolve(response);
}
}).catch((response)=> {
//reject response
//alert('xiuxiu，限你10分鐘到我面前來,不然...');
})
})
}
});
Vue.prototype.$axios = api;
/*
//.....
let instance =new Vue({
store,
router,
el: '#app',
render: h => h(App)
});
1 根據process.env.NODE_ENV 獲取對應的apiDomain
* 2 處理ajax庫axios，為了以後不重複引用，掛在原型物件上
* 3 axios是封裝在main.js裡面的，是為了獲取vue例項操作store、router
* 4 元件裡面使用this.$axios.get or this.$axios.post 呼叫 使用debugger，檢視介面返回資料的走向
*/到這裡axios就封裝好了，元件中直接this.$axios.get呼叫即可
2:axios登入的實現
在view檔案中新建login.vue頁面，使用muse-ui中的表單元件，新增基本的登入表單，axios封裝好後使用的方式其實和ajax很類似，主要就是使用axios提交表單，得到回掉之後在吧回掉之後的引數儲存到localstrage中，貼下程式碼：
<template>
<div class="login">
<mu-container class="loginBox">
<mu-form :model="form" class="mu-demo-form">
<mu-form-item label="使用者名稱" prop="username" fullWidth labelFloat>
<mu-text-field v-model="form.username" prop="username"></mu-text-field>
</mu-form-item>
<mu-form-item label="密碼" prop="password" fullWidth labelFloat>
<mu-text-field type="password" v-model="form.password" prop="password"></mu-text-field>
</mu-form-item>
<mu-form-item class="btnBox">
<mu-button color="primary" @click="login">登入</mu-button>
<mu-button color="primary" >註冊</mu-button>
</mu-form-item>
</mu-form>
</mu-container>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
CheckDataIsNull(val) {
if (val == null || val == "") {
return false;
} else return true;
},
login() {
var username = this.form.username;
var password = this.form.password;
if (this.CheckDataIsNull(username) == true && this.CheckDataIsNull(password) == true) {
this.$axios.post('api/Logins/Login?userId=' + username + '&pass=' + password + '').then(response => {
let _data = response.data;
if (_data == 401||_data==""||_data==null) {
this.$emit("newNodeEvent",'登入失敗!');
}
else
{
this.$emit("newNodeEvent",'登陸成功!');
localStorage.setItem('token',_data)
localStorage.setItem('useID',username)
this.getuser(_data,username)
this.$router.push({
path: index
});
}
})
}
},
getuser(val,val2)
{
this.$axios.post('/api/Logins/UserInfo?userId=' + val2 + '&token=' + val +
'',).then(response => {
let _data = response.data;
if (_data == null) {
this.$emit("newNodeEvent",'使用者驗證資訊已過期!');
}
else
{
localStorage.setItem("userInfo",JSON.stringify(_data))
}
})
}
}
}
</script>
<style>
.mu-demo-form {
width: 100%;
max-width: 460px;
}
.btnBox .mu-form-item-content {
margin: 0 auto;
}
.loginBox {
padding: 20% 5%;
}
</style>