【实战】使用 uniapp 开发一个面试刷题小程序

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: 直至 5 月也依然是互联网寒冬,大厂裁员的消息在微信群漫天飞舞,而招聘网站上的 HC 也越来也少,因此不少小厂也开始纷纷内卷,压低员工绩效,本应该晋级加薪的时间,也变成了杳无音信。难道我们就束手无策了

highlight: monokai

我正在参加跨端技术专题征文活动,详情查看

前言

Hello,大家好,我是小马,受疫情影响,2022 年,我觉得是互联网最难的一年,直至 5 月也依然是互联网寒冬,大厂裁员的消息在微信群漫天飞舞,而招聘网站上的 HC 也越来也少,因此不少小厂也开始纷纷内卷,压低员工绩效,本应该晋级加薪的时间,也变成了杳无音信。难道我们就束手无策了吗?有句话说的好,“机会永远是留给有准备的人”,话虽不错,但有的人会说,“每天上班忙的要死,能完成任务就不错了,哪有时间准备面试刷题呢?”,因此我决定开发一个面试刷题小程序,让我们可以充分利用一些空闲时间提高自己,比如上班挤地铁的时候,排队做核酸的时候,都可以。

项目体验

微信小程序搜索面试狗或扫码体验。

为什么取名“面试狗”呢?取名模仿自鱼皮大佬的"面试鸭"网站,鸭是谐音,但狗却是“狗头保命”。

功能结构

  • 面试刷题

    • 选择题
    • 简答题
  • 文章

    • 面试技巧
    • 面试经验
  • 视频

    • 视频解析
    • 模拟面试

因为视频都会有版权,个人也不能上架视频类小程序,所以放弃。

技术架构图

面试刷题小程序架构图

技术栈选择

关于跨端开发或者多端开发,一般会使用 Taro 或者 Uniapp

  • 如果是 React 技术栈一般会选择 Taro
  • 如果是 Vue 技术栈一般会选择 Uniapp

我个人本来爱好 react 技术栈,但由于 Uniapp 开发可以有免费的云开发环境(阿里云 50 个,腾讯云 1 个),果断选择 Uniapp。

初始化项目

在开始之前请先

hbuilderX 是 dcloud 开发的代码编辑器,集成了便捷的云开发环境,可以方便我们调试。
如果喜欢使用 vscode 的同学可以参考下面这篇文章。

使用 VSCode 开发 uni-app 教程

新建项目

新建一个空白项目,选择开启 unicloud,选择阿里云。

关联云服务空间

然后关联云服务空间,至此项目初始化完成。

表结构设计

uniCloud 提供了一个 JSON 格式的文档型数据库。顾名思义,数据库中的每条记录都是一个 JSON 格式的文档。所以只需要保存 JSON 格式的数据就会自动往数据库里面插入一条记录。
既然是文档形数据数据库,那么我们为什么要设计数据结构呢,别着急,这个在后面有大用处,我们先按关系形数据库设计表结构。

云数据库控制台

打开云数据库控制台,新建一张表, 取名为 fe-question, 在表结构中输入以下 json,

{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": true,
    "create": true,
    "update": true,
    "delete": true
  },
  "properties": {
    "_id": {
      "description": "ID,系统自动生成"
    },
    "title": {
      "bsonType": "string",
      "title": "标题",
      "description": "标题",
      "label": "标题",
      "trim": "both"
    },
    "desc": {
      "bsonType": "string",
      "title": "描述",
      "description": "描述",
      "label": "描述",
      "trim": "both"
    },
    "explanation": {
      "bsonType": "string",
      "title": "解析",
      "description": "解析",
      "label": "解析",
      "trim": "both"
    },
    "tagId": {
      "bsonType": "number",
      "title": "tag",
      "description": "标签",
      "label": "标签",
      "trim": "both"
    }
  }
}

这里我就罗列了几个重要字段。表结构创建完成了,接下来我们需要收集下面试题。

数据收集

题目来源

建完表后我们要往表中添加一些数据,这里可以大家可以自行整理,当然也可以使用 node 爬虫,
这里就列几个可能用到的 JS 库

  • axios 用于爬取网页内容
  • cheerio 是服务端的 jquery api,用于获取 dom 节点数据
  • turndown 将 html 转化为 markdown

