网上书城项目后台登录、注册实现

前言

今天为大家分享的是网上书城项目的后台部分功能，也就是登录、注册的实现过程，这篇博客也是接着之前的两篇博客来的，不明白的小伙伴们可以看看我之前写的这两篇博客：

网上书城项目需求分析、功能介绍、工具类介绍

网上书城项目前端页面设计

登录、注册功能

登录的话，是按照角色划分权限进行登录的，即不同的用户身份登录后看到的页面不一样！

角色表展示：

t_easyui_user表

权限表展示：

t_easyui_permission表

使用的是角色权限表将用户表和权限表之间相关联

这张是t_easyui_role_permission 角色权限中间表

登录效果展示

当还没有进行角色权限划分时候的页面效果：

权限划分

我这里以老板和顾客两个角色进行划分：

1、当老板进行登录时，登录的页面效果

2、当老板点击登录按钮后，看到的页面效果

当老板登录之后，就可以看到左侧树形菜单中的权限管理和订单管理两个子节点了！

2、当顾客进行登录时候，登录的页面效果：

3、当点击登录按钮后，顾客看到的页面效果：

当顾客登录后，只能看到左侧树形菜单的订单管理~

注册效果展示

例如我要注册一个张三的用户

输入张三的用户名和密码，并点击注册按钮时候：

可以看到原来的用户表中多了张三这个用户的数据，说明注册成功！

代码实现

需要的jar和工具类

jar包依赖:

工具类：

使用到的实体类：

entity类

实体类中只要写与数据库表格中对应的属性、set/get方法、无参、有参构造器、toString方法就好~

User类（用户）

package com.wangqiuping.entity;
/**
 * 
 * @author 小汪同学  2020年7月3日 上午10:05:40
 *
 */
public class User {

private  long  id;
private  String name;
private  String pwd;
private  int  type;
public long getId() {
	return id;
}
public void setId(long id) {
	this.id = id;
}
public String getName() {
	return name;
}
public void setName(String name) {
	this.name = name;
}
public String getPwd() {
	return pwd;
}
public void setPwd(String pwd) {
	this.pwd = pwd;
}
public int getType() {
	return type;
}
public void setType(int type) {
	this.type = type;
}
public User(long id, String name, String pwd, int type) {
	super();
	this.id = id;
	this.name = name;
	this.pwd = pwd;
	this.type = type;
}
public User() {
	super();
}
public User(String name, String pwd, int type) {
	super();
	this.name = name;
	this.pwd = pwd;
	this.type = type;
}
@Override
public String toString() {
	return "User [id=" + id + ", name=" + name + ", pwd=" + pwd + ", type=" + type + "]";
}
}

Permission类（权限）

package com.wangqiuping.entity;

public class Permission {
	
	private long id;
	private String name;
	private String description;
	private String url;
	private long pid;
	private int ismenu;
	private long displayno;
	
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public long getPid() {
		return pid;
	}
	public void setPid(long pid) {
		this.pid = pid;
	}
	public int getIsmenu() {
		return ismenu;
	}
	public void setIsmenu(int ismenu) {
		this.ismenu = ismenu;
	}
	public long getDisplayno() {
		return displayno;
	}
	public void setDisplayno(long displayno) {
		this.displayno = displayno;
	}
	@Override
	public String toString() {
		return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
				+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
	}	
}

RolePermission类（角色权限）

package com.wangqiuping.entity;
/*
 * 角色权限中间表
 */
public class RolePermission {

private  long  rid;
private  long  pid;

public long getRid() {
	return rid;
}
public void setRid(long rid) {
	this.rid = rid;
}
public long getPid() {
	return pid;
}
public void setPid(long pid) {
	this.pid = pid;
}
public RolePermission(long rid, long pid) {
	super();
	this.rid = rid;
	this.pid = pid;
}
public RolePermission() {
	super();
}
@Override
public String toString() {
	return "RolePermission [rid=" + rid + ", pid=" + pid + "]";
}
}

