使用vue构建网站，通过axios将数据显示到表格

Vue构建网站网站是现在的大势所趋，通过vue axios构建的网站相比传统的网站混写更加有利于保障后端源码的安全，同时也可将网站打包成软件直接发布减少网站和app的双重开发。

此次主要讲解怎样在vue element的环境下，将数据显示到表格中，怎样通过axios与后端（thinkphp）交互，显示后端返回的数据。

效果图：

目前集成库情况

截止目前集成的JavaScript库和调用形式如下：

1、 element-UI。参考官网。

2、 Vant。参考官网。

3、 Vue-cookies。调用形式参考官网，在eui中通过this.$cookies进行调用。

4、 Echarts。请参考我的文章《3、手把手构建前后端分离网站，怎样通过后台数据动态操作echarts图表》中有详细的调用和设置方法。

5、 Axios。使用例子可参考官网，将axios换成Eui集成调用形式this.$axios即可。

怎样将数据用表格显示

Element-ui的数据表格使用形式，可以直接将二维数组直接绑定到表格。中的data绑定到提供的二维数组的名字。，prop绑定二维数组中的键名，完成绑定即可自动形成表格。

源码如下：

Vue部分：

<el-table

v-loading=”loading”

:data=”web_user_data”

height=”400″

@selection-change=”handleSelectionChange”

border

style=”width: 100%;”

>

<el-button

type=”primary”

size=”small”

@click=”handleEdit(scope.$index)”

icon=”el-icon-edit”

>

<el-popconfirm

title=”确定删除该用户吗？”

@onConfirm=”delete_user(scope.$index, scope.row)”

cancelButtonType=”warning”

>

JavaScript数据部分

web_user_data: [ { “id”: 1, “user_pet_name”: “荆玛妮俊”, “user_name”: “kmsfq”, “user_phone”: “123491593698”, “user_sex_label”: “男”, “user_age”: 20, “user_email”: “393220@qq.com”, “register_time”: “2001-10-09”, “user_password”: “$2y$10$prTvaW2HHbz/pm1gmUNVHOajZ.yPy4GSfD0N/mzs3NISJSlQAM/nW”, “user_label”: “user” }, { “id”: 2, “user_pet_name”: “林时轮堂”, “user_name”: “otcba”, “user_phone”: “123519491264”, “user_sex_label”: “男”, “user_age”: 42, “user_email”: “485041@qq.com”, “register_time”: “2007-04-19”, “user_password”: “$2y$10$8ScLv12ZgKOUpVCAoMGPAuYXLmuoUgePsc5AcUTAIa7B0XK0/R5hS”, “user_label”: “user” }, { “id”: 3, “user_pet_name”: “浦翔影”, “user_name”: “mrqtq”, “user_phone”: “123715986236”, “user_sex_label”: “女”, “user_age”: 81, “user_email”: “392815@qq.com”, “register_time”: “2008-09-24”, “user_password”: “$2y$10$L0YU0kZXWJP4NkP8RmA3GO4iMtr87CpdtrsWQTEU2P7iAFi2hTGv6”, “user_label”: “user” }, { “id”: 4, “user_pet_name”: “印刚”, “user_name”: “rxefh”, “user_phone”: “123974046070”, “user_sex_label”: “女”, “user_age”: 17, “user_email”: “606414@qq.com”, “register_time”: “2011-01-24”, “user_password”: “$2y$10$kL9e8EbvUss3n3mqKlC2BeikrWVYNFIi6EE3xzJJ9i0.QF7YLBJLq”, “user_label”: “user” }, { “id”: 5, “user_pet_name”: “韩丹”, “user_name”: “bedll”, “user_phone”: “123203510626”, “user_sex_label”: “男”, “user_age”: 76, “user_email”: “639179@163.com”, “register_time”: “2000-03-19”, “user_password”: “$2y$10$8OTtq70mc.2etEy8OORDUuO0.LPBQ8ts7QN.hRJpvy2NkdrpBJTxS”, “user_label”: “user” }, { “id”: 6, “user_pet_name”: “庞媚康”, “user_name”: “wkgla”, “user_phone”: “12315283263”, “user_sex_label”: “男”, “user_age”: 99, “user_email”: “70521@163.com”, “register_time”: “2020-02-14”, “user_password”: “$2y$10$imdjkQdVTG7ulBL8xPTQCuZ5vdp4gHDWeCkpPCJ/uYkoVm7L29Mpi”, “user_label”: “user” }, { “id”: 7, “user_pet_name”: “吕星澜”, “user_name”: “rgoke”, “user_phone”: “123897967523”, “user_sex_label”: “男”, “user_age”: 29, “user_email”: “43530@163.com”, “register_time”: “2009-02-12”, “user_password”: “$2y$10$6zU3tF1Y.Y32pxswuwS0x.xM5tcmZVisdMpAJF.sseWOLmTSyAK7K”, “user_label”: “user” }, { “id”: 8, “user_pet_name”: “贺雄”, “user_name”: “pjlcs”, “user_phone”: “123405168236”, “user_sex_label”: “男”, “user_age”: 36, “user_email”: “777405@163.com”, “register_time”: “2006-03-27”, “user_password”: “$2y$10$dw4ILRIZ.nnxN8K.umv8vuqSfFG9vtA23O7nthgSFeBIXMjyTnYdi”, “user_label”: “user” }, { “id”: 9, “user_pet_name”: “管爽爽”, “user_name”: “iqjgj”, “user_phone”: “123446535242”, “user_sex_label”: “女”, “user_age”: 28, “user_email”: “564044@163.com”, “register_time”: “2014-06-02”, “user_password”: “$2y$10$HrwyNlDahEduVWgBOHXNne3essD8swEeew4nAt25owBTDyZkehmPq”, “user_label”: “user” }, { “id”: 10, “user_pet_name”: “陈秀月”, “user_name”: “hmuqx”, “user_phone”: “123607181002”, “user_sex_label”: “女”, “user_age”: 40, “user_email”: “378320@163.com”, “register_time”: “2006-02-24”, “user_password”: “$2y$10$eQr4wntyPAdH5pFHT4h83Oglbl9.we9Pj0/1bpWC75l9SAAlJPtYK”, “user_label”: “user” } ]

即可完成加载。

怎样用表格显示后端返回数据：

1、 使用axios与后端进行通信，获取后端返回的二维数组，将数组值赋给web_user_data，即可实现数据加载到表格的效果。

源码：

JavaScript的methods部分：

get_user_data() {

this.loading = true;//开启加载状态

this.$axios({

method: “post”,

url: “admin/webuser/adminuser”,

data: {

page_num: this.page_data.current_page,//需要显示的页码

every_page_num: this.page_data.page_size,//每页显示的数量

},

}).then((response) => {

// console.log(response);

this.web_user_data = response.data.user_fict_user;//将请求到的数据赋值给用户数组

this.page_total = response.data.user_all_num;//将所有的用户数量赋给页码总数。

this.loading = false;//关闭加载状态

});

},

Mounted部分：

mounted() {

this.get_user_data();//加载前执行获取函数

},