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

15 篇文章 1 订阅
12 篇文章 1 订阅

1. 背景

2022年考研的考研狗,寒假一个人孤苦伶仃背单词,想检查却无人提问,于是萌生了手写一个提问单词的小应用。
最初只是想做一个web端的网页,用浏览器来使用,但总感觉差点意思,就封装了一下,封装成了apk形式,最终可以在手机上有模有样展示,如下图:
背单词app
目前只是实现了展示单词,每次进入app, 就会随机出现一个单词(单词在数据库中), 点击认识,就会切换到下一个随机的单词, 点击提示, 机会出现单词的词根等帮助自己记忆的提示,点击翻译则是该单词对应的中文翻译。

2. 技术实现

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

1. 数据库

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

2. 后端

后端采用 SpringBoot + SpringDataMongoDB ,利用 其中的 MongoRepositoryMongoTemplate 实现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 操作。

  • 12
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值