软考小工具更新啦!做最好用的软考刷题工具

2,201 阅读9分钟

image.png

往期文章推荐:

uni-app 实现好看易用的抽屉效果

uni-app 高效开发小程序技巧

JavaScript 访问者模式学习

一. 前言

为了帮助广大的软考PMP 考试的朋友们,我使用 uni-app 开发了一个小程序刷题工具,目的是希望给大家在进行软考考试的道路上助力成功,小程序一经发布后也得到了广大考试者的认可,很庆幸我能够帮助到他们。

既然有不少的人在使用它,那么我就会一直去迭代这个小工具,近期我也对它进行了一些功能优化和迭代更新,希望大家能够擅用它,也希望大家能够给我提意见和建议,让它有一个更好的发展,帮助更多的人,实现它应有的价值。

二. 有题记小程序

1. 简介

有题记小程序是我个人独立开发的一款 PMP 和软考做题小程序,目前已经涵盖以下题库资源:

  • 软考高级

    • 信息系统项目管理师:2018 年~ 2024 年综合、案例、论文真题,已更新最新题库
    • 系统架构设计师:2018 年~ 2022 年综合、案例、论文真题
  • 软考中级

    • 网络工程师:2018 年~ 2022 年综合、案例真题
    • 软件设计师:2018 年~ 2023 年综合、案例真题
  • PMP 题库

    • 第六版 PMBOK 指南教材练习题,好多有意思的项目管理知识题目,可以试一下!

题库会一直更新,如果你的需求比较迫切,可以联系我进行优先添加!当前仅是添加了一些热门的软考项目考试,后续会不断更新。

2. 功能合集

已完成的功能如下所示:

  • 考试项目管理
  • 历年试题练习
  • 收藏试题回顾
  • 知识总结学习
  • 考试日历规划

image.png

三. 新增功能

其实是完成了一个近期的迭代功能,主要包括了新首页,考试日历,收藏试题等的功能迭代

1. 新首页

本次首页更新规划了一个新首页,通过这个新的首页设计,我希望可以聚合功能入口,方便用户快速找到自己想要的功能或题库。新首页的设计主要添加了以下元素:

  • 广告轮播位

    • 平台为用户推荐的内容
  • 试题入口

    • 历年试题
    • 收藏试题
  • 考试日历

    • 考试倒计时
    • 内嵌日历

image.png

2. 考试日历

考试日历对于考试者来说,应该是一个比较关注的功能,你可以设置考试节点,来显示距离考试的具体天数。通过考试日期倒计时,是否可以给你一些紧迫感?

image.png

点击设置考试日期,选择具体日期后,页面即可出现考试倒计时的文案:距考试xx天

通过 dayjs 这个库,我们可以很方便的获取两个日期的差值,差异(Diff)可以返回指定单位下两个日期时间之间的差异。比如:

距今多少天,使用 dayjs 实现:

dayjs().diff('2024-11-23', 'day')

关于更多 Day.js 的使用,你可以参考以下文档: Day.js 中文文档

3. 收藏试题

我认为收藏试题是一个非常重要的功能,因为它可以帮助用户快速找到自己想要的题目,同时也可以帮助用户快速找到自己想要的答案。通过反复练习收藏题目,用户可以快速提升自己的学习能力,提高自己的做题效率。

image.png

其实,本次更新的重头戏在于收藏功能,因为在很早之前的初版,我是做过收藏功能的,而当时收藏功能是通过数据库实现的,但是现在,我将收藏功能通过微信小程序的本地存储实现了,简化了交互流程,为什么要通过本地存储实现呢?

很简单,因为之前,刷题是需要用户注册登录的,所以根据实际登录用户将数据存储到远端数据库中,可以很方便的关联登录用户来实现收藏功能,但是现在,取消了用户注册登录流程,所以将收藏功能通过微信小程序的本地存储实现,这种方法简单快捷。

接下来我们看一下收藏的整体流程是如何做的。

首先我们需要定义一个 json 数据格式,用于存储收藏的试题 id,以如下的形式存储:

json 格式如下:

{
  paperId: '202221' // 试卷ID
  paperName: '2022年下半年' // 试卷名称
  paperLikes: [202201, 202202, 202203, 202204] // 收藏的试题id数组
  projectId: 'xxxtxmgls' // 项目id
  projectName: '信息系统项目管理师' // 项目名称
}

收藏单个试题:使用了 Promise 来处理异步操作,我们将一个值添加到一个名为 likes 的存储中,这个存储为一个对象,其中每个键对应一个包含 paperLikes 数组的对象。

function add(key, value) {
  return new Promise((resolve, reject) => {
    try {
      const storage = new Store().get('likes')
      let data = storage[key] || value
      // 来合并两个 paperLikes 数组,并去除重复项。
      data.paperLikes = [...new Set([...data.paperLikes, ...value.paperLikes])]
      storage[key] = data
      new Store().set('likes', storage, 'app')
      resolve(storage)
    } catch (e) {
      reject(e)
    }
  })
}

注意:收藏试题时,应注意判断该试卷下是有其他收藏试题,我们应该注意是合并两个 paperLikes 数组,并去除重复项。

