MVC设计模式(JSP实验八)
前言
一、实验题目及要求
第2题 基于MVC模式的用户登录和注册
1 系统模块构成
1.1 会员注册
新会员填写表单,包括会员名、Email地址等信息。如果输入的会员名已经被其他用户注册使用,系统提示新用户更改自己的会员名。(提示:可以将会员名作为主键,根据异常处理完成对会员名冲突的操作。)
1.2 会员登录
输入会员名、密码。如果用户输入的会员名或密码有错误,系统将显示错误信息。
2.实验目的
本实验的目的是熟练掌握MVC的开发模式。
3.实验要求
3.1数据库设计
同学自行选择数据库和访问数据库的方式。数据库中需要建立会员信息表,表的内容包括:会员的注册信息存入member表中,member表的主键是logname,各个字段值的说明如下:(这里的字段名称和格式只是参考,同学可自行设置)
logname :存储会员登录名字
password :存储会员登录密码
phone :存储会员会员的电话
email :存储会员的email地址
message :存储会员的简历
pic :存储会员照片文件的“完整路径及文件名”。
member表的详细结构设计如图2-1。
3.2 页面设计要求
所有的页面将包括一个导航条,该导航条由注册、登录、上传照片、浏览会员、修改密码、修改个人信息组成。为了便于维护,页面通过使用JSP的<%@ include …%>标记将导航条文件:head.txt嵌入自己的页面,head.txt保存在Web服务目录中。head.txt的内容如下:
(这个只做参考,具体可以由同学们自行设计。我们只做会员注册和登录,因此其它的导航功能直接链接到主页index.jsp)
head.txt
<%@ page contentType="text/html;charset=utf-8" %>
<CENTER><Font size=5><P>网络交友</Font></CENTER>
<table cellSpacing="1" cellPadding="1" width="560" align="center" border="0" >
<tr valign="bottom">
<td><A href="register.jsp"><font size=2>会员注册</font></A></td>
<td><A href="login.jsp"><font size=2>会员登录</font></A></td>
<td><A href="index.jsp"><font size=2>上传照片</font></A></td>
<td><A href="index.jsp"><font size=2>浏览会员</font></A></td>
<td><A href="index.jsp"><font size=2>修改注册信息</font></A></td>
<td><A href="index.jsp"><font size=2>修改密码</font></A></td>
<td><A href="index.jsp"><font size=2>退出登录</font></A></td>
<td><A href="index.jsp"><font size=2>返回主页</font></A></td>
</tr>
</Font></table>
3.2.1主页index.jsp:
主页index.jsp由导航条、一个欢迎语和一幅图片welcome.jpg组成。用户可以通过在浏览器的地址栏中键入“http://服务器IP:8080/index.jsp”访问该主页,主页运行效果如图2-2(图中只是为示例显示为交友网站,网站主题可由同学自行设计)。
3.2.2注册页register.jsp和showRegisterMess.jsp:
当新会员注册时,该模块要求用户必须输入会员名、密码信息,否则不允许注册。用户的注册信息被存入数据库的member表中。
该模块的模型Javabean描述用户的注册信息;该模块视图部分由两个JSP页面构成,一个JSP页面负责提交用户的注册信息到控制器,另一个JSP页面负责显示注册是否成功的信息;控制器servlet负责连接数据库,将用户提交的信息写入到member表,并将用户转发到showRegisterMess.jsp页面查看注册反馈信息。。
本模块视图由两个JSP页面:register.jsp和showRegisterMess.jsp。register.jsp页面负责提供输入注册信息界面;showRegisterMess.jsp负责显示注册反馈信息,比如注册是否成功等。
3.2.3登录页register.jsp和showRegisterMess.jsp:
用户可在该模块输入自己的会员名和密码,系统将对会员名和密码进行验证,如果输入用户名或密码有错误,将提示用户输入的用户名或密码不正确。
该模块的模型Javabean描述用户登录的信息;该模块视图部分由两个JSP页面构成,一个JSP页面负责提交用户的登录信息到控制器,另一个JSP页面负责显示登录是否成功的信息;控制器servlet负责连接数据库,查询member表,验证用户输入的会员名和密码是否在member表中,并将用户转发到showRegisterMess.jsp页面查看登录反馈信息。
本模块视图由两个JSP页面:login.jsp和showLoginMess.jsp。login.jsp页面负责提供输入登录信息界面;showLoginMess.jsp负责显示登录反馈信息,比如登录是否成功等。
2.实验代码及效果
实验一
inputData.jsp
代码如下(示例):
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/12/11
Time: 12:55
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<FORM action="computer" Method="post">等差数列求和: <BR>
输入首项:<Input type=text name="firstItem" size=4> 输入公差:<Input type=text name="var" size=4> 求和项数:<Input
type=text name="number" size=4> <Input type=submit value="提交"></FORM>
<FORM action="computer" Method="get">等比数列求和: <BR>
输入首项:<Input type=text name="firstItem" size=4> 输入公比:<Input type=text name="var" size=4> 求和项数:<Input
type=text name="number" size=4> <Input type=submit value="提交"></FORM>
</Font>
</body>
</html>
showResult.jsp
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/12/11
Time: 12:57
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<jsp:useBean id="lie" class="ruochen.shuai.dengbean" scope="request" />
<Table border=1>
<tr>
<th>数列的首项</th>
<th><jsp:getProperty name="lie" property="name" /></th>
<th>所求项数</th>
<th>求和结果</th>
</tr>
<td><jsp:getProperty name="lie" property="firstItem" /></td>
<td><jsp:getProperty name="lie" property="var" /></td>
<td><jsp:getProperty name="lie" property="number" /></td>
<td><jsp:getProperty name="lie" property="sum" /></td>
</tr>
</Table>
</body>
</html>
dengbean.java
package ruochen.shuai;
public class dengbean {
double firstItem; //数列首项
double var; //公差或公比
int number; //求和项数
double sum; //求和结果
String name = ""; //数列类别
public void setFirstItem(double a) {
firstItem = a;
}
public double getFirstItem() {
return firstItem;
}
public void setVar(double b) {
var = b;
}
public double getVar() {
return var;
}
public void setNumber(int n) {
number = n;
}
public double getNumber() {
return number;
}
public void setSum(double s) {
sum = s;
}
public double getSum() {
return sum;
}
public void setName(String na) {
name = na;
}
public String getName() {
return name;
}
}
dengservlet.java
package ruochen.shuai;
import ruochen.shuai.dengbean;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletConfig;
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 java.io.IOException;
@WebServlet("/computer")
public class dengservlet extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
super.init(config);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
dengbean shulie = new dengbean(); //创建Javabean对象
request.setAttribute("lie", shulie);//将shulie存储到HttpServletRequest对象中
double a = Double.parseDouble(request.getParameter("firstItem"));
double d = Double.parseDouble(request.getParameter("var"));
int n = Integer.parseInt(request.getParameter("number"));
shulie.setFirstItem(a); //将数据存储在shulie中
shulie.setVar(d);
shulie.setNumber(n);
//计算和:
double sum = 0, item = a;
int i = 1;
shulie.setName("等差数列的公差");
while (i <= n) //计算等差数列的和
{
sum = sum + item;
i++;
item = item + d;
}
shulie.setSum(sum);
RequestDispatcher dispatcher = request.getRequestDispatcher("showResult.jsp");
dispatcher.forward(request, response); //请求showResult.jsp显示shulie中的数据
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
dengbean shulie = new dengbean();
request.setAttribute("lie", shulie);
double a = Double.parseDouble(request.getParameter("firstItem"));
double d = Double.parseDouble(request.getParameter("var"));
int n = Integer.parseInt(request.getParameter("number"));
shulie.setFirstItem(a);
shulie.setVar(d);
shulie.setNumber(n);
//计算和:
double sum = 0, item = a;
int i = 1;
shulie.setName("等比数列的公比");
while (i <= n) //计算等比数列的和
{
sum = sum + item;
i++;
item = item * d;
}
shulie.setSum(sum);
RequestDispatcher dispatcher = request.getRequestDispatcher("showResult.jsp");
dispatcher.forward(request, response);
}
}
实验效果
实验二
实验代码
index.jsp
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/12/11
Time: 11:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="head.txt"%>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<center><p>欢迎来交友</p><br /><img src="http://5b0988e595225.cdn.sohucs.com/images/20180725/d1bf9de9dd5c48eb9f8a4d18600f5673.jpeg" width="70%"/> </center>
</body>
</html>
register.jsp
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/12/11
Time: 19:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="head.txt"%>
<html>
<head>
<title></title>
</head>
<body>
<div align="center">
<p>输入你的信息:* 为必填项</p>
<form action="jy" Method="post">
<table>
<tr><td>用户名称:</td><td><input type=text name="loginname"> *</td></tr>
<tr><td>用户密码:</td><td><input type=password name="password"> *</td></tr>
<tr><td>电子邮件:</td><td><input type=text name="email"></td></tr>
<tr><td>联系电话:</td><td><input type=text name="phone"></td></tr>
<tr><td>输入您交友标准:</td> <td><textarea name="message"></textarea> </td></tr>
</table>
<input type=submit value="注册">
</form>
</div>
</body>
</html>
showRegister.jsp
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/12/11
Time: 19:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="head.txt"%>
<html>
<head>
<title>Title</title>
</head>
<body>
<jsp:useBean id="reg" class="ruochen.shuai.jybean" scope="request" />
<div align="center">
<p>注册成功</p>
<table>
<tr><td>注册用户名称:</td><td><jsp:getProperty name="reg" property="loginname" /></td></tr>
<tr><td>注册电子邮件:</td><td><jsp:getProperty name="reg" property="email" /></td></tr>
<tr><td>注册联系电话:</td><td><jsp:getProperty name="reg" property="phone" /></td></tr>
<tr><td>您的交友标准:</td><td><textarea><jsp:getProperty name="reg" property="message" /></textarea> </td></tr>
</table>
</div>
</body>
</body>
</html>
login.jsp
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/11/26
Time: 22:12
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="head.txt"%>
<html>
<head>
<title >用户注册</title>
<style>
.account {
width: 400px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #f0f0f0;
padding: 10px 30px 30px 30px;
-webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
}
.account .form-group {
margin-bottom: 20px;
}
</style>
</head>
<body>
<pre>
<div class="account">
<form class="form-group" action="ser" method="post">
<img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo1.png">会员登录
<div class="form-group">
用户名:<input type="text" name="username" /><br>
密 码:<input type="password" name="password"/>
</div>
<input type="submit" value="登录" />
</form>
</div>
</pre>
</body>
</html>
showLogin.jsp
<%--
Created by IntelliJ IDEA.
User: ruochen
Date: 2020/12/11
Time: 19:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="head.txt"%>
<html>
<head>
<title>Title</title>
</head>
<body>
<div align="center">
<h2>登录成功</h2><br>
<% String name = (String) session.getAttribute("name");%>
<h3>欢迎你! <%=name%></h3>
</div>
</body>
</body>
</html>
loginservlet.java
package ruochen.shuai;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.*;
@WebServlet(
urlPatterns = { "/ser" },
initParams = {
@WebInitParam(name = "db_name", value = "myjdbc"),
@WebInitParam(name = "tb_name", value = "user"),
@WebInitParam(name = "password", value = "")
}
)
public class loginservlet extends HttpServlet {
private String db_name;
private String tb_name;
private String pass_word;
public void init() throws ServletException {
db_name = getInitParameter("db_name");
tb_name = getInitParameter("tb_name");
pass_word = getInitParameter("password");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = request.getParameter("username");
String password = request.getParameter("password");
HttpSession session = request.getSession();
session.setAttribute("name",username);
try {
Class.forName("com.mysql.cj.jdbc.Driver");
}
catch (Exception e){}
Connection con;
Statement sql;
ResultSet rs;
try{
String uri = "jdbc:mysql://127.0.0.1/"+db_name+"?"+ "user=root&password="+pass_word+"&characterEncoding=UTF-8&serverTimezone=GMT";
con = DriverManager.getConnection(uri);
sql=con.createStatement();
rs=sql.executeQuery("select * from friend where loginname=" + "'" + username + "'" + "and password='" + password + "'");
if (rs.next()) {
System.out.println("success");
response.sendRedirect("showLogin.jsp");
return;
} else {
response.sendRedirect("login.jsp");
System.out.println("error");
}
sql.close();
con.close();
}
catch(SQLException e){
}
}
}
jyservlet.java
package ruochen.shuai;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import static java.sql.ResultSet.CONCUR_READ_ONLY;
import static java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE;
@WebServlet(
urlPatterns = { "/jy" },
initParams = {
@WebInitParam(name = "db_name", value = "myjdbc"),
@WebInitParam(name = "tb_name", value = "friend"),
}
)
public class jyservlet extends HttpServlet {
private String db_name;
private String tb_name;
public void init() throws ServletException {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
}
catch (Exception e){}
db_name = getInitParameter("db_name");
tb_name = getInitParameter("tb_name");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
String loginname = request.getParameter("loginname");
String password = request.getParameter("password");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
String message = request.getParameter("message");
jybean jy = new jybean();
request.setAttribute("reg", jy);
jy.setLoginname(loginname);
jy.setPassword(password);
jy.setEmail(email);
jy.setPhone(phone);
jy.setMessage(message);
try{
String condition=String.format("insert into friend values('%s','%s','%s','%s','%s')",loginname,password,email,phone,message);
String uri = "jdbc:mysql://127.0.0.1/"+db_name+"?"+ "user=root&password=THb906105&characterEncoding=UTF-8&serverTimezone=GMT";
Connection con = DriverManager.getConnection(uri);
Statement sql = con.createStatement(TYPE_SCROLL_INSENSITIVE,CONCUR_READ_ONLY);
sql.executeUpdate(condition);
sql.close();
con.close();
}
catch(SQLException e){
System.out.println("失败了");
}
RequestDispatcher dispatcher = request.getRequestDispatcher("showRegister.jsp");
dispatcher.forward(request, response);
}
}
jybean.java
package ruochen.shuai;
public class jybean {
String loginname, password, email, message,phone;
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getLoginname() {
return loginname;
}
public void setLoginname(String loginname) {
this.loginname = loginname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
实验效果