高中同学毕业分布网站:敲定思路

一、背景

  第一集:http://www.cnblogs.com/Twobox/p/8368121.html

  • 中大体确定了自己的 大体目标、大体思路。
  • 但是 、 在今天的发现中,模仿“地图慧”中的同学毕业去向模块去 倒腾 好像 可行性与价值性 不高(低)。(说地是因为自己看到了更好的、我很皮)
  • "地图慧"中的模板与结果都是Flash做的。这对于我这个没倒腾过Flash的人来说 难度有点大。
  • 今天就不废话了,直接 搬运 今天的新发现与 思路吧。

二、技术搬运

  ①  HTML5+JS 动态地图样例

  

  点击在线演示 ↑

  样例简介与源代码网址:http://www.html5tricks.com/html5-map-distribute-animation.html

  我们可以:大体上参照这个样式,更改 圈的位置与数据,更新线的轴向。实现动态分布地图的概括显示。

  ② HTML5分步骤注册表单 HTML5表单经典

  

  点击在线演示 ↑

  样例简介与源代码网址:http://www.html5tricks.com/html5-step-reg-form.html

  我们可以:参考其思想、第一面显示 我们的同学分布地图,第二页显示 班级留言板 ,第三页显示 联系方式查询与更新(当然需要安全验证)

  ③ Echarts 的一些展示。这是一个基于 JS 做 统计图表、地图等 高质量的 JS包

  map:

  

  鼠标放上去时的弹出框:

  

  

  JS :ECharts (NB) 点击访问文档手册 ↑

  我们可以:利用以上技术 完成 我们第一页:分布地图的设计与开发

三、实施步骤

  ① 参照已有的地图样例、学习 JQuery 与 ECharts
  ② 设计构建同学去向数据库,导入数据。
  ③ 利用 html5+js(JQuery+Echarts) 完成第一页分布地图设计与开发。(设计JSP技术,暂时不连接数据库采用静态数据)
  ④ 加深 JSP 技术的学习与应用 // 可最后
  ⑤ 百度参照优美的留言模板、完成第二页留言板的设计开发。(先不实现功能)
  ⑥ 发布半成品
  ⑦ 完成第三页 同学信息查询页面的设计与构建
  ⑧ 利用JSP+mysql技术最后完成:三页相关与数据库的对接、安全验证等功能
  ⑨ 优化发布。挂载到服务器上。

四、其他

  很多 html5 css3 js 精美模板的网站:http://www.html5tricks.com/

  Echarts 开发手册:http://echarts.baidu.com/echarts2/doc/doc.html

  Echarts 关于map运用的某博客:blog.csdn.net/xuemoyao/article/details/16358571/

五、后言

  ( ̄▽ ̄)" 搞事 搞事 搞事,哎...

  转载请注明出处 (●'◡'●):http://www.cnblogs.com/Twobox/

  2018-01-29 00:09:21