dao方法

UserDao类

注意在原有的sql语句进行用户名和密码的拼接时，单双引号的使用

package com.wangqiuping.dao;

import java.sql.SQLException;
import java.util.List;
import com.wangqiuping.entity.User;
import com.wangqiuping.util.BaseDao;
import com.wangqiuping.util.PageBean;
import com.wangqiuping.util.StringUtils;
/**
 * 
 * @author 小汪同学  2020年7月4日 下午4:47:54
 *
 */
public class UserDao extends BaseDao<User>{
	
	
//登录
public  List<User> login(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	String name = user.getName();
	String pwd = user.getPwd();
	String sql="select * from t_easyui_user where true";
	
//如果用户名和密码不为空，则进行拼接

	if(StringUtils.isNotBlank(name)) {
		 sql += " and name='"+name+"'";
	}
	if(StringUtils.isNotBlank(pwd)) {
		 sql += " and pwd='"+pwd+"'";
	}
	//登录不需要进行分页   
	return super.executeQuery(sql,User.class,pageBean);
}

//注册
public  int  register(User user) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
	String sql="insert into t_easyui_user(name,pwd) values(?,?)";
	return super.executeUpdate(sql,user,new String[]{"name","pwd"});
}
}

RolePermissionDao类

package com.wangqiuping.dao;

import java.sql.SQLException;
import java.util.List;
import com.wangqiuping.entity.RolePermission;
import com.wangqiuping.util.BaseDao;
import com.wangqiuping.util.PageBean;
/**
 * 
 * @author 小汪同学  2020年7月4日 下午9:54:46
 *
 */
public class RolePermissionDao extends BaseDao<RolePermission>{

//查询所有
public  List<RolePermission> list(RolePermission rolePermission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	String  sql="select * from t_easyui_role_permission where true";
	long rid = rolePermission.getRid();
	if(rid!=0) {
		sql += " and rid= "+rid;
	}
	return super.executeQuery(sql,RolePermission.class,pageBean);
}	
}

PermissionDao类

package com.wangqiuping.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wangqiuping.entity.Permission;
import com.wangqiuping.util.BaseDao;
import com.wangqiuping.util.BuildTree;
import com.wangqiuping.util.PageBean;
import com.wangqiuping.vo.TreeVo;

public class PermissionDao extends BaseDao<Permission> {
	
