数据渲染

2022-03-10 15:07:15

Uniapp向后端请求数据渲染到前端 + url使用常量定义

config.js文件

	// 定义常量
	export const API_URL = 'http://devo2o.djwk.com.cn/app_api'
	// 导出常量
	export default{
		API_URL
	}

.vue文件

	// 导入js文件==写在<script>块内
	import config from "/config.js";
	// 获取全局变量使用==写在方法内
	var url = config.API_URL;
	// 向后端请求数据
	uni.request({
		url: url + '/monijiekou/hui_die?latitude=' + this.latitude +
			 '&longitude=' + this.longitude +
			 '&page=' + this.page +
			 '&limit=' + this.limit, //接口地址+拼接参数。
		method: "GET",
		success: (res) => {
			if (res.data.status == 200) {
			 	this.storeList = res.data.data.list;
			}
		}
	})

url：接口地址（可以拼接，后面传递参数）
method：传递方式
success：成功返回的回调函数（先判断状态是否为成功，再将数据渲染到data内）

搜索框的功能实现
1.再次调用请求的接口
2.传递对应参数
3.重新赋值给data内的数据，即可。

温馨提示：
喜欢灰碟分享的小伙伴不要忘记关注噢~这样子，想找我时就不会迷路啦*

联系方式：
Vx+：LHD7575

vue

更多相关内容

easyui的datagrid的数据渲染
2015-07-07 18:28:57

easyui的datagrid的数据渲染

收起

easyui

利用Ajax对接口将数据渲染到页面中

千次阅读 2021-10-02 20:28:47

（1）在Js文件中定义一个获取数据的函数，根据接口文档来写Ajax，判断数据是否获取成功，成功后将步骤2的代码贴上去这样就将数据渲染到页面中啦（2）里面的具体数据还是要根据接口的名字通过标准语法来添加，千万...

步骤
1.将要渲染数据的模板的大体框架搭好
2.引入art-template引入模板，在Js文件中通过函数template(‘id选择器的名字’，要渲染的数据)并将其赋值给一个变量，将该变量放到我们写好的模板中[通过JQuery中的html来添加]
3.上述模板都搭建好后，就开始写js函数啦
（1）在Js文件中定义一个获取数据的函数，根据接口文档来写Ajax，判断数据是否获取成功，成功后将步骤2的代码贴上去这样就将数据渲染到页面中啦
（2）里面的具体数据还是要根据接口的名字通过标准语法来添加，千万不要忘记调用函数
下面附上我的代码
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="../Code/案例图书馆管理.html/jquery-3.5.1.js"></script>
  <script src="./index.js"></script>
   <script src="../表单的监听事件/template-web.js"></script>
</head>
<body>
    <div id="news-list">
   
</div>
    <!-- 定义template模板 -->
   <script type='text/html' id="tpl-news">
    <div id="news-item">
        {{each data}}
        <div class="right">
            <img src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="">
        </div>
        <div class="left">
            <h3>{{$value.title}}</h3>
            <span>
               
                <ul>
                    {{each $value.tags}}
                    <li>{{$value}}</li>
                    {{/each}} 
                </ul>
               
            </span>
            <div class="bottom">
                <span>{{$value.source}}{{$value.time}}</span>
                <span>评论数{{$value.cmtcount}}</span>
            </div>
        </div>
    </div>
    {{/each}}
   </script>
</body>
</html>

CSS代码

#news-list{
    width: 600px;
    height: 100%;
}
#news-item{
    width: 600px;
    height: 200px;
    border: 1px solid #ccc;

}
.right{
    width: 150px;
    height: 150px;
    background-color: gray;
    margin-top:10px;
    margin-left: 10px;
    float: left;
}
img{
    width: 150px;
    height: 150px;
}
.left{
    width: 430px;
    height: 200px;
    margin: left 10px;

    float: right;

}
ul{
    list-style: none;
    margin-top: 60px;
}
li{
    display: block;
    float: left;
    font-size: 10px;
    margin-left: 20px;
    width: 50px;
    height: 20px;
    background-color: #ccc;
    border-radius: 8px;
    text-align: center;
   line-height: 20px

}
.bottom{
    width: 100%;
    height: 20px;

    margin-top: 130px;
    font-size: 10px;
}
.bottom span:first-child{
    float: left;
}
.bottom span:last-child{
    float: right;
}

