JSP学习并实现的过程--day03

最新推荐文章于 2021-04-14 16:27:31 发布

小疯子青

最新推荐文章于 2021-04-14 16:27:31 发布

阅读量230

点赞数 1

分类专栏： Tomcat学习实践过程记录

本文链接：https://blog.csdn.net/a1773570500/article/details/104668877

版权

Tomcat学习实践过程记录专栏收录该内容

57 篇文章 2 订阅

订阅专栏

一、今日任务

今天的主要任务是两个：
1.在虚拟主机上部署昨天的代码；
2.注册页面美工；
3.把昨天没有完成servlet内容学完。

二、在虚拟主机上部署昨天的代码

1.在虚拟机上安装数据库，并完成建数据库和建表；
数据库安装参考网址：数据库安装
注意：在重置密码的时候，重置密码输入语句ALTER user ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY '123456’中的WITH mysql_native_password一定要，否则即使成功了后面连接navicat也会报错，报错信息为：MYSQL：ER_NOT_SUPPORTED_AUTH_MODE:Client does not support authentication protocol

安装可视化工具：安装链接

2.直接把所有代码复制到虚拟机上面（也许还有更好的部署方法，今天暂时不去考虑)
测试运行是可以的。

三、页面美工

1.设计用户注册信息

设计用户信息表如下：

