做网站开发,要求有多种搭配方式,前台技术可以使用PHP、ASP、JSP、ASP.NET、CGI等任何一种; 需要用到的基础语言用的最多的就是HTML/CSS、JS、JAVA、XML这些了,HTML/CSS+JS可以实现对界面的描绘渲染,而JAVA则可以做后台数据处理,XML也是可以当作传输数据的介质(思考:XML比HTML强大这么多,为什么它没能替代HTML?); 这篇文章通过简单的JSP文件实现登陆界面,所以只用到了以下技术:
项目中用到多种HTML标签,例如<input>、<form>、<table>等,项目文件均采用.JSP文件,如果有遇到标签属性不理解的状况请自行百度(不需要死记硬背,用的多了自然便可记住); 里面用到的内置对象以及JDBC模块本人也是知之甚少,如有用到(如:response)而且解释有误望朋友批评指正哦! 本项目中所用工具如下:
也可以尝试其他数据库和工具哦!下面进入项目
需要先配置jdk环境变量并且安装Tomcat,可能需要制定jre目录,这里一般都是自动检测出来的,前往不要当作tomcat安装目录给更改了,保持默认下一步才是选择安装目录,安装完毕之后的Tomcat目录是不能随便移动或更名的,否则严重影响Tomcat服务开启失败。
打开eclipse,根据下面链接配置server项即可,注意选择Tomcat版本的时候请根据自己的版本适当调整,我总是会看到有人装的是Tomcat9.0却当低版本用,让人无语的很,有时eclipse版本不同可能界面有所区别,请自行甄别。
百度经验:【查看】
打开eclipse,创建动态web项目【Dynamic Web Project】,输入名称后点击【完成】,项目目录结构大概是这个样子的:
目录WebRoot是网站的根目录,我们创建的页面文件都要放在这个目录下面才能正确被Tomcat加载并显示出来,WEB-INF目录中的lib目录用来存放此项目中用到的jar包,在这里用到了三个jar文件,就是上面下载的JDBC驱动包和jstl包,复制到lib中,并且添加到build path:右键jar包-build path-add to build path。
文件内容如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="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">
<title>用户登陆</title>
</head>
<body>
<h2 align="center">快速登录</h2>
<form name="form1" action="login_validate.jsp" method="post">
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" name="username1" value="${param.username1}"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password1"></td>
</tr>
<tr>
<td><input type="submit" value="登陆"></td>
<td><input type="reset" value="取消"></td>
</tr>
</table>
</form>
</body>
</html>
第1行:<%@ page%>指令作用于整个jsp页面,指定jsp页面脚本语言用的是"java",文本类型为“富文本”,编码方式为“UTF-8”;
第2行:引用了标准标签库JSTL,并设置前缀为fmt;
第3行:<fmt:requestEncoding>标签用来指定返回给Web应用程序的表单编码类型,如果不这么做的话很有可能让我们提交的数据传到下一个页面的时候就变成了乱码,具体请参见【菜鸟教程】;
第4行:加入HTML4的DTD约束,这么做将会使一些HTML5的东西出现警告!可以删掉,这是自动生成的;
第8行:设置页面标题“登陆界面”;
第12行:二级标题“快速登陆”,对齐方式“居中”,一共有6级标题(h1-h6);
第13行:form表单,名称为“form1”,提交表单后执行的动作是跳转到“login_validate.jsp”且将数据提交给这个页面做验证处理,以“post”方式提交;
第15行:写一个table表,tr构建一行,td构建一列;包含了文本框、密码框、提交按钮以及重置按钮;
第18行:文本框“username1”,用来输入用户名,他的值取上一个页面提交到此页面的“username1”元素。如果用户登录不成功会提示你重新登陆,此时点击重新登录的话,回到此页面的时候是记忆了上次输入的用户名;
文件内容如下:
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="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">
<title>验证页面</title>
</head>
<body>
<%
//获取登录时提交的用户名密码,web
String id = request.getParameter("username1");
String pwd = request.getParameter("password1");
request.setAttribute("username1",id);
/* 解决问题,先要研究问题,URL传中文参数为什么会出现乱码?
原因:Http请求传输时将url以ISO-8859-1编码,服务器收到字节流后默认会以ISO-8859-1编码来解码成字符流(造成中文乱码)
解决办法:我们需要把request.getParameter(“参数名”)获取到的字符串先用ISO-8859-1编码成字节流,然后再将其用utf-8解码成字符流 */
String driver = "com.mysql.jdbc.Driver";
//URL指向要访问的数据库名test1
String url = "jdbc:mysql://127.0.0.1:3306/javaweb?characterEncoding=utf8&useSSL=false";
//MySQL配置时的用户名
String user = "root";
//Java连接MySQL配置时的密码
String password = "root";
try {
//1 加载驱动程序
Class.forName(driver);
//2 连接数据库
Connection conn = DriverManager.getConnection(url, user, password);
//3 用来执行SQL语句
Statement statement = conn.createStatement();
//要执行的SQL语句
String sql = "select * from login";
ResultSet rs = statement.executeQuery(sql);
String u = null;
String p = null;
while(rs.next()) {
u = rs.getString("userName");
p = rs.getString("passWord");
if(u.equals(id) && p.equals(pwd)) {
String index="index.jsp?username1="+URLEncoder.encode(id,"utf-8");
out.println("登陆成功!5s后跳转跳转到<a href="+index+">首页</a>");
response.addHeader ("refresh", "5;URL=index.jsp?username1="+URLEncoder.encode(id,"utf-8"));
//response.sendRedirect("index.jsp?username1="+URLEncoder.encode(id,"utf-8"));
rs.close();
conn.close();
return;
}
}
rs.close();
conn.close();
out.println("用户名或密码错误!");
} catch (ClassNotFoundException e) {
System.out.println("Sorry,can`t find the Driver!");
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
%>
<form>
<input type="hidden" name="username1" value="${param.username1}">
<input type="button" value="重新登陆" onclick="this.form.action='login.jsp';this.form.submit();">
</form>
</body>
</html>
还是直接上代码:
<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="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">
<title>首页</title>
</head>
<body>
<center>
<font size=14 style="font-weight:bold">
亲爱的 <% out.println(URLDecoder.decode(request.getParameter("username1"), "utf-8")); %> ,你好!
</font>
</center>
</body>
</html>
内容简单的很,就一个显示用户名的效果,<%%>中间可以嵌入java代码,对上一页面传来的参数username1进行解码输出。
到此为止,所有代码已经输入完毕!
选择在Tomcat中运行login.jsp即可在浏览器中显示效果。在这里我再附上我的数据库结构:
使用SQLlog连接数据库后可以查看自己的数据库详细信息。
由于课程紧张,时间不是很充裕,不过我想关于“软件工程”的作业我会积极去做,平均每日一个小时写代码是少不了的,偷偷的看了一下前端工程师面试的标准,发现自己差得很多,所以不多说,干吧!
公告:可能是由于博客发表转换成html的问题,文章中的</body></html>标签不可显示,请复制代码的童鞋自动加上;而且代码中的<tbody></tbody>标签也是自动出现的,请自行去除!