	/**
	 * 是直接从数据库获取到的数据
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Permission> list(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_permission";
		return super.executeQuery(sql, Permission.class, pageBean);		
	}
	
	
	public List<Permission> listPermission(String pids,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_permission where id  in ("+pids+")";
		return super.executeQuery(sql, Permission.class, pageBean);		
	}
	

	public List<TreeVo<Permission>> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	List<Permission> list = this.list(permission, pageBean);
	
		
	List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
	
	TreeVo treeVo = null;
	for (Permission p : list) {
		treeVo = new TreeVo<>();
		treeVo.setId(p.getId()+"");
		treeVo.setText(p.getName());
		treeVo.setParentId(p.getPid()+"");
		Map<String, Object> attributes = new HashMap<String, Object>();
    	attributes.put("self", p);
	    treeVo.setAttributes(attributes);
		nodes.add(treeVo);
	}
	//返回json数组
	return BuildTree.buildList(nodes,"0");
}
	
	public List<TreeVo<Permission>> topNodePermission(String pids,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Permission> list =this.listPermission(pids,pageBean);
		
			
		List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
		
		TreeVo treeVo = null;
		for (Permission p : list) {
			treeVo = new TreeVo<>();
			treeVo.setId(p.getId()+"");
			treeVo.setText(p.getName());
			treeVo.setParentId(p.getPid()+"");
			Map<String, Object> attributes = new HashMap<String, Object>();
	    	attributes.put("self", p);
		    treeVo.setAttributes(attributes);
			nodes.add(treeVo);
		}
		//返回json数组
		return BuildTree.buildList(nodes,"0");
	}
  }
}

action层

UserAction类

package com.wangqiuping.action;

import java.sql.SQLException;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wangqiuping.dao.UserDao;
import com.wangqiuping.entity.User;
import com.wangqiuping.framework.ActionSupport;
import com.wangqiuping.framework.ModelDriven;

public class UserAction extends ActionSupport implements ModelDriven<User>{

private  User     user=new User();
private  UserDao  userdao=new UserDao();

@Override
public User getModel(){
	// TODO Auto-generated method stub
	return user;
}

//登录
public  String login(HttpServletRequest req,HttpServletResponse resp) {
	try {
		User currentUser= this.userdao.login(user,null).get(0);
	    if(currentUser==null) {
	    	return  "login";
	    }
	    req.getSession().setAttribute("currentUser",currentUser);
		}catch (InstantiationException e) {
			e.printStackTrace();
			return  "login";
		}catch (IllegalAccessException e) {
			e.printStackTrace();
		    return  "login";
		}catch (SQLException e) {
			e.printStackTrace();
			return  "login";
		}
		return "main";
}
}

//注册
public  String register(HttpServletRequest req,HttpServletResponse resp) {
		try {
			int register = this.userdao.register(user);
//如果影响行数>0   说明注册成功   可进行登录
			if(register>0) {
				return "login";
			}
		}catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		   return "register";
	}

PermissionAction类

package com.wangqiuping.action;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wangqiuping.dao.PermissionDao;
import com.wangqiuping.dao.RolePermissionDao;
import com.wangqiuping.entity.Permission;
import com.wangqiuping.entity.RolePermission;
import com.wangqiuping.entity.User;
import com.wangqiuping.framework.ActionSupport;
import com.wangqiuping.framework.ModelDriven;
import com.wangqiuping.util.ResponseUtil;
import com.wangqiuping.vo.TreeVo;

public class PermissionAction extends ActionSupport  implements ModelDriven<Permission>{

	
	private  Permission         permission=new Permission();
	private  PermissionDao      permissionDao=new PermissionDao();
	private  RolePermissionDao  rolePermissionDao=new RolePermissionDao();
    
	@Override
	public Permission getModel() {
		// TODO Auto-generated method stub
		return permission;
	}

	public  String  menuTree(HttpServletRequest req,HttpServletResponse resp) {
		try {
        //不管老板还是消费者都是看到所有的菜单
	    //根据权限管理 
	    //老板看老板部分的权限
		//顾客看顾客部分的权限
		User currentUser =(User)req.getSession().getAttribute("currentUser");//获取session存储的用户
	    RolePermission  rolePermission=new RolePermission();//实例化角色类别
	    rolePermission.setRid(currentUser.getType());//获取角色Id
		List<RolePermission> rolePermissions = this.rolePermissionDao.list(rolePermission,null);//不需要分页
	    // ,0,1,2,3,4,5......
		StringBuilder  pids=new StringBuilder();//实例化StringBuilder
	    for (RolePermission rp : rolePermissions) {
			pids.append(",").append(rp.getPid());
		}
//这里不需要进行分页  左侧树形菜单有多少数据就展示多少条数据
	    List<TreeVo<Permission>> topNodePermission = this.permissionDao.topNodePermission(pids.substring(1),null);
        ResponseUtil.writeJson(resp,topNodePermission);
	    //ResponseUtil.writeJson(resp,this.permissionDao.topNode(null,null));
		}catch (InstantiationException e) {
			e.printStackTrace();
		}catch (IllegalAccessException e) {
			e.printStackTrace();
		}catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		//配置结果码的目的就是为了在mvc.xml中寻找到底是重定向还是转发
		return null;
	}
}

jsp页面

注意全局样式、图标样式、以及js文件的引用路径不要弄错

<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  

index.jsp页面

主页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>   
<title>登录后的主界面</title>
</head>
<!--获取项目名  利用了隐藏域传值-->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}"/>
<body class="easyui-layout">
		<div data-options="region:'north',border:false" 
			style="height:60px;background:#B3DFDA;padding:10px">管理系统</div>
		<div data-options="region:'west',split:true,title:'目录'" 
			style="width:150px;padding:10px;">
	    <!-- Tree的核心代码  -->
        <ul id="tt"></ul>  
		</div>
		<div data-options="region:'east',split:true,collapsed:true,title:'右边'" 
			style="width:100px;padding:10px;">east region</div>
		<div data-options="region:'south',border:false" 
			style="height:50px;background:#A9FACD;padding:10px;">底部版权</div>
		<div data-options="region:'center',title:'内容'">
		<!--tabs的核心代码  -->
		<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">   
	    <div title="首页" style="padding:20px;display:none;">本站各种数据指标、各个模块的使用情况、数据量、报表</div>   
		</div>
		<!--关闭选项卡的操作 -->
		<div id="book" class="easyui-menu">
		  <div id="closecur">
		     关闭当前选项卡
		  </div>
		   <div id="closeall">
		     关闭全部选项卡
		  </div>
		  <div id="closeother">
		     关闭其他选项卡
		  </div>
		  <div class="menu-sep"></div>
		</div>  
</body>
</html>

login.jsp页面

登录页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fg.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<style>
		 .form-signin{
				/* position: absolute;  绝对定位*/
				/* position: relative;  相对定位*/
				position:relative;
				width: 400px;
				top: 100px;
				left: 50%;
				margin-left: -200px;
			}  
		</style>
	</head>
	<body>
		<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=login" method="post">
			<div class="text-center mb-4">
				<img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
				<h1 class="h3 mb-3 font-weight-normal">用户登录</h1>				
			</div>

			<div class="form-label-group">
				<input type="text"     id="name" name="name" class="form-control" placeholder="请输入用户名..." required autofocus>
			</div>

			<div class="form-label-group">
				<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码..." required>
			</div>

			<div class="checkbox mb-3">
				<label>
					<input type="checkbox" value="remember-me"> Remember me
				</label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
			<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
		</form>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

