vue 本地/PC端访问微信云数据库

news2024/11/14 13:36:24

1. 解决跨域访问问题

新建文件 vue.config.js

// 后端服务器地址
let url = "http://localhost:8888";
module.exports = {
  publicPath: "./", // 【必要】静态文件使用相对路径
  outputDir: "./dist", //打包后的文件夹名字及路径
  devServer: {
    // 开发环境跨域情况的代理配置
    proxy: {
      // 【必要】访问自己搭建的后端服务器
      "/api": {
        target: url,
        changOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
          "^/api": "/",
        },
      },
      // 【范例】访问百度地图的API
      // vue文件中使用方法  this.$http.get("/baiduMapAPI/place/v2/search"
      // 最终实际访问的接口为  http://api.map.baidu.com/place/v2/search
      // 遇到以/baiduMapAPI开头的接口便使用此代理
      "/wxAPI": {
        // 实际访问的服务器地址
        target: "https://api.weixin.qq.com",
        //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样客户端和服务端进行数据的交互就不会有跨域问题
        changOrigin: true,
        ws: true, // 是否启用websockets
        secure: false, // 使用的是http协议则设置为false,https协议则设置为true
        // 将接口中的/baiduMapAPI去掉(必要)
        pathRewrite: {
          "^/wxAPI": "",
        },
      },
    },
  },
};

若部署上线,需配置nginx反向代理,可参考下方链接
https://blog.csdn.net/weixin_41192489/article/details/118568253

2. 获取 access_token

    // 获取 access_token
    async get_access_token() {
      let res = await this.$http.get(
        "/wxAPI/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的app密钥"
      );
      let access_token = res.data.access_token;
      if (access_token) {
        sessionStorage.setItem("access_token", access_token);
        return access_token;
      } else {
        return false;
      }
    },

此处要将接口中的参数,更换为你的appid和密钥,需登录你的微信小程序后台,参照下图获取:在这里插入图片描述

3. 访问微信云数据库

    async login() {
      let access_token = sessionStorage.getItem("access_token");
      if (!access_token) {
        access_token = await this.get_access_token();
      }

      this.$http({
        method: "post",
        url: `/wxAPI/tcb/databasequery?access_token=${access_token}`,
        data: {
          env: "dos-6g02iqcz92dc63ff",
          query: 'db.collection("user").where({No:1}).limit(10).get()',
        },
      }).then((res) => {
        let errcode = res.data.errcode;
        // 7200s后access_token会过期,需重新执行
        if (errcode === 42001) {
          this.login();
        }

        if (errcode === 0) {
          // 获取到微信云数据库中的数据
          console.log(res.data.data);
        }
      });
  }
  • 需使用 post 方法
  • headers 中不能有 "Content-Type":"application/x-www-form-urlencoded";
    需注释掉 src\axios.js 中的
// axios.defaults.headers.post["Content-Type"] =
//   "application/x-www-form-urlencoded";
  • 参数为
          env: "你的微信云环境id",
          query: 'db.collection("user").where({No:1}).limit(10).get()',

微信云环境 id 在微信开发者工具中的云开发控制台中参照下图一键复制
在这里插入图片描述
query 的内容为微信云数据库的查询语句(语法参考云数据库的开发文档)

  • access_token 默认 7200s 后会过期,过期后需重新获取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/548096.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

组合数学第二讲