js代码

$(function(){
    //  获取新闻列表的函数
    function getNewsList(){
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/news',
            data: {},
            success:function(res){
                if(res.status!=200){
                    alert('新闻列表获取失败')
                }
                // 将tag属行改成字符串数组
                for(var i=0;i<res.data.length;i++){
res.data[i].tags=res.data[i].tags.split(',')
                }
                console.log(res);
                var htmlstr=template('tpl-news',res)
             $('#news-list').html(htmlstr)
            }

        })
    }
    getNewsList();
})

收起

展开全文

ajax jquery javascript

将JSON数据渲染到页面
千次阅读 2020-10-28 14:43:01
JSON， JavaScript Object Notation，是一种存储数据的对象,也是一种轻量级的数据结构。 JSON对象也有一定的格式：单个数据大括号括起来，以对象的形式保持，键值对为字符串时，引号为双引号。多个数据保存在数组...
引言—编程语言的三大数据类型
1. scalar(标量)，在编程语言里面主要是数字和字符串。
2. sequence（队列），数组和列表。
3. mapping（映射），表现为键值对形式。
JSON简介

JSON， JavaScript Object Notation，是一种存储数据的对象,也是一种轻量级的数据结构。

JSON对象也有一定的格式：
- 单个数据大括号括起来，以对象的形式保持，键值对为字符串时，引号为双引号。
- 多个数据保存在数组当中，每个数据都是一个对象
- 映射用冒号隔开
  "name": "tom"
- 并列数据用逗号隔开
```
"name" : "tom",
"age" : 18
```
- 映射集合用｛｝包裹
```
{
    "name" : "tom",
    "age" : 18
}
```
- 键名一定要使用双引号
- 并列数据集合用[]包裹。
```
[
    {
    "name" : "tom",    
    "age" : 18
    },{
    "name" : "tom",    
    "age" : 18
    }
]
```
JSON 与 XML格式的区别

XML数据文档很大
不易读
解析比较复杂

JSON方法
1. JSON.parse(jsonStr) 将JSON字符串转换为json对象。
2. stringify()将json对象转换为json字符串
JSON的使用

从服务器获取数据时，基本都是JSON字符串。在第一加载页面时，我们可以把初始的数据存储到HTML的DIV标签中，提高加载速度。
- 数据渲染到页面上
```
//将模板中的内容替换为opt中的数据
function setTplToHTML(tpl, regExp, opt){
  return tpl.replace(regExp(), function(node, key){
    return opt[key];
  });
}
//正则表达式
function regTpl(){
  return new RegExp(/{{(.*?)}}/, 'gim');
}
```
模板一般写在HTML中，在script标签里面，替换的字符串使用{{}}包裹起来。
```
<script type="text/html" id="j_itemtpl">
        <li class="list-item">
            <div class="inner">
                <div class="img">
                    <img src="" />
                </div>
            </div>
            <div class="info">
                <h4>{{classname}}</h4>
                <p class="row-2">{{name}}老师</p>
                <p class="row-3">{{watched}}人学习</p>
            </div>
        </li>
    </script>
```
通过这样的方式，加上for循环，将数据渲染到页面中。
收起
展开全文
javascript json

table表格数据渲染

千次阅读 2020-09-08 14:42:02

