当前位置: 首页 > news >正文

20230504----重返学习-vue2项目-跳转拦截-重定向并返回前一页-使用vuex调用接口-全选与全不选-总价计算

day-061-sixty-one-20230504-vue2项目-跳转拦截-重定向并返回前一页-使用vuex调用接口-全选与全不选-总价计算

vue2项目

跳转拦截

设置跳转拦截,比如在用户没token时,不能进入具体详情页,而是进入登录页进行登录。

跳转拦截具体思路

  1. 前端和后端约定好一个返回码,如resultCode为416,那么前端就跳转到登录页。
  2. 前端根据这返回码在axios的响应拦截器axios.interceptors.response.use()钩子函数中进行处理,如跳转到首页或登录面之类的操作。
  3. 前端发起一个需要token的请求。
  4. 后端收到前端的请求,校验token是否存在或合法。
    • 如果存在并合法,正常返回数据。
    • 如果token不存在或不合法,返回resultCode并为416。
  5. 如果后端返回resultCode并为416,就会触发axios的响应拦截器中的钩子函数,重定向到登录页。

跳转拦截实际步骤

  1. 在axios实例对象或axios原型上设置响应拦截器
    • /src/http/http.js

      import axios from "axios";import router from '../router/index.js'// 添加响应拦截器
      axios.interceptors.response.use((response) => {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么// 后端的resultCode为416时,要求重新登录。let { message, resultCode } = response.data;if (+resultCode === 416) {router.push(`/LoginView`)}return response.data;},function (error) {return Promise.reject(error);}
      );
      export default axios;
      

重定向并返回前一页

因重定向跳转登录页并登录成功后,在登录页中跳转返回前一页

重定向并返回具体思路

  1. 在在axios的响应拦截器axios.interceptors.response.use()钩子函数中跳转到登录页时,给路由加一个字段表示要重返前一页,如needback为true。
  2. 在登录页中,设置登录成功后,如果this.$route?.query?.needback存在,就返回到前一页。

重定向并返回实际步骤

  1. 在axios实例对象或axios原型上的响应拦截器进行跳转时,在需要的路由中加上?needback=true

    • /src/http/http.js

      import axios from "axios";
      import router from '../router/index.js'// 添加响应拦截器
      axios.interceptors.response.use((response) => {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么// 后端的resultCode为416时,要求重新登录。let { message, resultCode } = response.data;if (+resultCode === 416) {router.push(`/LoginView?needback=true`)}return response.data;},function (error) {return Promise.reject(error);}
      );
      export default axios;
      
  2. 在登录成功后,跳转的页面中根据this.$route?.query?.needback决定是返回前一页还是首页。

    • /src/views/LoginView.vue

      <script>
      import { Notify } from "vant";export default {components: {Verify,},data() {return {username: "",password: "",flag: true,verifyFlag: false,};},methods: {onSubmit() {this.$api.login(this.username, this.password).then((value) => {let { resultCode, message, data } = value;if (resultCode !== 200) {return;}// 有needback就返回上一页if (this.$route?.query?.needback) {this.$router.back();return;}// 无needback就返回前面this.$router.push("/IndexView");}).catch((error) => {console.log(`error-->`, error);}).finally(() => {console.log("登录操作后执行");});},},
      };
      </script>
      

使用vuex调用接口

使用vuex调用接口,以便使用vuex中的全局数据,制作如购物车这类效果。

使用vuex调用接口具体思路

  1. 定义一个接口。
  2. 在vuex中配置state,及mutations用于同步修改state,actions用于请求数据并调用mautaions方法间接修改state。
  3. 在需要中页面中引入state中的数据及actions方法,根据需要使用state中的数据和调用actions中的方法。

使用vuex调用接口实际步骤

  1. 在axios中添加一个接口,用于vuex中进行操作。

    • /src/http/index.js

      import http from "./http.js";// 获取购物车所有的产品
      function getCartList() {return http.get("/shop-cart");
      }export default {getCartList,
      };
      
  2. 在vuex中配置state,及mutations用于同步修改state,actions用于请求数据并调用mautaions方法间接修改state。

    • /src/store/index.js

      import Vue from "vue";
      import Vuex from "vuex";import api from "../http/index";Vue.use(Vuex);export default new Vuex.Store({state: {list: null,},mutations: {changeList(state, payload) {// 默认添加选中状态payload.map((item) => {item.selected = true;return item;});state.list = payload;},},actions: {async getCartListAsync({ commit }) {try {let res = await api.getCartList();console.log(`res-->`, res);let { data, resultCode } = res;if (+resultCode !== 200) {commit("changeList", []);return;}commit("changeList", data);} catch (err) {console.log(`err-->`, err);}},},
      });
      
  3. 在需要中页面中引入state中的数据及actions方法,根据需要使用state中的数据和调用actions中的方法。

    • /src/views/DetialView.vue

      <template><div class="detial-wrap"><van-goods-action><van-goods-action-iconv-show="list?.length <= 0"icon="cart-o"text="购物车"/><van-goods-action-iconv-show="list?.length > 0"icon="cart-o"text="购物车":badge="list?.length"/></van-goods-action></div>
      </template><script>
      import { mapState, mapActions } from "vuex";
      export default {data() {return {detialData: {},};},computed: { ...mapState(["list"]) },created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      
    • /src/components/FooterPage.vue

      <template><div><van-tabbar v-model="active" active-color="#1baeae" :route="true"><van-tabbar-itemicon="shopping-cart-o"v-show="list?.length <= 0"to="/CartView">购物车</van-tabbar-item><van-tabbar-itemicon="shopping-cart-o"v-show="list?.length > 0":badge="list?.length"to="/CartView">购物车</van-tabbar-item></van-tabbar></div>
      </template><script>
      import { mapState, mapActions } from "vuex";
      export default {data() {return {active: 0,};},computed: {...mapState(["list"]),},methods: {...mapActions(["getCartListAsync"]),},created() {if (this.list === null) {this.getCartListAsync();}},
      };
      </script>
      

全选与全不选

  • 可以用一个变量isAll表示是否全选,用一个数组变量来记录所有已选值对应id。
    • 之后对已选数组进行监听或对于所有会改变的已选数组的事件都执行判断已选数组长度与选项数组总长度是否全等。
      • 若已选选项数组长度与选项数组总长度相等,那么就为true。
      • 若已选选项数组长度与选项数组总长度不相等,值就为false。
    • 全选与全不选中间态用另一个变量来表示。
      • 如果已选数组长度为0 或 已选数组长度与选项数组总长度全等,值为false。
      • 已选数组长度不为0并且已选数组长度与选项数组总长度不全等,值为true。
  • 可以用计算属性来做处理,用对象变量的布尔值属性来表示该对象是否被选中。
    • 在data或computed中定义一个基础对象数组,对象上有一个属性表示是否选中。
    • 在计算属性的get()来做返回的结果值。
    • 在计算属性的set()里来修改源头数组对象的表示是否选中的属性值,进而让get()得到的值发生改变。
    • 这个的前提是数组里对象及它的属性值是响应式的。

全选与全不选-计算属性版具体思路

  1. 在data或computed中定义一个基础对象数组,对象上有一个属性表示是否选中。
  2. 在计算属性的get()来做返回的结果值。
  3. 在计算属性的set()里来修改源头数组对象的表示是否选中的属性值,进而让get()得到的值发生改变。

全选与全不选实际步骤

  1. 在vuex中定义好state并引入到单文件组件中的计算属性。

    • /src/store/index.js

      import Vue from "vue";
      import Vuex from "vuex";import api from "../http/index";Vue.use(Vuex);export default new Vuex.Store({state: {list: null,},mutations: {changeList(state, payload) {// 默认添加选中状态payload.map((item) => {item.selected = true;return item;});state.list = payload;},},actions: {async getCartListAsync({ commit }) {try {let res = await api.getCartList();console.log(`res-->`, res);let { data, resultCode } = res;if (+resultCode !== 200) {commit("changeList", []);return;}commit("changeList", data);} catch (err) {console.log(`err-->`, err);}},},
      });
      
  2. 或者是在单文件组件里的data或computed中定义好要用的基础对象数组。

    • /src/views/CartView.vue

      <script>
      import { mapState, mapActions } from "vuex";
      export default {computed: {...mapState(["list"]),},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      
  3. 在计算属性的get()来做返回的结果值,通过基础对象数组的every()函数。

    • /src/views/CartView.vue

      <script>
      import { mapState, mapActions } from "vuex";
      export default {computed: {...mapState(["list"]),checkedAll: {get() {return this.list?.every((item) => item.selected === true);},},},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      
  4. 在计算属性的set()里来通过基础对象数组map()修改源头数组对象的表示是否选中的属性值,进而让get()得到的值发生改变。

    • /src/views/CartView.vue

      <script>
      import { mapState, mapActions } from "vuex";
      export default {computed: {...mapState(["list"]),checkedAll: {set(value) {this.list?.map((item) => {item.selected = value;return item;});},},},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      
    • /src/views/CartView.vue完整

      <template><div class="cart-wrap"><div class="content"><van-swipe-cell v-for="item in list" :key="item.goodsId"><div class="item"><van-checkboxv-model="item.selected"checked-color="#1BAEAE"></van-checkbox><img :src="item.goodsCoverImg" alt="" /><div><p>{{ item.goodsName }}</p><h3><span>¥{{ item.sellingPrice }}</span><van-stepper v-model="item.goodsCount" /></h3></div></div><template #right><van-button square text="删除" type="danger" class="delete-button" /></template></van-swipe-cell></div><van-submit-bar:price="allPrice"button-text="结算"button-color="#1BAEAE"><van-checkbox v-model="checkedAll">全选</van-checkbox></van-submit-bar></div>
      </template><script>
      import { mapState, mapActions } from "vuex";
      export default {data() {return {};},computed: {...mapState(["list"]),checkedAll: {get() {return this.list?.every((item) => item.selected === true);},set(value) {this.list?.map((item) => {item.selected = value;return item;});},},allPrice() {return this.list?.reduce((res, item) => {return (res + (item.selected ? item.sellingPrice * item.goodsCount * 100 : 0));},0);},},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      

总价计算

总价计算思路

  1. 在data或computed中定义一个基础对象数组,对象上有想要进行计算所需的全部数据。
  2. 在计算属性的get()来做返回的结果值或计算属性的函数式写法中计算出想要的结果。

总价计算步骤

  1. 在vuex中定义好state并引入到单文件组件中的计算属性。

    • /src/store/index.js

      import Vue from "vue";
      import Vuex from "vuex";import api from "../http/index";Vue.use(Vuex);export default new Vuex.Store({state: {list: null,},mutations: {changeList(state, payload) {// 默认添加选中状态payload.map((item) => {item.selected = true;return item;});state.list = payload;},},actions: {async getCartListAsync({ commit }) {try {let res = await api.getCartList();console.log(`res-->`, res);let { data, resultCode } = res;if (+resultCode !== 200) {commit("changeList", []);return;}commit("changeList", data);} catch (err) {console.log(`err-->`, err);}},},
      });
      
  2. 在data或computed中定义一个基础对象数组,对象上有想要进行计算所需的全部数据。

    • /src/views/CartView.vue

      <script>
      import { mapState, mapActions } from "vuex";
      export default {computed: {...mapState(["list"]),},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      
  3. 在计算属性的函数式写法中用reduce()计算出想要的结果。

    • /src/views/CartView.vue

      <script>
      import { mapState, mapActions } from "vuex";
      export default {data() {return {};},computed: {...mapState(["list"]),allPrice() {return this.list?.reduce((res, item) => {return (res + (item.selected ? item.sellingPrice * item.goodsCount * 100 : 0));},0);},},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      
    • /src/views/CartView.vue完整

      <template><div class="cart-wrap"><div class="content"><van-swipe-cell v-for="item in list" :key="item.goodsId"><div class="item"><van-checkboxv-model="item.selected"checked-color="#1BAEAE"></van-checkbox><img :src="item.goodsCoverImg" alt="" /><div><p>{{ item.goodsName }}</p><h3><span>¥{{ item.sellingPrice }}</span><van-stepper v-model="item.goodsCount" /></h3></div></div><template #right><van-button square text="删除" type="danger" class="delete-button" /></template></van-swipe-cell></div><van-submit-bar:price="allPrice"button-text="结算"button-color="#1BAEAE"><van-checkbox v-model="checkedAll">全选</van-checkbox></van-submit-bar></div>
      </template><script>
      import { mapState, mapActions } from "vuex";
      export default {data() {return {};},computed: {...mapState(["list"]),checkedAll: {get() {return this.list?.every((item) => item.selected === true);},set(value) {this.list?.map((item) => {item.selected = value;return item;});},},allPrice() {return this.list?.reduce((res, item) => {return (res + (item.selected ? item.sellingPrice * item.goodsCount * 100 : 0));},0);},},created() {if (this.list === null) {this.getCartListAsync();}},methods: {...mapActions(["getCartListAsync"]),},
      };
      </script>
      

进阶参考

  1. 新峰商城
  2. vant2 – 配合vue2
  3. Blob的三种应用场景及Blob,url,base64之间的转换
  4. 为什么视频网站的视频链接地址是blob?

相关文章:

20230504----重返学习-vue2项目-跳转拦截-重定向并返回前一页-使用vuex调用接口-全选与全不选-总价计算

day-061-sixty-one-20230504-vue2项目-跳转拦截-重定向并返回前一页-使用vuex调用接口-全选与全不选-总价计算 vue2项目 跳转拦截 设置跳转拦截&#xff0c;比如在用户没token时&#xff0c;不能进入具体详情页&#xff0c;而是进入登录页进行登录。 跳转拦截具体思路 前端…...

(异或相消)猫猫数字异或和

E - Red Scarf (atcoder.jp) 刚入坑写的一道题被我拉出来对比分析了 我的思路&#xff1a; 垃圾运气选手凭借直觉乱搞猜出来的&#xff0c;没有思路。 题解思路&#xff1a; 由问题陈述中XOR的定义&#xff0c;我们可以看出计算3个或更多整数的XOR可以以任意顺序进行&#…...

树脂塞孔有哪些优缺点及应用?

树脂塞孔的概述 树脂塞孔就是利用导电或者非导电树脂&#xff0c;通过印刷&#xff0c;利用一切可能的方式&#xff0c;在机械通孔、机械盲埋孔等各种类型的孔内进行填充&#xff0c;实现塞孔的目的。 树脂塞孔的目的 1 树脂填充各种盲埋孔之后&#xff0c;利于层压的真空下…...

【Robot Framework】RF关键字大全

收录工作当中最常用的Robot Framework关键字 内容较多&#xff0c;可以CtrlF快速搜索自己想要的 1. RF循环使用&#xff08;FOR循环&#xff09; {list1} create list LOG TXT INI INF C CPP JAVA JS CSS LRC H ASM S ASP FOR ${file_type} IN {list1} log 构造请求参数 ${t…...

Xilinx Artix-7【XC7A35T-2CSG324I】【XC7A35T-1CSG324I】成本与收发器优化的FPGA器件

产品介绍&#xff1a; Xilinx Artix -7系列 FPGA 重新定义了成本敏感型解决方案&#xff0c;功耗比上一代产品降低了一半&#xff0c;同时为高带宽应用提供一流的收发器和信号处理能力。这些设备基于 28 纳米 HPL 工艺构建&#xff0c;提供一流的性能功耗比。与 MicroBlaze™ 软…...

K8S之自定义Controller

简介 在此之前我们先来了解下kubernetes的两个概念"声明式API"和"控制器模式"。"声明式API"核心原理就是当用户向kubernetes提交了一个API对象的描述后&#xff0c;Kubernetes会负责为你保证整个集群里各项资源的状态&#xff0c;都与你的API对象…...

无线电相关的SCI期刊有哪些? - 易智编译EaseEditing

以下是几个无线电相关的SCI期刊&#xff1a; IEEE Transactions on Wireless Communications&#xff1a; 这是一个IEEE无线通信协会的期刊&#xff0c;主要涵盖了无线通信领域的最新研究进展&#xff0c;包括无线网络&#xff0c;通信系统和信号处理等方面。 IEEE Transacti…...

Rust - 结构体基本使用

基础代码示例 为了理解何时需要使用结构体&#xff0c;官方文档给了一个案例&#xff0c;就是计算长方形的面积&#xff0c;这里我们会一步一步的重构代码直到使用结构体为止。 计算长方形的面积的具体逻辑就是获取长方形的宽度和高度&#xff0c;然后通过公式计算出长方形的…...

29. Kubernetes 核心组件讲解——Controller Manager

本章讲解知识点 Controller Manager 概述Replication ControllerNode ControllerResourceQuota ControllerNamespace ControllerService Controller 与 Endpoint Controller1. Controller Manager 概述 1.1 基本概念 一般来说,智能系统和自动系统通常会通过一个“操作系统”…...

BetaFlight统一硬件配置文件研读之feature命令

BetaFlight统一硬件配置文件研读之feature命令 1. 源由2. 代码分析3. 实例分析4. 配置情况4.1 feature4.2 feature list4.3 feature feature_name4.4 feature -feature_name 5. 参考资料 统一硬件配置文件的设计是一种非常好的设计模式&#xff0c;可以将硬件和软件的工作进行解…...

ChatGPT 不好用?那你看下这份 Prompt 工程指南

作为大型语言模型接口&#xff0c;ChatGPT 生成的响应令人刮目相看&#xff0c;然而&#xff0c;解锁其真正威力的关键还是在于提示工程。 在本文中&#xff0c;我们将揭示制作提示的专家级技巧&#xff0c;以生成更准确、更有意义的响应。无论你使用 ChatGPT 是为了服务客户、…...

冲浪杂记——

华为od是指什么&#xff1f; 华为OD&#xff08;Open Developer Platform&#xff09;是华为面向全球开发者推出的开放平台&#xff0c;旨在为开发者提供丰富的技术资源和开发工具&#xff0c;支持开发者快速构建基于华为技术的应用程序、解决方案和服务。华为OD平台为开发者提…...

深入理解Python中的进程与线程

前言 今天我们使用的计算机早已进入多CPU或多核时代&#xff0c;而我们使用的操作系统都是支持“多任务”的操作系统&#xff0c;这使得我们可以同时运行多个程序&#xff0c;也可以将一个程序分解为若干个相对独立的子任务&#xff0c;让多个子任务并发的执行&#xff0c;从而…...

Data retry场景介绍

本文介绍PDN激活失败或者IP Address缺失时的处理机制。 终端是否会retry? 如何设置data retry timer? Modem retry还是上层应用发起retry? IPV4V6 Fallback 3GPP TS 24.008 6.1.3.1定义了UE使用IPV4V6 pdp type建PDN失败后,如果网络以#Cause50、#Cause51或者#Cause52 …...

lua | 数组与迭代器的使用

目录 一、数组 一维数组 多维数组 二、迭代器 泛型for迭代器 无状态的迭代器 多状态的迭代器 本文章为笔者学习分享 学习网站&#xff1a;Lua 基本语法 | 菜鸟教程 一、数组 数组&#xff1a;相同数据类型的元素按一定顺序排列的集合&#xff0c;可以是一维数组和多维数…...

【云原生】云原生服务网格流量控制思考

文章目录 前言一、什么是流量控制&#xff1f;二、存在三种场景三、场景分析 前言 随着云原生技术的不断发展及应用&#xff0c;很多服务都已部署上云。 保障云上环境的稳定是重要的一环。 一个重要的影响稳定的场景就是突发大流量冲击。 面对该场景&#xff0c;较好的应对…...

《数据库的嵌套查询和统计查询》

选择Study数据库&#xff0c;用SQL语句进行以下查询操作。 1&#xff0e;嵌套查询 ①求选修了数据结构的学生学号和成绩。 SELECT Sno, grade FROM sc WHERE Cno 007;②求007课程的成绩高于于文轩的学生学号和成绩。 SELECT Sno, grade FROM sc WHERE Cno 007 AND grade …...

【网站架构】Nginx 4层、7层代理配置,正向代理、反向代理详解

大家好&#xff0c;欢迎来到停止重构的频道。 本期我们讨论网络代理。 在往期《大型网站 安全性》介绍过&#xff0c;出于网络安全的考虑&#xff0c;一般大型网站都需要做网络区域隔离&#xff0c;以防止攻击者直接操控服务器。 网站系统的应用及数据库都会放在这个网络安全…...

mysql备份和恢复

mysql备份和恢复 数据丢失的原因&#xff1a; 程序错误 人为操作错误 运算错误 磁盘故障 灾难&#xff08;火灾&#xff0c;地震&#xff09;和盗窃 数据库备份分类 物理备份 数据库此操作系统的物理文件&#xff08;数据文件&#xff0c;日志文件等&#xff09;的备份 …...

新闻月刊 | GBASE 4月市场动态一览

产品动态 4月&#xff0c;GBASE南大通用大规模分布式并行数据库GBase 8a MPP Cluster中标人保财险“2022年基础软件产品及服务采购”项目。这是自2019年GBASE与人保财险达成合作以来支持建设的第三期项目。项目上线后&#xff0c;将极大满足人保财险大数据中心及研发中心的增量…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...