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

2018-11-08 admin

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


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

clipboard.png

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

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

clipboard.png

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

clipboard.png


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

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

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拉过来就可以了


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

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

原文链接:https://segmentfault.com/a/1190000016951628

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44900.html

文章标题:个人博客项目实践(PHP+vue+golang)

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
PHP 和 Node.js 的角摔
在最近 SitePoint 的 PHP vs Node.js Smackdown 一文中,Craig Buckler 对两种语言就如何应对一系列的10个挑战进行了比较来决定哪一个总体上更佳。 Craig 在书中讲到,这些比较总是有些矛盾。作...
2015-12-25
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
回到顶部