SpringBoot-基础网页编写

最新推荐文章于 2025-01-21 01:52:00 发布

曲悦丹田

最新推荐文章于 2025-01-21 01:52:00 发布

阅读量883

点赞数

文章标签： spring boot servlet java

本文链接：https://blog.youkuaiyun.com/weixin_70634087/article/details/126273909

版权

本文主要介绍了使用SpringBoot进行基础网页开发的方法，涵盖了如何配置Servlet以及相关Java代码的编写技巧，帮助初学者快速掌握SpringBoot网页创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的首页</title>
</head>
<body>
    <!--
        <h1>-<h6>:标题,标题的特点是独占一行,标题的字号递减
        <center>:该标签已经不再建议使用了(没学习css前临时使用),作用是将其包含的组件在页面上居中显示
        <input>:输入组件,该组件用于在页面上获取用户输入
                组件可以体现为不同的样子,有属性type决定.
                常用值:
                type="text" : 文本框
                type="password" : 密码框
                type="checkbox" : 复选框
                type="radio" : 单选框
                type="button" : 按钮
                type="submit" : 表单提交按钮
                ...

         <a>:超链接,标签之间的文本为超链接上提示信息,而属性href用于指定点击超链接后跳转的地址.

         <br>:换行

         <table>标签:表格。属性border用于指定边框。
                    <table>标签中包含<tr>标签用于表示行
                    <tr>标签中包含<td>标签用于表示列
                    <td>标签中常见属性:
                    align:对其方式。left左对齐,right右对齐,center剧中对其
                    colspan:跨列合并列，合并是从左向右合并列
                    rowspan:跨行合并列，合并是从上向下合并列

         <img>标签:图片。属性src用于指定图片的路径

         在HTML页面中我们经常会通过指定一个路径去引入服务器的一个资源，在指定路径时，我们通常是以"/"作为开始
         而这里的"/"可以理解为定义的就是服务器中static目录的位置。
         本质上它表达的是地址栏中抽象路径中最开始的“/”位置。
                              v
         http://localhost:8088/index.html
         例如:在index.html页面上引入一张图片:
         <img src="/logo.png">
         此时浏览器理解该路径实际位置时对应的就是:
         http://localhost:8088/logo.png

    -->
    <center>
        <!--<h1>百度</h1>-->
        <img src="/logo.png"><br>
        <input type="text" size="32">
        <input type="button" value="百度一下" onclick="alert('点你妹啊!')">
        <br>
        <a href="/classtable.html">课程表</a>
        <a href="/reg.html">用户注册</a>
        <br>
        <a href="http://www.taobao.com">淘宝</a>
        <br>
        <table border="1">
            <tr>
                <td rowspan="2">第一列</td>
                <td>第二列</td>
                <td colspan="2" align="center">第三列</td>
            </tr>
            <tr>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </table>

    </center>
</body>
</html>

