Myeclipse连接MySql数据库实现登录界面的制作（全过程）

毕业设计选题选的是B/S的系统，决定用Myeclipse+MySql来做，本人小白一枚，前段时间自学了java web的知识，目前已经做出来了登录功能及系统的主界面，接下来就是在主界面对数据库增删改查了。之前做登录界面的时候数据库连接不上，看了好多博客东拼西凑不断学习试探完成了登录功能，在此详细说明一下Myeclipse与数据库连接及登录界面的制作。
1.首先进行Myeclipse与Mysql的连接，先打开Mysql建好数据库表，如下图所示：
Myeclipse2017连接MySql数据库实现登录界面的制作（全过程）
其中myproject为数据库名，user和user2为建立的表名
2.打开Myeclipse2017，在上方菜单栏中点击窗口->显示视图->其他，出现如下搜索框，搜索DB，点击DB Browser，出现如下界面（没有建立过连接的同学DB Browser显示空白的，我之前建立过现在显示出了已有连接）
Myeclipse2017连接MySql数据库实现登录界面的制作（全过程）

3.在上图空白处鼠标右键单击，再鼠标单击左键选择new，就会出现数据库连接的界面，如下图（我已经配置好了）：

Driver template选择MySql Connector/J，Driver name就是你建立数据库连接的名字，随便取一个，Connection URL是你数据库的地址，User name和Password是进入Mysql数据库的用户名和密码。
下面Driver JARs这里需要你先下载Mysql的一个驱动包，点击Add JARs把里面-bin.jar文件添加进去（这个网上搜索有下载的地址，不想自己下载的也可以评论区找我要）
Myeclipse2017连接MySql数据库实现登录界面的制作（全过程）
Driver classname输入com.mysql.jdbc.Driver，点击Text Driver，如果连接成功会出现如下提示

点击完成myeclipse与mysql的连接就算完成了
在DB Browser页面鼠标右键单击你刚建立的连接，在单击第一项开启连接，连接就开启了
4.下面说一下登录界面的制作，在myeclipse新建web工程，新建项目列表展开如下图
首先要做的第一步，打开WebRoot文件夹下的WEB-INF文件夹，里面有个lib文件夹，这时要把刚才建立数据库连接时添加进入的jar文件复制，再粘贴进lib文件夹里（不然不能进行数据库操作）
Myeclipse2017连接MySql数据库实现登录界面的制作（全过程）
5.完成之后我们就要在index.jsp里编写登录界面的代码
index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">   
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="muen.js"></script>	
 
  </head> 
  <body>
     
	 <center>
	    <br><br><br><br><br>
		<font face="楷体" size="6" color="#000">项目研发信息管理系统</font>
		<br><br><br><br>
		<form action="CheckIndex.jsp" action="success.jsp" method="post" name="frmIndex">
			<table width="380" height="240" border="5" bordercolor="#A0A0A0">
				<tr>
					<th>用户名：</th>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="username" style="width:180px; height:30px;" value=""
						maxlength="16"
						onfocus="if(this.value == '') this.value =''"></td>
				</tr>
				<tr>
					<th>密  码：</th>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="password" style="width:180px; height:30px;" value=""
						maxlength="20" onfocus="if(this.value == '') this.value =''"></td>
				</tr>
				<tr>					
					<td colspan="2" align="center">
						<input type="submit" value="登录" style="background-color: #84C1FF;height:40px;width:80px"	onclick="return validateindex();"/> 
						<input type="button"value="注 册" style="background-color: #80FFFF;height:40px;width:80px"   onclick="window.open('xuanze.jsp')"> 
						<input type="reset" value="重  置" style="background-color: #1AF09C;height:40px;width:80px">
					</td>
				</tr>
			</table>
		</form><!-- window.open('register.jsp') -->
	</center>
  </body>
</html>

muen.js文件代码如下（创建一个js文件，里面定义了网页行为，比如登录时用户名密码不能为空）

function validateindex() 
	{
		var uName = document.frmIndex.username.value;
		var pswd = document.frmIndex.password.value;		 		
		if (uName == "") {
			alert("请输入用户名！");
			return false;
		}	 		
		if (pswd == "") {
			alert("请输入密码！");
			return false;
		}
		return true;			
	}

此时还需要一个CheckIndex.jsp页面，用户点击登陆后跳转到此页面，用来检查此用户是否在后台数据库里，如果在则登陆成功，如果不在则登录失败。
CheckIndex.jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'CheckIndex.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
  
<%
     String username=new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");
	 String password=new String(request.getParameter("password").getBytes("ISO-8859-1"),"utf-8");
	 String driverName="com.mysql.jdbc.Driver";
	 String userName="root";
	 String psw="19961014";
	 String dbName="myproject";	 
     String url="jdbc:mysql://localhost:3306/myproject?serverTimezone=UTC";
	 Class.forName("com.mysql.jdbc.Driver");	 
	 Connection conn=DriverManager.getConnection(url,userName,psw); ;
		
	 String sql="select * from user where name='"+username+"' and password='"+password+"'";
	 out.println("sql="+sql);
	 Statement stmt=conn.createStatement();
	 ResultSet rs=stmt.executeQuery(sql);
	 if(rs.next())
	 {		 
		 response.sendRedirect("success.jsp");			
	 }
	 else
	 {	   
	     out.print("<script language='javascript'>alert('用户名或密码错误,登录失败！');window.location.href='index.jsp';</script>");			 			 			 
	 }
%>    
  </body>
</html>

body里面就是获取登录人用户名与密码，再连接数据库，再查询登录人信息是否在数据库中，success.jsp是系统主界面，如果登陆成功就会进入
6.程序演示
Myeclipse2017连接MySql数据库实现登录界面的制作（全过程）
后续随着毕业设计的进行，会再更新遇到的困难是怎么解决的，坚持养成写博客的习惯

秒客网

Myeclipse连接MySql数据库实现登录界面的制作（全过程）

相关文章