合工大软件工程Java实验4--JavaWeb编程

使用JSP实现登录注册案例

合工大Java实验4--JavaWeb编程

• 一级目录
• • 二级目录
  • • 三级目录
    • 一、Tomcat安装、配置
    • • 1、下载
      • 2、修改tomcat服务端口
    • 二、HTML表单(form)
    • • form表单
      • • post和get的区别(这个前端面试的时候也是一个高频问题)
      • input标签
      • select下拉菜单
    • 三、布局方式
    • • 表格布局
      • flex布局
    • 四、功能实现
    • • 1、创建JavaWeb项目
      • 2、根据实验要求设计文件目录
      • 3、连接Tomcat服务器
      • 4、JSP的介绍和吐槽
      • 5、页面设计(register.jsp和login.jsp)
      • 6、checkAll()的正则检查(非必要)
      • 7、注册功能的实现(doregister.jsp)
      • 8、登录功能的实现(dologin.jsp)

一级目录 二级目录 三级目录 一、Tomcat安装、配置 1、下载

下载地址：https://tomcat.apache.org/，选择版本尽力选择tomcat8以上。

tomcat的下载比较方便，只需要下载zip压缩包，选择一个无中文名目录(最好无中文，不然之后可能会出莫名其妙的bug)下解压即可。

然后和Java一样，tomcat也可以设置环境变量，不过如果使用的是IDEA的话，不设置环境变量问题也不大。

2、修改tomcat服务端口

在tomcat文件夹–>conf–>server修改即可。

如果使用的是IDEA的话，待会可以直接在IDEA中配置。

二、HTML表单(form) form表单

首先普及一下form的的几个基本属性

1. action：提交地址
2. method：提交方式，常用为(get、post、put、delete)
3. onsubmit：可以用js进行事件编程，写一些简单的正则表达式,用于前端的校验，防止后端出现不必要的错误

需要注意的是form表单中的表单项必须要有的属性是：name属性，用于表示该项的数据。

post和get的区别(这个前端面试的时候也是一个高频问题)

get提交方式：

1. 将用户信息提交到地址栏上,后台服务器地址url?key1=value1&key2=value2…
2. get提交的数据大小有限（不超过4KB）
3. get方式不适合提交敏感数据 ，例如：密码
   密码要提交：需要密码加密

post提交方式：

1. 数据不会提交到地址栏上，http网络协议、 一堆服务器响应头信息、浏览器请求头信息
   实体内容：formData，key1=value1&key2=value2…
2. 提交数据大小没有限制
3. 适合敏感数据（密码需要特定加密）

get一般用于从后端获取大量数据，而post一般是将前端的数据信息传给后端，返回一个成功或者失败。

input标签

input标签就是输入框，输入框分为很多种，比如用户名的输入框和密码的输入框就需要不同，密码会自动隐藏成为一个黑点，而用户名直接显示，这种显示方式的不同就是通过input的type实现的。

input标签的type有如下几种属性值

