JavaEE进阶1.0 - 技术栈

一、Maven

[1.0 准备内容](#1.0 准备内容)

[2.0 maven的环境准备](#2.0 maven的环境准备)

[(1) maven是什么](#(1) maven是什么)

(2)创建一个maven项目

[(3)安装 maven help插件](#(3)安装 maven help插件)

(4)依赖管理

[3.0 maven仓库](#3.0 maven仓库)

二、springboot

[1.0 简介](#1.0 简介)

[(1)spring boot介绍](#(1)spring boot介绍)

(2)创建一个spring项目

[(3) 讲解](#(3) 讲解)

三、SpringWebMVC入门

[1.0 简介](#1.0 简介)

[(1) 简介](#(1) 简介)

[2.0 建立连接](#2.0 建立连接)

(1)RequestMapping

[3.0 处理请求参数](#3.0 处理请求参数)

(1)获取URL中参数@PathVariable

[4.0 响应](#4.0 响应)

[1.0 前置知识](#1.0 前置知识)

[2.0 lombok工具包](#2.0 lombok工具包)

[1.0 简介](#1.0 简介)

[(1) 简洁](#(1) 简洁)

[1.0 简介](#1.0 简介)

[1.0 简介](#1.0 简介)

[(1) 引入](#(1) 引入)

一、Maven

1.0 准备内容

对于idea的要求

社区版：2021--2022.1.4 专业版：都可以

IntelliJ IDEA | 其他版本

(因为社区版想要创建SpringBoot项目需要安装一个插件但是这个插件还是收费的免费的版本要求idea版本在2021.1--2022.

//可以用学生身份免费下载进阶版本一年用解决问题的方式看这个是成本最大收益更大的方式

之后进阶版本能打开许多节点

2.0 maven的环境准备

可以在网络上找视频教程 JetBrains全家桶学生认证可以免费使用idea专业版

idea专业版可以省去下面许多步骤非常的划算

(1) maven是什么

maven是一个项目管理工具通过pom.xml文件的配置获取jar包而不用手动去添加jar包

为什么学？简单方便提高我们的开发效率减少我们开发的bug

相当于Java的自动化管家让你专注于写代码而不是折腾构建和依赖

(2)创建一个maven项目

idea本身集成了maven 不需要我们去安装

注意勾选 Add sample code 添加示例代码

选择这个为根目录这样就可以创建类了完成之后这个包会变为蓝色

(3)安装 maven help插件

理解插件：相当于鸟儿装上了翅膀

安装完成之后重启一下idea 点击右下角提示load

出现pom.xml 点击看下面如果出现了Dependency 表示成功

(4)依赖管理

groupId 组织ID artifactId 项目ID version版本

修改了maven 或者pom 文件需要刷新maven

这个插件在：

如何管理依赖：依赖传递

exclusion 排除想要加入写一个dependency

3.0 maven仓库

这个坐标是全地球唯一

分为两大类：远程仓库：中央仓库私服等 (不在你电脑上）本地仓库：在你电脑上的仓库

中央仓库： 其实就是一个目录里面有各种软件的版本复制贴贴放到本地 Central Repository:

**本地仓库：**file setting 搜索maven 倒数第二个有local reposi 这就是本地仓库的路径

这个路径默认是在c盘文件的内容还挺大的要修改路径

本地仓库的路径建议不出现中文 utf-8或gbk编码中文的路径解析可能会被扰乱

查询网站： Maven 存储库：搜索a/浏览/探索

**maven设置源：**相当于把中央仓库弄过来放到国内阿里巴巴等大厂有提供

配置当前项目配置所有项目：

这个是修改所有项目还是把maven仓库的地址都改掉之前的修改是本项目

修改完成后之后创建项目都是现在的配置咯嘟嘟

私服：有些代码不想要让别人用到不想上传到中央仓库不愿意公开公司创建一个私服

二、springboot

1.0 简介

(1)spring boot介绍

Spring | Microservices spring官网

Spring是一个高级框架越高级用起来越简单淘汰的框架还有Servlet Struts等

spring家族：Spring | Projects Spring Framework是spring的核心最原始的框架 .

spring Boot的诞生是为了简化Spring程序开发的 springboot就是spring的脚手架

（能踩着砌房子能对齐骡砖头非常方便、之前摘玉米是人工现在就是机器）

(2)创建一个spring项目

Spring | Quickstart 官方讲解文档

组织ID：标识的项目是谁来做的例如：美团阿里腾讯字节等等

ADD添加依赖

点击下面的generate就生成代码了这样就创建好代码了我们可以在idea里面用open打开项目

哈哈哈哈上面的方式太麻烦了接下来是使用idea来创建

社区版装一个插件就能使用创建springboot项目了

插件地址：https://plugins.jetbrains.com/plugin/18622-spring-boot-helper/versions

涉及工具/intellij-spring-assistant-2022.1.2.zip · 泡泡鱼/JavaEE进阶课程资料包 - 码云 - 开源中国

安装插件的教程：file setting plugins 右上角设置然后从硬盘打开插件下面是图片

不用解压直接点开就行了

如何看自己装成功了没有 file new project 出现下面这个表示安装成功

然后改掉project type中的选项是maven 完成之后出现的页面是选择依赖用的

需要手动把release删掉然后刷新maven

创建成功

复制项目名之后去maven仓库查找

有时候会出现maven版本不在这个时候需要我们自己到中央仓库查找在中央仓库的页面 ctrl+f是查找的快捷键

常见问题：

插件下不下来添加版本号

把这个删除掉然后刷新maven

还是不行的话在artifactId下面加上代码写版本号

这样就可以了

包下不下来：重新刷新maven 看一下是部分没下载下来还是全部没下载下来全部都没：再多次尝试刷新也可能是没有权限的问题部分没：多次尝试刷新刷新了很多次都下载不下来

在文件夹里面删除本地仓库然后刷新maven

黄线出现不用管黄线是表示警告红线也不一定就是有错一切以运行结果为主

jar包不存在去中央仓库查找jar包（有可能是中央仓库就没有）

换下网络可能导致jar包下载一半删除仓库再刷新

SNAPSHOT 可以理解为开发版本

版本：通常由三位数字组成大中小版本号第一位大版本比较大的改动第二位中版本新增小的功能第三位小版本修复bug 又小又少的功能

在代码上按住ctrl 鼠标指针放上去

删除不需要的东西按住ctrl可以多选

HELP.md是帮助文档用不上删了就行 gitignore 是git工具 gitattributes删除掉就行

最终的结果是下面的两个就行了留下gitgnore也行

然后重启idea 发现.idea文件还是会出现呢自动的

表示在idea上面的配置都在.idea文件里面呢你不删掉相当于用的是别人的配置在你这不一定运行成功别人的删掉自己的就不用了

<parent> 是springboot版本里面的版本号是可以修改的

url里面可以申请一些版权开发人员联系方式等等

properties jdk版本 dependecy 依赖 build 打包方式

介绍一下：项目的代码在main目录下面 test里面是测试用例 main里面的DemoApplication是启动类 resoure static 静态代码 templates 是模板删了 application.properties是配置文件

启动类主要是因为上面的注解删除注解了它啥也不是点击里面的两个三角形的随意一个都可以启动项目

下面来演示一下如何写自己的代码

普通类普通方法加上注解：类加上@RestController 方法加上@RequestMapping（hello）表示定义了一个hellojie'kou //之后讲解

常见问题：

Java没有把那个文件识别为Java文件文件颜色设置 file project Structure Moudle

点击上面的小图标就可以上色就可以把Java文件变为普通文件

简单的方式看下面的图片：

根本原因：包没有导入可能原因：pom文件有没有报错检查包是否导入清理idea缓存

上面这个图片是清理idea缓存

(3) 讲解

http://127.0.0.1:8080/hello/v1

127.0.0.1是IP端口表示自己的主机 8080是tomcat web服务器 hello/v1是资源路径

web服务器：

HTTP协议就是HPPT客户端和HTTP服务器之间的交互数据的格式

Web服务器就是对HTTP协议进行封装程序员不需要对协议进行操作让Web开发更加便捷主要功能是提供网上信息浏览服务

我们不用去自己解析协议内容啦用web服务器就可以啦我们写好代码放到web服务器上就可以显示页面了不需要我们纠结中间的过程了 spring集成了tomcat

注解：

@RequestMapping表示建立连接这个是post get请求都能用

路由映射：当用户访问一个URL时，将用户的请求对应到程序中某个类的某个方法的过程就叫做路由映射

例：

@RequestMapping("/user")

@RestController

public class UserController {

@RequestMapping("/sayHi")

public String sayHi() {

return "hello,spring MVC'' ;} }

访问地址：http:// 127.0.01:8080/user/sayHi

@GetMapping 表示能用Get请求**@PostMapping** 表示能用post请求

@RequestParam 表示参数的绑定前端的某一个参数绑定给后端方便地从请求URL的查询字符串或表单提交中获取参数值并将其赋值给你在Java方法中定义的变量这个注解帮助你完成从URL提取name的值并交给方法里的name变量

例：//从前端接收参数q 赋值给keyword Public String r6(@RequestParam(value = " q " ,required = false )String keyword) { return "接收参数：keyword = " +keyword；）}

@Test注解类似于main方法是可以运行的一个类里面只能有一个main方法 test可以写好几个可以同时运行

还可以看日志

传递JSON数据：

JSON是一种数据格式有自己的格式和语法使用文本表示一个对象或数组信息因为ISON本质是字符串主要负责在不同语言中数据传递和交换

客户端与服务器交互的一种数据格式使用JSON 它是主流

直观的感受一下吧：

浏览器搜索在线json 都可以用这些工具判断正错与否

JSON在线解析格式化验证 - JSON.cn

java 复制代码

package com.bite.spring.demo;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.jupiter.api.Test;

public class JsonTest {
    @Test
    void testjson(){
        System.out.println(123);
    }

    @Test
    void testjson02() throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        //创建Java对象
        UserInfo userInfo = new UserInfo();
        userInfo.setName("zhangsan");
        userInfo.setAge(15);
        userInfo.setGender(1);

        //对象转换json
        String s =  objectMapper.writeValueAsString(userInfo);
        System.out.println(s);
    }
    @Test
    void testJson2Object() throws JsonProcessingException{
        ObjectMapper objectMapper = new ObjectMapper();
        //定义一个json字符串
        String s = "{\"name\":\"zhangsan\",\"gender\":1,\"age\":15}";
        //json 转 对象
        UserInfo userInfo = objectMapper.readValue(s,UserInfo.class);
        System.out.println(userInfo );
    }
}

常见的JSON和对象的转换工具 gson fastjson jackjson(spring 集成）引入依赖就可以使用啦

普通项目添加依赖如果是spring项目直接用就行

传递JSON对象：

后端代码如何写呢

下面的图片是构造一个请求

java 复制代码

    //传递json
    @RequestMapping("/r9")
    public String r9(@RequestBody UserInfo userInfo) {//这个表示我们要接收一个json对象
        // 它的作用是接收一个HTTP请求体（RequeBody）钟的josn数据 并自动将其转化为一个Java对象userinfo
      return userInfo.toString();
    }
}

spring会帮你转换不用你自己手动转换了.

小tips：规范写代码的时候如果你们去改代码的时候如果你们添加了有参勾走函数你们记得看一下无参构造函数到底有没有用如果拿不准用不用就加上有的地方你不加无参的构造函数会出错

获取URL中参数@PathVariable：

pathVariable：路径变量和字面表达的意思一样这个注解主要作用在请求URL路径上的数据绑定

三、SpringWebMVC入门

1.0 简介

(1) 简介

什么是SpringWebMVC

是一种软件架构设计模式 Mode模型 Controller控制器 View视图 MVC是一种思想

通俗一点我们去饭店吃饭点单吃饭 服务员就是视图 ，负责接待客户 前厅就是控制器 ，根据用户的点餐情况来选择给哪个后厨下达命令 后厨就是Model模型 根据前厅的要求来完成客户的用餐需求在网页里面我们点击图片把数据给后端后端处理好之后返回给前端表现出来就是这个意思

SpringMVC 是一个实现了MVC模式的Web框架两个关注点：MVC Web

//容器：是一个抽象的概念能装东西就是容器 tomcat能装web服务也可以叫做容器

spring mvc现在的侧重点已经是web了这个MVC有点点过时了你看idea里面都写成spring web了

springboot通过SpringWebMVC 来实现web功能

Springboot类似12306(更加方便还可以订外卖订酒店啥的） SpringFramework：火车 MVC：代售点 springboot只是一种方式当然也可以在美团买票在携程买

springboot只是MVC的一种实现方式就相当于做饭 springboot是厨房但是几千年前架个木棍也能烧火做饭呢你自己写的代码也能实现某个功能 spirngboot帮你打开门推广出去

注解的生命周期：source class编译 runtime

围绕三个点来进行学习

建立连接请求响应

2.0 建立连接

(1)RequestMapping

@RequestMapping 通过这个提供了对外的连接资源 路径的映射

既可以加在方法上也可以加在类上面路径映射是类路径+方法路径

怎么理解呢 如果把springboot项目看作一栋办公楼里面有不同的业务部门（有的负责写这个有的负责写那个） RequestMapping就是给这些部门和窗口贴上门牌号让前端来访者能精准办事窗口

建议：给所有的类都加上类路径

为了避免发生错误(两个方法里面都叫m1 这个时候需要类路径区分）提高可读性(阅读别人的代码或者别人阅读你的代码方便一点）

如何看报错信息从下往上拉到头看头的信息

注解默认有参数值这个参数值赋给value 例：@RequestMappin( value = "/m2" , method = RequestMethod.GET ) value和path是一样的这个在源码里面就可以看到

//postman 构造请求右上角可以保存这样下次点开postman还在 post还可以上传文件

这样可以用post传递不同类型的数据

//简单了解RequestMapping

3.0 处理请求参数

(1)获取URL中参数@PathVariable

pathVariable表示路径变量从URL中取值

将URL中的动态部分（如/user id中的id映射到方法参数）

我们构造post请求的时候专门些代码的话比较麻烦

@RequestBody 请求正文

最上面一行大括号里面articleId表示一旦匹配上的话将articleId的值赋给下面r11括号里面的articleId 这个动态变量占位符用于捕获URL中的动态值

PathVariable表示路径变量

(2)上传文件

有时候我们发送请求的时候需要将文件上传到服务器

用postman模拟请求的时候按照下面图片的地方上传好文件

可以用@RequestPart("file11") 来达到参数重新命名

这个是这部分的重点内容

HTTP request

参数可以放在哪里： url资源路径 url查询字符串 header 请求正文body

路径参数：url上除去查询字符串

请求参数：url的查询字符串和请求正文问号后面的内容

理解为主没必要纠结概念

HTTP的无状态：

默认情况下HTTP协议的客户端和服务器之间的这次通信和下次通信之间没有直接的联系

但是实际开发中我们很多时候是需要知道请求之间的关联关系的

例如登录网站成功之后第二次访问的时候服务器就能知道该请求是否已经登录过了

cookie和session经常是在一起绑定的

例子：学生证

入学的时候学生填写个人信息填了姓名身份证性别学号高中学校等然后学校根据这些信息建档案最后给你发个学生证之后你出入学校的时候携带学生证就可以了

学生证就是相当于cookie里面有一些关键的简短的信息 seesion就像是你入学的时候详细填写的那个表

cookie和session最大的区别是：

cookie是存储在客户端的简短信息 session是存储在服务器上的详细信息

session 翻译过来是会话的意思 A和B交流产生一个会话(对话)

session本质上就是一个哈希表

同一时间有不同的客户端访问服务器服务器怎么区分

这个时候刚刚的cookie(学上证)就能快速区分了

sessionID：键值对的方式存储的用户的相关信息例如诊疗卡的：诊疗卡1：病人信息1

//session 默认是保存在内存中的如果重启服务器则session数据就会丢失

//cookie和seesion之间主要是通过sessionId关联起来的 sessionId是cookie和session之间的桥梁

(4)获取Cookie/Session

获取cookie的方式：

java 复制代码

    @RequestMapping("r13")
    public String r13(HttpServletRequest request){
        Cookie[ ] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                System.out.println(cookie.getName()+cookie.getValue());
            }
        }
        return "返回Cookie成功";
    }

    @RequestMapping("/r14")
    public String r14(@CookieValue("java") String java){
        return "从cookie中获取Java的值："+java;
    }

获取seession方式：

session是存储在服务端的我们没有办法伪造session

session的存储和获取：

java 复制代码

    //存储session
    @RequestMapping("/setSession")
    public String setSession(HttpServletRequest request){
        //从cookie中获取sessionId 根据sessionId 获取Session对象
        HttpSession session = request.getSession();
        //默认存储在内存中
        //登录的用户名称
        session.setAttribute("userName","zhangsan");
        session.setAttribute("age",17);
        return "设置session成功";
    }

    //获取session
    @RequestMapping("/getSession")
    public String getSession(HttpServletRequest request){
        //从cookie中获取sessionId  根据sessionId 获取session对象
        HttpSession session = request.getSession(false);
        //如果用户登录  session有值  未登录  session为null
        if(session ==  null){
            return "用户未登录";
        }else{
            //
            String userName = ((String) session.getAttribute("userName"));
            return "登录用户为："+ userName;
        }
    }
    //获取session第二种方式
    @RequestMapping("/getsession2")
    public String getsession2(HttpSession session){
        String userName = ((String) session.getAttribute("userName"));
        return "登录用户为："+ userName;
    }
    //获取session的第三种方式
    @RequestMapping("/getsession3")
    public String getsession3(@SessionAttribute("userName") String userName){
        return "登录用户为"+userName;
    }

cookie和session的区别：

cookie是客户端保存用户信息的一种机制 session是服务器保存用户信息的一种机制

cookie和session之间是通过sessionId关联起来的 sessionId是cookie和session之间的桥梁

cookie和session经常会在一起配合使用

也是两种方式

java 复制代码

    @RequestMapping("/getHeader")
    public String getHeader(HttpServletRequest request){
        String userAgent = request.getHeader("User-Agent");
        return "从header中获取userAgent"+userAgent;
    }
    //获取Header的第二种方法
    @RequestMapping("/getHeader2")
    public String getHeader2(@RequestHeader("User-Agent")  String userAgent){
        return "从header中获取userAgent"+userAgent;
    }

HttpServletRequest封装了客户端发起的一切与请求相关的孰不抱鼓内容与特征西悉尼以及处理环节需要掌握的上下文底部数据细节

所以我们可以用httpservletrequest这个万能方法获取请求里面的一切内容

4.0 响应

(1)返回静态页面

在这个包里面的内容一般是静态的页面

前端页面前面加上/ "/index.html" 反正管不管别的加上/肯定不会错前端对应的路径是从static包里面

@RestController 和 @Controller的区别：

之前前后端不分家的时候返回的是页面而现在返回的是数据跟页面没有关系了

RestController返回的是数据 Controller返回的是页面

//////////////////////////

过代码太多 spring扫描一遍太费力加上注解相当于加上标识

springboot的默认扫描路径为启动类所在路径及其子目录

Restcontroller就是相当于打标签

//@RestController = @ResponseBody + @Controller

一个类中，既有返回页面的方法又有返回数据的方法使用Controller 在返回数据的方法上加@ResponseBidy(既是类注解又是方法注解)

如果一个类全部返回数据 RestController 或者 controller + responsebody

如果一个类全服返回页面使用controller

//注解的三个生命周期

//(2)返回HTML代码片段

//了解一下

java 复制代码

    @ResponseBody
    @RequestMapping("/r3")
    public String returnHTML(){
            return "<h1>我是一个一级标签</h1>";
    }

纯文本 produce是修改格式

java 复制代码

  @ResponseBody
    @RequestMapping(value="/r4",produces="text/plain")
    public String returnText(){
        return "<h1>我是一个一级标题</h1>";
    }

(2)返回JSON

状态码也是可以设置的状态码和页面的展示是没有关系的

java 复制代码

    @ResponseBody
    @RequestMapping("/r6")
    public UserInfo setStatus(HttpServletResponse response){
        response.setStatus(123123);
        UserInfo userInfo2 = new UserInfo("zhangsan",1,1);
        return userInfo2;
    }

(3)设置Header

//简单了解

通过ReuqestMapping进行设置

java 复制代码

    @ResponseBody
    @RequestMapping("/r7")
    public String setHeader(HttpServletResponse response){
        response.setHeader("myHeader","myHeader");
        return "设置Header成功";
    }

综合小练习1

做一个简单的计算器（哇咔咔）

1.0 前置知识

(1)前后端交互接口

接口又叫API 简单来说就是允许客户端给服务器发送哪些HTTP请求，并且每种请求预期获取什么样的HTTP响应

前后端团队会在开发前提前约定好交互的方式需求开发前先定义接口文章

前后端按照接口文章来进行开发

接口其实也就是我们前面网络模块讲的"应用层协议" 把约定的内容写在文档上就是接口文档

(可以理解为玩具的说明书我们在工作中也需要写接口文档)

接口文档的修改要注意如果是找别人帮忙的话记得留据(哑巴亏) 服务提供方来写，来改

接口定义：

功能：两个数相加

路径：cala/add add plus 建2--4级

参数：完成这个功能需要哪些材料(参数) 参数名称类型含义补药使用abc等aa bb cc等无含义的变量补药使用拼音

返回结果：名字要合理一点返回类型含义

(接口文档内容不重要重要的是这个相互约定的形式重要)

(2)代码和效果图

小步慢跑写完之后先测试几个接口没问题了继续写最后写前端代码熟练了可以一次性多写点代码多测试几个接口

服务器代码+前端代码：

java 复制代码

//服务器代码
package com.example.springbootdemo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/clac")
public class ClacController {
    @RequestMapping("/sum")
    public String sum(Integer num1,Integer num2){
        if(num1==null || num2==null){
            return "参数不合法，请检查后提交";
        }
        Integer sum = num1 + num2;
        return "计算机的计算结果是："+sum;
    }

}

//前端页面代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form action="clac/sum" method="post">
    <h1>计算器</h1>
    数字1：<input name="num1" type="text"><br>
    数字2：<input name="num2" type="text"><br>
    <input type="submit" value=" 点击相加 ">
</form>
</body>

</html>

通过postman测试没有问题在浏览器上面测试一般也没有问题

访问前端页面需要输入网址：http://127.0.0.1:8080/clac.html //这个访问的是target包里面的页面

右上角那个只是用来查看页面的打开的是纯html页面

(3)实现用户登录功能

要实现的功能是用户输入密码然后浏览器返回登录成功

//接口的定义：

//请求路径方式描述请求参数响应数据

//接口1：登录接口参数：用户名和密码返回结果是登录成功还是失败

//接口2：返回登录用户

//用下面那种写法我们写代码的时候最多补药嵌套5层

代码就会有点丑陋三成看起来都有点难受三层for循环缕逻辑都有点难受

StringUtils.hasLength( ) 用来看这个字符串是不是空的 equals( ):用于判断两个对象是否相等

equals会报空指针异常通常把常量写在最前面虽然前面判断是否未空这个当作是一个习惯

java 复制代码

package com.example.springbootdemo;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("/user")
@RestController
public class UserController {
   @RequestMapping("/login")
    public Boolean login(String userName,String password){
       //参数校验
//       if(userName == null || password == null ){
//           return false
//       }
       if(!StringUtils.hasLength(userName) ||  !StringUtils.hasLength(password)){
           return false;
       }
       //校验用户名和密码是否正确
         //还未学习数据库相关的操作，暂且把账号和密码写死 adamin admain
       if("admin".equals(userName) && "admin".equals(password)){
           return true;
       }
       return false;
   }
}

(4)查询登录用户接口

//setAttribute 设置属性是用来给Html元素设置或修改属性的方法

java 复制代码

   @RequestMapping("/getLoginUser")
    public String getLoginUser(HttpSession session){
       String userName = (String) session.getAttribute("userName");
       return userName;
   }

(5)Ajax简介

只是做了解会用就行

form表单的缺点一定会发生跳转(之前写计算器那个代码的时候点击相加之后就是跳转了)

Ajax能够快速地将增量更新呈现在用户界面上而不需要刷新整个页面 这使得程序能够更快地回应用户地操作

我们在网页输入密码的时候没有发生跳转显示密码错误(页面跳转一下用户体验感不好)

ajax的实现：

在网上搜资料就可以找到现在原生的ajax也很少有人用了用jQ多一点

//$是选中input框 val框框里面有值表示赋值 val框框里面没有值表示取值

HTTP 请求方法（如 GET/POST/PUT/DELETE）的规范写法是纯大写字符串（如 "GET"），且不能包含路径分隔符 /。 type: "get",

下面是代码和效果图：

java 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName"><br>
密码：<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()">

<script src="js/jquery-3.7.1.min.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>-->
<script>
    function login() {
        $.ajax({
            type:"post",
            url:"/user/login",
            data:{
                userName:$("#userName").val(),
                password:$("#password").val()
            },
            success:function(result){//Http 请求响应成功时候调用这个函数
                if(result){
                    //密码正确
                    location.href="index.html";//跳转到这个页面了
                }else{
                    alert("密码错误，请确认");
                }
            }
        });
    }
</script>
</body>

</html>


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
</head>

<body>
登录人: <span id="loginUser"></span>

<script src="js/jquery-3.7.1.min.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>-->
<script>
    $.ajax({
        url: "/user/getLoginUser",
        type: "get",
        success: function (userName) {
            $("#loginUser").text(userName);
        }
    });

</script>
</body>

</html>

2.0 lombok工具包

(1)介绍

是一个Java工具库，通过添加注解的方式，简化Java的开发

通过一些注解的方式，可以帮助我们消除一些冗长代码，使代码看起来简洁一些

使用方法：引入依赖

java 复制代码

 <dependency>
 <groupId>org.projectlombok</groupId>
 <artifactId>lombok</artifactId>
 <optional>true</optional>
 </dependency>

//粘贴进来记得刷新maven

(2)引入

属性是私有的还需要有get set方法

这样的代码很冗余重复性的工作可不可以用注解？

这些代码能不能让别人帮忙写一下呢？

这就是loombook的作用下面是效果图

//自己就出来get方法和set方法

(3)弊端以及解决方法

有时候不需要它生成某些方法有时候需要修改它自动生成的某些方法里面的逻辑

如果觉得@Data比较粗暴(生成的方法太多) , lombok也提供了一些更精细粒度的注解

(4)引入2

如果之前没有学习过maven 要怎么导入lombok呢？

在中央仓库(随便一搜索就能搜到)找到之后下载jar包

然后点击左上角的file 找到模块点击下面的图片显示这部分内容

然后填入路径就导入好咯

// 工具的话选版本不建议选最新版本建议使用次新的版本(新版本稳定性不足容易有未知的意外的错误)

(5)引入3

安装一个插件名字叫做editStar

安装完成之后重启一下idea

不是所有的依赖都可以在这个上面找到

如何判断有没有安装好呢？

pom文件里面右键有一个generate

优先使用github

这样就是自动导入依赖了不用自己手动配置(但是还是得手动点击哈哈哈)

综合小练习2

留言板

1.0 简介

(1) 简洁

之前前端的文章里面我们做过一个留言板的例子那个时候还没有学习后端

留言的内容留不下来一刷新就不见了

因为目前还没有学习数据库相关的操作只能存储在内存中像是list map中

(2)实现逻辑

接口：发表留言的接口留言列表的接口

使用json的格式 post请求

jquery：是一个轻量级的JavaScript库简化前端代码的开发

能快速操作DOM元素用$就代替了

能便捷实现Ajax前后端交互（在不刷新网页的情况下）

前后端交互逻辑：

前端准备阶段在输入框填写from to say内容，点击提交按钮触发submit()函数前端先做好非空校验(避免无效请求) 然后构造与后端匹配的请求参数

前端发送ajax请求阶段通过$.ajax( )将请求参数以指定格式(POST)发送到后端指定接口

后端处理请求阶段：接口接收前端发来的数据做参数校验之后将数据存入messageInfoList 然后返回处理结果 ok：1成功或者ok：0失败

前端接收并处理响应阶段：后端返回数据后 ajax的success回调函数就会被触发前端根据后端返回的ok码判断逻辑成功的话添加留言节点 + 清空输入框

(3)代码和效果图

java 复制代码

package com.example.springbootdemo;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RequestMapping("/message")
@RestController
public class MessageController {

   private List<MessageInfo> messageInfoList = new ArrayList<>();

   // @PostMapping(value="/publish" , produces = "application/json")
    @PostMapping(value="/publish" )
    public String publish(@RequestBody MessageInfo messageInfo) {   //publish 发布
        //参数校验
        if (!StringUtils.hasLength(messageInfo.getFrom())
                || !StringUtils.hasLength(messageInfo.getTo())
                || !StringUtils.hasLength(messageInfo.getMessage())) {
            return "{\"ok\":0}";
        }
        messageInfoList.add(messageInfo);
        return  "{\"ok\":1}";
    }

    @GetMapping("/getList")
     public List<MessageInfo> getList(){
        return messageInfoList;
    }
}

下面是前端页面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
<div class="container">
    <h1>留言板</h1>
    <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
    <div class="row">
        <span>谁:</span> <input type="text" name="" id="from">
    </div>
    <div class="row">
        <span>对谁:</span> <input type="text" name="" id="to">
    </div>
    <div class="row">
        <span>说什么:</span> <input type="text" name="" id="say">
    </div>
    <input type="button" value="提交" id="submit" onclick="submit()">
    <!-- <div>A 对 B 说: hello</div> -->
</div>


<script src="js/jquery-3.7.1.min.js"></script>
<script>
    load();

    function load() {
           $.ajax({
                type:"get",
                url:"/message/getList",
                success:function(messages){
                    if(messages != null && messages.length>0){
                     var finalHtml = "";
                     for(var m of messages){
                         finalHtml += "<div>"+m.from +"对" + m.to + "说:" + m.message+"</div>";
                     }
                     $(".container").append(finalHtml);
                }
       }
      });
    }


    function submit(){
        //1. 获取留言的内容
        var from = $('#from').val();
        var to = $('#to').val();
        var say = $('#say').val();
        if (from== '' || to == '' || say == '') {
            return;
        }
        //2. 构造节点
<!--        var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";-->
        //3. 把节点添加到页面上
<!--        $(".container").append(divE);-->

        //4. 清空输入框的值
         $('#from').val("");
         $('#to').val("");
         $('#say').val("");
         $.ajax({
                type: "post",
                url: "/message/publish",
                contentType: "application/json",
                data: JSON.stringify({
                    "from": from,
                    "to": to,
                    "message": say
                }),
                success: function (result) {
                    if (result) {
                        //成功
                        //2. 构造节点
                        var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
                        //3. 把节点添加到页面上
                        $(".container").append(divE);

                        //4. 清空输入框的值
                        $('#from').val("");
                        $('#to').val("");
                        $('#say').val("");
                    } else {
                        //失败
                        alert("发布失败");
                    }
                }
          });

    }

</script>
</body>

</html>