Java Web入门项目之“网络交友”的设计与实现

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介:

一 项目开发环境以及主要视图

1 开发环境:

本项目采用了最基本的JSP MVC模式(javabean+jsp+servlet)开发,数据库使用了MySQL,JDBC连接采用了JNDI连接池。除此之外,代码开发用了JDK1.8+tomcat8+eclipse for javaee,编码统一使用了UTF-8

2 主要视图:

(1)首页:

wKioL1ZbEMiQtcxuAAKbklFtEB8077.png

(2)注册

wKioL1ZbEOrQ0M5RAADceMsUAoI078.png

(3)登录

wKiom1ZbELbBUCErAAJ3SLICeNk399.png

(4)个人信息

wKiom1ZbEN3TU1GnAAKE7FB9diY784.png

(5)会员详细信息

wKioL1ZbEV2CNnsRAAJzkR4_OOs852.png

(6)文章列表

wKioL1ZbEXzwpR7tAAI0nmVvq-k199.png

(7)文章详情

wKioL1ZbEZeDsjeeAAGarjkKM74088.png

注:整个项目的主要视图差不多就是这些了,其他的我就不截图了


二 开发流程

1 简介:

用基本的JSP MVC模式开发网站,我总结的思路是这样的:(1)首先封装dao层的数据库操作(如:增删改查);(2)前台视图页面xx.jsp;(3)在web.xml里配置servlet;(4)最后是在action层(servlet)里调用dao层里的数据库操作完成相应的功能(比如:注册就是讲用户提交的数据写入数据库中);(4)根据操作是否成功给用户返回相应的显示页面yy.jsp

