网络:前端向后端发送网络请求渲染在页面上,将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方法进行页面渲染

效果展示

相关推荐
粥里有勺糖10 分钟前
安利一下最近用的桌面“Agent” | T3 Code
前端·github·ai编程
xy345316 分钟前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
不停喝水25 分钟前
【前端转全栈java速通课】 项目实战④7-11节 操作数据库-登录-注册-修改密码-注销-mubatis-plus简化crud-
java·前端·数据库
一水鉴天1 小时前
统一对象拓扑(UOT)设计全链定稿:从三件事分离到三继承 之1 20261010(豆包“查看聊天内容”继续)
前端·css
栖凤1 小时前
Java 的 try-catch 在 Agent 里失效了,我用了 5 个模式才兜住
java·前端·python
粥里有勺糖1 小时前
视野修炼第136期 | 前端小恐龙"Deno"被收购
前端·github·ai编程
修炼的dance2 小时前
页面塞了13.88 MB字体,导出的PDF只有71 KB
前端
qq_369173632 小时前
如何将 AI 生成的 HTML 网页发布成在线链接?不用自己搭建服务器
前端·人工智能·html·效率工具·html 发布
风花一世月2 小时前
⚡ 我把一座含氢能源园区搬进了浏览器(五类能流实时算守恒,在线直接玩)
前端·人工智能
羲云2 小时前
Claude 越界事件之后:Agent 权限设计为什么不能只靠提示词
前端