<!--
    <h1>-<h6>:标题,标题的特点是独占一行,标题的字号递减
    <center>:该标签已经不再建议使用了(没学习css前临时使用),作用是将其包含的组件在页面上居中显示
    <input>:输入组件,该组件用于在页面上获取用户输入
            组件可以体现为不同的样子,有属性type决定.
            常用值:
            type="text" : 文本框
            type="password" : 密码框
            type="checkbox" : 复选框
            type="radio" : 单选框
            type="button" : 按钮
            type="submit" : 表单提交按钮
            ...

     <a>:超链接,标签之间的文本为超链接上提示信息,而属性href用于指定点击超链接后跳转的地址.

     <br>:换行

     <table>标签:表格。属性border用于指定边框。
                <table>标签中包含<tr>标签用于表示行
                <tr>标签中包含<td>标签用于表示列
                <td>标签中常见属性:
                align:对其方式。left左对齐,right右对齐,center剧中对其
                colspan:跨列合并列，合并是从左向右合并列
                rowspan:跨行合并列，合并是从上向下合并列

     <img>标签:图片。属性src用于指定图片的路径

     在HTML页面中我们经常会通过指定一个路径去引入服务器的一个资源，在指定路径时，我们通常是以"/"作为开始
     而这里的"/"可以理解为定义的就是服务器中static目录的位置。
     本质上它表达的是地址栏中抽象路径中最开始的“/”位置。
                          v
     http://localhost:8088/index.html
     例如:在index.html页面上引入一张图片:
     <img src="/logo.png">
     此时浏览器理解该路径实际位置时对应的就是:
     http://localhost:8088/logo.png

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<center>
    <h1>用户注册</h1>
    <!--
               form表单
               form表单是用于将用户在页面上输入的信息提交给服务端使用的组件。
               form表单中应当包含若干的输入组件.
               注意:只有包含早form标签中间的输入组件中用户输入的信息才会提交给服务端!!

               form上有两个重要的属性:
               action:用于指定表单提交的路径，该路径需要服务端配合处理
               method:表单提交的形式，有两个可选项:
                      GET:地址栏形式提交，表单数据会拼接到地址栏的URL中传递
                      POST:表单数据会被包含在请求的消息正文中被提交
                      当表单数据含有用户隐私信息或附件上传时应当使用POST。

                      method属性不指定时，默认是GET请求提交。
            -->
    <!--
        由于请求当前注册页面时，浏览器地址栏上的路径为:
        http://localhost:8080/reg.html
        因此在当前页面上我们定义的表单<form action="/regUser">时，表单提交后的实际请求路径为:
        http://localhost:8080/regUser

        而提交后，我们的服务端拿到该URL中抽象路径(/regUser)后，第一个"/"首先去定位static目录下是否有
        该文件，若有则直接发送给浏览器

        表单用get形式提交后，浏览器地址栏的样子
        http://localhost:8080/regUser?username=fancq&password=123456&nickname=chuanqi&age=22

        表单中<form action="/regUser" method="get"> method的值为get时，表达用地址栏形式提交表单数据。
        此时表单数据会被拼接到URL的抽象路径中。与抽象路径的请求部分以"?"形式分开
        抽象路径格式:
        请求路径(action指定的内容)?参数部分
        /regUser?username=fancq&password=123456&nickname=chuanqi&age=22
        参数部分的格式:
        参数名1=参数值1&参数名2=参数值2&...
        参数名是表单中某个输入框name属性指定的值
        参数值是表单中该输入框用户在其中输入的内容

     -->
    <form action="/regUser" method="get">
        <table border="1">
            <tr>
                <td>用户名</td>
                <td><input name="username" type="text"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="password" type="password"></td>
            </tr>
            <tr>
                <td>昵称</td>
                <td><input name="nickname" type="text"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input name="age" type="text"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="注册">
                </td>
            </tr>
        </table>
    </form>
</center>
</body>
</html>

<!--
           form表单
           form表单是用于将用户在页面上输入的信息提交给服务端使用的组件。
           form表单中应当包含若干的输入组件.
           注意:只有包含早form标签中间的输入组件中用户输入的信息才会提交给服务端!!

           form上有两个重要的属性:
           action:用于指定表单提交的路径，该路径需要服务端配合处理
           method:表单提交的形式，有两个可选项:
                  GET:地址栏形式提交，表单数据会拼接到地址栏的URL中传递
                  POST:表单数据会被包含在请求的消息正文中被提交
                  当表单数据含有用户隐私信息或附件上传时应当使用POST。

                  method属性不指定时，默认是GET请求提交。
        -->
<!--
    由于请求当前注册页面时，浏览器地址栏上的路径为:
    http://localhost:8080/reg.html
    因此在当前页面上我们定义的表单<form action="/regUser">时，表单提交后的实际请求路径为:
    http://localhost:8080/regUser

    而提交后，我们的服务端拿到该URL中抽象路径(/regUser)后，第一个"/"首先去定位static目录下是否有
    该文件，若有则直接发送给浏览器

    表单用get形式提交后，浏览器地址栏的样子
    http://localhost:8080/regUser?username=fancq&password=123456&nickname=chuanqi&age=22

    表单中<form action="/regUser" method="get"> method的值为get时，表达用地址栏形式提交表单数据。
    此时表单数据会被拼接到URL的抽象路径中。与抽象路径的请求部分以"?"形式分开
    抽象路径格式:
    请求路径(action指定的内容)?参数部分
    /regUser?username=fancq&password=123456&nickname=chuanqi&age=22
    参数部分的格式:
    参数名1=参数值1&参数名2=参数值2&...
    参数名是表单中某个输入框name属性指定的值
    参数值是表单中该输入框用户在其中输入的内容

 -->

package com.tedu.springboot2206.controller;

import com.tedu.springboot2206.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;

@Controller
public class UserController {
    //表示保存所有用户信息的目录users
    private static File userDir;

    static{
        userDir = new File("./users");
        if(!userDir.exists()){
           userDir.mkdirs();
        }
    }

