Vue爬坑之路 二:使用Muse-UI前端框架及axios,實現簡單登入頁
一:安裝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">
<mu-icon value="search"></mu-icon>
</mu-button>
</mu-appbar>
<mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
<mu-list>
<router-link :to="{'name':'login'}" v-if="!userinfo">
<mu-list-item button :ripple="false">
<mu-list-item-action title="登陸">
<mu-icon value="person_outline"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>登陸</mu-list-item-title>
</mu-list-item>
</router-link>
<router-link :to="{'name':'person'}" v-if="userinfo">
<mu-list-item button :ripple="false">
<mu-list-item-action title="個人中心">
<mu-avatar>
<img v-bind:src="userinfo.PicUrl">
</mu-avatar>
</mu-list-item-action>
<mu-list-item-title>{{userinfo.UsereName}}</mu-list-item-title>
</mu-list-item>
</router-link>
<mu-divider />
<router-link :to="{'name':'index'}">
<mu-list-item button :ripple="false">
<mu-list-item-action title="閱讀歷史">
<mu-icon value="import_contacts"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>閱讀歷史</mu-list-item-title>
</mu-list-item>
</router-link>
<router-link :to="{'name':'login'}">
<mu-list-item button :ripple="false">
<mu-list-item-action title="我的書架">
<mu-icon value="local_library"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>我的書架</mu-list-item-title>
</mu-list-item>
</router-link>
<router-link :to="{'name':'login'}">
<mu-list-item button :ripple="false">
<mu-list-item-action title="分類">
<mu-icon value="view_comfy"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>檢視分類</mu-list-item-title>
</mu-list-item>
</router-link>
<router-link :to="{'name':'login'}">
<mu-list-item button :ripple="false">
<mu-list-item-action title="關於">
<mu-icon value="priority_high"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>關於</mu-list-item-title>
</mu-list-item>
</router-link>
</mu-list>
</mu-drawer>
</div>
</template>
<script>
export default {
data() {
return {
docked: false,
open: false,
position: 'left',
userinfo: {}
}
},
mounted() {
if (this.isEmptyProperty(localStorage.userInfo)) {
this.userinfo = JSON.parse(localStorage.userInfo)
}
}
}
</script>
三:使用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>