需求：打开页面时，加载table表格数据 html部分代码如下： <a-table :row-selection="rowSelection" :columns="columns" :data-source="data"> <div slot="operator" slot-scope="text">{{ text....

需求：打开页面时，加载table表格数据

建议：当表格中的某些列需要加特殊样式或者特殊处理时，用此方式

html部分代码如下：

<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
	<div slot="aa" slot-scope="text">{{ text.content1 }}</div>
	<div slot="A" slot-scope="text">{{ text.content2 }}</div>
	<div slot="B" slot-scope="text">{{ text.content3 }}</div>
	<div slot="ee" slot-scope="text">{{ text.content4 }}</div>
	<div slot="start" slot-scope="text">{{ text.content5 }}</div>
	<div slot="end" slot-scope="text">{{ text.content6 }}</div>
	<div slot="creater" slot-scope="text">{{ text.content7 }}</div>
	<div slot="state" slot-scope="text">{{ text.content8 }}</div>
	<div slot="action" slot-scope="text, record, index">
	  <a @click="reviseRecord(record, index)" class="margin-right15">修改</a>
	  <a @click="delRecord(record, index)" class="color-error">作废</a>
	</div>
</a-table>

js部分代码如下：

<script>
export default {
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        containerOperator: ''
      },
      containerOperatorList: '',
      planStatusList: '',
      //  table标题
      columns: [
        {
          title: '箱经营人',
          dataIndex: 'operator', // slot名称与dataIndex的值一致
          scopedSlots: { customRender: 'aa' },
          align: 'center'
        },
        {
          title: '提单号',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'A' },
          align: 'center'
        },
        {
          title: '箱型箱类',
          dataIndex: 'containerType',
          scopedSlots: { customRender: 'B' },
          align: 'center'
        },
        {
          title: '拒发原因',
          dataIndex: 'reason',
          scopedSlots: { customRender: 'ee' },
          align: 'center'
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          scopedSlots: { customRender: 'start' },
          align: 'center'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          scopedSlots: { customRender: 'end' },
          align: 'center'
        },
        {
          title: '创建人',
          dataIndex: 'creater',
          scopedSlots: { customRender: 'creater' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' },
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: '120px'
        }
      ],
      // table数据
      data: []
    }
  },
  created() {
    // const param = this.form
    // 加载页面时调用此函数
    this.getReturnInfo()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            operator: record.operator
          }
        })
      }
    }
  },
  methods: {
     // 获取table表格的数据
    getReturnInfo(param) {
     // 模拟数据
      const items = [
        {
          item1: '马士基1',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        },
        {
          item1: '马士基2',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        },
        {
          item1: '马士基3',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        }
      ]
      const dataTable = []
      items.forEach((item, index) => {
        const data = {
          key: index,
          operator: {  // operator是dataIndex的值
            content1: item.item1
          },
          billNo: {
            content2: item.item2
          },
          containerType: {
            content3: item.item3
          },
          reason: {
            content4: item.item4
          },
          startTime: {
            content5: item.item5
          },
          endTime: {
            content6: item.item6
          },
          creater: {
            content7: item.item7
          },
          state: {
            content8: item.item8
          }
        }
        dataTable.push(data)
      })
      // 将数据赋值给页面
      this.data = dataTable
    }
  }
}
</script>

css部分代码如下：

<style lang="less" scoped>
	.color-error {
		color: #ff4d4f;
	}
	.color-success {
		color: #4cd964;
	}
	.margin-right10 {
		margin-right: 10px;
	}
	.margin-right15 {
		margin-right: 15px;
	}
	.ant-form-item {
		margin-bottom: 4px;
	}
</style>

最终效果如图所示：
在这里插入图片描述

表格数据正常渲染

html部分代码如下所示：

<a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleChangeTable">
	<span slot="action" slot-scope="text, record, index" style="width:150px">
		<a @click="reviseRecord(record, index)" class="margin-right15">修改</a>
		<a @click="delRecord(record, index)" class="color-error">作废</a>
	 </span>
</a-table>

js部分代码如下所示：