CREATE TABLE `user_info` (
  `username` text CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
  `emailaddr` text CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
  `password` text CHARACTER SET utf8 COLLATE utf8_general_ci ,
  `oldpassword` text CHARACTER SET utf8 COLLATE utf8_general_ci ,
  `loginip` text CHARACTER SET utf8 COLLATE utf8_general_ci ,
  `loginoldip` text CHARACTER SET utf8 COLLATE utf8_general_ci,
  `logintime` text CHARACTER SET utf8 COLLATE utf8_general_ci,
  `loginoldtime` text CHARACTER SET utf8 COLLATE utf8_general_ci,
  `sex` text CHARACTER SET utf8 COLLATE utf8_general_ci,
  PRIMARY KEY (`username`(20),`emailaddr`(40))
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

设计用户注册页面。

<%@ page contentType="text/html;charset=GBK" errorPage="error.jsp" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta name=keywords content=小游戏,little game,心理游戏,心理提升>
 <meta name=description
  content=这是心理学爱好者自编的网页，目前还在编写阶段，欢迎试用>
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>登录页面</title>
 <link rel="icon" href="../img/label.png" >
 <link rel="stylesheet" href="../styles/bootstrap.min.css">
    <link rel="stylesheet" href="../styles/questionnaire.css">
    <link rel="stylesheet" href="../styles/sui.css">
</head>
<body>
 <div class="sui-full-size sui-flex sui-flex-column">
  <div class="sui-full-width scroll-y">
   <div style="padding-bottom: 1rem;" align="center">
                <img align="center" style="height: 2.5rem;" src="../img/first.png" alt="心理提升">
            </div>
   <section class="input-section" style="padding-top: 1rem;" >
    <div class="alert alert-warning" style="font-weight: bold; text-align:center;">
                    填写注册信息
                </div> 
   </section>
   <section class="input-section" id="question">
    <div class="form-group">
                    <label for="user_name">用户名</label>
                    <input type="text" class="form-control" id="user_name" placeholder="请输入唯一用户名">
                </div>
    <div class="form-group">
                    <label for="user_password">密码</label>
                    <input type="password" class="form-control" id="user_password" placeholder="请输入密码">
                </div>
    <div class="form-group">
                    <label for="user_password2">确认密码</label>
                    <input type="password" class="form-control" id="user_password2" placeholder="请再次输入密码，确保和第一次一致">
                </div>
    <div class="form-group">
                    <label for="user_email">邮箱</label>
                    <input type="text" class="form-control" id="user_email" placeholder="请输入您的邮箱地址">
                </div>
    <div class="form-group" id="user_sex" style=" ">
                    <label>请选择您的性别</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="user_sex" value="0" checked>
                        <label class="form-check-label">女</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="user_sex" value="1">
                        <label class="form-check-label">男</label>
                    </div>
                </div>
    <button type="button" class="btn btn-primary btn-lg btn-block" id="submit">提交</button>
    <button type="button" class="btn btn-primary btn-lg btn-block" id="cancel">取消</button>
   </section>
  </div>
 </div>
 <script src="../js/registered.js"></script>
</body>
</html>

页面展示效果如下：
在这里插入图片描述
本来想完成注册功能的，但是发现注册的提交不是表单提交，明天研究一下如何提交。

三、Servlet相关知识学习

1.访问Servlet的配置参数

两种配置方式：

①@WebServlet的initParams属性来指定

示例：

 @WebServlet(name="testServlet",
 			urlpatterns={"/testServlet"},
 			initParamas={@WebInitParam(name="driver",value="com.mysql.jdbc.Driver"),										 
 				@WebInitParam(name="url",value="jdbc:mysql://localhost:3306/javaee"),
				@WebInitParam(name="user",value="root"),
 				@WebInitParam(name="pass",value="32147")})

②在web.xml文件的<servlet…/>元素中添加<init-param…/>子元素来指定

<servlet>
   <servlet-name>connServlet</servlet-name>
   <servlet-class>lee.connServlet</servlet-class>
   <init-param>
   	<param-name>pass</param-name>
   	<param-value>？？？？？</param-value>
   </init-param>
   <init-param>
   	<param-name>driver</param-name>
   	<param-value>com.mysql.jdbc.Driver</param-value>
   </init-param>
   <init-param>
   	<param-name>url</param-name>
   	<param-value>jdbc:mysql://localhost:3306/？？？？?serverTimezone=GMT</param-value>
   </init-param>
   <init-param>
   	<param-name>user</param-name>
   	<param-value>root</param-value>
   </init-param>
</servlet>
<servlet-mapping>
   <servlet-name>connServlet</servlet-name>
   <url-pattern>/coonServlet</url-pattern>
</servlet-mapping>

获取参数的方法：

ServletConfig config=getServletConfig();

ServletConfig 中的方法获得参数：

 java.lang.String getInitParameter(java.lang.String name)

2.使用简单的MVC实现页面的登录

利用上面只是实现简单的MVC。
M：Model,即模型，对应JavaBean;
V：View,即试图，对应JSP页面；
C：Controlller，即控制器，对应Servlet.

JavaBean代码如下，用于实现对数据库的操作：

package Dao;

import java.sql.*;

public class FirstDao {
	private Connection conn;
	private String driver;
	private String url;
	private String user;
	private String pass;

	public FirstDao() {
		super();
	}

	public FirstDao(String driver, String url, String user, String pass) {
		super();
		this.driver = driver;
		this.url = url;
		this.user = user;
		this.pass = pass;
	}
	//获取数据库连接
	public Connection getConnection() throws Exception
	{
		if(conn==null)
		{
			Class.forName(this.driver);
			conn=DriverManager.getConnection(url,user,this.pass);	
		}
		return conn;
	}
	//关闭数据库连接
	public void closeConn() throws Exception
	{
		if(conn!=null&&!conn.isClosed())
		{
			conn.close();
		}
	}
	//插入记录
	public boolean insert(String sql,Object... args) throws Exception
	{
		PreparedStatement pstmt=getConnection().prepareStatement(sql);
		for(int i=0;i<args.length;i++)
		{
			pstmt.setObject(i+1,args[i]);
		}
		if(pstmt.executeUpdate()!=1)
		{
			return false;
		}
		return false;
	}
	//执行修改
	public void modify(String sql,Object... args) throws Exception
	{
		PreparedStatement pstmt=getConnection().prepareStatement(sql);
		for(int i=0;i<args.length;i++)
		{
			pstmt.setObject(i+1, args[i]);
		}
		pstmt.executeUpdate();
		pstmt.close();
	}
	//执行查询
	public ResultSet query(String sql,Object... args) throws Exception
	{
		PreparedStatement pstmt=getConnection().prepareStatement(sql);
		for(int i=0;i<args.length;i++)
		{
			pstmt.setObject(i+1,args[i]);
		}
		return pstmt.executeQuery();
	}
}

JSP页面代码如下：

<%@ page contentType="text/html;charset=GBK" errorPage="error.jsp" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
					"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name=keywords content=小游戏,little game,心理游戏,心理提升>
	<meta name=description
		content=这是心理学爱好者自编的网页，目前还在编写阶段，欢迎试用>
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录页面</title>
	<link rel="icon" href="../img/label.png" >
	<link rel="stylesheet" href="../styles/sui.css">
	<link rel="stylesheet" href="../styles/bootstrap.min.css">
</head>
<body>
	<div class="sui-full-size sui-flex sui-flex-column">
		<div class="sui-full-width scroll-y">
				<div style="padding-bottom: 1rem;" align="center">
                    <img align="center" style="height: 2.5rem;" src="./img/first.png" alt="心理提升">
                </div>
				<div style="color:red;" align="center">
				<%if(request.getAttribute("err")!=null)
				{
					out.println(request.getAttribute("err")+"<br/>");
				}
				%>
				</div>
				<form align="center" id="login" method="post" action="/webDemo_sit/firstServlet">
					<table align="center">
						<tr> 
							<td>用户名：</td>
							<td><input type="text" name="username"></td>
						</tr>
						<tr>
							<td>密&nbsp&nbsp&nbsp码：</td>
							<td><input type="password" name="password"></td>
						</tr>
						<tr align="center">
							<td colspan="2"><input type="reset" value="重置" name="reset">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="submit" value="登录"></td>
							<td><p align="center"><a href="jsp/registered.jsp" color=blue>注册</a></p></td>
						</tr>
					</table>
				</form>
		</div>
	</div>
</body>
</html>

Servlet代码如下。

package lee;
import Dao.FirstDao;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import java.util.Date;
import javax.servlet.http.HttpServlet;
import javax.servlet.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FirstServlet extends HttpServlet
{	
	public void service(HttpServletRequest request,
						HttpServletResponse response)
	{
		ServletConfig config;
		String driver;
		String url;
		String user;
		String pass;
		String username;
		String password;
		User userSessionTemp;
		RequestDispatcher rd;
		String errMsg="";
		
		config=getServletConfig();
		driver=config.getInitParameter("driver");
		url=config.getInitParameter("url");
		user=config.getInitParameter("user");
		pass=config.getInitParameter("pass");
		FirstDao f=new FirstDao(driver,url,user,pass);
		try {
			request.setCharacterEncoding("GBK");
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		username=request.getParameter("username");
		password=request.getParameter("password");
		
		String ip=request.getRemoteAddr();
		SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
		String time=df.format(new Date());
		
		try {
			ResultSet rs=f.query("select password from user_info where username=?", username);
			if(rs.next())
			{
				if(rs.getString("password").equals(password))
				{
					userSessionTemp=new User(username,password);
					userSessionTemp.setUsername(username);
					userSessionTemp.setPassword(password);
					request.getSession().setAttribute("regUser", userSessionTemp);	
					request.getSession().setAttribute("ip", ip);	
					request.getSession().setAttribute("time", time);	
					rd=request.getRequestDispatcher("jsp/temp.jsp");
					rd.forward(request,response);
					try {
						f.modify("Update user_info Set loginip = ?,logintime=? Where username = ?", ip,time,username);
						
					} catch (Exception e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
				}
				else
				{
					errMsg +="您的用户名密码不正确，请重新输入";
				}
			}
			else
			{
				errMsg+="您的用户名不存在，请联系管理员";
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		if(errMsg!=null&& !errMsg.equals(""))
		{
			rd=request.getRequestDispatcher("/jsp/login.jsp");
			request.setAttribute("err", errMsg);
			try {
				rd.forward(request, response);
			} catch (ServletException | IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
}

访问Servlet的配置参数采用的是再Web.xml中配置的方式进行的，配置信息如下：

<servlet>
	<servlet-name>firstServlet</servlet-name>
	<servlet-class>lee.FirstServlet</servlet-class>
	<init-param>
		<param-name>pass</param-name>
		<param-value>*******</param-value>
	</init-param>
	<init-param>
		<param-name>driver</param-name>
		<param-value>com.mysql.cj.jdbc.Driver</param-value>
	</init-param>
	<init-param>
		<param-name>url</param-name>
		<param-value>jdbc:mysql://localhost:3306/webdemo?serverTimezone=GMT</param-value>
	</init-param>
	<init-param>
		<param-name>user</param-name>
		<param-value>****</param-value>
	</init-param>
</servlet>
<servlet-mapping>
	<servlet-name>firstServlet</servlet-name>
	<url-pattern>/firstServlet</url-pattern>
</servlet-mapping>

运行结果如下所示。
1.出错登录
在这里插入图片描述
2.正常登录如下：

查看数据库数据正确插入。
坑点：servlet重定向到jsp后，css样式和图片都没了(原解决连接)。
解决办法：
解决办法：导入css样式和图片时把css写成动态绝对路径，
如用EL表达式表示：

<a href="index.jsp"><img src="${pageContext.request.contextPath }/images/logo.gif"*

四、明日任务

1.完成注册页面的注册功能；
2.学习jsp其他知识。

小疯子青

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSP学习并实现的过程--day03

一、今日任务今天的主要任务是两个：1.在虚拟主机上部署昨天的代码；2.实现注册页面；3.把昨天没有完成servlet内容学完。二、在虚拟主机上部署昨天的代码1.在虚拟机上安装数据库，并完成建数据库和建表；数据库安装参考网址：数据库安装注意：在重置密码的时候，重置密码输入语句ALTER user ‘root’@‘localhost’ IDENTIFIED WITH mysql_nat...
复制链接

扫一扫