Vue获取微博授权URL代码实例

1.在Vue页面加载时动态发送请求获取微博授 权url

1.1 在 components\common\lab_header.vue 中写oauth动态获取微 博授权URL

// 获取微博登录地址
oauth() {
　　// 从后端获取 微博登录地址
　　oauth_post().then((resp) => {
　　　　console.log(resp)
　　　　//{'code': '0', 'msg': '成功', 'data': {'url': url}}
　　　　let url = resp.data.url;
　　　　this.weibo_url = url;
　　})
},

1.2 在vue的mounted函数中调用获取微博授权url函数

mounted() {
　　this.oauth()
},

1.3 点击"登录"弹出的form表单中加入url

<form
　　action="/login"
　　method="post"
>
　　<div class="form-group widget-signin">
　　　　<a :href="weibo_url" rel="external nofollow" ><i class="fa fa-weibo"></i></a>
　　</div>
</form>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue通过URL传参如何控制全局console.log的开关详解

    前言 最近在学习vue,发现了一个问题网上相关的信息很少,所以想着总结下,本文主要给大家介绍了关于Vue通过URL传参来控制全局console.log开关的相关内容,分享出来供大家参考学习,下面话不多说了,来随着小编一起看看详细的介绍吧. 实现方法如下: 如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug, 用正则匹配一下参数: const getQueryStr = (name) => { var reg = ne

  • vue不通过路由直接获取url中参数的方法示例

    前言 众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的. 当然,这个问题也有解决方法,就是把

  • Vue Router去掉url中默认的锚点#

    Vue Router去掉url中默认的锚点#

    hash模式url vue-router默认hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 如果不想要这种默认的hash模式,可以用路由的history模式,这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面. index.js Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path:"/xxx&quo

  • vue.js根据代码运行环境选择baseurl的方法

    配置通用的API前缀可以更好在本地通过接口代理转发获取数据.或者部署时在Nginx中做反向代理,但是项目中一旦涉及大量的需要文件上传的部分(文件上传不走Ajax的方法),我们需要考虑更好管理接口的baseURL,项目中 Ajax 请求用 axios ,原始代码如下 修改前 // 创建axios实例.配置baseURL.超时时间 const service = axios.create({ baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的bas

  • vue添加axios,并且指定baseurl的方法

    本文主要介绍如何在vue项目中引入axios,并且在使用的时候指定baseurl. 好,下面上货. 1.首先需要的是一个vue项目,这个可以参考以前的文章. 2.然后是npm install axios --save-dev 3.在main.js中添加如下内容: import axios from 'axios' Vue.prototype.$ajax=axios; 4.这个时候应该可以在项目中使用了,使用的方法如下: testget: function () { this.$ajax({ me

  • 如何解决.vue文件url引用文件的问题

    解决.vue文件url引用文件的问题 遇到的问题: 在css中引入图片,明明目录结构是对的,还是This dependency was not found: dev好好的,build 之后凉凉,图片加载404 添加图片路径配置 webpack 添加 alias //webpack.base.conf.js alias: { '@': resolve('src'), //加入 'assets': resolve('src/assets') } 路径书写规则 template 可使用@.~ styl

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • VueJS 取得 URL 参数值的方法

    先给大家介绍下VueJS取得URL参数 vuejs取得URL中参数的值 地址:http://localhost:3333/#/index?id=001 结果:001 console.log(this.$route.query.id) PS:下面给大家介绍下vue自定义表单生成器可根据json参数动态生成表单效果 介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再

  • 使用vue-router切换页面时，获取上一页url以及当前页面url的方法

    使用vue-router切换页面时，获取上一页url以及当前页面url的方法

    今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下: 项目使用的是vue-cli,直接贴代码 export default { mixins: [], vuex: { actions: {fetchCertificates}, }, data() { return {} }, route: { data() { this.$roo

  • Vue获取微博授权URL代码实例

    1.在Vue页面加载时动态发送请求获取微博授 权url 1.1 在 components\common\lab_header.vue 中写oauth动态获取微 博授权URL // 获取微博登录地址 oauth() { // 从后端获取 微博登录地址 oauth_post().then((resp) => { console.log(resp) //{'code': '0', 'msg': '成功', 'data': {'url': url}} let url = resp.data.url; t

  • vue 获取视频时长的实例代码

    直接通过element-ui自带的上传组件结合js即可,代码如下: HTML: <el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <button cl

  • PHP获取当前页面URL函数实例

    本文实例讲述了PHP获取当前页面URL函数实例,分享给大家供大家参考.具体实现方法如下: 在PHP中,没有默认的Function来获取目前所在页面的URL,所以今天就向大家介绍一个在PHP获取当前页面完整URL的PHP函数. 函数代码如下,调用时只需要使用 curPageURL() 就行啦: 复制代码 代码如下: /* 获得当前页面URL开始 */ function curPageURL() {     $pageURL = 'http';     if ($_SERVER["HTTPS&quo

  • 基于java web获取网页访问次数代码实例

    基于java web获取网页访问次数代码实例

    这篇文章主要介绍了基于java web获取网页访问次数代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 ServletContext context = request.getServletContext(); /** * 从ServletContext中获取计数器对象 */ Integer count = (Integer) context.getAttribute("counter"); /** * 如果为空,则在Servl

  • Python获取apk文件URL地址实例

    工作中经常需要提取apk文件的特定URL地址,如是想到用Python脚本进行自动处理.需要用到的Python基础知识如下:os.walk()函数声明:os.walk(top,topdown=True,onerror=None)(1)参数top表示需要遍历的顶级目录的路径.(2)参数topdown的默认值是"True"表示首先返回顶级目录下的文件,然后再遍历子目录中的文件.当topdown的值为"False"时,表示先遍历子目录中的文件,然后再返回顶级目录下的文件.(

  • Vue基于localStorage存储信息代码实例

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上

  • Vue Echarts实现可视化世界地图代码实例

    Vue Echarts实现可视化世界地图代码实例

    Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

  • JavaScript获取图片真实大小代码实例

    网页页面上的图片尺寸似乎都千篇一律.我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调.之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制.但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥. 比如,冷知识:你知道每个视窗都有的 [x] 是怎么来的吗?这篇文章中,很多图片超出了文本宽度的限制,给人一种参差错落的感觉,同时,让大图片以其真实的

  • vue无限轮播插件代码实例

    思路: 要实现无限轮播,需要在轮播图前后各加一张图片,加在前面的是轮播图的最后一张图片(重复的),加在后面的是轮播图的第一张图片(重复的).例: <div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wrapper-content_img&q

随机推荐