学习vue.js,axios以及跨域

没做过web开发的,还是用一天时间学习一下vue.js,以便以后配合golang写些简单的web程序。

学习vue.js


vue.js的入门就不写笔记了实在是懒得写,网上一堆文章直接搜索出来看看就好,同时可以配合element-ui做些测试。
本来看见web前端开发就挺烦的,一大堆乱七八糟的东西,传说中简单的vue也动不动就一堆什么全家桶,动手是最好的学习方法,稍微学习感觉vue确实挺简单方便,当然真正使用时应该还是挺多坑。

参考文章:
搭建vscode+vue环境
这可能是vue-cli最全的解析了……
Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
基于vue-cli快速构建
以及:
Vue官网文档
Vue CLI 官网文档
Element UI官网文档
源码:
一个后台管理demo
类似饿了么官方客户端
楼上客户端的后台管理器
Vue2 后台管理系统解决方案
Vue Element Admi 这个star最多

附神图一张(点击后查看原图):


vue.js

mpvue和微信原生小程序开发

测试了一下mpvue开发小程序,发觉对于vue新手和小程序新手还不如直接使用小程序原生开发来的好,一个是还得去熟悉小程序开发文档,遇到坑更不容易解决,一个是mpvue下面编译到真机测试速度远没有原生的快,一个是我想以后原生的开发会越来越强大怕mpvue跟不上。

安装和使用axios


$ cnpm install axios
main.js文件:

import axios from 'axios'
Vue.prototype.$axios = axios

这样就可以使用this.$axios来调用axios,使用例子参考下面跨域。

跨域


1. 本地服务器开发环境,添加proxyTable代理:

修改config/index.js文件:

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { //修改这里
      '/bd': {
        target: 'https://www.baidu.com',
        secure: true, //https必须添加这个设置
        changeOrigin: true,
        pathRewrite: {
          '^/bd': ''
        }
      }

    },

做了以上修改以后需要重启服务器:npm run dev

调用
调用时可以直接使用'/bd',会被自动替换为上面定义的target地址,调用例子:

App.vue文件:

methods: {
    getBd (event) {
      this.$axios.get('/bd')
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }

2. 生产环境

因为在开发环境我们一般直接使用npm run dev启动内置的服务器,而以上修改proxyTable的方法应该就是修改这个本地服务器的配置让其访问该代理地址时自动加上跨域功能。

而生产环境则不然,服务器一般是另外的比如使用nginx,此时修改nginx的跨域配置就可以了。或者golang gin写的服务器,那么就在代码中加上跨域支持。或者要访问第三方网站,那么直接使用后端编程语言比如go去跨域访问,其实说白了跨域跟客户端没什么关系都是服务器的事。

生产环境还没测试,等以后验证再补充修改。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,139评论 1 4
  • 今天算是正式毕业第一天。 六月最繁忙的21,21两天,开会,种树,领班级学士服,收教师资格证的材料,优毕拍照,交就...
    ironthrone阅读 1,566评论 0 0
  • 今天给大家推荐日本hap Inc.公司(据说公司只有老板一人,估计是深宅)出的几款脑洞系列游戏,骨骼清奇,画风异常...
    有朵阅读 7,237评论 2 4
  • 越长大越发现,生活是自己的,与他人无关,与客观条件无关。到最后,你失去的是时间,你经历的是时间的考验,你得到的是遇...
    Cherry小丸子咯阅读 1,352评论 0 0
  • 你如果懂,我希望与你一起寻找《跃迁》的传送门,成功跃迁; 你如果不懂,我希望丘比特射中你扫文章末尾邀请码,和我们一...
    Luella_Lin阅读 6,630评论 6 24