答题微信小程序实现(4):数据库题库的调用/上一题、下一题/题量length的获取

article/2025/8/29 8:56:06

不积跬步无以至千里,不计小流无以成江海。
本来想直接上选择题的,但步子就有点太大了,不是一点点来的。选择题除了题库的调用外,还需要判断答案对错,涉及到if语句,这个if语句应该单独写一个,对于初学者来说,我得一点点来,要不然想一口吃成个胖子,还没长肉,就食物中毒了。
不要急,不要急,一步一步来,一点一点做,总归能做出来的。
还是以李贺作品集为例,数据库的调用和题量的获取。
这里写图片描述
如图可见,首界面是作品列表,南园、马诗、金铜仙人辞汉歌,为了写程序,随便上了这三首做测试。点击题目进入第二个界面,点击◀和▶,切换上一首,下一首,除了内容外,还显示第2首/共3首。结构如最右,html和images文件夹不用看,这俩文件夹忘删了。data文件夹下面有一个post-data.js文件,数据库存在这个文件中了,pages下面有index和detail两个页面,主要就是这两个页面。
先看看数据库post-data.js文件里的代码:

var local_database = [{"name":"南园","content":"男儿何不带吴钩"
},
{"name": "马诗","content": "大漠沙如雪,燕山月似钩"
},
{"name": "金铜仙人辞汉歌","content": "衰兰送客咸阳道,天若有情天亦老。"}
]
module.exports = {postList: local_database
}

json结构,前面一个声明var,后面一个module.exports,固定格式,这样这个数据库就可以被调用了。

然后看首界面index。
index.wxml代码:

<view wx:for="{{postList}}" wx:for-item="item" wx:for-index="index"><navigator url="./../detail/detail?id={{index}}"><text>{{item.name}}</text></navigator>
</view>
<text>{{postList.length}}首作品</text>

这里面用了一个wx:for循环,这个就是固定模式了,wx:for=”{{postList}},循环这个数组,for-item=”item”,在循环里把postList数组命名为item,wx:for-index=”index”,循环的序号(数组的角标,就像postList[index]),navigator打开内部页面,url网址是id={{index}},这个就是参数传递了。点击的是哪个题目,打开的页面显示的就是哪个内容,虽然只有一个detail页面。{{postList.length}}就是获得postList这个数组的长度了,我就放了3首诗。
index.js代码:

