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>