(PS:在这里我省略了业务逻辑层biz,结构太复杂对新手来说反而不容易入门。另:自我检讨下,当时写这个代码时候对分层思想不是很熟悉,所以大部分的dao层的具体操作都给写到servlet中去了

2 以注册这个功能点举例,其他功能点可以仿照这个步骤完成

(1)dao层的数据库连接DbConn.java。返回一个Connection(这里我做的不好,只有一个数据库连接功能,其他的增删改查都写到action层里去了)

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
package  com.zifangsky.OnlineFriend.util;
 
import  java.sql.Connection;
import  java.sql.DriverManager;
import  javax.naming.InitialContext;
import  javax.sql.DataSource;
 
public  class  DbConn {   
     /**
      * 通过JNDI连接池的方式
      * */
     public  static  Connection getConnection(){
         try  {         
             InitialContext context =  new  InitialContext();
             DataSource dSource = (DataSource) context.lookup( "java:comp/env/jdbc/onlinefriend" );
             Connection conn = dSource.getConnection();
             
             return  conn;                      
         catch  (Exception e) {        
             e.printStackTrace();
         }      
         return  null ;
     }
     
     /**
      * 最基本的方式
      * */
//  private static String driver = "com.mysql.jdbc.Driver";
//  private static String url = "jdbc:mysql://127.0.0.1:3306/onlinefriend?useUnicode=true&characterEncoding=utf-8";
//  private static String user = "root";
//  private static String passwd = "root";
     
//  public static Connection getConnection(){
//      try {
//          //加载驱动
//          Class.forName(driver);         
//          //连接数据库
//          Connection conn = DriverManager.getConnection(url,user,passwd);
//     
//          return conn;                      
//      } catch (Exception e) {        
//          e.printStackTrace();
//      }      
//      return null;
//  }
     
}

注:如果对JNDI不熟悉,可以使用注释中的那种连接方式


(2)视图页面register.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
     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" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" >
< base  href="<%=basePath%>">
<%@ include file="head.txt"%>
</ head >
< body >
     < font  size = 3 >< br >
         < center >
             < form  action = "helpRegister"  name = ""  method = "post" >
                 < table >
                     < caption >带< font  color = red > * </ font >号项为必填项</ caption >
                     < tr >< td  align = left >会员名称:</ td >< td >< input  type = text  name = "id" >< font  color = red > *</ font ></ td ></ tr >
                     < tr >< td  align = left >设置密码:</ td >< td >< input  type = password  name = "password" >< font  color = red > *</ font ></ td ></ tr >
                     < tr >< td  align = left >电子邮箱:</ td >< td >< input  type = text  name = "email" ></ td ></ tr >
                     < tr >< td  align = left >联系电话:</ td >< td >< input  type = text  name = "phone" ></ td ></ tr >
                 </ table
                 < table >
                     < tr >< td  align = left >输入您的简历和交友标准:</ td ></ tr >
                     < tr >
                         < td  align = left >< TextArea  name = "message"  rows = "6"  cols = "30" ></ TextArea ></ td >
                     </ tr >
                     < tr >< td  align = center >< input  type = submit  name = "submit"  value = "注册" ></ td ></ tr >
                 </ table >
             </ form >
         </ center >
     </ font >
 
</ body >
</ html >

注:1)页头加上了

1
2
3
4
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
1
< base  href="<%=basePath%>">

是为了使项目中的所有链接的路径都是相对于项目路径的,因此即使项目的部署路径改变了也不用重新修改以前的链接路径,现在一般都会把这两句话加上


2)注册页面建议加上一个随机生成的token参数,然后分两处保存,一处是在session中,一处是在表单中,提交表单后通过比较两个值是否一样来防止不法份子用软件来批量提交注册(PS:我这里忘记写了

表单之前添加:

1
2
3
<%
     String tokenValue = String.valueOf(System.currentTimeMillis());
%>

表单中添加:

1
2
3
4
5
6
< div >
                     < input  type = "hidden"  name = "token"  value="<%=tokenValue %>">
                     <%
                         session.setAttribute("token", tokenValue);
                     %>
                 </ div >

3)servlet中这样验证:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public  void  doPost(HttpServletRequest request,HttpServletResponse response) throws  ServletException,IOException{
         request.setCharacterEncoding( "utf-8" );
         response.setCharacterEncoding( "utf-8" );
         HttpSession session = request.getSession( true );
         
         String token = StringUtil.xssEncode(request.getParameter( "token" ).trim());
         Object token_session = session.getAttribute( "token" );
         if (token_session !=  null  && token_session.equals(token)){
             session.removeAttribute( "token" );   //重要
             continueDoPost(request,response);
         }
         else {
             response.sendRedirect( "index.jsp" );
             return ;
         }      
     }
 
     private  void  continueDoPost(HttpServletRequest request, HttpServletResponse response) throws  ServletException,IOException{
         request.setCharacterEncoding( "utf-8" );
         response.setCharacterEncoding( "utf-8" );
         HttpSession session = request.getSession( true );
         //后面的省略
     }

(3)web.xml添加一个节点:

1
2
3
4
5
6
7
8
9
<!-- 注册 -->
   < servlet >
     < servlet-name >register</ servlet-name >
     < servlet-class >com.zifangsky.OnlineFriend.servlet.member.HandleRegister</ servlet-class >
   </ servlet >
   < servlet-mapping >
     < servlet-name >register</ servlet-name >
     < url-pattern >/helpRegister</ url-pattern >
   </ servlet-mapping >

(4)servlet页面HandleRegister.java,调用了对应的javabean来保存参数值

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
90
91
92
93
94
package  com.zifangsky.OnlineFriend.servlet.member;
 
import  java.io.IOException;
import  java.sql.Connection;
import  java.sql.PreparedStatement;
import  java.sql.SQLException;
import  javax.servlet.RequestDispatcher;
import  javax.servlet.ServletConfig;
import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
 
import  com.zifangsky.OnlineFriend.model.member.Register;
import  com.zifangsky.OnlineFriend.util.DbConn;
import  com.zifangsky.OnlineFriend.util.StringUtil;
 
public  class  HandleRegister  extends  HttpServlet{
     private  String backNews =  "" ,pic =  "public.jpg" ;   //pic为图片信息
     
