基于JSP和Servlet技术实现的Java Web的注册和登录的功能

╰半橙微兮° 2022-02-03 16:47 291阅读 0赞

# 一 引言 #

首先我们来看一下最终的效果图：

注册界面：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70][]

登录界面：

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 1][]二 什么是JavaWeb三层架构 #

在写web项目之前你得先弄清MVC三层架构是什么，不然你会学的一头雾水。

**什么是三层架构？**

三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为：界面层（User Interface layer）、业务逻辑层（Business Logic Layer）、数据访问层（Data access layer）。区分层次的目的即为了“高内聚低耦合”的思想。在软件体系架构设计中，分层式结构是最常见，也是最重要的一种结构。微软推荐的分层式结构一般分为三层，从下至上分别为：数据访问层（又称为持久层）、业务逻辑层（又或称为领域层）、表示层。

**表示层（UI层）:**

表示层也称为用户界面层，位于最外层（最上层），离用户最近。用于显示数据和接收用户输入的数据，为用户提供一种交互式操作的界面。

**业务逻辑层（BLL层）:**

业务逻辑层又或称为领域层，负责关键业务的处理和数据的传递。复杂的逻辑判断和涉及到数据库的数据验证都需要在此做出处理。主要是针对具体的问题的操作，也可以理解成对数据层的操作，对数据业务逻辑处理，如果说数据层是积木，那逻辑层就是对这些积木的搭建。

**数据访问层（DAL层）：**

数据访问层又称为数据持久层，主要负责对数据库的直接访问，为业务逻辑层提供数据，根据传入的值来操作数据库，增、删、改、查。

下面是三层的关系结构图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 2][]

# 三　后端代码的具体实现 #

１　在写后端代码之前你先为注册用户设计一张tb\_register数据表以便你来存储前台发来的数据：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 3][]

２下面就开始三层架构的搭建：

![20190509212449408.png][]

１）cn.domain(用户实体类）

package cn.domain;
    
    public class UserRegisterDomain {
    
    	private int id;
    	private String userName;
    	private String password;
    	private String mobile;
    	private String email;
    
    	public UserRegisterDomain() {
    		super();
    
    	}
    
    	public UserRegisterDomain(int id, String userName, String password, String mobile, String email) {
    		super();
    		this.id = id;
    		this.userName = userName;
    		this.password = password;
    		this.mobile = mobile;
    		this.email = email;
    	}
    
    	public int getId() {
    		return id;
    	}
    
    	public void setId(int id) {
    		this.id = id;
    	}
    
    	public String getUserName() {
    		return userName;
    	}
    
    	public void setUserName(String userName) {
    		this.userName = userName;
    	}
    
    	public String getPassword() {
    		return password;
    	}
    
    	public void setPassword(String password) {
    		this.password = password;
    	}
    
    	public String getMobile() {
    		return mobile;
    	}
    
    	public void setMobile(String mobile) {
    		this.mobile = mobile;
    	}
    
    	public String getEmail() {
    		return email;
    	}
    
    	public void setEmail(String email) {
    		this.email = email;
    	}
    
    	@Override
    	public String toString() {
    		return "UserRegisterDomain [id=" + id + ", userName=" + userName + ", password=" + password + ", mobile="
    				+ mobile + ", email=" + email + "]";
    	}
    
    }

2)cn.util(存放公用工具类的包）

在写数据访问层之前一定得先连接上数据库，所以写了DBConnection：

package cn.util;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.ResultSet;
    
    import org.junit.Test;
    
    import com.mysql.jdbc.PreparedStatement;
    
    public class DBConnection {
    	private static Connection connection = null;
    	private static String className = "com.mysql.jdbc.Driver";
    	private static String url = "jdbc:mysql://localhost:3306/e-bus?useUnicode=true&characterEncoding=utf-8&useSSL=false";
    	private static String user = "root";
    	private static String password = "wangjian";
    
    	//连接数据库
    	public static Connection getConnection() {
    		try {
    			Class.forName(className); //加载驱动
    			connection = DriverManager.getConnection(url, user, password); //创建连接
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return connection;
    	}
    
    	//关闭连接
    	public static void Close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet) {
    		try {
    			if (resultSet != null)
    				resultSet.close();
    			if (preparedStatement != null)
    				preparedStatement.close();
    			if (connection != null)
    				connection.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    	}
    	
    	@Test
    	public void test() {
    		System.out.println(DBConnection.getConnection());
    	}
    	
    }

写完一定记得写测试方法：这个表示数据库已经成功连接了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 4][]

3)cn.dao（数据访问层）

