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

2023年7月15日 284次阅读 来源: ShutLove

一、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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