不是吧?2000块的英语听读应用长这样?!

2023-03-04 17:05:49 浏览数 (1)

基本需求

前端部分:

1、访问地址为:http://website/zrpd?useid=1234,其中userid是用户标识,页面需要根据不同的标识值返回不同的信息。

  (1)如果该userid字段不存在,或者该userid在后端不存在,则整个页面提示:您输入的访问地址无效,请重新输入。

  (2)如果userid和访问者的ip不对应,则整个页面提示:您无权限访问该地址,请重新输入。

2、页面的UI设计为单页面,无跳转,具体设计如下:

整个页面分为两个区域,一个区域为通过单词搜索(完整的单词),一个区域为通过音素搜索(字母或字母组合),互不干扰,相互独立。未搜索前,下方显示为空。

3、单词搜索区搜索出来的单词,分段赋予颜色显示,比如department,分为三段,de、part、ment,每一段用一种颜色,颜色使用的顺序为(红绿橙蓝紫,超过5个字段,则循环这5个颜色):字段1字段2字段3字段4字段5,例句中该单词用红色标出。

4、音素搜索区搜索出来的单词,颜色显示同单词搜索区搜索出来的单词,除此之外,还需要额外在搜索的音素下方画横线标出。

5、点击搜索按钮时,不整体刷新,后台返回数据后,仅刷新显示区域。

6、点击喇叭图片可以播放声音,播放声音时,喇叭图片有动效。

7、单词图片点击可以放大,放大后右上角有叉号,点击可以关闭放大的图片。

后端部分:

1、以json字符串或xml等作为数据源文件,具体格式可以按照方便编程和提高效率来设计。

2、通过单词搜索(大概有3000个单词)和通过音素(大概有100个音素)搜索,设计两个独立的数据源文件,数据源在启动后加载到内存,无需每次搜索时重新加载,如修改数据源文件,需要重启后台服务才能生效。

3、userid需要设计一个独立的数据源文件,每次页面访问均需检索数据源文件,做到修改了数据源文件,即刻生效,无需重启后台服务。每一个userid对应一个字符串(用于在页面上显示),一个ip地址列表(用于校验合法的访问ip地址,0.0.0.0代表所有地址均合法)。

编程语言

html css js ajax springboot json

环境与工具

开发工具:hbuilderx、idea、json

开发环境:jdk

实现思路

1.前端:使用前端三件套,灵活布局和渲染页面,主要技术点在于js的运用,使用ajax请求后端数据,以及控制、监听音频的播放暂停等。

2.后端:使用传统的web开发思路,编写页面请求数渲染,采用json形式的数据库,单词、音素、以及账号系统都使用json建立独立的数据结构,响应给前端动态渲染到页面上。

3.数据库:使用的是json文件保存json形式的数据,且json文件可以部署在tomcat或者本地。

效果展示

看完技术大佬们的解题思路,有没有学到什么呢?想做兼职的小伙伴也可以关注我们公众号哦!

0 人点赞