1. type=“text”:文本输入框
2. type=“password”：密码输入框
3. type=“radio”:单选按钮
4. type=“checkbox”:复选框
5. type=“date”(h5提供的日期组件）
6. type=“tel”(h5提供的组件）
7. type=“file”:上传文件
8. type=“button”:普通按钮，必须指定value属性
9. type=“submit”:提交
10. type=“reset”:重置按钮
11. type=”hidden":隐藏域

这个Java实验中需要用到的是text、password和submit，当然如果你想要增添一些功能也可以尝试一下reset等。

select下拉菜单

实验中要求的性别选择就是通过下拉菜单来实现的，select的一般书写格式如下：

  男
  女

select表示一整个下拉菜单，option表示下拉菜单中的选项。

三、布局方式 表格布局

这种是最简单的可以适用于表单布局的方式，可以实现换行，但是样式就比较丑了，因为不会自动调整缩进。

flex布局

是目前前端十分流行的一种布局方式，入门简单，并且真的香，想要把表单做的好看一些的同学，可以来看看我之前发的关于flex的博客：flex布局详细介绍

flex实现居中：

.register{
    display: flex;
    justify-content: center;
    align-items: center;
  }

另外了解一些些CSS的样式

1. border：边框属性

   • 1px solid rgb(0,0,0) ----->宽度为1px，实线，黑色(照着改就能设基础自己喜欢的样式了)

   • 如果只写border的话默认是四个角都会改变，如果只想改变一个角的话，可以通过border-top-right这种形式选择一个角。

2. color：字体颜色

   • rbg(0,0,0)。

3. background-color：背景颜色

   • rgb(0,0,0)。

4. border-radius：边框半径(做圆角用的)

   • 1px —>半径为1px。

5. margin：边距

   • 比如你觉得这个元素和上一个元素离得太近了，就可以通过margin-top:5px;让他离上一个元素远5px。

四、功能实现

讲了这么多，接下来就来实现一下实验四。(编译器：IDEA)

1、创建JavaWeb项目

2、根据实验要求设计文件目录

3、连接Tomcat服务器

在上方工具栏找到编译

上文说如果使用IDEA就可以直接在IDEA配置服务器端口名了，就是在这里配置的。

4、JSP的介绍和吐槽

​ 其实我不是很理解为什么JavaWeb的实验需要我们用JSP来完成，应该这个技术已经过时了，可能十年前还会用这个技术吧，JSP的优势在于将前后端糅合在一起写，你设置可以在一个JAVA语句中穿插Javascript的语句，显得特别方便，特别高效。但是一旦工程量大起来，就分不清哪个是前端哪个是后端了，在MVC模式流行的时候其实JSP就已经被淘汰了，现在主流的MVVM模式下，JSP就…不用多言。不过这简单的案例使用JSP实现确实比前后端分离实现上手难度低很多。可能这就是目的所在吧。

我其实对JSP的了解并不深，因为平时没怎么用过，大家如果遇到问题的话可以参考这篇博客，我觉得说的挺全面的：JSP知识详解

5、页面设计(register.jsp和login.jsp)

最最简单的方式(只通过br分段)：

	
		
		
	
	
		

			用户名：

			密  码:

            
              男
              女
            

			
		
	

或者可以通过table：

      

        

          

            用户名:
          
          

            
          
        
        

          

            密码:
          
          

            
          
        
        

          

            性别:
          
          

            
              男
              女
            
          
        
      
      
    

使用flex布局并设置样式(只是简单设计布局一下，样式没有细调)：

  

    
注册界面
    

      

        

          

            用户名:
          
          

            
          
        
        

          

            密码:
          
          

            
          
        
        

          

            性别:
          
          

            
              男
              女
            
          
        
      
      
      前往登录
    
  

制作完注册界面之后，登录界面其实只需要复制粘贴改一下下就好了。

<%@ page import="java.security.PublicKey" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



    
    


<%--下面就是玄学前后端代码写在一起，我第一次见的时候惊呆了，代码还可以这样玩--%>
<%
    String msg = (String)request.getAttribute("feedback");         // 获取错误属性
    if(msg != null) {
%>

<%
    }
%>



    

        
登录界面
        

            

                

                    

                        用户名:
                    
                    

                        
                    
                
                

                    

                        密码:
                    
                    

                        
                    
                
            
            
            返回注册
        
    

6、checkAll()的正则检查(非必要)

 <%--
    上面的form的onsubmit属性为"return checkAll()"，意思是说，在点击input的type为submit的标签后，发送表单至"doregister.jsp"之前会判断checkAll()的值，如果checkALL为true就发送，如果为false就不发送。
--%>

7、注册功能的实现(doregister.jsp)

request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");  //得到请求中为username的value值，与前面														form中name="username"的标签对应
session.setAttribute("username" , username);
String password=request.getParameter("password");   //得到请求中为password的value值，与前面														   form中name="password"的标签对应
session.setAttribute("password", password);
String sex = (String) request.getParameter("sex");   //得到请求中为sex的value值，与前面														        form中name="sex"的标签对应
session.setAttribute("sex", sex);
String msg = "username:" + username + ",password:"  + password +",sex:" + sex;

//因为前端已经通过正则校验过了，索引这里就不用判断是否为空。
BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(new FileOutputStream("Z:\@大二上\Java\code\Experiment4\src\user.txt",true),"GBK"));
//true表示，不会覆盖文件之前的内容。
bufferedWriter.write(msg + 'n');
bufferedWriter.close();

8、登录功能的实现(dologin.jsp)

request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
session.setAttribute("username" , username);
String password=request.getParameter("password");
session.setAttribute("password", password);
String sex = (String) request.getParameter("sex");
session.setAttribute("sex", sex);

BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(new FileInputStream("Z:\@大二上\Java\code\Experiment4\src\user.txt"),"GBK"));
String newMsg;
boolean idFlag = false;
boolean passwordFlag = false;
String feedback = "";
while( (newMsg = bufferedReader.readLine()) != null) {
    Map map=new HashMap();
    String[] a = newMsg.split(",");//以，为切割把string转成string数组
    for(String str:a){
        String[] b=str.split(":");
        map.put(b[0],b[1]);
    }
    System.out.println(map);
    if (map.get("username").equals(username)){
        idFlag = true;
        if(map.get("password").equals(password)){
            passwordFlag = true;
        }
    }
}
if (idFlag == true && passwordFlag == true)
    feedback = "登录成功!";
else if(idFlag == false)
    feedback = "用户不存在，请检查用户名！";
else if (passwordFlag == false)
    feedback = "密码错误！";

request.setAttribute("feedback", feedback);
request.getRequestDispatcher("login.jsp").forward(request, response);
//将反馈返回至前端，告诉用户登录结果
bufferedReader.close();