[Web][高中同学毕业分布去向网站+服务器上挂载]二、敲定思路与方向(HTML5+JS(JQuery+ECharts))的更多相关文章

  1. [Web][DreamweaverCS6][高中同学毕业分布去向网站+服务器上挂载]一、安装与破解DreamweaverCS6+基本规划

    DreamweaverCS6安装与破解 一.背景介绍:同学毕业分布图项目计划简介 哎哎哎,炸么说呢,对于Web前端设计来说,纯手撕html部分代码实在是难受. 对于想做地图这类的就“必须”用这个老工具 ...

  2. 怎样将本地web项目部署到腾讯云服务器上?

    怎样将本地web项目部署到腾讯云服务器上? 1.本地计算机的工作: (1).用eclipse新建一个web项目,然后在webcontent下新建一个index.html,然后在本地部署到Tomcat服 ...

  3. centos服务器上挂载exFat U盘

    有些场景,我们需要在服务器上插入U盘,但是现在的U盘或者移动硬盘,大多都是exFat格式的,有时候linux系统识别不了,可以按照以下方式挂载. 1.安装nux repo(可以不装) yum inst ...

  4. 把web项目部署到阿里云linux服务器上

    最近弄了个试用阿里云服务器倒腾了半天终于部署好,分享一下. 1.登入阿里云打开你申请的是云服务器的实例: 点击重置密码---重置密码后重启服务器才能生效(一般需要重置密码.这里设置的密码是使用xhel ...

  5. java 在web应用中获取本地目录和服务器上的目录不一致的问题

    先来讲讲我所遇到的问题.最近有个新的项目添加新的功能. 修改之后部署到服务器上面发现取到classpath目录跑到别的地方去了.在本地测试却正常. 当时毛的着火了.硬是想不懂什么问题. 终于发现了这个 ...

  6. 在Visual studio上发布web项目,并添加到IIS服务器上。

    1.首先发布到IIS上 https://blog.csdn.net/kydkong/article/details/49563193 2.NET4.0部署出错HTTP 错误500.21 - Inter ...

  7. 本地服务器上挂载A目录到B目录

    原因: 由于某个分区满了,切磁盘无法扩大分区空间,但是项目依赖该分区,需要继续像该分区存储文件,此时其他分区还有很大的空间,使用挂载的方式,在有空间的分区创建新目录,将新目录挂载到源目录下即可. 执行 ...

  8. 将linux上的网站代码托管到gogs git服务器上进行实时同步(实战)

    一.说明 本说明只针对php,其他语言需要编译请用别的架构实现 二.实现效果 本地开发员门提交推送代码到git服务器,会立即同步更新网站服务器上代码 三.实战步骤小节 首次托管请先看   https: ...

  9. 手把手教你把web应用丢到服务器上(单页应用+ 服务端渲染)

    前两篇文章中,我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板,并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex.在这两篇 ...

随机推荐

  1. [Swift]LeetCode274.H指数 | H-Index

    Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...

  2. [Swift]LeetCode903. DI 序列的有效排列 | Valid Permutations for DI Sequence

    We are given S, a length n string of characters from the set {'D', 'I'}. (These letters stand for &q ...

  3. kubernetes---docker-image

    imagePullPolicy  <String> Always : 总是从仓库下载 , 如果是image的tag是latest ,如果需要一直保持最新,则应设为Always ,从仓库下载 ...

  4. 面试前必知Redis面试题—缓存雪崩+穿透+缓存与数据库双写一致问题

    今天来分享一下Redis几道常见的面试题: 如何解决缓存雪崩? 如何解决缓存穿透? 如何保证缓存与数据库双写时一致的问题? 一.缓存雪崩 1.1什么是缓存雪崩? 回顾一下我们为什么要用缓存(Redis ...

  5. 在asp.net web api 2 (ioc autofac) 使用 Serilog 记录日志

    Serilog是.net里面非常不错的记录日志的库,另外一个我认为比较好的Log库是NLog. 在我个人的asp.net web api 2 基础框架(Github地址)里,我原来使用的是NLog,但 ...

  6. Python内置函数(68)——__import__

    英文文档: __import__(name, globals=None, locals=None, fromlist=(), level=0) This function is invoked by ...

  7. DOM事件第一弹

    近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充. 一.事件类型 参数 事件接口 初始化方 ...

  8. 【offer收割机必备】我简历上的Java项目都好low,怎么办?

    这篇文章我们来聊一聊,在系统设计和项目经验这两块,应该如何充分的准备,才能拿出有技术含量的项目经验战胜跟你同台竞技的其他工程师,征服你的面试官,收获各种心仪的offer. (1)高级工程师必备:系统设 ...

  9. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  10. 复杂的QR_code

    Topic Link http://ctf5.shiyanbar.com/stega/QR_code.png 1)打开链接之后发现是一个二维码,扫描之后出现一个字符串 secret is here 2 ...