beego+mysql+vue.js搭建个人博客系统并部署到阿里云

本博客github地址，欢迎大家star~

前言

最近在选择一门后端语言学习，之前线上付费学过几个月时间的python，但是觉得python太轻了，当爬虫或者自动化运维还不错，用它做web开发不太合适。java又感觉太重，各种开发框架层出不穷，而且java已经太成熟，学它没有任何优势。选择go语言，是因为个人觉得，以太坊和超级账本底层都是用的go语言写的，go语言并发处理能力很强，未来随着数据量呈几何式的增长，go语言将会越来越吃香，而且，学习go语言，跟学习区块链技术是相辅相成的。

博客效果图

由于我已经将项目部署到阿里云上了，所以，大家可以用http://luoxiaohui.cn:8000进行访问。我的项目前后端代码，以及数据库文件，都放到了我的github上面，欢迎大家clone和star(PS:第一次访问有点慢，js没压缩，没时间去弄了，大家见谅了～)

mysql

假设你电脑已经安装了mysql，只需要将数据库文件导入到mysql中即可。
导入步骤：
1. 进入数据库

mysql -u root -p

1. 创建数据库

create database my_blog;

1. 使用数据库

use my_blog;

1. 导入数据库文件my_blog.sql

source mac本地数据库存放目录/my_blog.sql;

1. 查询数据库中所有表以验证：

SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'my_blog' 

不出意外，应该就会看到有user和article两张表存在。

beego

beego环境搭建

关于go语言安装和环境配置，请参照我之前的文章。而beego，是国人开发的一个go语言的MVC模型的框架，这是它们的官网，关于如何搭建beego框架，看beego官网的文档，也很清晰明了。
beego环境配置好后，请将我github上面的代码clone到$GOPATH/src/目录下，如图所示：

其中有blog_admin和blog_user两个项目，blog_admin是用于管理博客的，blog_user是面向普通用户的。(虽然blog_admin也能用，能添加项目，但由于权限配置还没完全做好，如果想跑通blog_admin，请留言给我，本博客目前只讲blog_user)。关于开发工具，go语言官方推荐使用LiteIde，但是当我将vue项目导入进去后，会很卡，所以我改用Visual Studio Code。front_end为vue.js代码，其他为beego框架代码。
在控制台中，cd到blog_user目录下，执行命令：

bee run

如果还有什么需要安装的，比如beego环境中的mysql插件，log应该会提示你 如何安装，直到最后执行bee run后提示如下，才表示beego环境启动成功：

luoxiaohui:blog_user luoxiaohui$ bee run
______
| ___ \
| |_/ /  ___   ___
| ___ \ / _ \ / _ \
| |_/ /|  __/|  __/
\____/  \___| \___| v1.9.1
2018/04/13 15:20:52 INFO     ▶ 0001 Using 'blog_user' as 'appname'
2018/04/13 15:20:52 INFO     ▶ 0002 Initializing watcher...
2018/04/13 15:20:54 SUCCESS  ▶ 0003 Built Successfully!
2018/04/13 15:20:54 INFO     ▶ 0004 Restarting 'blog_user'...
2018/04/13 15:20:54 SUCCESS  ▶ 0005 './blog_user' is running...
2018/04/13 15:20:54.432 [I] [asm_amd64.s:2361] http server Running on http://:4000

vue.js

这里假设电脑已经有node环境，在控制台下cd到blog_user/front_end目录下，安装标准node插件：

npm install

接着安装网络请求axios插件

npm install --save axios

最后，执行开发环境部署命令:

npm run dev

不出意外，在控制台上看到的脚本是启动成功，并且没有报错的～

测试

在本地浏览器中输入:http://localhost:8000，就可以看到效果啦。

遇到的问题以及解决方案

post请求接收不到数据

解决方案：
1. 需要在app.conf中设置属性

copyrequestbody = true

1. 在routers/router.go文件中的init()方法中设置以下方法：

beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
        AllowOrigins:     []string{"http://"+beego.AppConfig.String("front_end_domain")+":"+beego.AppConfig.String("front_end_port")},
        AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
        AllowHeaders:     []string{"Origin", "Authorization", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
        ExposeHeaders:    []string{"Content-Length", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
        AllowCredentials: true,
    }))

vue中的#问题

解决方案：需要在front_end/src/main.js中的VueRouter下设置:

mode: 'history'

阿里云上Vue部署问题

我将端口4000和端口8000已经设置进了安全组，在阿里云的centos7上./front_end目录下执行命令npm run dev就报错～ 一定要记住的就是，在front_end/config/index.js中的host，一定要设置成0.0.0.0，而不是阿里云上的外网IP。

其他

其实go语言和vue.js都是我这半个月才开始接触的，涉及的技术有：前端，后端，运维。前端代码在阿里云上本来想用nginx部署的，但是vue打包后，js很大的问题还是没解决，时间问题暂时没弄了。在做这个项目的过程中，遇到了很多了问题，没法一一列举，大家遇到问题的可以留言，我看到了会第一时间回复。

参考的文章：
https://blog.csdn.net/suresand/article/details/79685464
https://blog.csdn.net/u013295518/article/details/78766086
https://www.cnblogs.com/fengbohello/p/4665883.html
https://router.vuejs.org/zh-cn/essentials/getting-started.html