<script>
export default {
	data() {
		return {
			columns: [
	        {
	          title: '部件代码',
	          dataIndex: 'partCode',
	          align: 'center'
	        },
	        {
	          title: '部件描述',
	          dataIndex: 'partInfo',
	          align: 'center'
	        },
	        {
	          title: '位置代码',
	          dataIndex: 'locationCode',
	          align: 'center'
	        },
	        {
	          title: '修理代码',
	          dataIndex: 'repairCode',
	          align: 'center'
	        },
	        {
	          title: '修理描述',
	          dataIndex: 'repairDepict',
	          align: 'center'
	        },
	        {
	          title: '箱型箱类',
	          dataIndex: 'containerType',
	          align: 'center'
	        },
	        {
	          title: '客户报价',
	          dataIndex: 'clientQuote',
	          align: 'center'
	        },
	        {
	          title: '客户工时单价/币制',
	          dataIndex: 'workPrice',
	          align: 'center'
	        },
	        {
	          title: '操作',
	          dataIndex: 'action',
	          scopedSlots: { customRender: 'action' },
	          align: 'center'
	        }
	      ]
		}
	}，
	created() {
		// 加载页面时调用此函数
		this.getCodeInfo()
	},
	methods: {
		//  获取table表格的数据
	    getCodeInfo() {
	      const items = [
	        {
	          partCode: '0001',
	          partInfo: '01',
	          locationCode: '0.5H',
	          repairCode: '80',
	          repairDepict: '1111',
	          containerType: '40`GH',
	          clientQuote: '真实',
	          workPrice: '40/¥'
	        },
	        {
	          partCode: '0002',
	          partInfo: '02',
	          locationCode: '0.5H',
	          repairCode: '80',
	          repairDepict: '1111',
	          containerType: '40`GH',
	          clientQuote: '真实',
	          workPrice: '40/人民币'
	        },
	        {
	          partCode: '0003',
	          partInfo: '03',
	          locationCode: '0.5H',
	          repairCode: '80',
	          repairDepict: '1111',
	          containerType: '40`GH',
	          clientQuote: '真实',
	          workPrice: '40/人民币'
	        }
	      ]
	      const dataTable = []
	      items.forEach((item, index) => {
	        const data = {
	          key: index,
	          partCode: item.partCode,
	          partInfo: item.partInfo,
	          locationCode: item.locationCode,
	          repairCode: item.repairCode,
	          repairDepict: item.repairDepict,
	          containerType: item.containerType,
	          clientQuote: item.clientQuote,
	          workPrice: item.workPrice
	        }
	        dataTable.push(data)
	      })
	      // 将数据赋值给页面
	      this.data = dataTable
	    }
	}
}
</script>

最终效果如图：
在这里插入图片描述

收起

展开全文

vue数据渲染不成功
千次阅读 2019-05-30 10:37:26

我的思路是，单独给倒计时新建一个数组，每秒循环一次数据，改变一次倒计时数据里的数据；改变规则：定时器循环之前，先获取当前时间戳（只获取一次），给个常量duration=0；进入定时器，每秒duration+1，进入...

收起

vue
Vue在页面数据渲染完成之后的调用方法
千次阅读 2020-12-23 08:15:35

Vue在页面数据渲染完成之后的调用方法在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。...

收起
vue拿到数据渲染页面上
千次阅读 2021-03-12 16:03:39

vue拿到数据渲染页面首先请求后台接口拿到数据使用console.log（res）打印从后台拿到数据 2.将拿到的数据放入一个数组里面 3.然后渲染到页面使用v-for进行遍历循环将数据一条条渲染出来 ps：listData就是...

收起

vue.js
react中表格的数据渲染
千次阅读 2019-05-14 09:37:35

