beego+mysql+vue.js搭建个人博客系统并部署到阿里云
本博客github地址,欢迎大家star~前言最近在选择一门后端语言学习,之前线上付费学过几个月时间的python,但是觉得python太轻了,当爬虫或者自动化运维还不错,用它做web开发不太合适。java又感觉太重,各种开发框架层出不穷,而且java已经太成熟,学它没有任何优势。选择go语言,是因为个人觉得,以太坊和超级账本底层都是用的go语言写的,go语言并发处理能力很强,未来随着数据...
本博客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
- 创建数据库
create database my_blog;
- 使用数据库
use my_blog;
- 导入数据库文件my_blog.sql
source mac本地数据库存放目录/my_blog.sql;
- 查询数据库中所有表以验证:
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
- 在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
更多推荐
所有评论(0)