html引入json文本测试数据

本文介绍了在项目场景中,如何通过声明dayData.json变量来准备前端测试数据,并展示了如何在JavaScript代码中使用console.log来检查测试数据的状态。
摘要由CSDN通过智能技术生成

项目场景:

提示:这里简述项目相关背景:

复现bug时,可以这样给前端准备测试数据。

dayData.json存放测试数据,只需声明为变量即可

在这里插入图片描述
这里不用管ide中的报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="dayData.json"></script>
</head>
<body>
    <script>
        console.log(res.success);
        console.log(res.message)
    </script>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用mockjs生成模拟数据在uniapp中非常简单,只需要按照以下步骤进行操作即可: 1. 安装mockjs 在uniapp的项目根目录下打开终端或命令行工具,执行以下命令安装mockjs: ``` npm install mockjs --save-dev ``` 2. 创建mock数据文件 在项目的根目录下创建一个mock文件夹,用于存放模拟数据文件。在mock文件夹下创建一个data.js文件,用于生成数据。示例代码如下: ```js import Mock from 'mockjs'; const data = Mock.mock({ 'list|5': [{ 'id|+1': 1, 'title': '@ctitle(5, 10)', 'content': '@cparagraph(1, 3)', 'createTime': '@datetime' }] }); export default data; ``` 在上面的代码中,我们使用了Mock.mock方法生成了一个包含5个元素的数组,每个元素包含id、title、content和createTime四个属性。其中,id的值从1开始自增,title和content使用Mock.js的占位符语法生成随机文本,createTime使用@datetime生成随机时间。 3. 引入mock数据 在需要使用模拟数据的地方,比如在请求接口时,可以引入我们刚刚创建的模拟数据文件,并将其作为接口数据返回。示例代码如下: ```js import data from '@/mock/data.js'; export default { getList() { return new Promise((resolve, reject) => { setTimeout(() => { resolve(data.list); }, 1000); }) } } ``` 在上面的代码中,我们创建了一个getList方法,用于模拟请求接口。在getList方法中,我们使用setTimeout模拟了一个异步请求,并在1秒钟后返回了模拟数据文件中的list数组。 4. 关闭请求拦截 在开发过程中,我们通常需要关闭请求拦截,否则mock数据将会拦截所有的请求。在uniapp中,我们可以在manifest.json文件中配置关闭请求拦截。示例代码如下: ```json { "app-plus": { "nvue": { "fileListFilter": { "include": [ "**/*.nvue", "**/*.js" ], "exclude": [ "node_modules/**/*.*" ] }, "filter": { "serviceWorker": true, "uniStats": true, "network": { "xhr": false } } } } } ``` 在上面的代码中,我们将network.xhr设置为false,即关闭了请求拦截。这样我们就可以正常使用模拟数据进行开发和测试了。 总结:使用mockjs生成模拟数据是uniapp开发中非常实用的技巧,可以有效提高开发效率和测试效果。按照以上步骤进行操作即可轻松使用mock数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值