利用Vue和axios在页面加载完成后发送异步请求

这里数组是定义在一个return中的，查资料说是可以重用。因为我之前学习的只见过放在data属性里面，看来还是应该多学习，长见识。这样子获取到结果集合的话确实方便，学习学习。函数，只要将axios代码写在这里就可以实现页面加载完成就发送请求。在这一部分中，在得到结果集合后，需要有三个操作。//页面加载完成发送异步请求，查询数据。这里也有几个使我耳目一新的地方。

Record growth...

688人浏览 · 2022-12-19 23:03:30

Record growth... · 2022-12-19 23:03:30 发布

这是servlet层的代码：

package com.fldwws.web;

import com.alibaba.fastjson.JSON;
import com.fldwws.pojo.Brand;
import com.fldwws.service.BrandService;

import javax.jws.WebService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/SelectAllServlet")
public class SelectAllServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.调用BrandService的方法

        //1.1 new一个对象
        BrandService brandService = new BrandService();
        //1.2 调用方法
        List<Brand> brands = brandService.SelectAll();

        //3.将json数据序列化
        String jsonString = JSON.toJSONString(brands);

        //4.响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }
}

在这一部分中，在得到结果集合后，需要有三个操作

将得到的数据序列化
设置响应格式，防止乱码
响应数据

这是web层代码：

<html>
<head>
    <title>数据展示界面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container mt-5" id="app">



    <button class="btn btn-primary mb-5 mt-5" id="add">新增一条数据</button>


    <table class="table  table-bordered">
<!--<%&#45;&#45;        表头&#45;&#45;%>-->
        <thead>
        <tr>
            <th>序号</th>
            <th>品牌</th>
            <th>公司</th>
            <th>价格</th>
            <th>描述</th>

        </tr>
        </thead>
<!--<%&#45;&#45;        主体&#45;&#45;%>-->
        <tbody v-for="(brand,i) in brands">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
        </tbody>



    </table>
</div>


</body>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            //页面加载完成发送异步请求，查询数据
            var that = this;
            axios.get("http://localhost:8080/SelectAllServlet")
                .then(function(response){
                    // console.log(response.data);
                    that.brands = response.data;
                }, function (err) {
                })
        }
    })
</script>
</html>