【项目】仿牛客网社区开发第1章初识Spring Boot 开发社区首页 4 Spring MVC入门

偏执的太偏执、 2024-03-22 09:45 37阅读 0赞

### 【项目】仿牛客网社区开发 ###

#### 文章目录 ####

*   *  【项目】仿牛客网社区开发
     *   *  第1章 初识Spring Boot 开发社区首页
         *   *  4 Spring MVC入门
             *   *  4.1 HTTP
                 *  4.2 Spring MVC
                 *  4.3 Thymeleaf

![在这里插入图片描述][5fcb9514da554c5eaf1f670f7af29de2.png_pic_center]

#### 第1章 初识Spring Boot 开发社区首页 ####

##### 4 Spring MVC入门 #####

###### 4.1 HTTP ######

*  HyperText Transfer Protocol
 *  用于传输HTML等内容的应用层协议
 *  规定了浏览器和服务器之间如何通信， 以及通信时的数据格式。

![在这里插入图片描述][56d4aebb8df7482fa9843063ff56e9f0.png_pic_center]

[https://developer.mozilla.org/zh-CN][https_developer.mozilla.org_zh-CN]

![在这里插入图片描述][ed507a875050482ab36b45095712a1c3.png_pic_center]

好用的手册。

![在这里插入图片描述][bef978a89df64de68ec3d248f8ff0a8a.png_pic_center]

![在这里插入图片描述][dc6e47a519f94e80aca9519d01c459fd.png_pic_center]

###### 4.2 Spring MVC ######

*  三层架构
    
     *  表现层、业务层、数据访问层
 *  MVC
    
     *  Model：模型层
     *  View：视图层
     *  Controller：控制层
 *  核心组件
    
     *  前端控制器：DispatcherServlet

![在这里插入图片描述][ebd871978f404920895ea7fe5a0aac39.png_pic_center]

[https://docs.spring.io/spring-framework/docs/current/reference/html/web.html\#mvc-servlet-context-hierarchy][https_docs.spring.io_spring-framework_docs_current_reference_html_web.html_mvc-servlet-context-hierarchy]

![在这里插入图片描述][5c87cbc1687b46018299ee7585b5088d.png_pic_center]

在4.x 的版本文档中，还有这样一张图

[https://docs.spring.io/spring-framework/docs/4.3.24.RELEASE/spring-framework-reference/htmlsingle/\#spring-mvc-test-server-htmlunit-mah][https_docs.spring.io_spring-framework_docs_4.3.24.RELEASE_spring-framework-reference_htmlsingle_spring-mvc-test-server-htmlunit-mah]

![在这里插入图片描述][57b4917c5ac14f4a8e9a3431703c8472.png_pic_center]

###### 4.3 Thymeleaf ######

*  模板引擎 - 生成动态的HTML。
 *  Thymeleaf - 倡导自然模板，即以HTML文件为模板。
 *  常用语法 - 标准表达式、判断与循环、模板的布局。

![在这里插入图片描述][4a2ea9870b3b4da3b6be189f8135fe51.png_pic_center]

Thymeleaf 官网：[https://www.thymeleaf.org/][https_www.thymeleaf.org]

![在这里插入图片描述][9450135e665d4402aaaccc2c3a1c61be.png_pic_center]

OK， 大概了解之后，开始案例演示：

![在这里插入图片描述][cfdec7aba1c5465bbf7a7cbdbb6f2b59.png_pic_center]

还是接着我们之前的工程

# 关闭缓存
    spring.thymeleaf.cache=false

![在这里插入图片描述][d61bbb07fa58484b95a10d56db50196c.png_pic_center]

新写一个接口

@RequestMapping("/http")
        public void http(HttpServletRequest request, HttpServletResponse response) {
        
            // 获取请求数据
            System.out.println(request.getMethod());
            System.out.println(request.getServletPath());
            Enumeration<String> enumeration = request.getHeaderNames();
            while (enumeration.hasMoreElements()) {
        
                String name = enumeration.nextElement();
                String value = request.getHeader(name);
                System.out.println(name + ": " + value);
            }
    
            System.out.println(request.getParameter("code"));
    
            // 返回响应数据
            response.setContentType("text/html;charset=utf-8");
            try (
                    PrintWriter writer = response.getWriter();
            ) {
        
                writer.write("<h1>牛客网</h1>");
            } catch (IOException e) {
        
                throw new RuntimeException(e);
            }
        }

![在这里插入图片描述][7916b2bf7ad3467389c193338b4318b1.png_pic_center]

访问一下，运行服务器

![在这里插入图片描述][020f30c19a224da697da6bcb0ccb4560.png_pic_center]

传个code 的参

![在这里插入图片描述][8de11964ae9a47e99c05803eba85a450.png_pic_center]

【Get 请求】

// GET 请求
        @RequestMapping(path = "/students", method = RequestMethod.GET)
        @ResponseBody
        public String getStudents(
                @RequestParam(name = "current", required = false, defaultValue = "1") int current,
                @RequestParam(name = "limit", required = false, defaultValue = "10") int limit) {
        
    
            System.out.println(current);
            System.out.println(limit);
    
            return "Some students";
        }

重启服务器

![在这里插入图片描述][c41486dda7fe4b2f954c745d0e1e9cc7.png_pic_center]

自己加上参数

![在这里插入图片描述][823e767e6ffd49cd9c19be5f1fc1cbaf.png_pic_center]

当然也可以把参数编排成 路径的一部分

// /student/123
        @RequestMapping(path = "/student/{id}", method = RequestMethod.GET)
        @ResponseBody
        public String getStudent(@PathVariable("id") int id) {
        
    
            System.out.println(id);
            return "a student";
        }

重启服务器，测试接口

![在这里插入图片描述][0b8e260f2eca4db9a28d13fbc3759e71.png_pic_center]

【POST 请求】

先来一个简单的页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新增学生</title>
    </head>
    <body>
    
    <form method="post" action="/community/alpha/student">
        <p>
            姓名: <input type="text" name="name">
        </p>
        <p>
            年龄: <input type="text" name="age">
        </p>
        <p>
            <input type="submit" value="保存">
        </p>
    </form>
    
    </body>
    </html>

![在这里插入图片描述][55cece84c26e4f349031391dcafe801d.png_pic_center]

重启服务器，访问一下

![在这里插入图片描述][74a6dd0dc2ee47deb7cd9e3ea2f95f5f.png_pic_center]

没问题，编写方法，处理post 请求

// POST 请求
        @RequestMapping(path = "/student", method = RequestMethod.POST)
        @ResponseBody
        public String saveStudent(String name, int age) {
        
            System.out.println(name);
            System.out.println(age);
            return "success";
        }

重启服务器，测试

![在这里插入图片描述][7fcb66b2f0cb46a6b79400387893bc6c.png_pic_center]

没问题

【返回响应数据：动态HTML 】

来一个模板先

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Teacher</title>
    </head>
    <body>
    <p th:text="${name}"></p>
    <p th:text="${age}"></p>
    </body>
    </html>

![在这里插入图片描述][5bd428b864ec4b31a510343a4e5c1f59.png_pic_center]

处理请求的方法

// 响应HTML 数据
        @RequestMapping(path = "/teacher", method = RequestMethod.GET)
        public ModelAndView getTeacher() {
        
            ModelAndView mav = new ModelAndView();
            mav.addObject("name", "张三");
            mav.addObject("age", 30);
    
            mav.setViewName("/demo/view");
    
            return mav;
        }

重启服务器，测试

![在这里插入图片描述][e9ec0a53f0424de59caaa0f69b784c69.png_pic_center]

妙啊

还有一种返回网页的方式

@RequestMapping(path = "/school", method = RequestMethod.GET)
        public String getSchool(Model model) {
        
            model.addAttribute("name", "北京大学");
            model.addAttribute("location", "北京");
            return "/demo/view";
        }

![在这里插入图片描述][d3e6551d6d464d78906a9bd21dcef648.png_pic_center]

没问题

【向浏览器响应JSON 数据】

// 响应JSON 数据(异步请求)
        @RequestMapping(path = "/emp", method = RequestMethod.GET)
        @ResponseBody
        public Map<String, Object> getEmp() {
        
            Map<String, Object> emp = new HashMap<>();
            emp.put("name", "张三");
            emp.put("age", 23);
            emp.put("salary", 8000.00);
            return emp;
        }

重启服务器，测试

![在这里插入图片描述][535ff5cd965f49da8668e8f5313f0f7f.png_pic_center]

没问题

【返回“列表”】

@RequestMapping(path = "/emps", method = RequestMethod.GET)
        @ResponseBody
        public List<Map<String, Object>> getEmps() {
        
    
            List<Map<String, Object>> emps = new ArrayList<>();
    
            Map<String, Object> emp = new HashMap<>();
            emp.put("name", "张三");
            emp.put("age", 23);
            emp.put("salary", 8000.00);
            emps.add(emp);
    
            emp = new HashMap<>();
            emp.put("name", "李四");
            emp.put("age", 24);
            emp.put("salary", 9000.00);
            emps.add(emp);
    
            emp = new HashMap<>();
            emp.put("name", "王五");
            emp.put("age", 25);
            emp.put("salary", 10000.00);
            emps.add(emp);
    
            return emps;
        }

重启服务器，测试

![在这里插入图片描述][9de11d0d44e6499fa61b72711e98402b.png_pic_center]

没问题

[5fcb9514da554c5eaf1f670f7af29de2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0a560b63a62348e3997323351d28f504.png
[56d4aebb8df7482fa9843063ff56e9f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/60fdeafcb7184e7db3c4c18052ddf505.png
[https_developer.mozilla.org_zh-CN]: https://developer.mozilla.org/zh-CN
[ed507a875050482ab36b45095712a1c3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fba1ae3a6adf4714a9a88d12f02721c2.png
[bef978a89df64de68ec3d248f8ff0a8a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4a56273bfb0c4c4b9d4db355017a3470.png
[dc6e47a519f94e80aca9519d01c459fd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c5dcb6881d2d4d74b7c1684fafbd3d7c.png
[ebd871978f404920895ea7fe5a0aac39.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/30d4774534fb476fb57fb1a699358475.png
[https_docs.spring.io_spring-framework_docs_current_reference_html_web.html_mvc-servlet-context-hierarchy]: https://docs.spring.io/spring-framework/docs/current/reference/html/web.html#mvc-servlet-context-hierarchy
[5c87cbc1687b46018299ee7585b5088d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/eb4a9079368f40ca8e8cf9101dcb6ea4.png
[https_docs.spring.io_spring-framework_docs_4.3.24.RELEASE_spring-framework-reference_htmlsingle_spring-mvc-test-server-htmlunit-mah]: https://docs.spring.io/spring-framework/docs/4.3.24.RELEASE/spring-framework-reference/htmlsingle/#spring-mvc-test-server-htmlunit-mah
[57b4917c5ac14f4a8e9a3431703c8472.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7c5e698a8c784cff957ef6317929278b.png
[4a2ea9870b3b4da3b6be189f8135fe51.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/96de970008c34fc6ab9e2efd98c48c20.png
[https_www.thymeleaf.org]: https://www.thymeleaf.org/
[9450135e665d4402aaaccc2c3a1c61be.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/abbfd78a0d68420097c14e2d1050c32e.png
[cfdec7aba1c5465bbf7a7cbdbb6f2b59.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/20de593759ec49a5a684c133239b6629.png
[d61bbb07fa58484b95a10d56db50196c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4bc10e02154e46bfabbbcfb439c0d21f.png
[7916b2bf7ad3467389c193338b4318b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4cc88567214348cdba5c73b3d32a912c.png
[020f30c19a224da697da6bcb0ccb4560.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/148c707460ea4f80806150f838b09d96.png
[8de11964ae9a47e99c05803eba85a450.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c5db87dd4f9c42c89af7c56e986ce2a4.png
[c41486dda7fe4b2f954c745d0e1e9cc7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/06f035a58a734b87813a4897f7d723d7.png
[823e767e6ffd49cd9c19be5f1fc1cbaf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a810b14cc5b64d78a42ed9137f78490e.png
[0b8e260f2eca4db9a28d13fbc3759e71.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/14ca81f6748b434a989739a822e00d28.png
[55cece84c26e4f349031391dcafe801d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7234003c35f746b0a5d13c6acf998ed8.png
[74a6dd0dc2ee47deb7cd9e3ea2f95f5f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8aca6c842365442ca636c20ce1feab55.png
[7fcb66b2f0cb46a6b79400387893bc6c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/125c277fda3b4d43984a69616a3e8e2b.png
[5bd428b864ec4b31a510343a4e5c1f59.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/11d6b7481d734a1cab3ac0fee696acfa.png
[e9ec0a53f0424de59caaa0f69b784c69.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/970db63c37a4428c9186f2e5a023fb9f.png
[d3e6551d6d464d78906a9bd21dcef648.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2ded28861cfa494cbd0a96e694ad21fb.png
[535ff5cd965f49da8668e8f5313f0f7f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f83cd242a8a745ab9feb6d005d3a6c6b.png
[9de11d0d44e6499fa61b72711e98402b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5c3d9e851eee4767a842bdc5918c871b.png