基本需求
前端部分:
1、访问地址为:http://website/zrpd?useid=1234,其中userid是用户标识,页面需要根据不同的标识值返回不同的信息。
(1)如果该userid字段不存在,或者该userid在后端不存在,则整个页面提示:您输入的访问地址无效,请重新输入。
(2)如果userid和访问者的ip不对应,则整个页面提示:您无权限访问该地址,请重新输入。
2、页面的UI设计为单页面,无跳转,具体设计如下:
![](https://i-blog.csdnimg.cn/blog_migrate/5c7a507cd67cd218f6a6604d231aac44.png)
整个页面分为两个区域,一个区域为通过单词搜索(完整的单词),一个区域为通过音素搜索(字母或字母组合),互不干扰,相互独立。未搜索前,下方显示为空。
3、单词搜索区搜索出来的单词,分段赋予颜色显示,比如department,分为三段,de、part、ment,每一段用一种颜色,颜色使用的顺序为(红绿橙蓝紫,超过5个字段,则循环这5个颜色):字段1字段2字段3字段4字段5,例句中该单词用红色标出。
4、音素搜索区搜索出来的单词,颜色显示同单词搜索区搜索出来的单词,除此之外,还需要额外在搜索的音素下方画横线标出。
5、点击搜索按钮时,不整体刷新,后台返回数据后,仅刷新显示区域。
6、点击喇叭图片可以播放声音,播放声音时,喇叭图片有动效。
7、单词图片点击可以放大,放大后右上角有叉号,点击可以关闭放大的图片。
2.后端部分:
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或者本地。
效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/36d5f3fd495b944cf535ec083a8ef4bb.png)
看完技术大佬们的解题思路,有没有学到什么呢?想做兼职可以看看我们的公众号哦。
如果你也想要这样的代码,欢迎联系我们,限时8折,等你来呦。