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

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

概述

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

  1. 前端页面请求数据
  • 前端页面通过网络请求(如HTTP请求)向后端发送获取数据的请求。这可以通过使用JavaScript的Fetch API、Axios等工具来完成。
  1. 后端接收请求
  • 后端服务接收到前端发送的请求。这个请求通常会包含某种形式的标识符,用于识别需要返回哪些数据。
  1. Service层调用数据库
  • 在后端服务中的Service层(或业务逻辑层)接收到请求后,会进行相关的逻辑处理。这包括从数据库中检索数据、处理数据逻辑等。
  1. 数据返回给前端
  • Service层从数据库中获取到数据后,将数据转换为适合前端页面展示的格式。通常是将数据转换为JSON格式。
  1. 前端页面展示数据
  • 前端页面接收到后端返回的数据后,利用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 是后端返回的实际数据内容。

即可展示

目录
相关文章
|
11天前
|
前端开发 JavaScript Java
基于Vue+ElementUI框架实现学生管理系统前端页面设计
基于Vue+ElementUI框架实现学生管理系统前端页面设计
|
3天前
|
SQL 存储 安全
数据库数据恢复—SQL Server数据库出现逻辑错误的数据恢复案例
SQL Server数据库数据恢复环境: 某品牌服务器存储中有两组raid5磁盘阵列。操作系统层面跑着SQL Server数据库,SQL Server数据库存放在D盘分区中。 SQL Server数据库故障: 存放SQL Server数据库的D盘分区容量不足,管理员在E盘中生成了一个.ndf的文件并且将数据库路径指向E盘继续使用。数据库继续运行一段时间后出现故障并报错,连接失效,SqlServer数据库无法附加查询。管理员多次尝试恢复数据库数据但是没有成功。
|
7天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
11 1
|
8天前
|
前端开发
化学元素周期表1.0Vue前端页面版本
化学元素周期表1.0Vue前端页面版本
|
8天前
|
前端开发 开发工具 数据库
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
|
8天前
|
JavaScript 前端开发 网络架构
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
|
8天前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
8天前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
8 0
|
9天前
|
关系型数据库 MySQL 数据库
生成订单的过程------支付系统21------支付宝支付----统一收单下单并支付页面接口----创建订单,下订单,我们要在我们数据库的订单表中,设置订单,订单表常用数据库设置格式
生成订单的过程------支付系统21------支付宝支付----统一收单下单并支付页面接口----创建订单,下订单,我们要在我们数据库的订单表中,设置订单,订单表常用数据库设置格式
|
10天前
|
JavaScript 前端开发 API
JS案例:前端Iframe及Worker通信解决思路
JS案例:前端Iframe及Worker通信解决思路
14 0