个人博客项目(PHP+vue+golang)
本人是一名工作经验两年多的phper，写了这么久的代码，总是完成上级交代的任务，闲暇之余逛逛技术社区并没有给自己写个个人主页什么的，总觉得少了点什么，正好以前用过vue，有一点前端基础，公司内部也在用golang，能看懂一点golang的代码，也写过一些简单的golang代码，于是决定用写一个博客项目，博客主页就用laravel框架实现，博客后台采用前后端分离，前段部分用iview的iview-admin进行改造，接口部分用golang实现。
博客首页： https://github.com/Wanchaocha...
在线访问: http://www.littlebug.vip
除了使用laravel框架,还引入了公司使用依旧的对model二次封装的BaseModel和Reponsitory,使用起来非常顺手简单，
只要在控制器里注入了Reponsitory，增删改查将变的非常顺手
$list 里包含了分页对象，连烦人的分页都省了有木有
当然更多方便的功能有待大家自己去看代码
博客后台(前端部分) https://github.com/Wanchaocha...
博客后台部分也是坑最多的地方，毕竟不是专业的前端，一边看教程，一边百度，一边请教同事，真是费劲了心思
首先是跨域的处理(本地环境)
// 这里是根目录下的vue.config.js
const target = env === 'production' ? 'http://api.littlebug.vip/' : 'http://localhost:8083/'
module.exports = {
devServer: {
proxy: {
'/adm': { // 使用"/api"来代替"http://localhost:8081/"
target: target, // 源地址
changeOrigin: true // 改变源
}
}
},
baseUrl: BASE_URL,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
.set('_conf', resolve('config'))
},
// 打包时不生成.map文件
productionSourceMap: false
}
// 只要是以adm开头的api都会被代理,如果是线下会被代理到我golang占用的8083端口的http服务上
// 如果是线上则会去请求线上的接口
这里还有一个坑就是静态资源的加载，就是上面的<font color="red">**BASE_URL**</font>
由于我的服务器是香港的，打包后2.8m的静态资源文件竟然需要20+s才能加载完...真是吐血
后来想到一个办法那就是方在阿里云的oss上，个人网站，根本没什么流量，冲10块钱，不知道何年何月才能用完...
买香港的服务器主要是不用备案，也是决定了做这个个人项目后才买的，本来想着还能搭个VPN什么的
结果后来朋友告诉我阿里云和腾讯的服务器都会被定时扫，看你是否在上面搭了个人VPN，如果有会收回服务器什么的...接下来就是对api请求的封装
// 该加header的时候加上header,启用了mock模式，要去取mock的数据
// 然后就开始定义自己的接口
再接下来就是业务逻辑了，没有什么好讲的
npm run build
// npm run build 之后会打包一个dist文件夹
// 我会把dist中的所有文件都拉到oss上
// 而服务器端只需要让nginx指向这个index.html就可以了
server
{
listen 80;
#listen [::]:80;
server_name admin.littlebug.vip;
index index.html;
root /home/www/web/blog_admin/;
location / {
try_files $uri $uri/ /index.html;
location ~* \.(js|css|gif|jpg|jpeg|png|bmp|swf|ttf|woff)$
{
expires 30d;
break;
}
}
}
// nginx 的配置就是这么简单
发布脚本
cd /root/wwwroot/blog_view
git pull
rm -rf /home/www/web/blog_admin/*
cp -rf /root/wwwroot/blog_view/dist/index.html /home/www/web/blog_admin
chown nginx:nginx -R /home/www/web/blog_admin
// 只需要把临时目录的index.html拉过来就可以了博客后台(接口部分) https://github.com/Wanchaocha...
关于golang接口部分
// 对gin框架简单的进行了封装,如接口的返回,success, fail
// orm是我公司同事对外开源的gosql 
// 还有我公司对外开源的golib应用起来都很方便简单
路由部分
// 除了滑块验证码和登录,其他接口都要验证token,所以除了这两个接口，其他接口都使用了路由分组+中间件
项目一开始,是没有使用 go mod 模式的后来先在本地调试好了go mod,然后又在服务器端调试
本地环境最坑爹的地方是go有两个官方包(什么x，y什么的)需要翻墙才可以down下来，网上很多办法都失败了，后来设置了goproxy,才ok
vim ~/.zshrc
goproxy () {
export GOPROXY=https://goproxy.io
echo "GOPROXY ON"
}
ungoproxy () {
unset GOPROXY
echo "GOPROXY OFF"
}
source ~/.zshrc
// 隐藏福利,https://goproxy.io的代理不是很稳定,我在香港的服务器上也搭了一个，速度还是很不错的
// 把上面的地址换成 47.75.200.48:8888 即可
nginx代理golang服务
// 当然你也可以直接用golang启动，这样也没有问题，不过本人更喜欢用ngixn去配置，还可以看到详细的日志
server {
listen 80;
server_name api.littlebug.vip;
charset utf-8;
#如果是css,js|fonts|png|svg|html|txt 资源文件 nginx 直接处理，不提交到后台让go处理。
# nginx 会在root 对应的目录下 去找这些资源文件
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://localhost:8083;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,multipart/form-data, application/json,Access-token';
return 204;
}
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,multipart/form-data, application/json,Access-token';
}
}
末尾给大家推荐一下腾讯免费的滑块验证码
http://admin.littlebug.vip 在我的项目里体验
到这里整个项目也就完成的差不多了,大家觉得有用的话,麻烦动动小手点个star,有什么地方写的比较low,可以提一下,我会积极改进的
关于界面部分...本人审美有限...不过还是会尽力去改进
有疑问加站长微信联系（非本文作者）
