一、前言：

做网站开发，要求有多种搭配方式，前台技术可以使用PHP、ASP、JSP、ASP.NET、CGI等任何一种；

需要用到的基础语言用的最多的就是HTML/CSS、JS、JAVA、XML这些了，HTML/CSS+JS可以实现对界面的描绘渲染，而JAVA则可以做后台数据处理，XML也是可以当作传输数据的介质（思考：XML比HTML强大这么多，为什么它没能替代HTML？）；

这篇文章通过简单的JSP文件实现登陆界面，所以只用到了以下技术：

  1. HTML/CSS，简单演示就不做CSS样式了，可自行学习，改进源代码

  2. JavaScript

  3. MYSQL使用（借助可视化窗口即可）

  4. JDBC连接数据库

  5. (前往w3c/菜鸟教程学习吧)

项目中用到多种HTML标签，例如<input>、<form>、<table>等，项目文件均采用.JSP文件，如果有遇到标签属性不理解的状况请自行百度（不需要死记硬背，用的多了自然便可记住）；

里面用到的内置对象以及JDBC模块本人也是知之甚少，如有用到（如：response）而且解释有误望朋友批评指正哦！

本项目中所用工具如下：

  1. Myeclipse/eclipse(J2EE版本)

  2. MYSQL5.7+SQLyog

  3. MYSQL的JDBC驱动包（点击下载）

  4. JSTL库（点击下载）

  5. chrome/IE（F12键）

  6. Tomcat9.0

  7. jdk1.8

也可以尝试其他数据库和工具哦！下面进入项目

二、配置Tomcat服务器

需要先配置jdk环境变量并且安装Tomcat，可能需要制定jre目录，这里一般都是自动检测出来的，前往不要当作tomcat安装目录给更改了，保持默认下一步才是选择安装目录，安装完毕之后的Tomcat目录是不能随便移动或更名的，否则严重影响Tomcat服务开启失败。

打开eclipse，根据下面链接配置server项即可，注意选择Tomcat版本的时候请根据自己的版本适当调整，我总是会看到有人装的是Tomcat9.0却当低版本用，让人无语的很，有时eclipse版本不同可能界面有所区别，请自行甄别。

百度经验：【查看】

三、创建项目firstproject

打开eclipse，创建动态web项目【Dynamic Web Project】，输入名称后点击【完成】，项目目录结构大概是这个样子的：

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

 

目录WebRoot是网站的根目录，我们创建的页面文件都要放在这个目录下面才能正确被Tomcat加载并显示出来，WEB-INF目录中的lib目录用来存放此项目中用到的jar包，在这里用到了三个jar文件，就是上面下载的JDBC驱动包和jstl包，复制到lib中，并且添加到build path：右键jar包-build path-add to build path。

四、登陆页面login.jsp

文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<%@ 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"></fmt:requestencoding>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登陆</title>
 
 
 
<h2 align="center">快速登录</h2>
<form name="form1" action="login_validate.jsp" method="post">
 
<table align="center">
<tbody><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>
</tbody></table>
</form>

第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”元素。如果用户登录不成功会提示你重新登陆，此时点击重新登录的话，回到此页面的时候是记忆了上次输入的用户名；

五、登陆验证页面login_validate.jsp

文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@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"></fmt:requestencoding>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证页面</title>
 
 
<%
 
//获取登录时提交的用户名密码,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>

说明：

  1. 这里用到了JDBC驱动包记得导入；

  2. user和password适当地更改为自己地MYSQL系统地用户名密码；

  3. 字符串url中地”javaweb“是我新建的数据库名称，编码方式为UTF-8，“useSSL=false”不加的话可能会导致连接数据库的时候提示需要ssl认证而连接失败。

  4. 字符串sql中的login是javaweb中的一个表名，里面存放了两个属性userName和passWord，根据自己的实际适当更改。

  5. 我用的while循环来判断此用户是否在login表中，也可以直接用“select * from login where userName=id and passWord=pwd”语句直接查找能与id和pwd同时匹配的条目。

  6. request是jsp的内置对象，使用它的getParameter()函数可以获得提交页面提交上来的信息，“username1”和“password1”是login.jsp中form表单中text和password框的对应的id号，点击submit按钮可以提交给action属性指定的页面处理。

  7. 86-89行写了一个form表单属性，$(param.username1)也可以获取username1的值，为了在重新登录的时候保留用户名，将它存在input里面，type="hidden"可以使它隐藏。按钮button的onclick属性指定点击按钮执行的动作。

  8. 如果登陆成功，会有一个等待时间来跳转到主页，

    response.addHeader ("refresh", "5;URL=index.jsp?username1="+URLEncoder.encode(id,"utf-8"));

    使用此方法可以设置页面定时刷新以及重定向，URL后面直到问号即为重定向位置，？之后将id编码后赋值给username1传递到index.jsp页面，编码是必须的，否则会遇到中文乱码。（相关内容1|相关内容2）

  9. 数据库使用完之后记得断开连接；

六、主页index.jsp

还是直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@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"></fmt:requestencoding>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
 
 
<center>
<font size="14" style="font-weight:bold">
亲爱的  <% out.println(URLDecoder.decode(request.getParameter("username1"), "utf-8")); %> ，你好！
</font>
</center>

内容简单的很，就一个显示用户名的效果，<%%>中间可以嵌入java代码，对上一页面传来的参数username1进行解码输出。

到此为止，所有代码已经输入完毕！

选择在Tomcat中运行login.jsp即可在浏览器中显示效果。在这里我再附上我的数据库结构：

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

使用SQLlog连接数据库后可以查看自己的数据库详细信息。

七、学习时间安排

由于课程紧张，时间不是很充裕，不过我想关于“软件工程”的作业我会积极去做，平均每日一个小时写代码是少不了的，偷偷的看了一下前端工程师面试的标准，发现自己差得很多，所以不多说，干吧！

 

 

 

公告：可能是由于博客发表转换成html的问题，文章中的</body></html>标签不可显示，请复制代码的童鞋自动加上；而且代码中的<tbody></tbody>标签也是自动出现的，请自行去除！


延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式