一：安装UI组件
二：创建基本的vue组件
三：使用axios与后台进行数据交互
- 1：安装axios
- 2: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) {//配置configconfig.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-uiToast({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>

Vue爬坑之路二：使用Muse-UI前端框架及axios，实现简单登录页相关推荐

Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
React爬坑之路二：Router+Redux
上一篇写了Antd和Axios的基本操作之前大标题到五了那么这篇从六开始 ST也是初学小白可能讲的完全不对大家当做小说随便读读消遣一下就好 React官网:https://reactjs.org/ ...
Espressif IDF for VSCode 爬坑之路二：ESP32 的 JTAG 调试（OpenOCD GDB）
今天我们来探索如何在 Espressif IDF 插件里进行 JTAG 调试.如果还未成功安装与入门 Espressif IDF for VSCode,可以先参考 Espressif IDF for ...
（转）Vue 爬坑之路（四）—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
Vue 爬坑之路（四）—— 与 Vuex 的第一次接触
2019独角兽企业重金招聘Python工程师标准>>> 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 htt ...
Vue爬坑之旅(二十一):vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛
一.全局注册:main.js import Vue from 'vue' import VueQuillEditor, { Quill } from 'vue-quill-editor' import ...
Vue 爬坑之路（十）—— Vue2.5 + Typescript 构建项目
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 P ...
vue爬坑之路2----vue实例
构造器每个vue.js应用都是通过构造函数Vue穿件一个Vue的根实例启动的: var vm = new Vue({ //选项 }) 在实例化Vue时,需要传入一个选项对象,他可以包含数据,模板,挂 ...

Vue爬坑之路二：使用Muse-UI前端框架及axios，实现简单登录页

一：安装UI组件

二：创建基本的vue组件

三：使用axios与后台进行数据交互

1：安装axios

2:axios登录的实现

Vue爬坑之路二：使用Muse-UI前端框架及axios，实现简单登录页相关推荐

最新文章

热门文章

Vue爬坑之路 二：使用Muse-UI前端框架及axios，实现简单登录页

一：安装UI组件

二：创建基本的vue组件

三：使用axios与后台进行数据交互

1：安装axios

2:axios登录的实现

Vue爬坑之路 二：使用Muse-UI前端框架及axios，实现简单登录页相关推荐

最新文章

热门文章

Vue爬坑之路二：使用Muse-UI前端框架及axios，实现简单登录页

Vue爬坑之路二：使用Muse-UI前端框架及axios，实现简单登录页相关推荐