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可以表示为:
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示例程序
- 到官方启动网站,选择相应版本等操作,添加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:服务器错误
相关注解
*@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完成前端编程
- 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=>{})