登陆+注册(vue+elementUI)

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

①.使用vue-cli脚手架工具创建一个vue项目

vue init webpack medpro

②.npm安装elementUI

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

• main.js全局配置

        配置element-ui,使用elementUI来进行布局

// 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: ''
})

项目登录注册布局

创建注册和登录组件

登录组件：Login.vue

使用到Element的表单 
使用到Element的栅格布局
使用到Element的Link 文字链接

 

 

注册组件：Register.vue

配置路由

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
    }
  ]
})

config的index.js端口号修改8090

App.vue的图片注释不显示

this.$router.push({ //从一个界面跳转到另一个界面
          path: '/Reg'
}) 

登录布局：

注册布局：

项目登录功能

需知：

axios：axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests

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'

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

前提：要到eclipse中导入后台项目

config.properties

 1、实现登录功能，就要实现前后端数据交互 

需求：当点击提交时，需要将数据从前端交互到后端，然后从后端访问数据库查看此用户的用户名和密码是否正确。

满足需求：在Login.Vue的提交的方法中，先实现前后端数据交互，在之后获取到访问到对应action的路径，之后判断，如果返回的数据是1，就表明用户登录成功，如果返回的数据是2，则登录失败

Login.Vue：Get请求

   import axios from 'axios'     
 
   doLogin:function(){
            //定义请求路径
            //http://localhost:8080/j2eeVue/userAction.action
            let url='let url='http://localhost:8080/j2eeVue/userAction.action';';
            let params={
               username:this.username,
               password:this.password,
               methodName:'userLogin'
            }
            console.log(params);
 
 
            //发起ajax请求 Get (注意 参数必须保存到params属性中)
            this.axios.get(url,{params:params}).then(resp=>{
 
              let data=resp.data;
 
               this.$message({
                        message: data.msg,
                        type: data.code==1?'success':'error'
               });
 
            }).catch(err=>{
              console.log(err);
            });
 
 
            }).catch(err=>{
              console.log(err);
            });
        }

后台代码：

package com.zking.vue.action;
 
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.mvc.framework.DispatcherAction;
import com.zking.mvc.framework.ModelDriver;
import com.zking.vue.dao.UserDao;
import com.zking.vue.entity.User;
 
public class UserAction extends DispatcherAction implements ModelDriver {
	private User user=new User();
	private UserDao userdao=new UserDao();
	private ObjectMapper mapper=new ObjectMapper();
	@Override
	public User getModel() {
		return user;
	}
	
	public String userLogin(HttpServletRequest req,HttpServletResponse resp) 
			throws ServletException,IOException{
		Map json=new HashMap();
		
		User selectUser = userdao.SelectUser(user);
		
		if(selectUser!=null) {
			json.put("code","1");
			json.put("msg", "用户登录成功");
		}else {
			json.put("code", "-1");
			json.put("msg", "用户名或密码错误");
		}
		mapper.writeValue(resp.getOutputStream(),json);
		return null;
	}
}

3、 数据库中数据：

4、 登录功能效果展示：

 

Post请求：

import axios from 'axios'
import qs from 'qs'
 
 doLogin:function(){
            //定义请求路径
            //http://localhost:8080/j2eeVue/userAction.action
            let url='http://localhost:8080/j2eeVue/userAction.action';
            let params={
               username:this.username,
               password:this.password,
               methodName:'userLogin'
            }
            console.log(params);
 
            //发起ajax请求 Post
             params=qs.stringify(params);
            // console.log(params);
            this.axios.post(url,params).then(resp=>{
              console.log(resp);
              let data=resp.data;
 
               this.$message({
                        message: data.msg,
                        type: data.code==1?'success':'error'
               });
 
            }).catch(err=>{
              console.log(err);
            });
 
        },

axios封装

导入action.js文件和http.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;

配置全局main.js文件

import axios from '@/api/http'             //vue项目对axios的全局配置
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

再实现登录方法就不需要再去引入axios和qs

import axios from 'axios'
import qs from 'qs'

登录实现：

 doLogin:function(){
            //定义请求路径
            //http://localhost:8080/j2eeVue/userAction.action
            let url=this.axios.urls.SYSTEM_USER_DOLOGIN;
            let params={
               username:this.username,
               password:this.password,
               methodName:'userLogin'
            }
            console.log(params);
 
 
            //发起ajax请求 Get (注意 参数必须保存到params属性中)
            /* this.axios.get(url,{params:params}).then(resp=>{
              let data=resp.data;
               this.$message({
                        message: data.msg,
                        type: data.code==1?'success':'error'
               });
            }).catch(err=>{
              console.log(err);
            }); */
 
 
            //发起ajax请求 Post
 
            /* params=qs.stringify(params); */
            // console.log(params);
            this.axios.post(url,params).then(resp=>{
              console.log(resp);
              let data=resp.data;
 
               this.$message({
                        message: data.msg,
                        type: data.code==1?'success':'error'
               });
 
            }).catch(err=>{
              console.log(err);
            });
 
 
 
        }

Ajax跨域问题

什么是跨域问题?

跨域问题来源于JavaScript的"同源策略"，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。

查看浏览器开发者工具Console报错：

• Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.b.com:8080' is therefore not allowed access.
• http://www.abc.com/a/b 调用 http://www.abc.com/d/c（非跨域）
• http://www.abc.com/a/b 调用 http://www.def.com/a/b （跨域：域名不一致）
• http://www.abc.com:8080/a/b 调用 http://www.abc.com:8081/d/c （跨域：端口不一致）
• http://www.abc.com/a/b 调用 https://www.abc.com/d/c （跨域：协议不同）
• 请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

跨域问题解决 转

 
  
  	corsFilter
  	com.zking.vue.util.CorsFilter
  
  
  	corsFilter
  	/*
   

CorsFilter.java

package com.zking.vue.util;
 
import java.io.IOException;
 
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
 
/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter implements Filter {
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
 
		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
		filterChain.doFilter(servletRequest, servletResponse);
	}
	@Override
	public void destroy() {
 
	}
}

ES6的语法箭头函数  转

ES6标准新增了一种新的函数：Arrow Function（箭头函数）

基础语法

通常函数的定义方法

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return

() => return 'hello'
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ ... }有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错
x => ({key: x}) // 正确

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。）
 

总结

类似于匿名函数，在某些情况下使用，可减少代码量
代码简洁，this提前定义
代码太过简洁，导致不好阅读
this提前定义，导致无法使用js进行一些在ES5里面看起来非常正常的操作（若使用箭头函数，在监听点击事件的回调函数中，就无法获取到当前点击的元素咯，详见《正确使用箭头函数——什么时候不该用ES6箭头函数》）
总的来说，箭头函数只是一种函数的简写，有其利弊，可用可不用，看大家心情，当然也得用的正确

至此登陆+注册(vue+elementUI)介绍完毕,由于作者水平有限难免有疏漏，欢迎留言纠错。