beego+mysql+vue.js搭建个人博客系统并部署到阿里云 - Go语言中文社区

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' 

不出意外,应该就会看到有userarticle两张表存在。

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

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/a394268045/article/details/79929042
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-09-01 14:07:31
  • 阅读 ( 2673 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