    /**
     *
     * @param request   请求对象，封装着浏览器发送过来的所有内容
     * @param response  响应对象，封装着我们即将给浏览器回复的内容
     */
    @RequestMapping("/regUser")
    public void reg(HttpServletRequest request, HttpServletResponse response){
        System.out.println("开始处理注册！！！！！！！！！！！！！！");
        /*
            处理注册的大致过程
            1:获取用户在注册页面上输入的注册信息(通过请求对象获取浏览器提交的表单数据)
            2:处理注册
            3:设置响应对象，将处理结果回馈给浏览器
         */
        //1获取注册页面上的表单信息
        /*
            HttpServletRequest的重要方法:
            String getParameter(String name)
            获取浏览器传递过来的某个参数的值
            这里的传入的是参数名，对应的是页面表单输入框的名字(name属性对应的值)
         */
        String username = request.getParameter("username");//获取用户名
        String password = request.getParameter("password");
        String nickname = request.getParameter("nickname");
        String ageStr = request.getParameter("age");
        System.out.println(username+","+password+","+nickname+","+ageStr);
        /*
            String username = request.getParameter("username");
            作用:获取浏览器传递过来的参数username对应的值
            返回的字符串可能存在2种特殊情况:
            1:返回空字符串,说明用户在该输入框上没有输入任何内容
            2:返回null,说明没有传递该参数过来
         */
        if(username==null||username.isEmpty()||password==null||password.isEmpty()||
          nickname==null||nickname.isEmpty()||ageStr==null||ageStr.isEmpty()||
          !ageStr.matches("[0-9]+")){
            try {
                response.sendRedirect("/reg_info_error.html");
            } catch (IOException e) {
                e.printStackTrace();
            }
            return;
        }




        int age = Integer.parseInt(ageStr);//将年龄转换为int值
        /*
            2
            将该注册用户信息以User对象形式表示并序列化到文件中保存

            将来所有的保存用户信息的文件都统一放在users目录下，并且每个保存用户的文件的名字格式:用户名.obj

         */
        User user = new User(username,password,nickname,age);
        /*
            File的重载构造器
            File(File parent,String child)
            该File对象表达的是在parent表示的目录中的子项child
         */
        //在userDir(该对象表达当前项目目录下的users目录)目录中的文件xxx.obj(xxx就是当前注册用户名)
        //          new File(userDir,"fancq.obj")
        File file = new File(userDir,username+".obj");

        //如果该文件存在则说明这是一个重复的用户
        if(file.exists()){
            try {
                response.sendRedirect("/have_user.html");
            } catch (IOException e) {
                e.printStackTrace();
            }
            return;
        }



        try(
                FileOutputStream fos = new FileOutputStream(file);
                ObjectOutputStream oos = new ObjectOutputStream(fos);
        ) {
            oos.writeObject(user);
        } catch (IOException e) {
            e.printStackTrace();
        }

        //3
        try {
            /*
                让浏览器重定向到指定的路径查看处理结果页面
                这里的路径"/reg_success.html"是发送给浏览器让其理解的.
                所以浏览器还是当这里的"/"为抽象路径中第一个"/"的位置
                相当于浏览器会根据该路径请求:
                http://localhost:8080/reg_success.html
             */
            response.sendRedirect("/reg_success.html");
        } catch (IOException e) {
            e.printStackTrace();
        }


    }
}

//表示保存所有用户信息的目录users

/*
    处理注册的大致过程
    1:获取用户在注册页面上输入的注册信息(通过请求对象获取浏览器提交的表单数据)
    2:处理注册
    3:设置响应对象，将处理结果回馈给浏览器
 */
//1获取注册页面上的表单信息
/*
    HttpServletRequest的重要方法:
    String getParameter(String name)
    获取浏览器传递过来的某个参数的值
    这里的传入的是参数名，对应的是页面表单输入框的名字(name属性对应的值)
 */

/*
    String username = request.getParameter("username");
    作用:获取浏览器传递过来的参数username对应的值
    返回的字符串可能存在2种特殊情况:
    1:返回空字符串,说明用户在该输入框上没有输入任何内容
    2:返回null,说明没有传递该参数过来
 */

/*
    2
    将该注册用户信息以User对象形式表示并序列化到文件中保存

    将来所有的保存用户信息的文件都统一放在users目录下，并且每个保存用户的文件的名字格式:用户名.obj

 */

/*
    File的重载构造器
    File(File parent,String child)
    该File对象表达的是在parent表示的目录中的子项child
 */
//在userDir(该对象表达当前项目目录下的users目录)目录中的文件xxx.obj(xxx就是当前注册用户名)
//          new File(userDir,"fancq.obj")

//如果该文件存在则说明这是一个重复的用户

/*
    让浏览器重定向到指定的路径查看处理结果页面
    这里的路径"/reg_success.html"是发送给浏览器让其理解的.
    所以浏览器还是当这里的"/"为抽象路径中第一个"/"的位置
    相当于浏览器会根据该路径请求:
    http://localhost:8080/reg_success.html
 */