扎堆EVENT

the detail in our beautiful day!

扎堆网站一二三

浏览:1851

因为在这次建站的工程中,我以一介新手的身份,同时涉足了前端工程师,后端工程师,系统架构师,运维工程师,UI设计师,产品经理,财务部门等等的工作,所以难免会有做的不好的地方,请众看客多多谅解。

架构选择


这个网站其实初始于我当初的一点计划,本来说只是做一个blog网站,因为当时也是用 django 做了好几个博客,也刚开始尝试 flask,到后面暑假要开始实施时就开始思考需求了。产品的需求当时考虑如下:

  • 一个线上资料系统
  • 一个线上博客系统
  • 一个线上报名系统

因为考虑到这些逻辑需求较大,我当时还在 知乎 上面去询问,我的这个网站究竟是用 django做还是使用 flask期间甚至考虑过 ruby on rails,因为我要负担一个后端的整个架构,然后我还要承担他的运维,这些技术成本都得考虑进去,最后选择了我们伟大的 django,期间有一个小插曲,在我使用它时,我看到了著名的instagram的故事,当instagram的用户已经达到1个亿时,他们的技术团队只有13人,而支撑起这奇迹的就是 django对初期startup的强力支持。

一切的开始都是一个 Hello world,这个网页的第一行代码

pic

那么这个任务就开始了,因为暑假时借到了住的地方,便开始了没日没夜的长期伏于屏幕前码代码,不断地润化初期的需求,最开始时,我的整个网站是后端驱动的,就意味着,这个网站的考虑是从后端的数据流开始考虑的,所以出现了这种感人的过渡页面:

pic

基本上是把架构先搭建起来,那么在经过了将近一周,我正式地把后端构架搭了起来,整个技术栈也基本成型

django+nginx+bootstarp+jquery+mysql

基本是这么几个

那么现在的网站版本是version5.0,虽然需求一直在改,但是整个架构一直没变,而且为了能让他更加有活力,我把代码的伸展性做了大量的加强,最后也写了几千行的后端python代码,也大概能算个有厚度的工程了

设计


其实,整个工作,我做的最多的是设计,然而我并不是做设计出身的,有的只是看了那么久前端的美感,一个页面我估计会设计很多遍,现在已经呈现的页面都经过我至少3次以上的大改动

比如我们初期时的登录页面,刚开始设计是长这样的:

pic

这还是version2.0版本了,前端有部分优化,第一版本时,基本就是几个表单框

于是那天晚上我不断磨合我们的登录页面:

pic

最后的结果,他终于能看能用了

pic

但这也只是这个建设工程的一小部分,这里多亏了 bootstarp的帮助,特别是他的优秀案例,给了我很多启迪

部署


整个建设过程,最让我痛苦的就是部署了,初期的规划是 nginx+uwsgi 的,但是每次部署时都感觉很痛苦,花费一整天的时间,当时因为要去北邮测试这个网站的安全性能方面的东西,连夜去北邮,部署了一整个晚上,不过这个服务器架构还算不错,这是当时我在北邮做的简单的压力测试的数值,我们用的aliyun最低端的服务器:

pic

后来我自己建博客,发现了更好的gunicorn,而且它对gevent的支持非常好,于是我们的服务器架构就变成了 nginx+gunicorn+gevent 我们现在用的就是这个架构,这是又是一个通宵部署上线的场景(看nginx的log看到眼花):

pic

上线


其实因为我们的这个网站使用的是国内的服务器,所以很多东西必须按照国内的进行,这里要给广大的想建站的朋友提个醒,最好早点去备案,不然会浪费很多时间,我当时基本已经把所有东西都准备好了,就等着上线了,因为拿着以前用国外服务器建博客的经验,以为很快,其实不然。

这里说明一下,国家备案处理的域名很有限,如果你是那种其他国别的域名,比如我博客的 .me域名,国家就不会给你备案,好在我们的域名是 .com

我使用的是国内aliyun的服务器,首先要去aliyun备案,备案信息很苛刻,我被驳回过一次,接着它会给你寄来一份它标明的幕布,你需要拍照再上传回去,这个时间剩下的就是等待了,一般为3个星期,三个星期后工业与信息化部会将你的备案号和备案信息转交给你(短信或者邮箱),你要在网页上标明,这样就可以了。

接着dns解析,我们访问 zhaduixueshe.com就可以看到我们的网页了

存在的问题


由于后端很多问题我们只能遇到了才知道怎么解决,另外类似python的GIL锁,或者django本身的问题我们也不去探究了

这里最大的问题出自前端,而且也不是只是我有,那就是浏览器

本网站的浏览器兼容是和知乎持平的,就是说知乎兼容到哪,我们就到哪,因为关于浏览器的问题,我曾不止一次在社区发问,但是得到的回答让我不甚满意,我也曾花了一个下午用jquery写了模拟的placeholder和表单验证,虽然写完了,却在这个版本被我抛弃,因为需要的逻辑运维成本太高,这是我必须要考虑的。希望大家都能使用类似 __谷歌浏览器__ , __火狐浏览器__ ,或者 __高版本的IE浏览器__ 这都是可以的

以下是我们网站与学校机房IE6博弈的场景,太可怜!

pic

pic

顺带一提,我们使用的响应式的布局(bootstrap),所以对各种大小的屏幕优化相当完美,而且我自己也写了部分javascript程序做屏幕大小的适配

扩展


到现在,我们的网站基本承担三个功能:

  • 资料线上化

  • 报名系统线上化

  • 扎堆的宣传线上化

其中这些功能依赖于设计好的大量的权限设置,所以在考虑需不需要做高速缓存,于是我去问了很多老程序,他们并不推荐我们在初期就做太多优化,于是我只是留下了一些可以做扩展,可以嫁接过去。

然后我们的前端基本基于jquery,这确实让我们的前端少了大量的数据交互,所以期间尝试过后使用 angularjs,但是这样程序员的运维成本太高,所以最后放弃,但是以后产品迭代很可能会使用

基本需求


前面讲了很多技术方面的东西,比较枯燥,但也是我的经历所想

现在我们谈谈需(qing)求(huai)

我当时在看《数据科学实战》的时候,里面列举了大量的偏微分方程,虽然大一时高数成绩还凑合,但是现在我已经想不起来当时这些东西的解法了,所以我希望有那么一个信息平台,能够让我迅速的查阅我们需要的资料和解题策略,而不是想某度百科那样噼里啪啦的一堆历史。我觉得这对于我们理工科大学尤为重要

接着,我觉得现在的报名系统太麻烦,不人性化,而这种数据操作对于互联网都相当简单,于是我做了一个报名系统的线上化,让报名人和面试人更加透明,信息交互更加简单,减少不必要的成本。

最后的最后当然是宣传了,线上宣传总好过在某主干道吆喝几句

这是现在的基本需求,如果后期有需求我还会增加,希望我的想法能够帮到别人


最后,作为这个网站的编写者和产品思考者,我希望我的点点想法能够优化原有的行为结构,能够给别人带来便利与好处,而这也是我花费时间做这个的唯一动力。

既然有能力,那就去改变一些东西

最后对于这个网站,希望他能

更有活力,更有生机,更多用户

如果谁对这个网站有相当兴趣,可以在这个网站找一找一些潜在的联系方式,或者通过我的 博客 联系我


回博客首页记于:2016-07-05




<