建站

原因

光阴似箭，岁月如梭。看着一身迷彩服的大一新生在踏着整齐的步伐，口中喊着响亮的口号，那夕阳下的身影，是我逝去的青春。转眼就要毕业了，我的军训仿佛就在昨天，历历在目。回首前面的两年，自己并不是不学无术，但也浪费了挺多时间。作为一名学习Java web开发的程序员，应该具备完整开发网站系统的能力。

作为一个侧重后端开发的专业，前端开发切实有一定难度，虽然之前也学校课程上也学习过HTML，css,js,但都只是简单学习，浮于表面，上个学期也简单学习也vue，主要时间和精力都放到了Java上了。之前已经在阿里云服务器上部署一个网站了SpringBoot+Thymeleaf，那是别人提供的源码，我只是对数据稍做修改，想要在那基础上进行扩展很难，不如自己建一个吧。那样也可以进行一步掌握建站的整体开发流程，麻雀虽小，五脏具全，涉及到前端、后端以及部署等。也是对自己所学知识和技能的一个总结和检验吧。

暑假的时间就已经想将这个想法付诸行动了，奈何考驾照练车占用了我不少时间，技术上也还不成熟，所以练车之余有时间就进一步学习了vue.js、vuex、vue router、webpack、vue cli等前端技术，了解各个技术栈的功能作用及简单入门。

这个学期的课程比较少，自己支配的时间比较多。万事具备只欠东风，那就来实战一下吧。

项目是打算用前后端分离的开发模式，先开发客户端再开发服务器端代码，一是对我来说客户端开发难度较大，服务器端难度相对较小，开发起来效率更高。 二是客户端需要什么数据后端就可以只开发相关的接口提供相应的数据，需求更加明确，不然就就算后端提供了数据，我客户端没能力渲染出来或者渲染出来导致页面数据太多布局太乱也不好。

目标

既然要先开发客户端，那就要先明确开发目标：开发什么样的网站，达到什么样的效果及用户体验。

首先我要开发的是一个个人网站，上面放一些自己写的文章、学习笔记和心得，提供我在其它平台学习笔记、分享代码的跳转链接及志同道合者想找我探讨人生或技术的联系方式，其它用户可以注册、登录、退出登录、注销账号但不能发布文章，仅可以在网站留言或者给文章评论、点赞、打赏，pc端和移动端需要能够很好的兼容和适配以提高用户体验。 接下来规划开发流程及网站整体结构。

规划

pc客户端

1） 先来设计一下网站的整体结构和布局

位置1可以放一张图片，这样不会显得页面太单调，位置2是导航条，位置3是文章列表，位置4可以是放置关注站长的跳转入口（如公众号、QQ等），文章的排行榜（可以是最新、最热、评论最多等的排列顺序）以及友情链接。位置5是放置网站备案的相关信息。点击导航栏按钮切换页面的时候，1、2、4、5都是固定不动的，只有3的内容会改变。接下来设计各个模块的细节

2）

模块1就是一张图片作为背景图，图片宽度要能铺满浏览器的宽度，限制高度，结合页面的美观程序酌情设定，没啥好说的。 模块2我目前想到这四个导航入口，从左到右分别是首页、动态、留言、关于，如果需要，还可以在右边加个搜索框

3） 模块4可以分为上中下三个部分，分别是关注我、热门文章、友情链接

4） 模块3这里要根据导航切换到不同页面而有不同的设计，下面就来一个个设计

4.1）首页

上部分是放置轮播图，轮播图下面就最新发文章列表，即作者最新发布的几篇文章。文章列表里的每一篇文章都有一张图片作为封面图，有文章标题，展现部分文章内容（需要截取部分内容作为摘要，点击进入才可以看完所有内容），展现文章作者、文章发布时间、点赞数量、浏览数量、评论数量

4.2)动态

直接就是所有文章列表，作者写的所有文章都在这里列出来。比首页少了轮播图，其它跟首页差不多

4.3)留言

同样也是分为上下两部分，上部分是留言输入框，用来给用户提交留言，下部分是展现所有用户提交过的留言

留言输入框部分有头像（如果用户已经登录的话就显示出图片，没登录刚不显示图片），有文本输入框，给用户输入留言内容，要对输入的字数进行限制以及敏感字过虑，一天评论的次数也要限制，以上主要是预防用户恶意留言、评论，还有提交按钮，用来提交留言内容。当用户点击头像的时候，会弹出模态框，若用户尚未登录，则框里可以切换登录和注册页面。若用户已经登录，则弹框里只有登录页面，此时登录页面里展现用户的信息，除了手机号，其它皆可以编辑修改，此外还有退出登录入口。在注册页面需要手机号发送验证码进行注册，间隔至少60秒方可发送第二次验证码，用户可以上传头像，头像可以预览，输入框有输入合法性验证

所有用户留言模块的每一条用户留言,除了显示留言内容，还展现用户头像、留言时间、用户名、回复按钮，可以有多级回复，作者可以给用户回复，用户也可以给用户回复。留言排序可以是按时间排，也可以按热度排，等等，这里暂定最新留言在最上面，按时间降序排列

4.4)文章详情

进行文章详情页面是当用户点击文章列表里的子项时进入的，而不是导航栏。这个页面也大致分为上下两个部分，上部分是文章的详细信息，有文章标题、文章内容、文章发时间、文章作者、访问量、评论数量，此外还可以打赏。当用户点击打赏按钮，会弹出弹框，弹框里可以切换支付宝打赏或者微信二维码打赏，实现原理和留言那里的注册登录那差不多。文章评论和留言布局差不多，只是数据不一样。点赞和评论都需要先登录，未登录而进行点选或评论操作的会出现登录注册的弹框。

4.4)关于

关于页面目前我还没有想到放啥内容，暂时不做具体设计

移动客户端

移动客户端的布局要等到pc端完成了才好根据具体情况来写样式进行适配