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

Shalalala · · 79 次点击 · · 开始浏览    

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


本人是一名工作经验两年多的phper,写了这么久的代码,总是完成上级交代的任务,闲暇之余逛逛技术社区并没有给自己写个个人主页什么的,总觉得少了点什么,正好以前用过vue,有一点前端基础,公司内部也在用golang,能看懂一点golang的代码,也写过一些简单的golang代码,于是决定用写一个博客项目,博客主页就用laravel框架实现,博客后台采用前后端分离,前段部分用iview的iview-admin进行改造,接口部分用golang实现。

博客首页: https://github.com/Wanchaocha...

在线访问: http://www.littlebug.vip

clipboard.png

除了使用laravel框架,还引入了公司使用依旧的对model二次封装的BaseModel和Reponsitory,使用起来非常顺手简单,

只要在控制器里注入了Reponsitory,增删改查将变的非常顺手

clipboard.png

$list 里包含了分页对象,连烦人的分页都省了有木有
当然更多方便的功能有待大家自己去看代码

clipboard.png


博客后台(前端部分) https://github.com/Wanchaocha...

博客后台部分也是坑最多的地方,毕竟不是专业的前端,一边看教程,一边百度,一边请教同事,真是费劲了心思

首先是跨域的处理(本地环境)

clipboard.png

// 这里是根目录下的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请求的封装

clipboard.png

// 该加header的时候加上header,启用了mock模式,要去取mock的数据
// 然后就开始定义自己的接口

clipboard.png

再接下来就是业务逻辑了,没有什么好讲的

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

clipboard.png

// orm是我公司同事对外开源的gosql 

gosql

clipboard.png

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

golib

应用起来都很方便简单

路由部分

// 除了滑块验证码和登录,其他接口都要验证token,所以除了这两个接口,其他接口都使用了路由分组+中间件

clipboard.png

项目一开始,是没有使用 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,可以提一下,我会积极改进的

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

本文来自:Segmentfault

感谢作者:Shalalala

查看原文:个人博客项目实践(PHP+vue+golang)

79 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传