什么网站设计素材多,湖北微网站建设多少钱,离我最近的电脑培训中心,dw制作网站模板1. REST 简介
REST#xff08;Representational State Transfer#xff09;#xff0c;表现形式状态转换#xff0c;它是一种软件架构风格。
当要表示一个网络资源的时候#xff0c;可以使用两种方式#xff1a;
传统风格资源描述形式 http://localhost/user/getById?…1. REST 简介
RESTRepresentational State Transfer表现形式状态转换它是一种软件架构风格。
当要表示一个网络资源的时候可以使用两种方式
传统风格资源描述形式 http://localhost/user/getById?id1 查询 id 为 1 的用户信息 http://localhost/user/saveUser 保存用户信息REST风格描述形式 http://localhost/user/1 查询 id 为 1 的用户信息 http://localhost/user 保存用户信息
传统方式一般是一个请求 url 对应一种操作这样做不仅麻烦也不安全因为会程序的人读了请求 url 地址就大概知道该 url 实现的是什么操作。
查看 REST 风格的描述会发现请求地址变简单了并且只看请求 URL 并不能轻易猜出该 URL 的具体功能。
所以 REST 的优点有
隐藏资源的访问行为无法通过地址得知对资源是何种操作。书写简化。
但是问题也随之而来一个相同的 url 地址既可以是新增也可以是修改或者查询该如何区分该请求到底是什么操作呢?
按照 REST 风格访问资源时使用请求动作区分对资源进行了何种操作 请求的方式比较多但是比较常用的就 4 种分别是 GET、POST、PUT、DELETE。不同的请求方式代表不同的操作类型
发送 GET 请求是用来做查询发送 POST 请求是用来做新增发送 PUT 请求是用来做修改发送 DELETE 请求是用来做删除
上述行为是约定方式约定不是规范可以打破所以称REST风格而不是REST规范。可以不这样做但不建议。
描述模块的名称通常使用复数也就是加 “s”。这样表示此类资源而非单个资源例如users、books、accounts…
根据 REST 风格对资源进行访问称为 RESTful。 在开发过程中大多都遵从 REST 风格来访问后台服务所以可以说以后都是基于 RESTful 来进行开发。
2. RESTful 入门案例
PathVariable 注解绑定路径参数与处理器方法形参间的关系要求路径参数名与形参名一一对应。
public class BookController {//用postman发post请求请求路径http://localhost/booksRequestMapping(value /books,method RequestMethod.POST)ResponseBodypublic String save(RequestBody Book book){System.out.println(book save... book);return {module:book save};}//用postman发delete请求请求路径http://localhost/books/1//请求路径中的“1”传给idRequestMapping(value /books/{id},method RequestMethod.DELETE)ResponseBody//PathVariable把请求路径中的变量值传给形参public String delete(PathVariable Integer id){System.out.println(book delete... id);return {module:book delete};}//用postman发put请求请求路径http://localhost/booksRequestMapping(value /books,method RequestMethod.PUT)ResponseBodypublic String update(RequestBody Book book){System.out.println(book update... book);return {module:book update};}//用postman发get请求请求路径http://localhost/books/1RequestMapping(value /books/{id},method RequestMethod.GET)ResponseBody//PathVariable把请求路径中的变量值传给形参public String getById(PathVariable Integer id){System.out.println(book getById... id);return {module:book getById};}//用postman发get请求请求路径http://localhost/booksRequestMapping(value /books,method RequestMethod.GET)ResponseBodypublic String getAll(){System.out.println(book getAll...);return {module:book getAll};}
}RequestBody、RequestParam、PathVariable 三个注解之间的区别和应用分别是什么?
区别
RequestParam 用于接收 url 地址传参或表单传参。RequestBody 用于接收 json 数据。PathVariable 用于接收路径参数使用 {参数名称} 描述路径参数。
应用
后期开发中发送请求参数超过 1 个时以 json 格式为主RequestBody 应用较广。如果发送非 json 格式数据选用 RequestParam 接收请求参数。采用 RESTful 进行开发当参数数量较少时例如 1 个可以采用 PathVariable 接收请求路径变量通常用于传递 id 值。
3. RESTful 快速开发
在前面基础上
可以把相同的路径前缀写在类上即把RequestMapping(/books)提到类上。由于之前每个方法上都有ResponseBody注解所以可以统一写在类上。
得到如下代码
Controller
ResponseBody
RequestMapping(/books)
public class BookController {//用postman发post请求请求路径http://localhost/booksRequestMapping(method RequestMethod.POST)public String save(RequestBody Book book){System.out.println(book save... book);return {module:book save};}//用postman发delete请求请求路径http://localhost/books/1//请求路径中的“1”传给idRequestMapping(value /{id},method RequestMethod.DELETE)//PathVariable把请求路径中的变量值传给形参public String delete(PathVariable Integer id){System.out.println(book delete... id);return {module:book delete};}//用postman发put请求请求路径http://localhost/booksRequestMapping(method RequestMethod.PUT)public String update(RequestBody Book book){System.out.println(book update... book);return {module:book update};}//用postman发get请求请求路径http://localhost/books/1RequestMapping(value /{id},method RequestMethod.GET)//PathVariable把请求路径中的变量值传给形参public String getById(PathVariable Integer id){System.out.println(book getById... id);return {module:book getById};}//用postman发get请求请求路径http://localhost/booksRequestMapping(method RequestMethod.GET)public String getAll(){System.out.println(book getAll...);return {module:book getAll};}
}在上面代码的基础上Controller和ResponseBody注解可以用一个注解RestController替代。
请求动作也可以用更简单的注解表示。
// Controller
// ResponseBody
RestController
RequestMapping(/books)
public class BookController {//用postman发post请求请求路径http://localhost/books// RequestMapping(method RequestMethod.POST)PostMappingpublic String save(RequestBody Book book){System.out.println(book save... book);return {module:book save};}//用postman发delete请求请求路径http://localhost/books/1//请求路径中的“1”传给id// RequestMapping(value /{id},method RequestMethod.DELETE)DeleteMapping(/{id})//PathVariable把请求路径中的变量值传给形参public String delete(PathVariable Integer id){System.out.println(book delete... id);return {module:book delete};}//用postman发put请求请求路径http://localhost/books// RequestMapping(method RequestMethod.PUT)PutMappingpublic String update(RequestBody Book book){System.out.println(book update... book);return {module:book update};}//用postman发get请求请求路径http://localhost/books/1// RequestMapping(value /{id},method RequestMethod.GET)GetMapping(/{id})//PathVariable把请求路径中的变量值传给形参public String getById(PathVariable Integer id){System.out.println(book getById... id);return {module:book getById};}//用postman发get请求请求路径http://localhost/books// RequestMapping(method RequestMethod.GET)GetMappingpublic String getAll(){System.out.println(book getAll...);return {module:book getAll};}
}上面的代码去掉注释后
RestController
RequestMapping(/books)
public class BookController {//用postman发post请求请求路径http://localhost/booksPostMappingpublic String save(RequestBody Book book){System.out.println(book save... book);return {module:book save};}//用postman发delete请求请求路径http://localhost/books/1//请求路径中的“1”传给idDeleteMapping(/{id})//PathVariable把请求路径中的变量值传给形参public String delete(PathVariable Integer id){System.out.println(book delete... id);return {module:book delete};}//用postman发put请求请求路径http://localhost/booksPutMappingpublic String update(RequestBody Book book){System.out.println(book update... book);return {module:book update};}//用postman发get请求请求路径http://localhost/books/1GetMapping(/{id})//PathVariable把请求路径中的变量值传给形参public String getById(PathVariable Integer id){System.out.println(book getById... id);return {module:book getById};}//用postman发get请求请求路径http://localhost/booksGetMappingpublic String getAll(){System.out.println(book getAll...);return {module:book getAll};}
}4. 基于 RESTful 的页面数据交互
4.1 需求分析 需求一图片列表查询从后台返回数据将数据展示在页面上。
需求二新增图书将新增图书的数据传递到后台并在控制台打印。
说明此次案例的重点是在 SpringMVC 中使用 RESTful 实现前后台交互所以并没有和数据库进行交互所有数据使用假数据来完成开发。
4.2 后台接口开发
RestController
RequestMapping(/books)
public class BookController {//保存图书PostMappingpublic String save(RequestBody Book book){System.out.println(保存图书book);return {module:save book success};}//查询所有图书GetMappingpublic ListBook getAll(){System.out.println(查询所有图书...);ListBook bookList new ArrayList();Book book1 new Book();book1.setType(计算机);book1.setName(SpringMVC入门教程);book1.setDescription(小试牛刀);bookList.add(book1);Book book2 new Book();book2.setType(计算机);book2.setName(SpringMVC实战教程);book2.setDescription(一代宗师);bookList.add(book2);return bookList;}
}postman 测试
① 测试新增 ② 测试查询 4.2 页面访问处理
(1) 拷贝静态页面将资料\功能页面下的所有内容拷贝到项目的 webapp 目录下。 (2) 访问 pages 目录下的 books.html
打开浏览器输入http://localhost/pages/books.html 为什么会出现错误 SpringMVC 拦截了静态资源根据 /pages/books.html去 controller 找对应的方法找不到所以会报 404 的错误。
SpringMVC 为什么会拦截静态资源呢 解决方案SpringMVC 需要将静态资源放行。
//设置静态资源访问过滤当前类需要设置为配置类并被扫描加载
Configuration
public class SpringMvcSupport extends WebMvcConfigurationSupport {Overrideprotected void addResourceHandlers(ResourceHandlerRegistry registry) {// 当访问/pages/...的时候从/pages目录下查找内容registry.addResourceHandler(/pages/**).addResourceLocations(/pages/);registry.addResourceHandler(/js/**).addResourceLocations(/js/);registry.addResourceHandler(/css/**).addResourceLocations(/css/);registry.addResourceHandler(/plugins/**).addResourceLocations(/plugins/);}
}该配置类在 config 目录下SpringMVC 当前扫描的是 controller 包所以该配置类还未生效要想生效需要修改 SpringMvcConfig 配置类的扫描范围。
Configuration
ComponentScan({com.itheima.controller,com.itheima.config})
EnableWebMvc//开启将JSON转换成对象的功能
public class SpringMvcConfig {
}//或者Configuration
ComponentScan(com.itheima)
EnableWebMvc
public class SpringMvcConfig {
}(3) 修改 books.html 页面 页面完整代码
!DOCTYPE htmlhtmlhead!-- 页面meta --meta charsetutf-8titleSpringMVC案例/title!-- 引入样式 --link relstylesheet href../plugins/elementui/index.csslink relstylesheet href../plugins/font-awesome/css/font-awesome.min.csslink relstylesheet href../css/style.css/headbody classhold-transitiondiv idappdiv classcontent-headerh1图书管理/h1/divdiv classapp-containerdiv classboxdiv classfilter-containerel-input placeholder图书名称 stylewidth: 200px; classfilter-item/el-inputel-button classdalfBut查询/el-buttonel-button typeprimary classbutT clickopenSave()新建/el-button/divel-table sizesmall current-row-keyid :datadataList stripe highlight-current-rowel-table-column typeindex aligncenter label序号/el-table-columnel-table-column proptype label图书类别 aligncenter/el-table-columnel-table-column propname label图书名称 aligncenter/el-table-columnel-table-column propdescription label描述 aligncenter/el-table-columnel-table-column label操作 aligncentertemplate slot-scopescopeel-button typeprimary sizemini编辑/el-buttonel-button sizemini typedanger删除/el-button/template/el-table-column/el-tablediv classpagination-containerel-paginationclasspagiantioncurrent-changehandleCurrentChange:current-pagepagination.currentPage:page-sizepagination.pageSizelayouttotal, prev, pager, next, jumper:totalpagination.total/el-pagination/div!-- 新增标签弹层 --div classadd-formel-dialog title新增图书 :visible.syncdialogFormVisibleel-form refdataAddForm :modelformData :rulesrules label-positionright label-width100pxel-rowel-col :span12el-form-item label图书类别 proptypeel-input v-modelformData.type//el-form-item/el-colel-col :span12el-form-item label图书名称 propnameel-input v-modelformData.name//el-form-item/el-col/el-rowel-rowel-col :span24el-form-item label描述el-input v-modelformData.description typetextarea/el-input/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取消/el-buttonel-button typeprimary clicksaveBook()确定/el-button/div/el-dialog/div/div/div/div/body!-- 引入组件库 --script src../js/vue.js/scriptscript src../plugins/elementui/index.js/scriptscript typetext/javascript src../js/jquery.min.js/scriptscript src../js/axios-0.18.0.js/scriptscriptvar vue new Vue({el: #app,data:{dataList: [],//当前页要展示的分页列表数据formData: {},//表单数据dialogFormVisible: false,//增加表单是否可见dialogFormVisible4Edit:false,//编辑表单是否可见pagination: {},//分页模型数据暂时弃用},//钩子函数VUE对象初始化完成后自动执行created() {this.getAll();},methods: {// 重置表单resetForm() {//清空输入框this.formData {};},// 弹出添加窗口openSave() {this.dialogFormVisible true;this.resetForm();},//添加saveBook () {axios.post(/books,this.formData).then((res){});},//主页列表查询getAll() {axios.get(/books).then((res){this.dataList res.data;});},}})/script
/html
