SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表

概述

在前端页面上展示从后端数据库获取的数据通常需要经历以下几个步骤：

1. 前端页面请求数据：

• 前端页面通过网络请求（如HTTP请求）向后端发送获取数据的请求。这可以通过使用JavaScript的Fetch API、Axios等工具来完成。

2. 后端接收请求：

• 后端服务接收到前端发送的请求。这个请求通常会包含某种形式的标识符，用于识别需要返回哪些数据。

3. Service层调用数据库：

• 在后端服务中的Service层（或业务逻辑层）接收到请求后，会进行相关的逻辑处理。这包括从数据库中检索数据、处理数据逻辑等。

4. 数据返回给前端：

• Service层从数据库中获取到数据后，将数据转换为适合前端页面展示的格式。通常是将数据转换为JSON格式。

5. 前端页面展示数据：

• 前端页面接收到后端返回的数据后，利用JavaScript和HTML等技术将数据展示在页面上。这可以通过渲染列表、表格或其他UI组件来完成。

实操

在前端页面上列表

我们首先看看前端页面

我们已经把数据传入前端控制台

再看看我们的代码是怎么写的

我们展示

数据来自图dataList

在这里

我们要把数据填进去 就能展示在前端页面上

用的是前端数据双向绑定

axios发送异步请求

函数

//钩子函数，VUE对象初始化完成后自动执行
created() {
    //打印控制台 代表钩子函数自动启动
    console.log("successful started");
    //加载全部数据
    // this.getAll();
    //加载分页数据
    this.getPage();
},

刷新页面后自动执行

发get请求

将调取的数据填入数据模型

//列表
getAll() {
    console.log("getAll run")//控制台打印
    axios.get("/users").then((res) => {
        this.dataList = res.data.data;
    });
 
},

这段代码是一个JavaScript方法，看起来是一个对象或者类中的方法。让我们逐行解析它：

• axios.get("/users")：这里使用了 Axios 库发送了一个 GET 请求到 /users 路径。
• .then((res) => { ... })：这是一个 Promise 的处理链，当请求成功时会执行箭头函数。
• this.dataList = res.data.data;：在请求成功后，将返回的数据 res.data.data 赋值给 this.dataList。这里假设 res.data.data 是后端返回的实际数据内容。

即可展示