JavaEE学习笔记4——springboot

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上,由如下几部分构成:

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

SpringBoot简介

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

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

其简化SSM可以表示为:

S S M − > S p r i n g B o o t + M y B a t i s P l u s SSM->SpringBoot+MyBatisPlus SSM>SpringBoot+MyBatisPlus

创建SpringBoot示例程序

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

Restful API

@Controller与@RestController

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

Restful风格的API简介

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

Restful API请求规范

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

请求 = 动词 + 宾语 请求=动词+宾语 请求=动词+宾语

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

Restful API响应规范

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

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

相关注解

  • *@Data。对类中属性生成默认的get/set方法,该注解源于Lomlock插件。
  • @RestController。声明RestfulAPI。
  • @RequestMapping("")。既可以注解类也可以注解方法,用以映射URL。
  • @GetMapping("")。为GET请求映射URL。
  • @PostMapping("")。为POST请求映射URL。
  • @PutMapping("")。为PUT请求映射URL。
  • @DeleteMapping("")。为DELETE请求映射URL。
  • @PathVariable。注解路径中的参数。
  • @RequestBody。注解的参数会从请求体中反序列化。

使用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完成前端编程

  1. Vue。基于MVVM模式的前端编程框架,支持http元素与js对象之间的双向数据绑定。
  2. Element-UI。饿了么团队开发的提供UI组件的前端视图框架。常用组件如el-card, el-row,el-input, el-button,el-table.
  3. 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=>{})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hiroxzwang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值