action层里面要写对应的获取路径的方法，否则会报
java.lang.NoSuchMethodException 找不到该方法异常

<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=login" method="post">

register.jsp页面

注册页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>注册界面</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fg.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<style>
		 .form-signin{
				/* position: absolute;  绝对定位*/
				/* position: relative;  相对定位*/
				position:relative;
				width: 400px;
				top: 100px;
				left: 50%;
				margin-left: -200px;
			}  
		</style>
	</head>
	<body>
		<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=register" method="post">
			<div class="text-center mb-4">
				<img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
				<h1 class="h3 mb-3 font-weight-normal">用户注册</h1>				
			</div>

			<div class="form-label-group">
				<input type="text"     id="name" name="name" class="form-control" placeholder="请输入用户名..." required autofocus>
			</div>

			<div class="form-label-group">
				<input type="password" id="pwd" name="pwd" class="form-control"  placeholder="请输入密码..." required>
			</div>

			<div class="checkbox mb-3">
				<label>
					<input type="checkbox" value="remember-me"> Remember me
				</label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
			<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
		</form>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

main.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>后管主界面</title>
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body class="easyui-layout">
<!-- 隐藏域传值 -->
<input type="text" name="ctx" id="ctx" value="${pageContext.request.contextPath}">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">网上书城</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
    <ul id="bookMenus"></ul>
</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">底部版权</div>
<div data-options="region:'center',title:'Center'">
    <div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">
        <div title="首页" style="padding:20px;display:none;">
                         欢迎来到网上书城!!!
        </div>
    </div>
</div>
</body>
</html>

