个人博客项目实践(PHP+vue+golang)

个人博客项目(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 

gosql

// 还有我公司对外开源的golib

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,可以提一下,我会积极改进的

关于界面部分...本人审美有限...不过还是会尽力去改进