SPA项目开发之登录注册

SPA项目开发之登录注册

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

1.1 使用vue-cli脚手架工具创建一个vue项目
      vue init webpack pro01

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

  ## 重要的事情说三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代码
  1.3 在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）
      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

  1.4 测试
      修改HelloWorld.vue添加elementUI组件查看效果

2. Vue+ElementUI设计登陆页面:

注1：相关样式见资料“css.txt”

   注2：


login.vue

代码块中有App.vue和login.vue的字样，这是代表的是这两个名字下的代码是这两个下的代码。等下回展示给大家看的。
先给大家看前端的代码：
所要的如下图所示

action.js：

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/T224_SSH', //服务器
	'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆
	'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册
	'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左侧树形菜单加载
	'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表
	'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
	'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
	'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
	'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据
	'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) {
	// var jwt = window.vm.$store.getters.getJwt;
	// config.headers['jwt'] = jwt;
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
	// debugger;
	// var jwt = response.headers['jwt'];
	// if(jwt){
	// 	window.vm.$store.commit('setJwt',{jwt:jwt});
	// }
	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;

index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
Vue.use(Router)

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

Login.vue：

Reg.vue：

App.vue:

main.vue:

// 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 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http' 
import VueAxios from 'vue-axios'



Vue.use(ElementUI) 
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

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

前端的代码就完成了。
接下来就开始写后端代码（本来打算分两次写，不过为了方便大家观看就写在一起吧）：
后端代码：
entity层

User：

package com.lihao.vue.entity;

public class User {
	private String uname;
	private String pwd;

	public String getUname() {
		return uname;
	}

	public void setUname(String uname) {
		this.uname = uname;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	@Override
	public String toString() {
		return "User [uname=" + uname + ", pwd=" + pwd + "]";
	}

	public User(String uname, String pwd) {
		super();
		this.uname = uname;
		this.pwd = pwd;
	}

	public User() {
		super();
	}

}

User.hbm.xml：

Dao层
UserDao：

package com.lihao.vue.dao;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.springframework.orm.hibernate5.HibernateCallback;

import com.lihao.base.dao.BaseDao;
import com.lihao.vue.entity.User;
import com.lihao.vue.util.PageBean;
import com.lihao.vue.util.StringUtils;

public class UserDao extends BaseDao {

	private static final long serialVersionUID = -2644908989655094673L;

	public List list(User user,PageBean pageBean) {
		BaseDao obj = this;
		return (List) this.getHibernateTemplate().execute(new HibernateCallback>() {
			@Override
			public List doInHibernate(Session session) throws HibernateException {
				String hql = "from User where 1=1 ";
				Map map = new HashMap<>();
				String uname = user.getUname();
				String pwd = user.getPwd();
				if (StringUtils.isNotBlank(uname)) {
					hql += " and uname = :uname";
					map.put("uname", uname);
				}
				if (StringUtils.isNotBlank(pwd)) {
					hql += " and pwd = :pwd";
					map.put("pwd", pwd);
				}
				return obj.executeQuery(session, hql, map, pageBean);
			}
		});
	}
}

Biz层：
UserBiz：

package com.lihao.vue.biz;

import com.lihao.vue.entity.User;

public interface UserBiz {
	public User login(User user);
}

UserBizImpl：

package com.lihao.vue.biz.impl;

import com.lihao.vue.biz.UserBiz;
import com.lihao.vue.dao.UserDao;
import com.lihao.vue.entity.User;

public class UserBizImpl implements UserBiz {
	private UserDao userDao;

	public UserDao getUserDao() {
		return userDao;
	}

	public void setUserDao(UserDao userDao) {
		this.userDao = userDao;
	}

	@Override
	public User login(User user) {
		return userDao.list(user, null).get(0);
	}

}

Web层：
UserAction：

package com.lihao.vue.web;

import java.util.HashMap;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.opensymphony.xwork2.ModelDriven;
import com.lihao.base.web.BaseAction;
import com.lihao.vue.biz.UserBiz;
import com.lihao.vue.entity.User;
import com.lihao.vue.util.JsonData;
import com.lihao.vue.util.JwtUtils;
import com.lihao.vue.util.PageBean;
import com.lihao.vue.util.ResponseUtil;
import com.lihao.vue.util.StringUtils;

public class UserAction extends BaseAction implements ModelDriven{

	private UserBiz userBiz;
	private User user = new User();

	public UserBiz getUserBiz() {
		return userBiz;
	}

	public void setUserBiz(UserBiz userBiz) {
		this.userBiz = userBiz;
	}
	 
	public String login() {
		ObjectMapper om = new ObjectMapper();
		JsonData jsonData = null;
		try {
			if(StringUtils.isBlank(user.getUname()) || StringUtils.isBlank(user.getPwd())) {
				jsonData = new JsonData(0, "用户或者密码为空", user);
			}else {
				User u = this.userBiz.login(user);
//				Map claims = new HashMap();
//				claims.put("uname",user.getUname());
//				claims.put("pwd", user.getPwd());
//				String jwt = JwtUtils.createJwt(claims, JwtUtils.JWT_WEB_TTL);
//				response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
				jsonData = new JsonData(1, "登录成功", u);
			}
		} catch (Exception e) {
			e.printStackTrace();
			jsonData = new JsonData(0, "用户或者密码错误", user);
		}finally {
			try {
				ResponseUtil.write(response, om.writeValueAsString(jsonData));
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		
		return null;
	}
	
	public String getAsyncData() {
		ObjectMapper om = new ObjectMapper();
		try {
			Thread.sleep(6000);
			ResponseUtil.write(response, om.writeValueAsString("http://www.javaxl.com"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

	@Override
	public User getModel() {
		return user;
	}
}

要用到的后端代码还有，不过这篇博客的主要的还是在上面的代码，后期我会专门写一篇博客来写后端的代码。到时候会放链接在这篇博客里。后端代码

上面的就是后端的代码。本片只有一部分用到了

接下来展示效果：