FishBone1
FishBone1

07vue+elementUI完成注册及登陆

目录

一. vue怎么引入和配置使用element-ui框架

二. 后台交互(axios/qs/vue-axios)

三. Vue+ElementUI设计登陆页面

四.报错

一. vue怎么引入和配置使用element-ui框架


  1. 使用vue-cli脚手架工具创建一个vue项目
      vue init webpack medpro

07vue+elementUI完成注册及登陆_第1张图片

  2. npm安装elementUI
      cd medpro                                        #进入新建项目的根目录
      npm install element-ui -S                  #安装element-ui模块

07vue+elementUI完成注册及登陆_第2张图片
  3. 在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）
   一定要注意顺序！！！！！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui' //新添加1
import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前
import App from './App'
import router from './router'
Vue.use(ElementUI)   //新添加3
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	components: {
		App
	},
	template: ''
})

二. 后台交互(axios/qs/vue-axios)

1. axios
      axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。
   

2.两种提交方式(具体在代码中体现)

  1. GET提交
  2. POST提交

  3. qs（作用于POST提交参数转换上）
      qs.js它是一个url参数转化的js库。用法就两个：
      var obj = qs.parse('a=b&c=d');  //将URL解析成对象的形式：{a:'b',c:'d'}
      var str = qs.stringify(obj);    //将对象 序列化成URL的形式，以&进行拼接：a=b&c=d'

  4.vue-axios
      vue-axios是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios

  5. axios/qs/vue-axios安装及使用步骤
     (1)安装
      npm install axios -S
      npm install qs -S  
      npm install vue-axios -S                        
   
      (2)修改main.js文件
      #import axios from 'axios'
      #import qs from 'qs'
      import axios from '@/api/http'             #vue项目对axios的全局配置      
      import VueAxios from 'vue-axios' 
      Vue.use(VueAxios,axios)

      (3)之后就可以直接在Vue组件文件的methods里使用了  
      this.axios.post(url,params).then(resp => {
      console.log(resp);
      }).catch(resp=>{});

三. Vue+ElementUI设计登陆页面

要实现的登录页面效果，实现登录功能(连接数据库)，实现用户注册的页面跳转

07vue+elementUI完成注册及登陆_第3张图片

07vue+elementUI完成注册及登陆_第4张图片

 步骤一：创建Login.vue和Register.vue，把页面布局写好（template和style两个部分），实现页面效果

Login.vue

 Register.vue

 步骤二：导入路由

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'//登录
import Register from '@/views/Register'//注册
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
	  path: '/',
	  name: 'Login',
	  component: Login
	},{
	  path: '/Register',
	  name: 'Register',
	  component: Register
	}
  ]
})

 步骤三：后台准备一个web项目，进行连接操作，可以根据这个链接去下载后台代码

SPA项目的登录实现之后台代码-Java文档类资源-CSDN下载

步骤四：设置vue项目对axios的全局配置(在src目录下创建一个api目录，在此目录下创建两个js文件)

action.js（为方便开发，建议对请求地址进行封装）

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/j2eeVue', //服务器
	'SYSTEM_USER_DOLOGIN': '/userAction.action', //登陆
	//此处用于定义整个项目
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

http.js

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上

import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};


// 请求拦截器
axios.interceptors.request.use(function(config) {
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
	return response;
}, function(error) {
	return Promise.reject(error);
});

// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// 	config => {
// 		//config.data = JSON.stringify(config.data);  
// 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// 		//config.headers['Token'] = 'abcxyz';
// 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// 		// if (cookie.get("token")) {
// 		// 	//用户每次操作，都将cookie设置成2小时
// 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
// 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
// 		// 	config.headers.token = cookie.get("token");
// 		// 	config.headers.name = cookie.get("name");
// 		// }
// 		return config;
// 	},
// 	error => {
// 		return Promise.reject(error.response);
// 	});

// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// 	response => {
// 		if (response.data.resultCode == "404") {
// 			console.log("response.data.resultCode是404")
// 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// 			//      cookie.del("ticket")
// 			//      window.location.href='http://login.com'
// 			return
// 		} else {
// 			return response;
// 		}
// 	},
// 	error => {
// 		return Promise.reject(error.response) // 返回接口返回的错误信息
// 	});



export default axios;

注意！！！！！！