var postData = require("../../data/post-data.js");
Page({data: {// text:"这是一个页面"postList: postData.postList,}
})

require获取数据库。
detail.wxml代码:

<view><view>{{details[id].name}}</view><view>{{details[id].content}}</view>
</view>
<text>{{id+1}}首/共{{details.length}}</text>
<button bindtap="lastQuestion"></button>
<button bindtap="nextQuestion"></button>

detail.js代码:

var postData = require("../../data/post-data.js");Page({data: {id: "",details: postData.postList,},onLoad: function (options) {this.setData({id: parseInt(options.id)})console.log('options---', options)console.log('详情', this.data.details)},nextQuestion: function () {var that = this;if (that.data.id < postData.postList.length-1) {this.setData({id: that.data.id + 1});}},lastQuestion: function () {var that = this;if (that.data.id > 0) {this.setData({id: that.data.id - 1});}}})

这里面的id是传参传过来的,就是index中的id={{index}},details: postData.postList把数组重命名(赋值给)details,所以在wxml中就是details[id]了。id: parseInt(options.id)这个是把id给数值化了一下,要不然在wxml中id+1出现的数字就会比较随性。
lastQuestion函数点击上一首,if里面有一个这个that.data.id > 0,id大于0的时候,才有上一首嘛,nextQuestion函数点击下一首,if里面有一个that.data.id < postData.postList.length-1,点击不能超过总数,虽然已经把数组赋给了details,但是还得这么写postData.postList.length才能获得数组长度,不知道为什么,我写成details.length,程序无法运行。
这也是一个作品集的雏形模板。
下一个目标,判断答案对错!
go!


http://chatgpt.dhexx.cn/article/mQVqiHj5.shtml

相关文章

vue实现调查问卷一页一题,上一题下一题形式

使用了vant组件的radio 单选框 官网https://youzan.github.io/vant/#/zh-CN/radio 效果图 效果图 做出来的效果图就是上面那样 一页一题 附上代码&#xff1a; <template><div class"second"><!-- 问卷题 --><div v-for"(item,index) in…

leetcode每日一题

目录 &#x1f3c6;重新格式化电话号码 &#x1f453;①麻烦解法 &#x1f453;②使用库函数降维打击 每日鸡汤&#xff1a; &#x1f680;有志者自有千计万计&#xff0c;无志者只感千难万难。 &#x1f3c6;重新格式化电话号码 给你一个字符串形式的电话号码 number 。n…

题题题题题1

js 基本数据类型 7 种原始类型Boolean、Number、String、Null、Undefined、Symbol&#xff08;es6&#xff09;、BigInt、Object Symbol的理解 symbol是在es6中引入的基本数据类型、它表示的是一个独一无二的值&#xff0c;主要是来解决命名冲突的问题&#xff0c;它的使用场…

下午第一题

2017上半年 阅读下列说明和图&#xff0c;回答问题1至问题4&#xff0c;将解答填入答题纸的对应栏内。 【说明】 某医疗器械公司作为复杂医疗产品的集成商&#xff0c;必须保持高质量部件的及时供应。为了实现这一目标&#xff0c;该公司欲开发一采购系统。系统的主要功能如下:…

JS实现答题上一题下一题

以下是实现效果图 JS块代码 var TRUE_COUNT 0//正确的题数var count 10;//当前所在题数var thisURL document.URL;var getval thisURL.split(?)[1];var titleType getval.split("")[1];//获取题目typevar class_radio "selection";//选择按钮var ur…

js、jq实现答题上一题下一题

一、以下是效果图 说明&#xff1a;第一题只有一个“下一题”按钮&#xff0c;中间题目有两个按钮“上一题”“下一题”&#xff0c;最后一题按钮改为“提交”&#xff1b; 二、代码 js代码&#xff08;jquery需要自行引入&#xff09; var number document.getElementsByCl…

vue 简单实现上一题下一题问答效果

1.先来看下效果&#xff08;左上展示题目数量以及当前题序号&#xff0c;当第一题时只有下一题按钮&#xff0c;未回答问题时无法点击下一题&#xff0c;且回答结果展示错误或正确的颜色&#xff09; ​​​​ 2.接下来我们来看下html是怎么写的吧 <!-- 左边数据 --><…

MybatisPlus自动填充(建立、更新时间)

准备 1、建立user表 DROP TABLE IF EXISTS user;CREATE TABLE user (id BIGINT(20) NOT NULL COMMENT 主键ID,name VARCHAR(30) NULL DEFAULT NULL COMMENT 姓名,age INT(11) NULL DEFAULT NULL COMMENT 年龄,email VARCHAR(50) NULL DEFAULT NULL COMMENT 邮箱,PRIMARY KEY …

Jpa配置实体类创建时间更新时间自动赋值,@CreateDate,@LastModifiedDate

操作数据库映射实体类时&#xff0c;通常需要记录createTime和updateTime&#xff0c;如果每个对象新增或修改去都去手工操作创建时间、更新时间&#xff0c;会显得比较繁琐。 Springboot jpa提供了自动填充这两个字段的功能&#xff0c;简单配置一下即可。CreatedDate、LastM…

win10如何关闭自动更新及修改更新时间

关于win10如何关闭自动更新&#xff0c;有以下三个方法&#xff0c;但其效果明显不同。 当然&#xff0c;可用度最高的肯定放到最前面。 其中方法一实用性最强&#xff0c;方法二有时候没什么用&#xff0c;方法三可以延缓较长一段时间更新&#xff0c;方法四可以设置更新时间…

mybatis自动生成更新时间和创建时间

开发中&#xff0c;每次修改数据或者添加一条数据都要手动改变一次创建时间或者更新时间&#xff0c;有一说一挺麻烦的 数据表里面的创建时间和更改时间字段 更新update和insert要想自动生成的话实体类要加上TableField 然后创建MyMetaObjectHandler类&#xff0c;实现Meta…

Ubuntu修改时区和更新时间

更新时区 先查看当前系统时间 rootubuntu:/# date -R Thu, 12 Aug 2021 01:41:48 0000 结果时区是&#xff1a;-0000 我需要的是东八区&#xff0c;这儿显示不是&#xff0c;所以需要设置一个时区 运行tzselect tzselect在这里我们选择亚洲 Asia&#xff0c;确认之后选择中…

MySQL 设置 创建时间 和 更新时间

在实际应用中&#xff0c;我们时常会需要用到创建时间和更新时间这两个字段&#xff0c;下面记录一下&#xff1a; 第一种 &#xff1a; 命令行创建&#xff08;推荐&#xff09; CREATE TABLE user_info (uid varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT…

MySQL中创建时间和更新时间的自动更新

一、需求 当新增记录的时候&#xff0c;MySQL自动将系统的当前时间 set 到创建时间和更新时间这两个字段中。 当更新记录的时候&#xff0c;MySQL 只 update 更新时间字段的时间&#xff0c;而不修改创建时间字段对应的值。 二、方案 找到表中对应的创建时间和更新时间的字段…

Mysql设置自动更新时间

假设建表包括如下字段&#xff1a; id&#xff1a;主键ID create_time: 创建时间 update_time: 修改时间 如何创建table可以使得&#xff1a; 在插入记录时create_time、update_time默认为当前时间&#xff1b;在修改记录时update_time自动更新为当前时间&#xff1b; 建表语…

postgresql设置自动更新时间方法

在我们日常开发中&#xff0c;在设计数据库字段的时候不可避免的都要created_time&#xff08;创建时间&#xff09;以及updated_time&#xff08;修改时间&#xff09;两个时间戳字段&#xff0c;作用大家也都一目了然。下面将为大家详细介绍两个字段的如何去设置来达到你想要…

centos 7 更新时间和更新时区

使用 date 命令 查看当前centos7服务器的时间&#xff0c;发现当前时间与实际实际不同步。 1、下载ntpdate工具&#xff0c;使用该工具可以与时间服务器同步。 yum -y install ntp ntpdate 2、设置系统时间与网络时间同步。 ntpdate cn.pool.ntp.org 3.将系统时间写入硬件时间…

阿里国际站各数据更新时间汇总

2B平台运营 Michael Dai 1个月前 (11-10) 71次浏览 2个评论 扫描二维码 [编辑] 阿里国际站各数据更新时间汇总 昨天下午在查看关键词花费时突然发现已经过了下午3点了&#xff0c;但是关键词的推广计划没有重新开始&#xff0c;这时我才意识到直通车各计划的更新时间应该开…

MySQL中更新时间字段的更新时点问题

我们在设计表时&#xff0c;通常为了记录数据插入和更新的时间&#xff0c;会定义两个字段&#xff0c;create_time/insert_time和update_time&#xff0c;按照需求&#xff0c;记录插入的时间&#xff0c;会存储到create_time/insert_time字段中&#xff0c;记录更新的时间&am…

hexo添加文章更新时间

修改&#xff08;博客主目录&#xff09;/themes/next/layout/_macro/post.swig 文件&#xff0c;在<span class"post-time">...</span>标签后添加 {%if post.updated and post.updated > post.date%}<span class"post-updated"> |…