一：安裝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>