Vue博客实战---前后端环境搭建

最近心血来潮在开发个人博客网站，刚好可以趁这个机会出一个系列文章讲讲前端界面的设计，后端业务逻辑的实现以及前后端的交互。具体的架构我是采用Vue.js + Node.js + mysql。前端界面设计使用了element-ui和mavon-editor，后端依旧使用了express框架。首页效果和文章发表界面效果如图所示：

接下来我们开始前后端环境的搭建。首先，Node.js与mysql的安装我就直接跳过了，下载下来安装next到底就可以安装成功。我们首先在全局安装vue-cli脚手架，命令为：

npm install vue-cli -g

接着使用vue-cli搭建一个vue2.0项目，命令：

vue init webpack vue_demo

集成的功能我暂时只选择了vue-router。eslint和unit tests我暂时都没有选择安装。然后就可以启动vue项目了，命令为：

npm run dev

到这里我们前端vue环境暂时告一段落。接下来我们搭建express项目。首先全局安装express生成器，命令为：

npm install express-generator -g

然后使用express-generator快速搭建一个express项目，命令为：

express article_demo

然后按照提示进入项目安装依赖，依赖安装成功就可以启动项目。

express到这里也搭建成功了，但是我们需要对express进行适当的配置：连接数据库以及发起请求的公共方法。首先在项目根目录创建config.js文件用于存放数据库配置信息以及公共参数。

然后在项目根目录创建db文件夹，在db文件夹下创建mysql.js用于mysql数据库连接的初始化和增删改查方法的封装：

在项目根目录下创建util文件夹，存放公共方法。在util下创建postHelper.js文件，用户封装request请求。我们调用第三方API比如微信精选文章时需要发起请求：

然后在util下创建common.js文件用于存放全局公共方法，比如注册密码加密，接收前端传参等方法：

在util下创建bootloader.js用于封装全局log方法以及接口返回参数正确和错误返回格式封装：

打开根目录下的package.json文件，添加apidoc的配置。apidoc用于自动根据接口注释生成接口文档：

最后打开app.js文件，设置允许跨域请求。目前本地测试我设置允许所有域名都可以跨域访问：

到这里我们对于后端项目基本搭建也完成了。接下来我们将开始博客网站的正式搭建。下一篇将使用vue结合element-ui实现首页左右两侧导航栏进行实现。下一篇再见！