【WEB】vue搭建自己的博客网站并部署到服务器

技术框架和基本库：

1.前端：vue-cli脚手架，vue-router管理路由，axios前后端交互。
2.服务器端：使用node语言开发，express作为开发框架，提供api借口给前端ajax调用。路由和render交给vue解决。同时以RESTful api 来通信。后台主要负责与数据库建立连接并处理增删该查的操作。
3.数据库：mongodb
4.引用的js库：用 Marked.js 和 highlight.js 。从数据库拿到数据进行渲染。默认的样式很丑，所以我自己写了一个。
5.Webpack作为静态资源的打包和发布工具。

开发流程

1.数据库
由于在数据库中需要存储文章的数据，因此新建article的schema，model，controller。controller中包括了与arcticle相关的数据库操作（使用axios），这样可以将与arcticle相关的操作集中在一个文件里方便管理。
2.写后端的提供给axios的接口
同样针对不同的内容分开写到不通文件中。
这里要注意的是，由于在调试的时候，vue本身就是一个小型的服务器了，所以需要配置代理。配置代理的方式也很简单，只需要在config文件中写入

  proxyTable: {
      '/api': {
        target: 'http://localhost:9999
        changeOrigin: true
      }

3.写界面文件
调用步骤1中的函数，从数据库中获取数据，并渲染到界面上。
4.利用vue-router配置前端路由，学习子路由的使用，非常使用。
5.部署到服务器上

我踏过的坑

说到踏过的坑，真是刚从一个坑里出来就掉进另一个坑，填坑填的怀疑人生，可是在这个过程中，我将之前没理解透的概念，通过实践，有了非常深刻的理解，毕竟曾经那么痛苦的爬坑。现在我把想到的都总结起来，希望你们少走写弯路。

1.对于node后台到底怎么用
我一直以为配置代理后，我的axios那么聪明，肯定就会自己找到对应的接口然后顺利的执行呀。结果一直提示代理配置错误。我检查了好几遍，没错啊…在纠结了一个小时后，我发现是我的node文件没有跑起来！服务根本没开怎么可能找的到啊。
2.对于界面渲染总是不成功
我的原计划呢，是有一张canvas画布，然后我要做一些好看的动画。可是写在created里的初始化方法一直报错，这怎么就不行呢！我就去官网翻了翻看看有没有灵感，果然被我翻到了，因为是声明周期的原因，canvas貌似需要界面全部加载完再进行绘制，所以写在mounted里面就顺利解决啦。
3.对于强迫症的我总想把代码好好的封装起来惹得麻烦
为了追求更工整的代码，我遇到了使用promise异步调用的问题，也遇到了生命周期写错的问题，如果写在一起，完全不需要操心这些。可是正是因为我这一根筋，我觉得我学到了很多知识，也明白了细节的重要。所以，过来人的经验给你：不要偷懒哦
4.最最坑的必然是部署到服务器！！
我计划的是使用ubuntu服务器，代码通过私有github仓库托管，使用nginx负载均衡，利用pm2进行服务管理。可是由于之前没有使用linux系统的经验，nginx也没接触过，pm2也不了解，有种瞎子走路的感觉，靠一个摸索真的很艰辛，还好我挺过来了！花了一周的时间，终于把硬骨头啃下来了，步骤我会在稍后写出来。

注：服务器部署流程
1.首先要申请一个服务器和域名
2.将你的代码放到私有git平台上，我使用的是码云
3.利用pm2动态管理服务。
4,使用nginx的负载均衡配置，将所有的端口转到80端口。
5.打开gzip，这样可以加速界面开启速度
….