可以把取出来的数从小到大排序,第一个数不变,第二个数1,以此类推... 总共的情况为,数字取完后可再依次减回去,保证数在100以内 k-element multisets 引出下面的二项式系数 binomial coefficients(二项式系…

线段树C++实现

一、本题线段树数组数据和结构 data[]{1,2,-3,5,6,-2,7,1,12,30,-10},11个元素。 二、各个函数和结构 (一)线段树结构 创建线段树的结构, l、r为左边界和右边界,maxV和minV为最大值和最小值,sum为和&#…

English Learning - L3 作业打卡 Lesson2 Day12 2023.5.16 周二

English Learning - L3 作业打卡 Lesson2 Day12 2023.5.16 周二 引言🍉句1: Dollars are called greenbacks because that is the color of the back side of the paper money.成分划分弱读连读爆破语调 🍉句2: The color black is used often in expres…

抽象 + 接口 + 内部类

抽象类和抽象方法 抽象类不能实例化抽象类不一定有抽象方法,有抽象方法的类一定是抽象方法可以有构造方法抽象类的子类 要么重写抽象类中的所有抽象方法要么是抽象类 案例 Animal类Dog类 Sheep类Test类 接口 接口抽象类针对事物,接口针对行为案…

使用Google浏览器开启New bing

简介 搭建 通过谷歌商店下载两个浏览器插件,一个用于修改请求头agent的插件和一个用于伪造来源的插件x-forwarded-for插件,当然类似的插件很多很多,我这里使用的两个插件是 User-Agent Switcher Header Editor 使用 User-Agent Switcher 插件…

云HIS住院业务模块常见问题及解决方案

一:住院业务 1.患者办理住院时分配了错误的病区怎么办? 操作员误操作将患者分配了错误的病区分为以下两种情况: (1)、患者刚刚入院,未分配床位、主治医师与管床护士:这种情况比较好处理&#xf…

文件转pdf

背景 项目中很多预览工具,文件转pdf预览,采用libreoffice6.1插件实现 环境说明 系统CentOS:CentOS7 libreoffice:6.1 下载 中文官网 https://zh-cn.libreoffice.org/download/libreoffice/ 下载其他老版本 Index of /lib…

不敢妄谈K12教育

做为大学生的父亲:不敢妄谈孩子教育 大约10年前,写了一本教育书稿 找到一个出版社的编辑,被训了一通 打消了出书以及K12教育的念想 趣讲大白话:娘生九子,各有不同 【趣讲信息科技171期】 ****************************…

Vs+Qt+C++电梯调度控制系统

程序示例精选 VsQtC电梯调度控制系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<VsQtC电梯调度控制系统>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。…

PT100温度采集

1、信号采集的基本原理 PT100是将温度信号转换为电阻输出&#xff0c;其电阻值变化范围为0~200Ω。AD转换器只能对电压进行转换&#xff0c;无法采集直接采集温度&#xff0c;因此&#xff0c;需要一个1mA恒电流源给PT100供电&#xff0c;将电阻变化转换为电压变化。使用恒流源…

linux 安装 maven 3.8 版本

文章目录 1&#xff1a;maven 仓库官网 2、下载安装包 3、使用&#xff1a;Xftp 上传到你想放的目录 4、解压文件 ​编辑 5、配置环境变量 ​编辑 6、刷新 /etc/profile 文件 7、查看maven 版本 1&#xff1a;maven 仓库官网 Maven – Download Apache Mavenhttps://mave…

【C++】模板的一点简单介绍

模板 前言泛型编程函数模板概念格式函数模板的原理函数模板的实例化 类模板类模板的定义格式类模板的实例化 前言 这篇博客讲的是模板的一些基本知识&#xff0c;并没有那么深入&#xff0c;但是如果你是为了过期末考试而搜的这篇博客&#xff0c;我觉得下面讲的是够了的。 之…

简单分享线程池的设计

温故而知新&#xff0c;可以为师矣。 线程池是什么 线程池&#xff08;Thread Pool&#xff09;是一种基于池化思想管理线程的工具&#xff0c;经常出现在多线程服务器中&#xff0c;如MySQL。 池化思想&#xff0c;就是为了提高对资源的利用率&#xff0c;减少对资源的管理&a…

MySQL---空间索引、验证索引、索引特点、索引原理

1. 空间索引 MySQL在5.7之后的版本支持了空间索引&#xff0c;而且支持OpenGIS几何数据模型 空间索引是对空间数据类型的字段建立的索引&#xff0c;MYSQL中的空间数据类型有4种&#xff0c;分别是&#xff1a; 类型 含义 说明 Geometry 空间数据 任何一种空间类型 Poi…

HCIA-VRP系统

目录 一&#xff0c;什么是VRP VRP提供的功能&#xff1a; VRP文件系统&#xff1a; VRP存储设备&#xff1a; 设备初始化过程&#xff1a; 设备管理方式&#xff1a; 1&#xff0c;Web界面&#xff1a;可视化操作&#xff0c;通过http和https登录&#xff08;192.168.1.…

信息安全工程复习

目录 第二章 从口令系统说起 2.1 身份鉴别常见手段及例子 2.2 多因子认证 2.3 计时攻击 2.4 口令机制 2.5 假托和钓鱼 第三章 安全协议 3.1 认证协议 3.2 安全协议攻击 3.3 密钥分配协议 3.4 课后作业 第四章 访问控制 4.1 概念 4.2 控制访问三要素 4.3 控制访问…

Windows服务

参考地址&#xff1a;https://www.cnblogs.com/2828sea/p/13445738.html 1. 新建服务 2. 在 service 下 添加安装程序 会自动添加 修改这两个文件属性&#xff1a; serviceInstaller1&#xff1a; DelayedAutoStart:是否自动启动Descrition:介绍服务&#xff08;自定义&…

chatgpt赋能Python-python3_图片处理

Python3图片处理&#xff1a;简单高效的图像处理工具 Python3作为一种高级编程语言&#xff0c;在科学、金融、工程等领域中广受欢迎。它具有简洁的语法、快速的开发速度、多样化的应用场景等特点。其中&#xff0c;Python3在图像处理方面也非常出色&#xff0c;本文将介绍Pyt…

pg事务:事务的处理

事务的处理 事务块 从事务形态划分可分为隐式事务和显示事务。隐式事务是一个独立的SQL语句&#xff0c;执行完成后默认提交。显示事务需要显示声明一个事务&#xff0c;多个sql语句组合到一起称为一个事务块。 事务块通过begin&#xff0c;begin transaction&#xff0c;st…

【学习日记2023.5.20】 之 菜品模块完善

文章目录 3. 功能模块完善之菜品模块3.1 公共字段自动填充3.1.1 问题分析3.1.2 实现思路3.1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3 步骤三 3.1.4 功能测试3.1.5 提交代码 3.2 新增菜品3.2.1 需求分析与设计3.2.2 代码开发3.2.2.1 文件上传实现3.2.2.2 新增菜品实现 3.2.3 功…