数据列表渲染数据列表处理使我们常见的事物类型，到后台给你一串数据列表，你将如何展示在前端页面上呢，传统的我们都是通过循环来实现，那么在react里面我们又是怎样实现的呢？数据如下 const books = [ ...

收起

react
uni-app 第五章：数据渲染
千次阅读 2020-11-01 15:12:45

data() 数据 methods所有的方法 <template> <view> <view :class="css"> <view>{{item}}</view> <view>{{itemobj.item}}</view> <view>{{item}}</...

收起
element ui 表格数据渲染不出来
千次阅读 2021-01-14 16:00:41

在渲染表格数据的时候，发生了一个很奇怪的bug，后台数据能获取到，也能console出来，但是页面就是渲染不出来，不过改变表格的宽度就可以正常渲染，如图代码如下：后来问了一个大佬，原来是table绑定的data的...

收起

vue
element中table数据渲染（一个列表两个数据源混合渲染）
千次阅读 2021-01-04 19:52:08

一，这里是元素。 2，这里属数据构造，因为我们需要用到国家数据，而国家的数据和列表的其他数据是分开的两个对象，要在一个table中使用这个是对国家进行数据修改 3， 4，效果

收起

列表
React请求数据渲染页面
千次阅读 2019-06-27 16:47:33

1、使用react-fetch数据发送请求（1）get方法： componentDidMount() { fetch('url') .then(res => res.json()) .then(json => this.setState({ list: json })) } （2）post方法： comp...

收起

react axios
微信小程序数据渲染不出来，setData用法技巧全
千次阅读 2022-03-20 15:19:58

在开发过程中我们常常发现从后台获取到了数据后（data做出了改变而页面并未加载这些数据）。我们先用console.log()把数据输出，确保已经获取到数据，如果已经获取到了那就是下面情况出错了。未使用this.setData()...

收起

javascript 微信小程序
html读取json文件+数据渲染
千次阅读 2021-02-24 16:07:43

<!DOCTYPE html> <html lang="zh-CN"> <head> ...meta charset="UTF-8">...script type="text/javascript" src="../../js/jquery.js">...script src="../../js/bootstrap.min..

收起

html
Vue数据渲染与更新问题
千次阅读 2018-08-29 10:38:46

问题描述：在Vue使用过程中，通过list列表渲染数据，然后通过JS代码动态改变的标签值，在push()一... 使用Vue做后台数据渲染时，通过JS代码改变标签值，并不会同步更新vue绑定的对象（手动在标签中输入内容会同...

收起

Vue
vue3入门 ----使用axios方式调用接口且获取的数据渲染
千次阅读 2022-03-17 14:08:36

vue3入门 ----使用axios方式调用接口且获取的数据渲染

收起

vue.js javascript
Vue-请求数据渲染页面
千次阅读 2020-05-13 00:01:26

1、前边说到ajax请求的发送，今天要实现的是页面加载完成之后，渲染出列表的数据 2、首先新建一个GoodsList.vue ,加入一下HTML内容 <template> <div class="hello"> <h1>{{title}}</h1> ...

收起

vue javascript
什么叫做数据渲染?
万次阅读 2018-11-10 15:46:42

（1）什么叫做数据渲染：就是HTML中要显示的数据是通过js来实现的而不是直接在HTML中输入数据，这个过程叫做数据渲染 例子：HTML代码中的{{message}} js中的消息：“Hellow Vue.js”。也就是说把js中的数据渲染...

收起

VUE
ajax与Springboot通信将数据库数据渲染到前端表格
万次阅读 2019-07-05 11:40:36

如何利用ajax请求后端服务将数据库数据渲染到前端的表格中

收起

jQuery ajax 前端表格前后端通信
layUI后台数据渲染下拉框
千次阅读 2020-03-22 16:46:50

//声明下拉框直接选择或搜索选择 //执行该方法，渲染前台的下拉框 function getBadw() { $.ajax({ url: '/dzjz/getCode/BADW', //后台数据地址 success: function (data) { $.each(data,function (index,item) { //...

收起
jQuery的ajax获取数据渲染页面
万次阅读 多人点赞 2019-04-22 15:40:50

一、ajax的请求方式 post $.ajax({ //请求方式 type:'POST', //发送请求的地址 ... //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式 data:{key1:value1,key2:...

收起
根据树状数据渲染树状下拉选项
万次阅读 2019-07-21 16:45:04

最终的效果类似这样：作者是把非末级的选项给禁用了，如果你们需求是要不禁用求...上面数据的关键点笔者已经指出来了，我们来渲染树状选择框就是要根据以上关键点递归渲染。根据数据递归渲染选择框： import Re...

收起
element的table大量数据渲染卡顿解决
千次阅读 2019-11-15 13:45:57

B/S架构遇到很多的问题应该就是大数据渲染了（毕竟javascript单线程）在使用table的时候，用户想操作大量表格数据（别跟客户说改需求了，不行的）使用vxe-table就能解决我们的好多问题，不得不说，这是我遇到过...

收起

vue大数据 table
ajax请求解析json数据渲染在前端界面
千次阅读 2019-11-25 01:19:18

记录一个简单的demo,关于ajax请求解析json数据渲染在前端界面的~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewpo...

收起
【知识整理】多次快速请求同一数据接口时，由于请求返回的时间原因导致数据渲染混乱的web前端解决方案
千次阅读 2019-10-08 13:35:28

当用户快速的不停的来回输入“2”和“23”时，前端界面数据渲染会出现错乱的情况，明明输入的是“23”，但是前端界面渲染的却是输入为“2”的内容。下图是tab页导航，当不停的来回切换tab页的时候，前端界面...

收起

前端vue
在PHP中将数据渲染到html页面上
千次阅读 2020-08-16 14:38:09

以下几行PHP代码可以简单的将数据渲染到html页面上。 /** * @param $filePath PHP模块文件路径 * @param $data 模版文件上用到的变量数组 * @return string 渲染后的html文件内容 */ function getHtmlContentByTpl...

收起
SpringBoot+Thymeleaf实现数据渲染
千次阅读 2020-05-24 21:18:37

SpringBoot+Thymeleaf交互。

收起
react redux中获取 store 数据并将数据渲染出来
千次阅读 2020-07-14 20:21:46

store.getState().todos //将获取到的数据里面的内容赋值给该页面 state //页面初次渲染的时候什么都没有，在这里获取并修改数据 //使得页面重新渲染，拿到数据 }) } render() { return ( <div> { ...

收起

react redux
layui 复杂表头数据渲染的坑
千次阅读 2019-08-22 14:07:00

layui 复杂表头数据渲染的坑欢迎使用Markdown编辑器欢迎使用Markdown编辑器 layui复杂表头渲染数据出现的数据都是重复的

收起

layui

easyui的datagrid的数据渲染

利用Ajax对接口将数据渲染到页面中

将JSON数据渲染到页面

JSON简介

JSON的使用

table表格数据渲染

建议：当表格中的某些列需要加特殊样式或者特殊处理时，用此方式

表格数据正常渲染

vue数据渲染不成功

Vue在页面数据渲染完成之后的调用方法

vue拿到数据渲染页面上

react中表格的数据渲染

uni-app 第五章：数据渲染

element ui 表格数据渲染不出来

element中table数据渲染（一个列表两个数据源混合渲染）

React请求数据渲染页面

微信小程序数据渲染不出来，setData用法技巧全

html读取json文件+数据渲染

Vue数据渲染与更新问题

vue3入门 ----使用axios方式调用接口且获取的数据渲染

Vue-请求数据渲染页面

什么叫做数据渲染?

ajax与Springboot通信将数据库数据渲染到前端表格

layUI后台数据渲染下拉框

jQuery的ajax获取数据渲染页面

根据树状数据渲染树状下拉选项

element的table大量数据渲染卡顿解决

ajax请求解析json数据渲染在前端界面

【知识整理】多次快速请求同一数据接口时，由于请求返回的时间原因导致数据渲染混乱的web前端解决方案

在PHP中将数据渲染到html页面上

SpringBoot+Thymeleaf实现数据渲染

react redux中获取 store 数据并将数据渲染出来

layui 复杂表头数据渲染的坑