比如牛客网只需要直接爬接口就可以了

const axios = require("axios");
const fs = require("fs");
const _ = require("lodash");

function sleep(time) {
  return new Promise((reslove) => setTimeout(reslove, time));
}

const headers = {
  "content-type": "application/json; charset=utf-8",
  "user-agent":
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36",
};
const listUrl =
  "https://www.nowcoder.com/api/questiontraining/interview/jobQuestionList";

const detailUrl =
  "https://www.nowcoder.com/api/questiontraining/interview/jobQuestionDetail";

let result = [];

const fetchList = async (page = 1) => {
  console.log("请求第" + page + "页");
  const res = await axios
    .get(listUrl, {
      params: {
        questionJobId: 156,
        questionClassifyId: 0,
        size: 50,
        page,
        _: new Date().getTime(),
      },
      headers,
    })
    .then((res) => {
      return res.data;
    });
  if (res.data.subjectList.length > 0) {
    await fetchDetail(res.data.subjectList);
    await fetchList(page + 1);
  } else {
    console.log("爬完了");
    fs.writeFileSync("fe-question.json", JSON.stringify(result));
  }
};

const fetchDetail = async (data) => {
  for (let index = 0; index < data.length; index++) {
    const item = data[index];
    //await sleep(1000);
    const res = await axios
      .get(detailUrl, {
        params: {
          questionId: item.questionId,
          questionJobId: item.questionJobId,
          questionClassifyId: 0,
          _: new Date().getTime(),
        },
        headers,
      })
      .then((res) => {
        return res.data;
      });
    if (res && res.data) {
      console.log("正在保存:" + res.data.title);

      result.push({
        explanation: res.data.referenceAnswer,
        title: res.data.title,
        desc: res.data.content,
        tag: _.get(res.data.questionTags, "[0].name"),
      });
    }
  }
};
fetchList();

上面代码,可以用于很多类似网站,先爬列表再爬详情这样的接口数据, sleep函数可以自行控制,这样可以防止服务端阻止爬虫,如有些网站需要登录,可以将cookie复制出来,保存在headers
爬虫截图

云函数获取数据

有了数据,接下来我们就需要实现后端逻辑,也就是接口部分。
新建云函数
新建云函数
在 hbuilderX 中选择 cloudFunctions,右键新建云函数,输入函数名称 question-detail
新建完成后,会在 index.js 中生成最简单的云函数代码。

'use strict';
exports.main = async (event, context) => {
    //event为客户端上传的参数
    console.log('event : ', event)

    //返回数据给客户端
    return event
};

event 为客户端上传的参数 ,return 返回数据给客户端,我们修改成如下代码

'use strict';
exports.main = async (event, context) => {
    const db = uniCloud.database();
    const res = await db.collection('fe-question').doc(event.id).get()
    //返回数据给客户端
    return res.data[0]
};

这样就可以根据 id 查询面试题详情了。
那么要如何调试呢,hbuilderX 可以直接配置请求参数,输入请求参数为 JSON 格式
配置测试参数
然后点击运行本地云函数,这样就可以直接运行云函数,拿到返回的 JSON 数据。
云函数运行结果

数据请求

前端页面遵循 vue 语法,只不过数据请求我们必须用 uniCloud 帮我封装好的函数请求数据,

假设我们现在要调用下刚才的面试题详情的云函数,那么前端可以通过如下方式调用这个云函数。

// promise方式
uniCloud.callFunction({
    name: 'fe-question',
    data: { id: 1 }
  })
  .then(res => {
    this.detail=res.result
  });

// callback方式
uniCloud.callFunction({
    name: 'fe-question',
    data: { id: 1 },
    success(){},
    fail(){},
    complete(){}
});

云函数执行结果会存在 result 中,一般会在 onLoad 生命周期中请求数据。

到此,我们的面试小程序前后端可以联调啦。

Markdown 解析

Towxml 是一个可将 HTML、Markdown 转为微信小程序 WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中 Markdown、HTML 不能直接渲染的问题。并且在有详情的文档,如何在 uniapp 中使用?可以参考这份文档,这里我不过多赘述。大家若有相关需求,可以参考文档进行开发。

