• 基于restful页面数据交互（前端页面访问处理）

    做的功能如下所示：

     

    一、基于restful页面数据交互（后台接口开发）

    SpringMvcConfig：

    ServletContainersInitConfig：

     controller包下含有bean注解的对象：

    BookController：（REST风格）

    1. package com.itheima.controller;
    2.  
    3. import com.itheima.domain.Book;
    4. import org.springframework.web.bind.annotation.*;
    5.  
    6. import java.util.ArrayList;
    7. import java.util.List;
    8.  
    9. @RestController // 合二为一：@Controller和@ResponseBody注解
    10. @RequestMapping(value = "/books")   // 简化的访问资源路径注解
    11. public class BookController {
    12.  
    13.     /**
    14.      *  1、 保存数据功能
    15.      *
    16.      *      注1：保存成功后，响应给前端保存成功的提示（所以用String返回类型）
    17.      *      注2：后端肯定要先接收到前端请求保存的数据信息才能保存（这里模拟：以Book对象进行接收前端请求保存的数据）
    18.      */
    19.     @PostMapping    // Restful风格访问的路径简化method（忘记的话看前面笔记）
    20.     public String save(@RequestBody Book book){ // @RequestBody: json数据的转换注解
    21.         /**
    22.          *  假设接收到前端保存的信息后，我们这里用的是假数据，
    23.          *  因此用输出代替一些保存到数据库中的逻辑
    24.          */
    25.         System.out.println("book save ====>" +book);
    26.         return "{'module':'book save success'}";    // 响应给前端的成功标识
    27.     }
    28.  
    29.     /**
    30.      *  2、查询所有的功能
    31.      *
    32.      *      注1：查询的数据过多，所有以封装在对象属性当中以集合形式封装展示
    33.      */
    34.     @GetMapping
    35.     public List getAll(){
    36.         /**
    37.          *  注：假设这里模拟一些从数据库中查询出来的假的数据，然后存放到List集合当中传递展示给前端
    38.          */
    39.         Book book =new Book();
    40.         book.setType("计算机");
    41.         book.setName("SpringMvc入门课程");
    42.         book.setDescription("小试牛刀");
    43.  
    44.         Book book1 = new Book();
    45.         book1.setName("计算机");
    46.         book1.setName("SpringMvc实践课程");
    47.         book1.setDescription("一代宗师");
    48.  
    49.         // 把查询出来的数据封装到List集合中返回给前端
    50.         List bookList = new ArrayList();
    51.         bookList.add(book);
    52.         bookList.add(book1);
    53.  
    54.         return bookList;
    55.     }
    56. }

     前端访问后端保存功能路径如下所示：

     

    前端访问后端查询所有功能路径如下所示：

    二、基于restful页面数据交互（前端页面访问处理）

     我们开启服务器进行访问前端页面的时候：思考会出现什么问题

     

     我们可以看出，当访问前端页面的时候，前端会404，并且后端会出现[WARNING]警告提示

    思考：为什么会出现这种情况呢？

    就是因为这个方法把客户端所有的请求都归属到springmvc管理了，而前端访问请求路径：

    我们知道这种请求是get方式的请求（在URL地址栏中明着写的都是get请求方式），所以当访问前端路径的时候，下面的这个方法就把该路径交给springmvc进行处理了，而springmvc认为这是一个简单的get请求路径，所以找不到路径就报404了

    因此解决方法如下所示：

    配置一个过滤对象（并注解成bean形式）：

    1. /**
    2.  *  用户访问地址过滤类 （看restful笔记处理前端访问的那里）
    3.  */
    4.  
    5. @Configuration
    6.  
    7. public class SpringMvcSupport extends WebMvcConfigurationSupport {
    8.  
    9.     @Override
    10.     protected void addResourceHandlers(ResourceHandlerRegistry registry){
    11.         // 意思就是说：当客户端访问/pages/**下的路径资源时，从/pages/包下开始走，不走Springmvc管理
    12.         registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
    13.         registry.addResourceHandler("/js/**").addResourceLocations("/js/");
    14.         registry.addResourceHandler("/css/**").addResourceLocations("/css/");
    15.         registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
    16.     }
    17. }

     

    我们开启服务器再次进行访问前端页面的时候：会发现能访问到前端页面了

    =========================================================================

    books.html：

    1. html>
    2.  
    3. <html>
    4.     <head>
    5.         
    6.         <meta charset="utf-8">
    7.         <title>SpringMVC案例title>
    8.         
    9.         <link rel="stylesheet" href="../plugins/elementui/index.css">
    10.         <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    11.         <link rel="stylesheet" href="../css/style.css">
    12.     head>
    13.  
    14.     <body class="hold-transition">
    15.  
    16.         <div id="app">
    17.  
    18.             <div class="content-header">
    19.                 <h1>图书管理h1>
    20.             div>
    21.  
    22.             <div class="app-container">
    23.                 <div class="box">
    24.                     <div class="filter-container">
    25.                         <el-input placeholder="图书名称" style="width: 200px;" class="filter-item">el-input>
    26.                         <el-button class="dalfBut">查询el-button>
    27.                         <el-button type="primary" class="butT" @click="openSave()">新建el-button>
    28.                     div>
    29.  
    30.                     <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
    31.                         <el-table-column type="index" align="center" label="序号">el-table-column>
    32.                         <el-table-column prop="type" label="图书类别" align="center">el-table-column>
    33.                         <el-table-column prop="name" label="图书名称" align="center">el-table-column>
    34.                         <el-table-column prop="description" label="描述" align="center">el-table-column>
    35.                         <el-table-column label="操作" align="center">
    36.                             <template slot-scope="scope">
    37.                                 <el-button type="primary" size="mini">编辑el-button>
    38.                                 <el-button size="mini" type="danger">删除el-button>
    39.                             template>
    40.                         el-table-column>
    41.                     el-table>
    42.  
    43.                     <div class="pagination-container">
    44.                         <el-pagination
    45.                             class="pagiantion"
    46.                             @current-change="handleCurrentChange"
    47.                             :current-page="pagination.currentPage"
    48.                             :page-size="pagination.pageSize"
    49.                             layout="total, prev, pager, next, jumper"
    50.                             :total="pagination.total">
    51.                         el-pagination>
    52.                     div>
    53.  
    54.                     
    55.                     <div class="add-form">
    56.                         <el-dialog title="新增图书" :visible.sync="dialogFormVisible">
    57.                             <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
    58.                                 <el-row>
    59.                                     <el-col :span="12">
    60.                                         <el-form-item label="图书类别" prop="type">
    61.                                             <el-input v-model="formData.type"/>
    62.                                         el-form-item>
    63.                                     el-col>
    64.                                     <el-col :span="12">
    65.                                         <el-form-item label="图书名称" prop="name">
    66.                                             <el-input v-model="formData.name"/>
    67.                                         el-form-item>
    68.                                     el-col>
    69.                                 el-row>
    70.                                 <el-row>
    71.                                     <el-col :span="24">
    72.                                         <el-form-item label="描述">
    73.                                             <el-input v-model="formData.description" type="textarea">el-input>
    74.                                         el-form-item>
    75.                                     el-col>
    76.                                 el-row>
    77.                             el-form>
    78.                             <div slot="footer" class="dialog-footer">
    79.                                 <el-button @click="dialogFormVisible = false">取消el-button>
    80.                                 <el-button type="primary" @click="saveBook()">确定el-button>
    81.                             div>
    82.                         el-dialog>
    83.                     div>
    84.  
    85.                 div>
    86.             div>
    87.         div>
    88.     body>
    89.  
    90.     
    91.     <script src="../js/vue.js">script>
    92.     <script src="../plugins/elementui/index.js">script>
    93.     <script type="text/javascript" src="../js/jquery.min.js">script>
    94.     <script src="../js/axios-0.18.0.js">script>
    95.  
    96.     <script>
    97.         var vue = new Vue({
    98.  
    99.             el: '#app',
    100.  
    101.             data:{
    102. 				dataList: [],//当前页要展示的分页列表数据
    103.                 formData: {},//表单数据
    104.                 dialogFormVisible: false,//增加表单是否可见
    105.                 dialogFormVisible4Edit:false,//编辑表单是否可见
    106.                 pagination: {},//分页模型数据，暂时弃用
    107.             },
    108.  
    109.             //钩子函数，VUE对象初始化完成后自动执行
    110.             created() {
    111.                 this.getAll();
    112.             },
    113.  
    114.             methods: {
    115.                 // 重置表单
    116.                 resetForm() {
    117.                     //清空输入框
    118.                     this.formData = {};
    119.                 },
    120.  
    121.                 // 弹出添加窗口
    122.                 openSave() {
    123.                     this.dialogFormVisible = true;
    124.                     this.resetForm();
    125.                 },
    126.  
    127.                 //添加        // 确定按钮 调用这个saveBook()
    128.                 saveBook () {       // 添加数据的请求
    129.                     axios.post("/springmvc_07_rest_case/books",this.formData).then((res)=>{
    130.  
    131.                     });
    132.                 },
    133.  
    134.                 //主页列表查询（查询所有）
    135.                 getAll() {
    136.                     axios.get("/springmvc_07_rest_case/books").then((res)=>{    // get请求("/#") 访问资源路径
    137.                        this.dataList = res.data;
    138.                     });
    139.                 },
    140.  
    141.             }
    142.         })
    143.     script>
    144. html>

  • 相关阅读:
    HTML列表、表格、表单
    javaEE - 2（11000字详解多线程）
    nacos 拉取配置失败
    STM32自学☞DMA数据转运以及DMA+AD多通道案例
    关于JAVA中字节码文件版本号、产品版本号及开发版本号的关系
    网络安全——网络空间搜索引擎
    【九章斩题录】Leetcode：判定是否互为字符重排（C/C++）
    设计模式-单例模式
    Windows上部署springboot项目并挂载后台
    java解决 衣服尺码 Compare T-Shirt Sizes
  • 原文地址：https://blog.csdn.net/lwj_07/article/details/125997764