首页
学习
活动
专区
工具
TVP
发布

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

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

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

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

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

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

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

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

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实现首页左右两侧导航栏进行实现。下一篇再见!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190727A0S7PO00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券