JavaEE学习笔记4——springboot

hiroxzwang

已于 2023-02-09 02:31:17 修改

阅读量193

点赞数

分类专栏： Java 文章标签： java springboot

于 2023-02-09 02:28:18 首次发布

本文链接：https://blog.csdn.net/vermouth_1412/article/details/128946143

版权

Java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaEE学习笔记4

对应代码地址

Note for JavaEE-Day4

简化开发的GOD，SpringBoot来啦！

WebApp基础

HTTP: 超文本传输协议,用以请求/相应数据。
URL: URL（统一资源定位符）是Internet上资源的地址，可以定义为引用地址的字符串，用于指示资源的位置以及用于访问它的协议。
URI: 统一资源标识符，是标识逻辑或物理资源的字符序列，与URL类似，也是一串字符。包括URL与URN（同一资源名称）。
传统WebApp:
- 每次客户端进行数据请求或更新请求，服务端会渲染一整个html文件返回，这样效率较低。
- 页面跳转逻辑在服务器端，复杂度较高。
- 前后端混合，不利于合作。
SPA: Single Page Application，单页应用程序，前后端代码分离。
- 前端： html、css、js以及图片等其他静态资源。
- 后端： WebAPI、数据库、服务器等。

SpringBoot简介与示例程序

Vue+SSM架构

传统的SPA架构，需要部署在应用服务器，如Tomcat上，由如下几部分构成：

Vue。用以编写前端相关逻辑。
SpringMVC。MVC(Model-View-Controller)，作为控制器，是SpringFramework的一部分。
Spring。用以编写服务端相关逻辑。
MyBatis。一款优秀的持久层框架，主要处理数据库相关操作。

SpringBoot简介

SpringBoot极大地简化了spring应用的开发，主要表现在以下几点：

创建独立的spring程序
嵌入式Tomcat, Jetty Undertow，不需要手动部署
提供starter简化maven配置，可能时自动配置spring应用(官网starter配置初始pom)
不再需要xml配置文件（免配置bean?!）

其简化SSM可以表示为：

$SSM - > Sp r in g B oo t + M y B a t i s Pl u s$

创建SpringBoot示例程序

到官方启动网站，选择相应版本等操作，添加SpringWeb依赖，生成初始化文件。
(注解将在后面解释，下同)psvm对应类使用@SpringBootApplication注解以表示SpringBoot应用。
创建@RestController注解的类，内含@GetMapping("/hello")注解的string返回值hello方法。
网页运行即可在localhost:8080/hello下看到hello方法的输出值。端口可以通过resource文件下的application.properties或application.yaml文件进行修改，推荐使用后者。
这里也可以将3中方法注解改为@GetMapping("/hello/{name}")，这样方法就可以添加形参@PathVariable String name从而将url中的name用以输出。

Restful API

@Controller与@RestController

@Controller。用以在传统MVC中创建控制器，负责页面跳转逻辑与用以在服务器段渲染HTML的model对象。
@RestController。用以建立Restful风格的API，用以像前端返回数据。

Restful风格的API简介

Web Service。即web服务可以被跨平台的用户调用。
Restful API。即restful风格的web service，web api需符合restful规范。
REST architectural style。要求数据和功能都是可以通过URI获取的资源。

Restful API请求规范

Restful API的请求可以表示如下：

$请求 = 动词 + 宾语$

动词部分。五种HTTP语法（GET/POST/PUT/PATCH/DELETE）,即对应CRUD（CreatReadUpdateDelete）操作。
宾语部分。使用名词复数，如todos。但也有如搜索（search）例外。
过滤信息。api可以提供参数过滤返回结果，如?limite=10。

Restful API响应规范

对于每个HTTP请求，服务器都会给出响应，包含状态码与数据部分。其中状态码分为5大类，共100多种。典型的有2xx的成功响应，4xx的失败响应，5xx的服务器错误，例如：

200：ok
204：no content
401：无权限
403：有权限但访问禁止
404：记录不存在
500：服务器错误

使用POSTMAN测试

在官网下载postman，在其app中添加CRUD API而后再添加路径、参数即可进行API测试。结果将于下方响应消息体中显示，响应消息体是对Rest响应的一个包装类，属性包括请求URL、请求方法、状态码、远程地址（ip+端口号）等。

Swagger

简介。与postman类似，提供了可视化的crud API测试接口，但内置于网页中。
用法。再pom中添加swagger依赖如下，再在psvm对应类前添加@EnableSwagger2注解。

<dependency>
	<groupId>io.springfox</groupId>
	<artifactId>springfox-boot-starter</artifactId>
	<version>3.0.0</version>
</dependency>

注解。因本质是调用相关api，所以在api对应控制类与实体对象中有以下注解。
- @Api(description = "待办事项管理")。注解控制类，相当于ui中的可视化注释
- @ApiOperation("根据Id查询待办事项")。注解方法，也是可视化注释。
- @ApiModel(description="待办事项实体")。注解实体，同可视化注释。
- @ApiModelProperty("是否完成")。注解实体属性，同可视化注释。

Vue与restAPI

添加前端文件

resources/static是静态文件的根目录，用以放置html文件、图片文件、js文件、css文件等。静态文件可以通过HTTP request访问。

通过Vue和Element-UI完成前端编程

Vue。基于MVVM模式的前端编程框架，支持http元素与js对象之间的双向数据绑定。
Element-UI。饿了么团队开发的提供UI组件的前端视图框架。常用组件如el-card, el-row,el-input, el-button,el-table.
Axios。HTTP API客户端库。

上述三者在html文件中通过以下代码引入：

  <!-- 引入vue,element-ui，axios类库-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

数据绑定

v-medel=""。在el-input标签中用于绑定输入数据与js文件数据。
:data=""。el-table标签中绑定数据。
prop=""。结构体/类数据绑定属性。

Axios激活API

axios可以激活CRUD对应的WebAPI，形式如下

axios.get(path).then(response=>{}).catch(e=>{}) //返回数据存储于response.data
axios.delete(path).then(response=>{}).catch(e=>{})
axios.put(path，修改后内容).then(response=>{}).catch(e=>{})
axios.post(path,新内容).then(response=>{}).catch(e=>{})