前后分离Vue+Gin(go)总结

一、Vue是啥,解决了什么问题

  1. Vue是一个前端MVVM框架,官方教程:https://cn.vuejs.org/v2/guide/,自己学习时觉得不错的一个教程:https://www.bilibili.com/video/av12739476/
  2. 解决的问题:这里就和Jquery作比较吧(因为自己没用过其他前端框架。。)。个人觉得Jquery主要解决了js操作原生dom效率低下的问题,但是Jquery也局限在了dom,它还是围绕着dom来做各种处理,有时候找或者修改某个dom真心繁琐。那么有没有可能我只需关心数据,用数据来驱动dom显示状态的变换呢,ok,这就是vue给我的感觉。

二、怎样使用Vue

  1. 最直接的方法是在html文件的script标签中引入vue.js, 然后就可以写js来使用vue了。
  2. 通过npm安装vue、vue-cli、vue-router、axios、webpack,利用vue-cli提供的脚手架创建项目。
  3. npm是啥?npm可以理解为js的包管理器,类比php的composer、go的glide、python的pip等,良心参考:https://www.jianshu.com/p/92c0293bba66
  4. vue-cli是啥?vue-cli是vue提供的一个创建工程的脚手架,通过vue init一个简单的命令,就省去了自己编写npm的package.json和webpack的配置文件来创建工程的繁琐步骤。
  5. vue-router是啥?之前的web开发,页面怎样跳转通过服务端的路由来配置,就是每个url都要问一下服务端该怎么显示页面。通过vue-router,该怎么显示页面可以在前端直接配置路由。这样前后端之间真正关心的就只有各种数据了。
  6. axios是啥?axios是vue官方推荐的前后端做数据交互的工具包,类比jquery的ajax,良心参考: https://www.jianshu.com/p/df464b26ae58
  7. webpack是啥?webpack可以将通过各种loader包将前端各种资源(js、css、图片文件等)都当做模块对待,这样就可以以模块的方式进行开发,而不是这里写一个link标签、那里写一个script标签,最后webpack可以把各种模块打包在一起编译成一个js文件提供给外部。良心参考:https://www.jianshu.com/p/42e11515c10f

三、碰到的问题

  1. 由于前后分离,前端后端访问端口不一样,请求存在跨域问题。跨域请求时,按照http协议标准,对于一些非简单请求,前端要先发一次options请求验证,验证通过再发真正的请求。如果把所有后端接口都添加一个options方法将是个灾难。
    解决方法:gin通过跨域中间件cors https://gocn.io/article/529
  2. 希望axios所有post请求数据格式都是application/x-www-form-urlencoded。
    解决方法:通过npm安装qs—>npm i qs –save, 在main.js中引入axios和qs
import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 5000;                        //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';           //配置请求头
axios.defaults.baseURL = '你的接口地址';   //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
    //在发送请求之前做某件事
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
     _.toast("错误的传参", 'fail');
    return Promise.reject(error);
});
Vue.prototype.$http = axios //叫$xxx随你喜欢
    原文作者:ShutLove
    原文地址: https://www.jianshu.com/p/18859364e030
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