取消收藏单个试题:同样的,使用了 Promise 来处理异步操作,这个函数的目的是从一个名为 likes 的存储中移除指定的值。

// 取消收藏单个试题
function remove(key, value) {
  return new Promise((resolve, reject) => {
    try {
      const storage = new Store().get('likes')
      let data = storage[key]
      data.paperLikes = data.paperLikes.filter(item => item !== value)
      // 如果无收藏试题,则删除对应储存的对象
      if (data.paperLikes.length === 0) {
        delete storage[key]
      } else {
        storage[key] = data
      }
      new Store().set('likes', storage, 'app')
      resolve(storage)
    } catch (e) {
      reject(e)
    }
  })
}

注意:取消收藏试题时,需要判断该试卷下是否还有其他收藏试题,如果没有,则删除对应试卷即可。

删除所有收藏的试题:以试卷为维度,删除整套试卷,自然而然的也就删除了本套试卷中所有的收藏试题,以下代码表示:以 Promise 来处理异步操作,从存储中移除指定键及其对应的值。

function removePaper(key) {
  return new Promise((resolve, reject) => {
    try {
      const storage = new Store().get('likes')
      delete storage[key]
      new Store().set('likes', storage, 'app')
      resolve(storage)
    } catch (e) {
      reject(e)
    }
  })
}

youti1.gif

为什么使用 Promise?那是因为 Promise 提供了一个更为现代和简洁的方式来处理异步编程,能够更加标准化和统一性,更好的控制流和错误处理。

有了以上的方法,我们在添加收藏取消收藏删除所有收藏时是这么使用的:

// 添加收藏
function addLike() {
  let value = {
    projectId: 'projectId',
    projectName: 'projectName',
    paperId: 'paperId',
    paperName: 'paperName',
    paperLikes: ['questionId']
  }
  this.$api.like
    .add(this.paperKey, value)
    .then(res => {
      this.$tips.toast('收藏成功', 'success')
    })
    .catch(() => {
      this.$tips.toast('收藏失败', 'fail')
    })
}

// 取消收藏
function removeLike() {
  this.$api.like
    .remove(this.paperKey, this.question.id)
    .then(res => {
      this.$tips.toast('取消收藏成功', 'success')
    })
    .catch(() => {
      this.$tips.toast('取消收藏失败', 'fail')
    })
}

// 删除试卷,移除该试卷下所有收藏试题
function removePaper() {
  this.$tips.loading()
  this.$api.like
    .removePaper(this.paperId)
    .then(res => {
      setTimeout(() => {
        this.$tips.loaded()
        this.getLikeList()
        this.$tips.toast('删除成功', 'success')
      }, 1500)
    })
    .catch(() => {
      setTimeout(() => {
        this.$tips.loaded()
        this.$tips.toast('删除失败', 'fail')
      }, 1500)
    })
}

四. 开发工具合集

有题记小程序是基于 uni-app 的 Vue.js 2.x 语言进行开发的,我在开发过程中主要使用了以下工具库:

1. UI 库:uView UI

uView UI 1.8x

uView 1.x 是基于 Vue.js 2.x 语言开发的 UI 框架,当然现在随着 uni-app 和 Vue.js 3.x 的流行,新项目 1.x 的版本已经很少人在使用了。

而现在基于 Vue 3.x 语言的 UI 框架也有不少,所以目前的选择性非常多。

2. UI 快速开发库:anyup uni-app

anyup uni-app 快速开发库

它是基于 uni-app 的一个组件库,同时基于项目开发最佳实践,不断优化迭代,使用该工具库可以方便、迅速的多平台开发 App、H5、微信小程序等。

因为该库是基于 Vue.js 2.x 的 uni-app,因此目前已经停止维护了,新版本正在紧急开发中。

3. Request 请求库:uni-http

uni-http 是基于 uni.request 实现一款小而美的请求工具,通过大约 100 行代码的实现,为 uni-app 项目打造一个简洁高效的请求库,提供统一的 Promise API。

相关文章:100 行代码打造小而美的 uni-app 请求库

官方文档:uni-http 官方文档

基于 uni.request,同时兼容 Vue.js 2 和 Vue.js 3

4. 网络请求流程构建库:FlyHttp

FlyHttp 是一个自动生成前端 service 层的工具类!目的是要在构建网络请求流程时,自动生成某些重复性的代码,可降低代码量 99%!

相关文章:前端小工具!加速构建你的 API 网络请求流程,全端通用!

官方文档:uni-http 官方文档

这是一个通用的 TypeScript 包,适用于任何在前端开发中,原则上你可以在任何能运行 JavaScript 的地方使用,与前端框架无关,可全端通用!

以上就是我在开发有题记小程序时,使用的第三方工具合集,大多数都是我在众多项目开中的经验总结,然后将其一步步进行了整合和优化,最终提取出来!

五. 获取方式

小程序名称:有题记

由于小程序未进行微信认证,当前在小程序市场搜索不到,同时在掘金又不方便放二维码,所以通过以下方式获取。 点击查看沸点获取

六. 说明

关于有题记小程序,如果你有更迫切的需求或更好的想法,欢迎评论区留言讨论,也可以通过以上沸点联系我!

如果文章对您有帮助,麻烦动动小手点点赞!关注我也有更多精彩的分享。