不是吧？2000块的英语听读应用长这样？！

基本需求

前端部分：

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或者本地。

效果展示

看完技术大佬们的解题思路，有没有学到什么呢？想要做兼职的小伙伴可以加我们哦！

Tags 标签

扩展阅读

加个好友，技术交流