mvc.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<config>	
	<!-- 默认重定向 -->
	<action path="/permission" type="com.wangqiuping.action.PermissionAction">
	
	  	<!--  <forward name="index"   path="/index.jsp" redirect="false" /> -->
	</action>
    <action path="/menu"       type="com.wangqiuping.action.MenuAction">
	
	</action>
	
	<action path="/book"       type="com.wangqiuping.action.BookAction">
	
	</action>
	
	<!--登录 -->
	<action path="/user"   type="com.wangqiuping.action.UserAction">
	    <forward name="login"   path="/login.jsp"    redirect="false"/>
	    <forward name="main"    path="/bg/main.jsp"  redirect="false"/>  
	</action>
</config>

js的使用

左侧树形菜单需使用的js文件

$(function(){
	var  ctx=$("#ctx").val();
	$('#tt').tree({    
	    url:$("#ctx").val()+'/permission.action?methodName=menuTree',
	    onClick: function(node){//node指的是json对象
//		alert(node.text);  //在用户点击的时候提示
//	    debugger;//使用debugger调试js的代码
		//目前存在的问题：重复的tab页反复打开
	    //针对于上面存在的问题分析，判断当前是否存在对应的title的选项卡
	    //如果存在  切换到相应的选项卡  如果不存在  重新打开一个选项卡	
//	    console.log();  打印
	    if($('#bookTabs').tabs('exists',node.text)){
	    	//切换选项卡
	    	  $('#bookTabs').tabs('select',node.text);
	    }
	    else{
	    	//新增选项卡
	    	//存在问题，非叶子节点不能打开页面
	    	//分析，非叶子节点都没有跳转页面的
	       var  src=node.attributes.self.url;
	       if(src){ var content='<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';		
	 	   $('#bookTabs').tabs('add',{    
			    title:node.text,    
			    content:content,    
			    closable:true,    
			    tools:[{    
			        iconCls:'icon-mini-refresh',    
			        handler:function(){    
			            alert('refresh');    
			        }    
			    }]    
			}); 
	    }	
   } 
}
});
	/**
	 * 关闭选项卡的操作
	 * 通过$(".tabs-header")的head对象进行contextmenu的绑定事件，
	 * 并且阻止默认事件，最后根据API文档中bind事件的固定用法进行搭配使用
	 * 实现最终效果！
	 * e.preventDefault();//阻止默认事件
	 * bind   绑定
	 */
	$(".tabs-header").bind('contextmenu',function(e){
		e.preventDefault();
		$('#book').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	});
	//关闭当前选项卡
	$("#closecur").bind("click",function(){
		var tab = $('#bookTabs').tabs('getSelected');
		var index = $('#bookTabs').tabs('getTabIndex',tab);
		$('#bookTabs').tabs('close',index);
	});
	//关闭全部选项卡
	$("#closeall").bind("click",function(){
		var tablist = $('#bookTabs').tabs('tabs');
		//下标小于0，不删除第一个，小于等于0就全部删除
		for(var i=tablist.length-1;i>0;i--){
			$('#bookTabs').tabs('close',i);
		}
	});
	//关闭其他选项卡
	$("#closeother").bind("click",function(){
		var tablist = $('#bookTabs').tabs('tabs');
		var tab = $('#bookTabs').tabs('getSelected');
		var index = $('#bookTabs').tabs('getTabIndex',tab);
		for(var i=tablist.length-1;i>index;i--){
			$('#bookTabs').tabs('close',i);
		}
		var num = index-1;
		//只会留下首页的操作
		//如果下标小于0的话，就不删除第一个，如果小于等于0就关闭全部
		for(var i=num;i>0;i--){
			$('#bookTabs').tabs('close',i);
		}
	});
})

总结

网上书城项目的登录、注册功能的实现需弄清楚思路再去编码，以及注意细节，这样才更容易达到事半功倍的效果，内容就到这里啦，拜拜~