当前位置：网站首页>Data interaction based on restful pages

Data interaction based on restful pages

2022-07-27 09:06:00 【lwj_ 07】

The functions are as follows ：

One 、 be based on restful Page data interaction （ Background interface development ）

SpringMvcConfig：

ServletContainersInitConfig：

controller The package contains bean Object of annotation ：

BookController：（REST style ）

package com.itheima.controller;

import com.itheima.domain.Book;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController //  Become ：@Controller and @ResponseBody annotation 
@RequestMapping(value = "/books")   //  Simplified access resource path annotation 
public class BookController {

    /**
     *  1、  Save data function 
     *
     *       notes 1： After saving successfully , Respond to the prompt that the front end saves successfully （ So use String Return type ）
     *       notes 2： The back end must first receive the data information requested by the front end to save （ Simulation here ： With Book Object to receive the data requested to be saved by the front end ）
     */
    @PostMapping    // Restful The path of style access is simplified method（ If you forget, look at the previous notes ）
    public String save(@RequestBody Book book){ // @RequestBody: json Notes on data conversion 
        /**
         *   Suppose that after receiving the information saved by the front end , We use false data here ,
         *   So replace some logic saved in the database with output 
         */
        System.out.println("book save ====>" +book);
        return "{'module':'book save success'}";    //  Respond to the success identification of the front end 
    }

    /**
     *  2、 Query all functions 
     *
     *       notes 1： Too much data to query , All are encapsulated in object attributes and displayed in the form of collections 
     */
    @GetMapping
    public List<Book> getAll(){
        /**
         *   notes ： Suppose we simulate some fake data queried from the database , Then store it in List The collection is passed to the front end 
         */
        Book book =new Book();
        book.setType(" Computer ");
        book.setName("SpringMvc introductory course ");
        book.setDescription(" A profound ");

        Book book1 = new Book();
        book1.setName(" Computer ");
        book1.setName("SpringMvc Practical courses ");
        book1.setDescription(" Grand master ");

        //  Encapsulate the queried data into List Set to the front end 
        List<Book> bookList = new ArrayList<Book>();
        bookList.add(book);
        bookList.add(book1);

        return bookList;
    }
}

The path of front-end access and back-end save function is as follows ：

The front end accesses the back end to query all function paths as follows ：

Two 、 be based on restful Page data interaction （ Front end page access processing ）

When we open the server to access the front-end page ： Think about what problems will arise

We can see that , When visiting the front page , Front end meeting 404, And the back end will appear [WARNING] Warning tips

reflection ： Why does this happen ？

It is because this method attributes all requests of the client to springmvc Management of the , And the front-end access request path ：

We know this request is get Method request （ stay URL The address bar says get Request mode ）, So when accessing the front-end path , The following method gives the path to springmvc processed , and springmvc Think this is a simple get Request path , So if you can't find the path, report it 404 了

So the solution is as follows ：

Configure a filter object （ And annotated as bean form ）：

When we start the server to access the front-end page again ： You will find that you can access the front page

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

books.html：

<!DOCTYPE html>

<html>
    <head>
        <!--  page meta -->
        <meta charset="utf-8">
        <title>SpringMVC Case study </title>
        <!--  Introducing styles  -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>

    <body class="hold-transition">

        <div id="app">

            <div class="content-header">
                <h1> Book management </h1>
            </div>

            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        <el-input placeholder=" The name of the book " style="width: 200px;" class="filter-item"></el-input>
                        <el-button class="dalfBut"> Inquire about </el-button>
                        <el-button type="primary" class="butT" @click="openSave()"> newly build </el-button>
                    </div>

                    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label=" Serial number "></el-table-column>
                        <el-table-column prop="type" label=" Book category " align="center"></el-table-column>
                        <el-table-column prop="name" label=" The name of the book " align="center"></el-table-column>
                        <el-table-column prop="description" label=" describe " align="center"></el-table-column>
                        <el-table-column label=" operation " align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini"> edit </el-button>
                                <el-button size="mini" type="danger"> Delete </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination-container">
                        <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                        </el-pagination>
                    </div>

                    <!--  Add tag layer  -->
                    <div class="add-form">
                        <el-dialog title=" New books " :visible.sync="dialogFormVisible">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label=" Book category " prop="type">
                                            <el-input v-model="formData.type"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label=" The name of the book " prop="name">
                                            <el-input v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label=" describe ">
                                            <el-input v-model="formData.description" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false"> Cancel </el-button>
                                <el-button type="primary" @click="saveBook()"> determine </el-button>
                            </div>
                        </el-dialog>
                    </div>

                </div>
            </div>
        </div>
    </body>

    <!--  Import component library  -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

    <script>
        var vue = new Vue({

            el: '#app',

            data:{
				dataList: [],// Page list data to be displayed on the current page 
                formData: {},// The form data 
                dialogFormVisible: false,// Add whether the form is visible 
                dialogFormVisible4Edit:false,// Edit whether the form is visible 
                pagination: {},// Paging model data , Temporarily discard 
            },

            // Hook function ,VUE Automatically execute after object initialization 
            created() {
                this.getAll();
            },

            methods: {
                //  Reset form 
                resetForm() {
                    // Clear the input box 
                    this.formData = {};
                },

                //  Pop up add window 
                openSave() {
                    this.dialogFormVisible = true;
                    this.resetForm();
                },

                // add to         //  OK button   Call this saveBook()
                saveBook () {       //  Request to add data 
                    axios.post("/springmvc_07_rest_case/books",this.formData).then((res)=>{

                    });
                },

                // Home page list query （ Query all ）
                getAll() {
                    axios.get("/springmvc_07_rest_case/books").then((res)=>{    // get request ("/#")  Access resource path 
                       this.dataList = res.data;
                    });
                },

            }
        })
    </script>
</html>