     public  void  init(ServletConfig config)  throws  ServletException{
         super .init(config);
     }
     
     public  void  doPost(HttpServletRequest request,HttpServletResponse response) throws  ServletException,IOException{
         Register registerBean =  new  Register();
         request.setAttribute( "register" , registerBean);
         request.setCharacterEncoding( "utf-8" );
         response.setCharacterEncoding( "utf-8" );
         
         //获取注册信息
         String id = StringUtil.xssEncode(request.getParameter( "id" ).trim());
         String password = StringUtil.xssEncode(request.getParameter( "password" ).trim());
         String email = StringUtil.xssEncode(request.getParameter( "email" ).trim());
         String phone = StringUtil.xssEncode(request.getParameter( "phone" ).trim());
         String message = StringUtil.xssEncode(request.getParameter( "message" ));
         
         boolean  isSuccess =  false ;   //判断注册信息是否符合规定
         if (StringUtil.isNotEmpty(id) &&StringUtil.isNotEmpty(password)){
             isSuccess =  true ;
             //判断id是否符合标准
             for ( int  i= 0 ;i<id.length();i++){
                 char  c = id.charAt(i);
                 if (!((c>= 'a' &&c<= 'z' ) || (c>= 'A' &&c<= 'Z' ) || (c>= '0' &&c<= '9' ))){
                     isSuccess =  false ;
                     break ;
                 }
             }
         }
                 
         //向 mysql 中注册用户          
         try 
             if (isSuccess){
                 Connection conn = DbConn.getConnection();
                 PreparedStatement preparedStatement = conn.prepareStatement( "insert into member(id,password,email,phone,message,pic) values(?,?,?,?,?,?)" );
                 preparedStatement.setString( 1 , id);
                 preparedStatement.setString( 2 , password);
                 preparedStatement.setString( 3 , email);
                 preparedStatement.setString( 4 , phone);
                 preparedStatement.setString( 5 , message);
                 preparedStatement.setString( 6 , pic);
                 
                 //执行成功返回行数大于0
                 int  num = preparedStatement.executeUpdate();
                 if (num !=  0 ){
                     backNews =  "注册成功" ;
                     registerBean.setBackNews(backNews);
                     registerBean.setId(id);
                     registerBean.setPassword(password);
                     registerBean.setEmail(email);
                     registerBean.setPhone(phone);
                     registerBean.setMessage(message);
                     registerBean.setRegisterSuccess( true );
                 }
                 preparedStatement.close();
                 conn.close();
             }
             else {
                 backNews =  "信息填写不完整或者名字中有非法字符" ;
                 registerBean.setBackNews(backNews);
             }          
         catch  (SQLException e) {
             backNews =  "该ID已被使用,请更换ID" ;
             registerBean.setBackNews(backNews);
         }
                 
         RequestDispatcher dispatcher = request.getRequestDispatcher( "showRegisterMess.jsp" );
         dispatcher.forward(request, response);
     }
     
     public  void  doGet(HttpServletRequest request,HttpServletResponse response)  throws  ServletException,IOException{
         doPost(request, response);
     }
}

(5)注册成功的显示视图showRegisterMess.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
     <%@ page import="com.zifangsky.OnlineFriend.model.member.Register"%>
