项目的故事
前端

项目的故事

第一个项目 古人云：学编程，一定要写一个完整的项目出来。 在去年的10-11月，为公司写过一个合同管理项目，是我学了Web开发之后写的第一个项目。 当时由于这方面的需求比较强烈，公司又没有一个像样的信息系统，就前后花了两个星期的时间，和其他部门开会问需求，然后写出初版进行测试，最后正式上线。虽然都不

第一个项目

古人云：学编程，一定要写一个完整的项目出来。 在去年的10-11月，为公司写过一个合同管理项目，是我学了Web开发之后写的第一个项目。 当时由于这方面的需求比较强烈，公司又没有一个像样的信息系统，就前后花了两个星期的时间，和其他部门开会问需求，然后写出初版进行测试，最后正式上线。虽然都不是什么非常正式的项目，但总算也经历过了一个完整的开发。 就在10天前，还更新到了1.1版本，添加了两个公司的支持。 现在回头来看看这个项目，使用的技术栈并不复杂，后端是Python 3.7 + Django 2.1.1，数据库使用了PostgreSQL。前端由于当时还没学前后端分离，又不想用Bootstrap，就用了Foundation库，排版布局稍微比Bootstrap方便一些。 业务逻辑除了用户登录，还有一个根据数据库中已经存在的该类合同的数量自动编制索引之外，就全部都是CRUD了。用户方面分成合约部录入合同信息，工程和前期部请款，财务部记录付款。还靠Django ORM对PostgreSQL的支持写了一个查找功能。 虽然业务超级简单，但各个部门有了一个共享的信息平台和记录，给内部管理和外部审计都带来了很大的方便。年底事务所来审计的时候就对这个东西赞不绝口。 项目刚上线的时候，默认是支持一个公司，不过我当时还算明智，在数据库里留好了公司表，然后合同默认外链到第一个公司，所以在这个月增加新公司支持的时候，只做了很小的改动，在录入合同的表单内添加了选择公司的下拉菜单，其他的全部逻辑都不用修改。看来当时我写的代码耦合程度还算是比较低的。 当然，这不是说这个项目有多酷炫。其实在我看来，第一个项目就像是一个锤子，简单实用能起到效果，但是外观实在太不起眼。实际的页面是这个风格： 被一起学开发的朋友吐槽说这是工业水泥风，让我赶紧把UI换了。不过由于现在一直工作稳定，也满足了现在的需求，估计短期内不会升级了，也许哪天会用Java来写2.0版本了。 然而，真正要升级的不是这个项目的外观，而是技术栈。

下一个项目

去年有幸认识身边的一个前端架构师，他看我对Web开发如此有兴趣给我推荐了一套音频讲座：左耳听风的讲座。在其中的程序员练级攻略里，我发现我自己其实已经完成了里边的零基础启蒙的部分。 同时被打击了一下，原来以为自己入门了，但是在左耳大佬看来完成了Python Web开发也只算是启蒙，在正式入门的篇章里，左耳大佬提出了要转到Java上来，然后给了一个编程项目，作为正式入门的考验。 所以从去年年底，就转到Java上来，不断积累技术栈，学习Spring，Vue等前后端分离技术。现在感觉差不多可以一战了，就准备在博客上开个项目一栏，记录一下升级后的自己，对于完成这个项目的点点滴滴，也是又一次对自己的审视吧。 左耳大佬的作业项目的具体要求是：

实践项目