后台管理

按照上面步骤,相信有前端基础的同学,肯定可以开发出类似的功能,但对于云开发来说,我认为最麻烦的是后台管理,刷题小程序开发好了,总需要一个后台维护的地方,虽然 uniapp 有 uni-admin 模板,也可以快速开发出一个后台管理系统,但对于个人开发者来说,需要投入不少成本。

得益于 hbuilderX 中的 schema2code 功能,可以直接根据数据模型直接生成管理页面代码,所以我们可以直接在小程序端管理数据了。

下面我就贴一下文章模块的管理页面的步骤:

首先根据数据字段写好 schema。我这边直接使用了系统自带的 opendb,在 unicloud web 控制台中新建表,选中文章表和类别表,大家可以根据自己的需求增减字段。

unicloud web 控制台中新建表 news 表

在 unicloud web 控制台中表创建完成后,然后在 hbuilderX 中下载所有 DB Schema。

将云端的Schema下载到本地

选中 news 表,右键 schema2code

右键 schema2code 生成代码

勾选需要管理的字段
接着会弹出字段选择页面,我们可以根据需求勾选需要管理的数据字段,点击确定就会自动生成 关于 news 表的增删查改的页面啦。
一起来看下效果
文章列表
新建文章
文章编辑

权限设计

并不能让所有用户都有后台管理权限,所以我们可以根据微信小程序的提供的 openid 来建立用户系统。

下面介绍下主要步骤:

  • 第一步:使用 uni.getUserProfile 来获取头像昵称等信息
  • 第二步:通过微信小程序端 API uni.login获得 code
  • 第三步:在服务端通过 API auth.code2session 就可以获取到用户的 openid 了,
  • 第四步:新建一张表wx_user,将 openId 和用户信息存入云数据库中。

云数据库把自己设置成admin

最后直接把自己的信息设置成 admin, 在小程序端根据 admin 展示后台管理菜单。

根据admin字段显示管理菜单

红色部分并不是对所有人展示,根据 admin 字段显示管理字段。

打包发布

至此我们的面试刷题小程序开发结束了,点击菜单上的发布按钮,我们可以打包成 App、H5 和各种应用的小程序。

hbuilderX 可以发布的小程序列表

我这边发布的是微信小程序,要先打开微信小程序开发者工具,点击发布后,微信小程序开发者会自动运行,点击上传,最后在微信后台发布提交审核即可。
微信小程序发布

小结

一起来总结下

  • 使用 uniApp 和云开发我们可以免费白嫖一个跨端的小程序。
  • 可以利用爬虫抓取一些资源,来丰富我们的内容。
  • 使用 schema2code 可以自动生成后台管理页面
  • 通过用户权限控制,可以在小程序端管理数据,PC 端也可以(用微信客户端打开小程序即可)

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

本文首发掘金平台,来源小马博客

相关文章
|
27天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
2月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
1月前
|
缓存 架构师 Java
Maven实战进阶(01)面试官:Maven怎么解决依赖冲突?| 有几种解决方式
本文介绍了Maven的核心功能和依赖管理技巧。Maven是基于项目对象模型(POM)的构建工具,具备跨平台、标准化、自动化等特性。其三大核心功能为依赖管理、仓库管理和项目构建。依赖管理通过pom.xml文件引入第三方组件并自动下载;仓库管理涉及中央仓库、私服和本地仓库;项目构建则通过生命周期管理编译、测试、打包等流程。文章还详细讲解了依赖冲突的解决方法,包括默认规则、手工排除和版本指定等策略。
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
74 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
2月前
|
并行计算 算法 安全
面试必问的多线程优化技巧与实战
多线程编程是现代软件开发中不可或缺的一部分,特别是在处理高并发场景和优化程序性能时。作为Java开发者,掌握多线程优化技巧不仅能够提升程序的执行效率,还能在面试中脱颖而出。本文将从多线程基础、线程与进程的区别、多线程的优势出发,深入探讨如何避免死锁与竞态条件、线程间的通信机制、线程池的使用优势、线程优化算法与数据结构的选择,以及硬件加速技术。通过多个Java示例,我们将揭示这些技术的底层原理与实现方法。
122 3
|
2月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。

热门文章

最新文章