其实用户注册的实质就是我们经常写的增删改查的功能里的增加。

为了便于后期维护我们把所有的方法写写到一个接口里，然后再通过实现类来实现：

interface UserRegisterDao：

package cn.dal;
    
    import cn.domain.UserRegisterDomain;
    
    public interface UserRegisterDao {
    	UserRegisterDomain userRegister(UserRegisterDomain user);
    }

UserRegisterDaoImp：

package cn.dal;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    
    import org.junit.Test;
    import cn.domain.UserRegisterDomain;
    import cn.util.DBConnection;
    
    public class UserRegisterDaoImp implements UserRegisterDao {
    	private Connection connection = DBConnection.getConnection();
    	private PreparedStatement preparedStatement = null;
    	private ResultSet resultSet = null;
    	private String sql = "";
    
    	public UserRegisterDomain userRegister(UserRegisterDomain user) {
    		sql = "INSERT INTO tb_register(userName, password, mobile, email)"
    				+ "VALUES(?, ?, ?, ?)";
    		try {
    			preparedStatement = connection.prepareStatement(sql);
    			preparedStatement.setString(1, user.getUserName());
    			preparedStatement.setString(2, user.getPassword());
    			preparedStatement.setString(3, user.getMobile());
    			preparedStatement.setString(4, user.getEmail());
    
    			if (preparedStatement.executeUpdate() > 0)
    				return user;
    
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    	@Test
    	public void test0() {
    		UserRegisterDao dao = new UserRegisterDaoImp();
    		UserRegisterDomain user = dao.userRegister(
    				new UserRegisterDomain(0, "xie", "8888", "987654321", "163@com"));
    		System.out.println(user);
    	}
    
    }

注意：写完一个方法后一定要写测试，为了以防后期出现问题难以查出。

4)cn.bll(业务逻辑层）

interface UserRegisterBll:

package cn.bll;
    
    
    import cn.domain.UserRegisterDomain;
    
    public interface UserRegisterBll {
    	UserRegisterDomain userRegister(UserRegisterDomain  user);
    }

UserRegisterBllImp:

package cn.bll;
    
    
    import cn.dal.UserRegisterDao;
    import cn.dal.UserRegisterDaoImp;
    import cn.domain.UserRegisterDomain;
    
    public class UserRegisterBllImp implements UserRegisterBll {
    	private UserRegisterDao dao = new UserRegisterDaoImp();
    
    	public UserRegisterDomain userRegister(UserRegisterDomain user) {
    		return dao.userRegister(user);
    	}
    
    
    }

5）cn.ui(表示层）

为了防止从前台拿到得数据乱码，得在Servlet前面加这两行：

request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");

统一编码格式为“utf-8".

接着就是从前台取数据了：

//注册功能--拿到前端页面提交的数据 bll-dao-DBConnection
    String userName = request.getParameter("userName").trim().toString();
    String password = request.getParameter("password").trim().toString();
    String mobile = request.getParameter("mobile").trim().toString();
    String email = request.getParameter("email").trim().toString();

接着我们调用业务逻辑层-数据访层访问数据库里存数据：

bll.userRegister(new UserRegisterDomain(0, userName, password, mobile, email)

然后注册成功后我们得页面得作出相应,跳转到登录页面，这里有两种方法：转发和重定向。

下面来细说一下什么是转发和重定向的区别和联系：

①RequestDispatcher.forward方法只能将请求转发给同一个WEB应用中的组件；而HttpServletResponse.sendRedirect 方法不仅可以重定向到当前应用程序中的其他资源，还可以重定向到同一个站点上的其他应用程序中的资源，甚至是使用绝对URL重定向到其他站点的资源。如果传递给HttpServletResponse.sendRedirect 方法的相对URL以“/”开头，它是相对于整个WEB站点的根目录；如果创建RequestDispatcher对象时指定的相对URL以“/”开头，它是相对于当前WEB应用程序的根目录。

request.getRequestDispatcher("pages/user/userLogin.jsp").forward(request, response);

②调用HttpServletResponse.sendRedirect方法重定向的访问过程结束后，浏览器地址栏中显示的URL会发生改变，由初始的URL地址变成重定向的目标URL；而调用RequestDispatcher.forward 方法的请求转发过程结束后，浏览器地址栏保持初始的URL地址不变。

③HttpServletResponse.sendRedirect方法对浏览器的请求直接作出响应，响应的结果就是告诉浏览器去重新发出对另外一个URL的 访问请求，这个过程好比有个绰号叫“浏览器”的人写信找张三借钱，张三回信说没有钱，让“浏览器”去找李四借，并将李四现在的通信地址告诉给了“浏览器”。于是，“浏览器”又按张三提供通信地址给李四写信借钱，李四收到信后就把钱汇给了“浏览器”。可见，“浏览器”一共发出了两封信和收到了两次回复， “浏览器”也知道他借到的钱出自李四之手。RequestDispatcher.forward方法在服务器端内部将请求转发给另外一个资源，浏览器只知道发出了请求并得到了响应结果，并不知道在服务器程序内部发生了转发行为。这个过程好比绰号叫“浏览器”的人写信找张三借钱，张三没有钱，于是张三找李四借了一些钱，甚至还可以加上自己的一些钱，然后再将这些钱汇给了“浏览器”。可见，“浏览器”只发 出了一封信和收到了一次回复，他只知道从张三那里借到了钱，并不知道有一部分钱出自李四之手。

④RequestDispatcher.forward方法的调用者与被调用者之间共享相同的request对象和response对象，它们属于同一个访问请求和响应过程；而HttpServletResponse.sendRedirect方法调用者与被调用者使用各自的request对象和response对象，它们属于两个独立的访问请求和响应过程。对于同一个WEB应用程序的内部资源之间的跳转，特别是跳转之前要对请求进行一些前期预处理，并要使用HttpServletRequest.setAttribute方法传递预处理结果，那就应该使用RequestDispatcher.forward方法。不同WEB应用程序之间的重定向，特别是要重定向到另外一个WEB站点上的资源的情况，都应该使用HttpServletResponse.sendRedirect方法。

⑤无论是RequestDispatcher.forward方法，还是HttpServletResponse.sendRedirect方法，在调用它们之前，都不能有内容已经被实际输出到了客户端。如果缓冲区中已经有了一些内容，这些内容将被从缓冲区中。

当然我们也可选择在注册完之后在浏览器上方弹出提示框提醒注册成功，然后通过点击确认按钮跳转再跳转到登录页面：

PrintWriter out=response.getWriter();
    out.print("<script>alert('注册成功!');window.location.href='pages/user/userLogin.jsp'</script>");

失败就提示请重新注册：

out.write("<script language='javascript'>alert('格式不正确请重新注册！！！')</script>");

下面是UserRegisterServlet完整代码：

package cn.ui;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import cn.bll.UserRegisterBll;
    import cn.bll.UserRegisterBllImp;
    import cn.domain.UserRegisterDomain;
    
    /**
     * Servlet implementation class UserRegisterServlet
     */
    @WebServlet("/UserRegisterServlet")
    public class UserRegisterServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
        private UserRegisterBll bll = new UserRegisterBllImp();
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    			request.setCharacterEncoding("utf-8");
    			response.setCharacterEncoding("utf-8");
    			
    			String op = request.getParameter("op").toString();
    			if("register".equals(op)) {
    				this.userRegister(request,response);
    			}
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    		doGet(request, response);
    	}
    	
    	 void userRegister(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		 response.setCharacterEncoding("GBK"); //解决输出提示框乱码问题(js和servlet编码不统一导致的）
    		
    		 //注册功能--拿到前端页面提交的数据 bll-dao-DBConnection
    		String userName = request.getParameter("userName").trim().toString();
    		String password = request.getParameter("password").trim().toString();
    		String mobile = request.getParameter("mobile").trim().toString();
    		String email = request.getParameter("email").trim().toString();
    		
    		//业务层-数据访问层-DBConnection
    		PrintWriter out=response.getWriter();
    		if(bll.userRegister(new UserRegisterDomain(0, userName, password, mobile, email)) != null){
    			//重定向
    			/*response.sendRedirect("pages/user/userLogin.jsp");*/
    			out.print("<script>alert('注册成功!');window.location.href='pages/user/userLogin.jsp'</script>");
    
    		}
    		else
    			out.write("<script language='javascript'>alert('格式不正确请重新注册！！！')</script>");
    	
    		//转发
    		/*request.getRequestDispatcher("pages/user/userLogin.jsp").forward(request, response);*/
    	}
    
    }

最后我们还要我们还要解决得一个问题就是弹出得提示框乱码的问题：根本原因就是js和servlet编码不统一导致的，只需加下面一行代码即可：

response.setCharacterEncoding("GBK"); //解决输出提示框乱码问题(js和servlet编码不统一导致的）

# 四 前端代码具体实现 #

![20190510111929822.png][]

1）注册页面完整代码：

<%@ 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="../../content/css/login.css">
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
    <title>欢迎注册</title>
    </head>
    
    <body class="login_bj" >
    <div class="zhuce_body">
        <div class="zhuce_kong">
        	<div class="zc">
            	<div class="bj_bai">
                <h3>欢迎注册</h3>
           	  	  <form action="${pageContext.request.contextPath}/UserRegisterServlet?op=register" method="post">
                    <input name="userName" type="text" class="kuang_txt phone" placeholder="用户名">
                    <input name="password" type="password" class="kuang_txt possword" placeholder="密码">
                    <input name="mobile" type="text" class="kuang_txt possword" placeholder="手机号">
                    <input name="email" type="text" class="kuang_txt email" placeholder="邮箱">
                    <input name="identifyingCode" type="text" class="kuang_txt yanzm" placeholder="验证码">
                    
                    <div>
                    	<div class="hui_kuang"><img src="../../content/images/login/zc_22.jpg" width="92" height="31"></div>
                    	<div class="shuaxin"><a href="#"><img src="../../content/images/login/zc_25.jpg" width="13" height="14"></a></div>
                    </div>
                    <div>
                   		<input name="" type="checkbox" value=""><span>已阅读并同意<a href="#" target="_blank"><span class="lan">《XXXXX使用协议》</span></a></span>
                    </div>
                    <input name="注册" type="submit" class="btn_zhuce" value="注册">
                    
                    </form>
                </div>
            	<div class="bj_right">
                	<p>使用以下账号直接登录</p>
                    <a href="#" class="zhuce_qq">QQ注册</a>
                    <a href="#" class="zhuce_wb">微博注册</a>
                    <a href="#" class="zhuce_wx">微信注册</a>
                    <p>已有账号？<a href="userLogin.jsp">立即登录</a></p>
                
                </div>
            </div>
        </div>
    </div>
        
    </body>
    </html>

2）登录页面完整代码：

<%@ 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="../../content/css/login.css">
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
    <title>欢迎登录</title>
    </head>
    <body class="login_bj">
    
    <div class="zhuce_body">
        <div class="zhuce_kong login_kuang">
      	<div class="zc">
        	<div class="bj_bai">
             <h3 style="margin-left: 30%;">欢迎登录</h3>
         	  	  <form action="Checklogin.jsp" method="post">
                  <label>用户名:</label>
                  <input name="username" type="text" class="kuang_txt" placeholder="用户名"><br>
                  <label>密码：</label>
                  <input name="password" type="password" class="kuang_txt" placeholder="密码"><br><br>
                 
                  <input  name="登录" type="submit" class="btn_zhuce" value="登录">
                  </form>
              </div>
             
          	<div class="bj_right">
              	<p>使用以下账号直接登录</p>
                  <a target="_blank" href="http://web2.qq.com/" class="zhuce_qq">QQ注册</a>
                  <a target="_blank" href="https://weibo.com/" class="zhuce_wb">微博注册</a>
                  <a target="_blank" href="https://wx.qq.com/" class="zhuce_wx">微信注册</a>
                  <p>已有账号？<a href="#">立即登录</a></p>
              </div>
    
          </div>
      </div>
    </div>
    </body>
    </html>

3）Checklogin.jsp

我们在登录时候要检验这个用户是否已经存在于我们的数据库中，要存在才能登录成功，于是我要写一个验证得功能。在写之前我们的解决一个编码得问题，就是我们注册得时候用的中文，然后当我登录得时候会被提示密码或者账号错误，这是为为什么呢？原来是编码不一致导致的，只需要在前面加两行代码即可:

request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");

Checklogin.jsp完整代码：

<%@page import="java.sql.PreparedStatement"%>
    <%@ 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>
    z
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    	<%@ page import="cn.util.DBConnection, java.sql.SQLException,
    	java.sql.Connection,java.sql.ResultSet,java.sql.PreparedStatement "%>
    <%
    		//解决从数据库取数据时候乱码问题（全英文可以登录但中文无法登录）
    		request.setCharacterEncoding("utf-8");
    		response.setCharacterEncoding("utf-8");
    		
    		String username = request.getParameter("username").toString();
    		String password = request.getParameter("password").toString();
    		Connection connection = DBConnection.getConnection();
    		PreparedStatement preparedStatement = null;
    		ResultSet resultSet = null;
    		String sql = "";
    
    		try {
    			if (connection != null) {
    				sql = "select * from tb_register where username='" + username + "' and password='" + password + "'";
    				preparedStatement = (PreparedStatement) connection.prepareStatement(sql);
    				resultSet = preparedStatement.executeQuery(sql);
    				if (resultSet.next()) {
    					//重定向--密码正确跳转到主页
    					response.sendRedirect("../../index.jsp");
    					
    				} else {
    					//密码或者用户名输错--刷新原来页面重新输入
    					out.print("<script type='text/javascript'>alert('您输入的用户名或者密码有错误，请核实后重新输入！');</script>");
    					out.print("<script type='text/javascript'>location.href='userLogin.jsp'</script>");
    					/* 重定向 */
    					/* response.sendRedirect("../login.jsp"); */
    				}
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    %>
    
    </body>
    </html>

4)注册和登录的login.css代码:

@charset "utf-8";
    /* CSS reset */
    *{ font-family:"microsoft yahei",simsun,Tahoma,sans-serif;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
    fieldset,img {border:0; }
    ol,ul {list-style:none; }
    h1,h2,h3,h4,h5,h6,button,input,select,textarea {font-size:100%;}
    button::-moz-focus-inner,input::-moz-focus-inner{padding:0; border:0;}
    table {border-collapse:collapse;border-spacing:0;}
    i, cite, em, var, dfn, address {font-style: normal;}
    body{ font-size:14px;}
    a{color: #313131;text-decoration: none; }
    a:hover{text-decoration: underline;}
    a:active, a:focus{outline:none}
    a[href^="http://tongji.baidu.com"]{display: none;}
    .fl{float: left;}
    .fr{float: right;}
    .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0;}
    .clearfix{zoom:1;clear:both;}
    .clear{clear:both; height:0; line-height:0; font-size:0;}
    .hidden,.none{display: none;}
    
    
    
    /*.w1060{ width:1060px; height:auto; margin:0 auto;}*/
    .padding_nei{ /*写padding不撑开*/
    	-webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        -o-box-sizing:border-box;
    	box-sizing:border-box;
    }
    .main01 .sousuo div{    
    	-webkit-border-radius: 17px;
        -moz-border-radius: 17px;
        -ms-border-radius:17px;
        -o-border-radius:17px; 
    	border-radius:17px;	
    	}
    	
    .w1100{ width:1100px; height:auto; margin:0 auto;}
    .w1096{ width:1096px; height:auto; margin:0 auto;}
    
    /*注册页面*/
    .login_bj{ background:url(../images/login/bj_zhuce.jpg) no-repeat top center;}
    .zhuce_body{ float:left; width:100%; height:auto;}
    .zhuce_body .logo{ width:114px; height:54px; margin:53px 0 0 65px;}
    .zhuce_body .zhuce_kong{ position:absolute; top:50%; left:50%; width:600px; height:478px; margin-left:-300px; margin-top:-239px;}
    .zhuce_body .zhuce_kong .zc{width:600px; height:408px;}
    .zhuce_body .zhuce_kong .zc .bj_bai{ float:left; width:314px; height:408px; padding-left:50px; background:#FFF;}
    .zhuce_body .zhuce_kong .zc .bj_bai h3{ font:16px/70px "微软雅黑", "黑体"; color:#333333; width:270px; text-align:center;}
    .zhuce_body .zhuce_kong .zc .bj_right{ float:left;width:185px; height:408px; padding-left:51px; background:#f8f8f8;}
    .zhuce_kong > p{font:16px/70px "微软雅黑", "黑体"; text-align:center; color:#fff;}
    .zhuce_body .zhuce_kong .zc .bj_bai .kuang_txt{ width:236px; height:32px; border:1px solid #dddddd; line-height:32px; padding-left:32px; color:#b1a9a9;  margin-bottom:10px; }
    .zhuce_body .zhuce_kong .zc .bj_bai .btn_zhuce{ width:270px; height:33px; background:#37b5f9; font-size:14px; line-height:33px; text-align:center; border:0px; color:#fff; border-radius:3px; cursor:pointer;}
    
    .zhuce_body .zhuce_kong .zc .bj_bai .phone{background:url(../images/login/zc_06.jpg) no-repeat 10px 10px;}
    .zhuce_body .zhuce_kong .zc .bj_bai .email{background:url(../images/login/zc_12.jpg) no-repeat 10px 10px;}
    .zhuce_body .zhuce_kong .zc .bj_bai .possword{background:url(../images/login/zc_16.jpg) no-repeat 10px 10px;}
    .zhuce_body .zhuce_kong .zc .bj_bai .yanzm{background:url(../images/login/zc_19.jpg) no-repeat 10px 10px; margin-bottom:0px;}
    
    .zhuce_body .zhuce_kong .zc .bj_bai .hui_kuang{ float:left; width:97px; height:31px; border:1px solid #dddddd;}
    .zhuce_body .zhuce_kong .zc .bj_bai .shuaxin{ float:left; margin:0px 0 0 150px; width:14px; height:14px;}
    .zhuce_body .zhuce_kong .zc .bj_bai div{ float:left; width:100%; line-height:43px;}
    .zhuce_body .zhuce_kong .zc .bj_bai div input{ float:left; margin-top:15px;}
    .zhuce_body .zhuce_kong .zc .bj_bai div span{ padding-left:5px;}
    .zhuce_body .zhuce_kong .zc .bj_bai div .lan{ color:#19aaf8; padding-left:0px;}
    
    
    .zhuce_body .zhuce_kong .zc .bj_right P { width:135px; font:12px/60px ""; color:#999999;}
    .zhuce_body .zhuce_kong .zc .bj_right P a{ color:#37b5f9;}
    .zhuce_body .zhuce_kong .zc .bj_right > a{ float:left; width:82px; height:28px; padding-left:51px; line-height:28px; margin-bottom:12px; border-radius:3px; }
    .zhuce_body .zhuce_kong .zc .bj_right .zhuce_qq{ border:1px solid #37b5f9; color:#37b5f9; background:url(../images/login/zc_03.jpg) no-repeat 28px 7px #fff;}
    .zhuce_body .zhuce_kong .zc .bj_right .zhuce_wb{ border:1px solid #f26d7e; color:#f26d7e; background:url(../images/login/zc_10.jpg) no-repeat 28px 7px #fff;}
    .zhuce_body .zhuce_kong .zc .bj_right .zhuce_wx{ border:1px solid #00c800; color:#00c800; background:url(../images/login/zc_15.jpg) no-repeat 28px 7px #fff;}
    
    /*登录页面*/
    .zhuce_body .login_kuang{ position:absolute; top:50%; left:50%; width:512px; height:325px; margin-left:-256px; margin-top:-162px;}
    .zhuce_body .login_kuang .zc{ width:512px; height:auto;}
    .zhuce_body .login_kuang .zc .bj_bai{ float:left; width:261px; height:256px; padding-left:38px; background:#FFF;}
    .zhuce_body .login_kuang .zc .bj_bai h3{ font:16px/70px "微软雅黑", "黑体"; color:#37b5f9; width:270px; text-align:left;}
    .zhuce_body .login_kuang .zc .bj_right{ float:left;width:173px; height:256px; padding-left:37px; background:#f8f8f8;}
    .zhuce_body .login_kuang .zc .bj_bai .kuang_txt{ width:220px; height:32px; border:1px solid #dddddd; background:#faffbd; line-height:32px; padding-left:4px; color:#b1a9a9;  margin-bottom:10px; }
    .zhuce_body .login_kuang .zc .bj_bai a{ color:#37b5f9; float:right; margin-right:35px;}
    .zhuce_body .login_kuang .zc .bj_bai .btn_zhuce{ width:227px; height:33px; background:#37b5f9; font-size:14px; line-height:33px; text-align:center; border:0px; color:#fff; border-radius:3px; cursor:pointer;}
    .zhuce_body .login_kuang .zc .bj_bai .btn_zhuce:hover,.login_qita_kuang .zc .left .btn_zhuce:hover{ background:#0065d0;}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70]: /images/20220203/2fdbb54d87e6497499763e9b5149d35a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 1]: /images/20220203/1ff4444c3d6c4b5aa9fbe26f671e2a4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 2]: /images/20220203/e03453e341ce47e189edc859840fd2cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 3]: /images/20220203/3ef25e5e5b04489382adb76bf79d01a5.png
[20190509212449408.png]: /images/20220203/3b105f44eb1143a1896e72c13756094f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 4]: /images/20220203/cc7c9c905bdd40438c15c920de88e53d.png
[20190510111929822.png]: /images/20220203/9f8ee2fad1c94171acfb1e3fd8a0c0b8.png