【Java 实习】Day 03-2

梦里梦外; 2023-01-01 02:51 157阅读 0赞

# 1 部署 Tomcat #

## 1.1 Tomcat文件夹介绍 ##

![Tomcat文件夹介绍][Tomcat]

## 1.2 添加Tomcat ##

![1][]  
![2][]  
![3][]  
![补充1][1 1]  
![4][]  
![补充2][2 1]

![5][]  
![补充3][3 1]

![6][]  
![7][]  
![补充4][4 1]

![8][]  
![9][]  
![10][]  
说明：根据工程路径访问资源，因此只留 / 是为了更方便访问  
![11][]  
![12][]

![13][]  
![14][]

## 1.3 测试Tomcat ##

![15][]  
![16][]

# 2 实例——简单的用户登录框 #

> 实例说明：实现一个简单的用户登录框

## 2.1 封装用户类 ##

package pers.syx.beans;
    
    public class User {
        
        private String username;    //用户名
        private String password;    //密码
    
        @Override
        public String toString() {
        
            return "User{" +
                    "username='" + username + '\'' +
                    ", password='" + password + '\'' +
                    '}';
        }
    
        public String getUsername() {
        
            return username;
        }
    
        public void setUsername(String username) {
        
            this.username = username;
        }
    
        public String getPassword() {
        
            return password;
        }
    
        public void setPassword(String password) {
        
            this.password = password;
        }
    
        public User() {
        
        }
    
        public User(String username, String password) {
        
            this.username = username;
            this.password = password;
        }
    }

## 2.2 添加jar包 ##

![1][1 2]  
![2][2 2]  
将下面这个文件复制粘贴到建立的`lib`目录下  
![3][3 2]  
![4][4 2]  
![5][5 1]  
![6][6 1]

## 2.3 写servlet ##

![1][1 3]

package pers.syx.servlet;
    
    import pers.syx.beans.User;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.ArrayList;
    
    public class LoginSevlet extends HttpServlet {
        
    
        /**
         *
         * @param req       请求对象
         * @param resp      响应对象
         * @throws ServletException
         * @throws IOException
         */
        @Override
        public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            //处理中文乱码
            req.setCharacterEncoding("utf-8");
    
            //根据标识确定要调用哪个方法
            //前端传递过来的标识
            String method = req.getParameter("method");
    
            if(method.equals("login")){
        
                toLogin(req,resp);//要将两个对象传递过去
            }
        }
    
        /**
         * 用户登录功能
         */
        public void toLogin(HttpServletRequest req, HttpServletResponse resp) {
        
            //记得修改访问权限标识符 private -> public
    
            //接收前端传的用户名的值
            String username = req.getParameter("username");
            //接收前端传的密码的值
            String password = req.getParameter("password");
    
            System.out.println("用户名的值为："+username+"；密码的值为："+password);
    
            //1 获取容器对象
            ArrayList<User> users = getUsers();
    
            //定义一个标识，判断输入的用户名和密码是否合法
            boolean flag = false;
    
            //遍历集合对象
            for(User user:users){
        
                if(user.getUsername().equals(username) && user.getPassword().equals(password)){
        
                    //用户名和密码必须都相等才可以登录成功
                    flag=true;
                    break;
                }
            }
            if(flag==true){
        
    //            //可以登录成功，响应前端，用到resp给前端响应标识
    //            resp.getWriter().print("true");//resp.getWriter自动获取流对象，给前端响应回去
    
                //上面那个语句先不用，先直接跳转到别的界面进行测试，用到sendRedirect重定向
                try {
        
                    resp.sendRedirect("http://localhost:8080/jsp/list.jsp");
                } catch (Exception e) {
        //需要捕获异常，鼠标放在sendRedirect上点alt+enter，然后点第二个，给一个最大的父类异常Exception去接收异常
                    e.printStackTrace();
                }
            }
            else{
        
                System.out.println("用户名和密码不匹配！！！");
            }
        }
        
        /**
         * 用集合模拟一个容器
         */
        public ArrayList<User> getUsers(){
        //写ArrayList<User>不用强转，写List需要
            /*这样写不太规范，因为功能很多，都写在一个方法里不规范。
             * 不要把所有功能写在一个方法里
             */
            //创建一个集合对象
            ArrayList<User> users = new ArrayList<>();
    
            //创建用户对象
            User user1 = new User();
            user1.setUsername("张三");
            user1.setPassword("123456");
    
            User user2 = new User("韩信","qwe123");
            User user3 = new User("百里守约","qwe123");
            User user4 = new User("百里玄策","434544");
            User user5 = new User("李白","ssddd");
            User user6 = new User("貂蝉","www111");
            User user7 = new User("吕布","30222");
    
            //把用户对象装进容器
            users.add(user1);
            users.add(user2);
            users.add(user3);
            users.add(user4);
            users.add(user5);
            users.add(user6);
            users.add(user7);
    
            return users;//测试用
        }
    }

## 2.4 写登录界面 ##

在`web`目录下新建目录`jsp`  
![1][1 4]  
![2][2 3]

<%--
      Created by IntelliJ IDEA.
      User: nosteglic
      Date: 2021/1/2
      Time: 20:43
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    <html>
    <head>
        <title>登录界面</title>
    
        
        <style>
            body{
         
                background-color: aliceblue;
            }
        </style>
    
    </head>
    <body>
        <h1 align="center">用户登录界面</h1>
    
        
        <form action="http://localhost:8080/login?method=login" method="post">
            
            
            <table border="1px" bgcolor="pink" align="center">
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username"></td>
                </tr>
    
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password"></td>
                </tr>
    
                <tr>
                    <td colspan="5" align="center">
                        
                        <input type="submit" value="登录">
                    </td>
                </tr>
            </table>
        </form>
    
    </body>
    
    </html>