一个投票项目：
    业务需求如下：
  1. 用户只有在登录后，才可以生成投票表单。
  2. 投票项可以单选，可以多选。
  3. 其它用户投票后显示当前投票结果（但是不能刷票）。
  4. 投票有相应的时间，页面上需要出现倒计时。
  5. 投票结果需要用不同颜色不同长度的横条，并显示百分比和人数。
    技术需求如下：
  1. 这回要用Java Spring Boot来实现了，然后，后端不返回任何的HTML，只返回JSON数据给前端
  2. 由前端的JQuery来处理并操作相关的HTML动态生成在前端展示的页面
  3. 前端的页面还要是响应式的，也就是可以在手机端和电脑端有不同的呈现。 这个可以用Bootstrap来完成。
    进阶功能：
  1. 在微信中，通过微信授权后记录用户信息，以防止刷票。
  2. 可以不用刷页面，就可以动态地看到投票结果的变化。
  3. Google一些画图表的JavaScript库，然后把图表画得风骚一些。
现在既然准备开始做这个项目了，也拿到需求了，就得先分析分析技术选型了。博客估计要变成项目文档了，这大概是Blog-Drive

技术准备

把上边的需求分析了一下：
需求内容 需求分析和技术
项目基础结构 Java+Spring（Boot)，Spring Boot的依赖要根据每个需求而定
用户登录后生成投票表单 由于后边大佬提出要前后端分离，不能使用Spring Security，要使用Shiro安全框架加jjwt。这个还需要学习，找了一篇文章。
投票项可以单选，可以多选 这个倒是容易，就是把投票选项做成checkbox控件。
其它用户投票后显示当前投票结果（但是不能刷票）。 这个就是指用户只能投票才能查看投票结果，从设想上来看，应该就是投票发送请求之后，如果响应成功，就应该返回结果页面，不成功则弹出提示。
投票有相应的时间，页面上需要出现倒计时。 这个可以使用JS控件来完成，只是要通过HTML或者其他方式传递数据。也可以考虑在新一些的浏览器上通过SSE来实现（似乎推送时间）没有必要。
投票结果需要用不同颜色不同长度的横条，并显示百分比和人数 这个是具体样式了，可以通过前端来计算，或者后端返回也可以
后端不返回任何的HTML，只返回JSON数据给前端 这实际上是要求做一个单页面应用。要仔细规划一下。由于是投票，很容易想到，投票内容可以保存在Redis的有序集合中，因此需要集成Redis。而用户可以通过redis或者mongo来保存。
由前端的JQuery来处理并操作相关的HTML动态生成在前端展示的页面 说明这里需要使用jQuery
响应式页面 这个就按照大佬说的，使用Bootstrap了
通过微信授权后记录用户信息 这个很显然，如果要做到前后端分离，就要使用Oauth2认证，不过搜了一下，发现企业号才能使用，暂时无法做该功能。
可以不用刷页面，就可以动态地看到投票结果的变化 这个可以采用两个方案：如果客户端支持，就采用SSE；如果不支持，就采用轮询的方式。如果要采用SSE的方式，则必须使用Spring Webflux。
由于既然要做项目就要努力把挑战都完成。分析到现在，我发现这基本上就是要做一个单页面应用。 主要用的技术有：
    后端
  1. Spring Boot
  2. JWT用于前后端分离鉴权
  3. 数据库方面MongoDB+Redis，MongoDB用于存储用户信息，而Redis负责存储投票信息以及投过票的用户。
    前端
  1. Vue，由于这是一个彻底的前后端分离的项目因此考虑来还是准备使用Vue，但是看来需要多研读一下单页面Web应用的编写了。
  2. Bootstrap，还是先用这个吧，未来可能升级到Vue的一些组件库。
列出了技术栈之后发现，大佬的这个作业一点也不简单，是一个彻底前后端分离的单页面应用，虽然功能简单，但是五脏俱全。之后检查了目前的技术栈积累，还差如下部分：
  1. Vue的路由等内容还需继续学习
  2. 前后端分离情况下的用户鉴权
  3. Spring 与 Redis的响应式整合
  4. 前端工程化与单页面应用开发的实践
下边就是继续补齐技术栈了。Vue还好说，继续按部就班的学习。这个前后端分离并且使用JWT的用户鉴权是个全新的玩意，需要研究一下。
LICENSED UNDER CC BY-NC-SA 4.0
Comment