网络:前端向后端发送网络请求渲染在页面上,将EasyMock中的信息用前端vue框架编写代码,最终展示在浏览器

1.NPM安装

先终止vscode程序ctrl+c,在终端输入:

npm install axios --save

2.引入axios

import axios from 'axios'

在script脚本中引入axios

easy mock网址

使用easy mock模拟前后端发送数据,先注册账号

3.easy mock创建项目

项目名称name:demo

点击创建接口,写json代码,模拟数据,已经提供代码

创建完项目会自动为我们提供一个接口

然后把这个刚创建好的地址在浏览器能打开就创建成功了

然后把模拟数据展示在浏览器中,通过vue编写代码

1.在Test.vue中生成vue模板

选择elementui里这个表格的代码

2.选择ELement UI中的这个表格作为模板,复制el-table代码放在template中

tableData这个数组也放在return中

handleEdit和Delete这两个方法也要复制

然后启动项目npm run serve

可以正常在浏览器展示关于王小虎的表格信息

修改模板展示我们的模拟数据


tableData中的数组由easy mock中的模拟数据展示,所以这里数组为空

mounted中也可以调用getList方法进行页面渲染

效果展示

相关推荐
午安~婉12 小时前
Git中SSH连接
前端·git·gitee
盏灯12 小时前
mac 外接磁盘,热更新失效
前端·后端
那些年丶ny13 小时前
颜色扩展库
前端·javascript·数据可视化
ihuyigui13 小时前
海外签收通知短信接口
android·java·开发语言·前端·数据库·后端
YWL13 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
暖和_白开水13 小时前
数据分析agent (七):contextvars 模块上下文request_id
java·前端·数据分析
程序员黑豆13 小时前
鸿蒙应用开发:Flex 组件从入门到实战
前端·华为·harmonyos
大爱编程♡13 小时前
Vue3+TypeScript+element-plus的文章管理项目(配后端接口)-退出及文章管理页面
前端·javascript·typescript
先吃饱再说13 小时前
React 组件设计:从 Props 传递到组件封装
前端·react.js
独立开阀者_FwtCoder13 小时前
最近做了一个健身小程序:智形健身助手,健身的佬们来提点意见
前端·javascript·github