![1][1 5]  
![2][2 4]

<%--
      Created by IntelliJ IDEA.
      User: nosteglic
      Date: 2021/1/2
      Time: 21:06
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>列表界面</title>
    </head>
    <body>
        恭喜你，登录成功！
    </body>
    </html>

## 2.5 配置资源路径 ##

![1][1 6]

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
             version="5.0">
    
        
        <servlet>
            
            <servlet-name>login</servlet-name>
            
            
            <servlet-class>pers.syx.servlet.LoginSevlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>login</servlet-name>
            
            <url-pattern>/login</url-pattern>
        </servlet-mapping>
    </web-app>

## 2.6 测试 ##

![1][1 7]  
![2][2 5]  
![3][3 3]  
![4][4 3]  
![5][5 2]

# 3 目录结构 #

![目录结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70]

--------------------

补充说明

# 1 login.jsp #

![介绍][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 1]

*  访问当前工程时默认访问web文件夹下的资源，之前设置的工程路径【/】
 *  若想访问jsp文件夹下的资源：

localhost:8080/jsp/login.jsp

*  所有网页由标签形成

> `<html>`标签声明  
> `<head>`头部  
> `<body>`身体  
> `<inout type="不同的框">`
> 
> > `<input type="text">`用户名框  
> > `<input type="password">`密码框  
> > `<input type="button"value="登录">`登录按钮
> 
> `<br>`换行

![head][]

![body][]

`<h1></h1>`最大标题  
![表格][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 2]

# 2 访问资源 #

*  现在浏览器访问的是前端静态资源，那如何访问后端资源呢？浏览器要访问到Servlet类 在web.iml中配置  
    ![访问资源][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 3]

# 3 form表单 #

![form表单][form]  
根据action属性可以访问相应界面

现在浏览器访问的是前端静态资源，那如何访问后端资源呢？浏览器要访问到Servlet类 在web.iml中配置

![submit][]

# 4 前后端交互 #

![前后端交互][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 4]  
\\login为后端资源路径

# 5 处理中文乱码 #

![处理中文乱码][20201230200329947.png]

[Tomcat]: /images/20221120/2a05f21769414a298b8323ca9a57dd12.png
[1]: /images/20221120/d2304e55ef4a47c8a1e16f29c40f0202.png
[2]: /images/20221120/2ef806d3dfd2484d97b2b986e23af18f.png
[3]: /images/20221120/32d1decf21754fc190eb6f3537bde3f8.png
[1 1]: https://img-blog.csdnimg.cn/20210102201413949.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[4]: https://img-blog.csdnimg.cn/20201230184223962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[2 1]: https://img-blog.csdnimg.cn/2021010220152262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[5]: https://img-blog.csdnimg.cn/20201230184302185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[3 1]: https://img-blog.csdnimg.cn/20210102202234904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[6]: https://img-blog.csdnimg.cn/20201230184311821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[7]: https://img-blog.csdnimg.cn/20201230184321257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[4 1]: https://img-blog.csdnimg.cn/20210102202404557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[8]: https://img-blog.csdnimg.cn/20201230184330194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[9]: https://img-blog.csdnimg.cn/20201230184344126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[10]: https://img-blog.csdnimg.cn/2020123018435014.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[11]: https://img-blog.csdnimg.cn/2020123018440652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[12]: https://img-blog.csdnimg.cn/20210102202502291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[13]: https://img-blog.csdnimg.cn/20201230184426152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[14]: https://img-blog.csdnimg.cn/20210102202651382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[15]: https://img-blog.csdnimg.cn/20201230184444520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[16]: https://img-blog.csdnimg.cn/20201230184518931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[1 2]: https://img-blog.csdnimg.cn/20210102203729142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[2 2]: https://img-blog.csdnimg.cn/2021010220375175.png
[3 2]: https://img-blog.csdnimg.cn/20210102203856817.png
[4 2]: https://img-blog.csdnimg.cn/20210102204015205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[5 1]: https://img-blog.csdnimg.cn/20210102204044953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[6 1]: https://img-blog.csdnimg.cn/20210102204102973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[1 3]: https://img-blog.csdnimg.cn/20210102205553504.png
[1 4]: https://img-blog.csdnimg.cn/20210102204259437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[2 3]: https://img-blog.csdnimg.cn/20210102204315338.png
[1 5]: https://img-blog.csdnimg.cn/20210102210727495.png
[2 4]: https://img-blog.csdnimg.cn/20210102210747228.png
[1 6]: https://img-blog.csdnimg.cn/20210102210502313.png
[1 7]: https://img-blog.csdnimg.cn/20210102205120220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[2 5]: https://img-blog.csdnimg.cn/20210102211059159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[3 3]: https://img-blog.csdnimg.cn/20210102211150570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[4 3]: https://img-blog.csdnimg.cn/20210102211244655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[5 2]: https://img-blog.csdnimg.cn/20210102211353949.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021010221144774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201230192717303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[head]: https://img-blog.csdnimg.cn/20201230192429264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[body]: https://img-blog.csdnimg.cn/20201230192348852.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201230193436536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201230194704625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[form]: https://img-blog.csdnimg.cn/20201230195105939.png
[submit]: https://img-blog.csdnimg.cn/20201230200717221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201230200300250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzE0NTIx,size_16,color_FFFFFF,t_70
[20201230200329947.png]: https://img-blog.csdnimg.cn/20201230200329947.png