考研为了背单词,我手写了一个背单词小 app

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: 考研为了背单词,我手写了一个背单词小 app

1. 背景

2022年考研的考研狗,寒假一个人孤苦伶仃背单词,想检查却无人提问,于是萌生了手写一个提问单词的小应用。

最初只是想做一个web端的网页,用浏览器来使用,但总感觉差点意思,就封装了一下,封装成了apk形式,最终可以在手机上有模有样展示,如下图:

目前只是实现了展示单词,每次进入app, 就会随机出现一个单词(单词在数据库中), 点击认识,就会切换到下一个随机的单词, 点击提示, 机会出现单词的词根等帮助自己记忆的提示,点击翻译则是该单词对应的中文翻译。


2. 技术实现

该应用是基于springboot + vue 的前后分离项目


1. 数据库

数据库选型使用的 MongoDB 数据库,主要是单词这种东西存的都是文本,考虑到MongoDB 这种 NoSQL 对文本的处理速度很快,于是选用了它。


2. 后端

后端采用 SpringBoot + SpringDataMongoDB ,利用 其中的 MongoRepository 和 MongoTemplate 实现MongoDB 的增删改查


3. 前端

前端采用 Vue-CLI + Vant , 这里的 Vant 是一个配合vue使用的前端 手机,小程序UI, 类似于电脑端的 ElementUI


4. app 打包

springboot 的后端是jar包形式部署到服务器上的


前端最初打算用 node 的 cordova 来把 vue 打包成 app应用,但是在添加平台的时候总是报错,百度说是npm 版本问题,但是升级了也没解决, 贴出报错如下:

后来采用了HBuilder X 的 apk 打包功能,期间也遇到一些bug, 后来找一个前端小伙伴帮忙找的bug, 原来是 如果 vue-cli 项目中有路由,则如果使用懒加载形式添加的路由,就会与Hbuilder X 的打包冲突,导致报错


后来直接在头部 import 组件常规方式导入就打包好了。

3. 代码仓库

该项目的代码放置在gitee 仓库中

后端连接: https://gitee.com/fsxl/word

前端连接: https://gitee.com/fsxl/word-vue


app下载地址(也在gitee) :https://gitee.com/fsxl/word-vue/releases


目前只是实现背单词,其他的选项没做出来,其中还有一点 布局上的优化需要做,如果单词的提示过多,下边的卡片视图就会超出范围,如下:

考研在即,就先这样,后期如果有时间,再去慢慢完善,如果有好的想法欢迎讨论。


4. 版本更新 2020-02-17,新增单词范围功能

背单词时,由于词汇量大,泛泛的背也是没有效果的,所以app右上角新增选范围功能,默认范围是ALL, 可以选择 26个英文字母之间任何一个,表示以这个字母开头的所有单词,后边所有单词就都是这个字母开头的。效果如下

本次版本更新新增了redis的技术支持,利用缓存技术,将各种单词缓存起来提高查询效率。不过本人对redis的实战应用规范还不太明朗,本人是服务器启动时先从MongoDB加载所有单词,这是一个 List列表,然后遍历列表,把每个单词存到redis的set集合中,然后从set集合随机抽取。


本来我是直接把 List<WordEntity>这个大列表利用 k,v 形式存到redis, 但是效率太慢,就换成了redis 的集合存储。如有更好的办法欢迎交流。代码如下:


另外 使用 springboot 2.x 集成 SpringDataRedis ,在刚开始连上Redis服务的时候很正常,只要过一段时间不动它,他就会自动断开。网上说是 Lettuce 的一个bug 还是咋地,最后换成了 jedis 操作。


相关文章
|
存储 前端开发 Java
基于java考研线上自习室 App 的设计与实现附完整代码
基于java考研线上自习室 App 的设计与实现附完整代码
631 0
基于java考研线上自习室 App 的设计与实现附完整代码
|
11天前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
40 0
|
3月前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
4月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用`ISportOptimizer`对内置运动分析器进行微调优化。相比小程序,APP框架(如uni-app)因技术差异,无法直接修改运动分析器参数,因此提供了统一的优化机制。开发者可通过`ISportOptimizer`获取和更新检测规则、动作样本等,灵活适应不同场景需求,如全民运动赛事的宽松模式或学生体测的严格模式。文中还提供了示例代码,展示如何对具体运动项目(如仰卧起坐)进行优化。需要注意的是,微调优化适用于标准动作的小范围调整,若动作变化过大(如花式跳绳),可期待后续自定义扩展功能。
|
4月前
|
IDE 开发工具 开发者
使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件
# 使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件 #鸿蒙开发工具 #DevEco Studio
314 1
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
16天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
137 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
16天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
73 0

热门文章

最新文章