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

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
云数据库 Tair(兼容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 操作。


相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
存储 前端开发 Java
基于java考研线上自习室 App 的设计与实现附完整代码
基于java考研线上自习室 App 的设计与实现附完整代码
428 0
基于java考研线上自习室 App 的设计与实现附完整代码
|
5天前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
9天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
9天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
|
1月前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
69 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
|
28天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
2月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
43 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
2月前
|
Web App开发 5G Linux
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
一年一度的毕业季来临,计算机专业的毕业设计尤为重要,不仅关乎学业评价还积累实战经验。选择紧跟5G技术趋势的音视频APP作为课题极具吸引力。这里推荐三类应用:一是融合WebRTC技术实现视频通话的即时通信APP;二是具备在线直播功能的短视频分享平台,涉及RTMP/SRT等直播技术;三是具有自定义动画特效及卡拉OK歌词字幕功能的视频剪辑工具。这些项目不仅技术含量高,也符合市场需求,是毕业设计的理想选择。
68 6
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
|
2月前
|
编解码 Java Android开发
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
​SRT Streamer是一个安卓手机端的开源SRT协议直播推流框架,可用于RTMP直播和SRT直播。SRT Streamer支持的视频编码包括H264、H265等等,支持的音频编码包括AAC、OPUS等等,可谓功能强大的APP直播框架。另一款APP直播框架RTMP Streamer支持RTMP直播和RTSP直播,不支持SRT协议的直播。而本文讲述的SRT Streamer支持RTMP直播和SRT直播,不支持RTSP协议的直播。有关RTMP Streamer的说明参见之前的文章《使用RTMP Streamer开启APP直播推流》,下面介绍如何使用SRT Streamer开启手机直播。
56 4
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
|
2月前
|
IDE Java 开发工具
探索安卓开发之旅:打造你的第一款App
【8月更文挑战第24天】在这篇文章中,我们将一起踏上激动人心的安卓开发之旅。不论你是编程新手还是希望扩展技能的老手,本文将为你提供一份详尽指南,帮助你理解安卓开发的基础知识并实现你的第一个应用程序。从搭建开发环境到编写“Hello World”,每一步都将用浅显易懂的语言进行解释。那么,让我们开始吧!
下一篇
无影云桌面