前端人员也能拥有自己的个人网站

现在来写这篇文章看似有点迟了，因为我的个人网站服务器没有续费已经停掉了。但还是可以根据截图来写一写，姑且当作回顾。

pc首页

【历史背景】

首先，简要说下开发这个网站的背景，这是2017年12月份突发奇想想做一个网站，但是做什么呢？想着最近好像今日头条特别火，就想着做一个内容类的网站，这类网站内容通过爬虫也很容易获取，哈哈哈，所以最终就做了《金句猫》这个站点。网站采用了前后端分离的架构，前端框架用的vue，后端用的java+springboot，数据库用的mysql。后来，我做了第一版后还只是在本地启动了，主要功能是一个段子列表的显示，数据还是在数据库直接插入的。一次跟一个高中朋友聊天说起了这个东西，他是在杭州一个公司做java后端开发，他说他有一台阿里云的闲置服务器，我说那要不给我用下，正好我现在在弄了一个东西，说干就干，那天中午他把服务器ip和密码给我，下午我就把网站部署上去了。那天晚上我就发了地址给他体验了一下，大概过了十几天，我那高中同学跟我说要不我也来参与一下，这我当然很开心，因为后端我也写了第一版，大体的架构我自己也清楚了，这样我就专心做前端，可以实践得更多，两个人都可以得到锻炼。就这样，这个网站开发就这样开始了...

【百度百科】

后来，我也为这个网站建立相应的百度百科，可以直接在百度里搜“金句猫”，访问链接-->金句猫

【网站pc版截图】

1.金句列表页

金句列表页

2.金句详情页

金句详情页

3.美文列表页

美文列表页

4.美文详情页

美文详情页

5.聊天室 

聊天室采用websocket技术

聊天室

6.登录注册页

登录注册页

7.头部头像区 

头部头像区

8.金句美文发表 

金句美文发表

 【h5版截图】

在nginx中更改配置文件，监听请求来自pc还是h5，来自pc时转发至pc项目，来自h5时转发至h5项目。

1. 登录注册页

登录注册页

 2.聊天室消息页

聊天室消息页

3.美文页

美文页

 4.首页

首页

【管理后台截图】

管理后台做金句、美文的审核工作

 【域名服务器】

1.域名

2.服务器

服务器

 

数据库

 

代码上传

 

pc、h5项目转发

说到服务器，还遇到了一个坑，就是服务器的备案问题，因为我是在上海工作，但又没居住证，所以在上海备案备不了。上海工信部要我备湖南老家的， 但湖南工信部要求要湖南的手机号，然而我的是上海的，mmmmmppppp.....后来不得已办了一个归属地湖南的手机号..

【数据统计】

数据统计同时采用了友盟数据统计和百度数据统计，因为友盟采用的早一点，所以这里只贴了友盟的截图。

趋势分析

 

访客地区分布

 

浏览器分布

【技术架构】

这里我没有讲网站采用的具体技术架构，但我之前有过一张截图可以参考一下。

1.技术图谱（网站技术）

2.技术优化（访问链接）

 【代码地址】

1.pc前端（访问链接）

2.h5前端（访问链接）

3.管理后台前端（访问链接）

4.后端代码（访问链接）

 

以上，就是我做的这个网站的大体情况，虽然不是特别的高端大气上档次，但是从2015年实习接触web开发开始，也算是成长路上的一种收货了（其实这算是第二个个人网站了，第一个个人网站是毕业一年的时候做的）。而作为一名专业前端人员，在课外去学习和了解一些后端、运维等知识，也会给你平时的工作带来一些方便，能更好的和后端人员沟通、联调、提出自己的意见（以至于不会被匡，后端说这个后端做不了，得前端做...hahahha）。另外，从整体和大局来了解web开发，在学习和成长的路上也可以避免管窥蠡测了。