< jsp:useBean  id = "register"  type = "com.zifangsky.OnlineFriend.model.member.Register"  scope = "request" />
<!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" >
< base  href="<%=basePath%>">
<%@ include file="head.txt"%>
</ head >
< body >   
     < center >
         < font  size = 4  color = blue >
             < br >< jsp:getProperty  name = "register"  property = "backNews" />
         </ font >
         <% if(register.isRegisterSuccess()){ %>
             < font  size = 3 >
                 < table >
                     < tr >< td  align = left >注册的会员名称:</ td >< td >< jsp:getProperty  name = "register"  property = "id" /></ td ></ tr >
                     < tr >< td  align = left >注册的电子邮箱:</ td >< td >< jsp:getProperty  name = "register"  property = "email" /></ td ></ tr >
                     < tr >< td  align = left >注册的联系电话:</ td >< td >< jsp:getProperty  name = "register"  property = "phone" /></ td ></ tr >
                 </ table
                 < table >
                     < tr >< td  align = left >您的简历和交友标准:</ td ></ tr >
                     < tr >
                         < td  align = left >< TextArea  name = "message"  rows = "6"  cols = "30" >< jsp:getProperty  name = "register"  property = "message" /></ TextArea ></ td >
                     </ tr >
                 </ table >
             </ font >
         <%}
             else{%>
             < br >< a  href = "register.jsp" >点击这里,重新注册</ a >
             <%} %>
     </ center >
     
 
</ body >
</ html >

OK,一个完整的功能点就这样做完了,其他功能点可以自行参考这个步骤完成



本文转自 pangfc 51CTO博客,原文链接:http://blog.51cto.com/983836259/1718007,如需转载请自行联系原作者

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
28天前
|
存储 监控 安全
单位网络监控软件:Java 技术驱动的高效网络监管体系构建
在数字化办公时代,构建基于Java技术的单位网络监控软件至关重要。该软件能精准监管单位网络活动,保障信息安全,提升工作效率。通过网络流量监测、访问控制及连接状态监控等模块,实现高效网络监管,确保网络稳定、安全、高效运行。
52 11
|
1月前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
66 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
21天前
|
JSON Dart 前端开发
鸿蒙应用开发从入门到入行 - 篇7:http网络请求
在本篇文章里,您将掌握鸿蒙开发工具DevEco的基本使用、ArkUI里的基础组件,并通过制作一个简单界面掌握使用
61 8
|
1月前
|
机器学习/深度学习 资源调度 算法
图卷积网络入门:数学基础与架构设计
本文系统地阐述了图卷积网络的架构原理。通过简化数学表述并聚焦于矩阵运算的核心概念,详细解析了GCN的工作机制。
113 3
图卷积网络入门:数学基础与架构设计
|
1月前
|
Web App开发 网络协议 安全
网络编程懒人入门(十六):手把手教你使用网络编程抓包神器Wireshark
Wireshark是一款开源和跨平台的抓包工具。它通过调用操作系统底层的API,直接捕获网卡上的数据包,因此捕获的数据包详细、功能强大。但Wireshark本身稍显复杂,本文将以用抓包实例,手把手带你一步步用好Wireshark,并真正理解抓到的数据包的各项含义。
90 2
|
1月前
|
机器学习/深度学习 人工智能 算法
深度学习入门:用Python构建你的第一个神经网络
在人工智能的海洋中,深度学习是那艘能够带你远航的船。本文将作为你的航标,引导你搭建第一个神经网络模型,让你领略深度学习的魅力。通过简单直观的语言和实例,我们将一起探索隐藏在数据背后的模式,体验从零开始创造智能系统的快感。准备好了吗?让我们启航吧!
84 3
|
2月前
|
缓存 JSON 监控
如何在项目中保证 Web 组件化的性能
保证 Web 组件化的性能需要从多个方面入手,综合运用各种优化方法和策略。通过持续的优化和改进,能够提高组件化的整体性能,为用户提供更好的体验,同时也有助于提高项目的开发效率和质量。
49 8
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
40 7
|
2月前
|
数据采集 XML 存储
构建高效的Python网络爬虫:从入门到实践
本文旨在通过深入浅出的方式,引导读者从零开始构建一个高效的Python网络爬虫。我们将探索爬虫的基本原理、核心组件以及如何利用Python的强大库进行数据抓取和处理。文章不仅提供理论指导,还结合实战案例,让读者能够快速掌握爬虫技术,并应用于实际项目中。无论你是编程新手还是有一定基础的开发者,都能在这篇文章中找到有价值的内容。
|
2月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
151 1