Anna F-CSDN博客

原创 Vue-axios的封装以及具体使用

axios描述axios是基于promise的http库，我们可以用它来拦截请求和响应、取消请求、转换json、客户端防御CSRF等，所以我们更推荐axios跟后台进行数据交互。安装npm install axios使用在src文件夹下新建request文件夹，在里面新建request.js跟api.js；request.js用来封装axios，api.js用来统一管理接口。引...

2020-05-08 16:10:20 623

原创 Vue-Axios跨域-如何解决跨域问题

应用场景开发过程中，前台跟后台需要进行数据交互，由于浏览器安全机制，直接使用axios会产生跨域问题，访问不到后台数据，因此我们需要配置代理。解决方案代理解决跨域的解释：客户端直接请求服务端的数据会存在跨域问题，但是服务器和服务器之间可以直接请求数据，并没有跨域的问题（在服务器没有设置禁止跨域权限的情况下）。所以，我们可以配置一个代理服务器请求另一个服务器中的数据，然后把请求出来的数据返...

2020-04-29 17:04:56 1687

用法=一：使用computed计算，无需在data中再次定义computed:{ endTime : { get(){ let a = moment(`${this.date} ${this.startTime}`).format('YYYY-MM-DD HH:mm:ss') let endTimeCalc = moment(a).add(this.duration,'minutes').format("HH:mm") return e

2022-05-23 12:34:27 213

原创 Vue启动报错：Cannot read property ‘upgrade‘ of undefined

场景vue启动时报如下错：ERROR TypeError: Cannot read property ‘upgrade’ of undefined解决方案把配置文件 .env.development 中的VUE_APP_BASE_API 或者 VUE_APP_URL放出来，再次 npm run serve，启动成功！

2022-03-04 17:28:40 638

原创 Chrome模拟企业微信环境

Settings > Devices > Add custom devices > User agent stringUser agent string内容：Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Mobile/14C92 wxwork/2.4.2 MicroMessenger/6.3.22 Language/zh2. F12.

2022-01-10 14:42:55 1862 1

原创 git add 撤销&&git commit 撤销

一、git add 撤销撤销add的指定文件：git reset HEAD 文件路径git reset HEAD src\components\question\single二、git commit 撤销撤销远程的commit，恢复到指定版本，并不影响本地代码：git reset --soft commit节点git reset --soft b426e3d0撤销到上一个版本，即撤销一次commit：git reset --soft HEAD^//或者git re

2021-06-04 10:28:48 682

原创 JS中的防抖和节流区别和实现方法

概念：函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高，导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象；也为了防止多次调用接口导致数据错误。1、函数防抖(debounce)实现方式：每次触发事件时设置一个延迟调用

2020-12-17 18:11:34 241

原创 Vue+DHTMLX Gantt（甘特图）的使用方法

如何使用Vue跟DHTMLX Gantt做甘特图？我们就先做个简单的demo吧！一：安装依赖//(for yarn)yarn add dhtmlx-gantt --save //(for npm)npm install dhtmlx-gantt --save 二：创建一个gantt.vue组件<template> <div ref="gantt" class="left-container"></div></template>&l

2020-12-03 15:46:20 10255 8

原创 Vue关于pdf展示问题——第三方电子签章不能正常展示

在项目开发过程中，如果我们只需要展示pdf，那么我们可以选择vue-pdf，可以查看我之前的一篇：https://blog.csdn.net/AnnaF/article/details/105866075。问题但是现在的需求是需要用户跟第三方进行电子签名，然后把签完名的合同展示出来，这边就存在一个问题，vue-pdf会屏蔽签名图层，导致合同缺失第三方的电子签名。解决方案我们这边使用的是pdfh5插件下面展示我这边的操作步骤：1.安装 pdfh5npm install pdfh52.具体使用

2020-07-09 16:58:35 2971 2

原创 Vue-watch的简单应用

Vue 中有一个方法 watch，它是用来监测Vue实例上的数据变动。方法一下面展示一个 demo片段。 export default { data() { return { imgUrl:'', flag:'', showBtn:false, } }, watch:{ flag(newFlag,oldFlag){ if(this.flag != ""){

2020-07-03 14:49:37 160

原创父子组件之间的通信

父向子传值父组件绑定一个属性//绑定title属性，且给title赋值 <Sunny :title="msg"></Sunny> //data里面给title属性赋值msg data () { return { msg:'父组件的title属性数据内容', }子组件用props接受这个属性//拿到title属性并使用 <p>{{this.title}}</p> //子组件用props接受title这个

2020-06-28 18:13:23 142

原创 Vue——组件的复用

在开发过程中，我们会把组件复用，以达到高效开发。当然，有的模块我们可以单独封装一个组件，防止代码冗余，也可以实现多次复用。实现方法引入组件，定义components。<script>//引入组件 import Sunny from "./Sunny"export default { name: 'HelloWorld', //定义components components:{Sunny}, data () { return { msg: 'W

2020-06-24 16:33:08 835

原创 Vue组件引入外部的js文件的某方法或者静态数据

遇到问题我们有时候会把一些公共方法写到一个单独的js文件，这样方便多处使用该方法，也很方便找到或者修改方法。例：我们在写项目的时候会遇到加载本地城市列表的数据，如果放到vue组件里，是极其的不方便，我们来看看怎么解决这个问题。解决方法引入js的某个方法方法一1.在公共js里写方法并export导出。export function add(a) { let b = 2; return a+b;}2.在组件 import 引入。import { add } from '../.

2020-05-27 16:18:12 6862

原创 Vue(keep-alive)指定单页返回到页面不刷新，即保存状态

遇到的问题在开发过程中，从form单页跳转到品牌选择页，选择成功后返回到form页，需要保持form页的状态不变，即内容不刷新。众所周知，我们可以用来实现，是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。实现所有页面不刷新<keep-alive> <router-view ></router-view></keep-alive>但是这样并不是我所需要的效果，我只需要从品牌页跳转到form页实现不刷新。实

2020-05-26 18:23:30 2837 2

原创服务器操作相关命令

进入某文件夹cd /usr/local/tomcat9/webapps/新建文件夹mkdir folderName进入到bin目录下可以关闭，开启服务器操作 cd /usr/local/tomcat9/bin/关闭服务器 sh shutdown.sh开启服务器sh startup.sh

2020-05-20 10:39:19 207

原创 npm ERR! y@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

今天在启项目的时候遇到了一个小问题，怎么都无法打包运行，报错截图如下。报错截图解决方法主要是配置host的问题，我之前在配置文件config/inedx.js里面设置了host，改成了我的本机IP，这样我们就可以用手机访问；然鹅，今天的IP换了，就无法打包运行。默认设置：host: 'localhost', // can be overwritten by process.env.HOST修改后的设置：host: '10.1.3.89', // can be overwritten by

2020-05-15 17:03:53 4940 1

原创 JS跟APP交互——H5调用原生APP的方法

js向app传值问题最近做的H5项目是需要嵌入到APP内使用的，这就涉及到js跟app交互的问题，我这边需要传值给app，以下是我在做项目过程中传值的方法，仅供参考。解决方法AppData这个JSON对象是我们需要向后台传的所有值，同时我们需要判断终端设备，IOS终端需要加上window.webkit.messageHandlers，deliveryClueID这个是原生方法名。var AppData = Object.assign( {loanID:this

2020-05-14 11:29:09 3016

原创 Vue Err:This dependency was not found大坑

报错内容This dependency was not found: * vuex; in ./src/store/index.js To install it, you can run: npm install --save vuex;。然后我就乖乖 npm install --save vuex，但是还是同样的报错！解决方案请仔细检查每一步vuex，从注入到使用的每一步！！！main.js 引入store没问题import store from "./store/index"Vue.u

2020-05-12 16:07:33 3627 2

原创 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! chromedriver@2.46.0 install: `node install.js`

在使用webpack+vue-cli进行vue项目构建时有时候会出现以下错误，webpack@3.10.0及以上版本和vue-cli@2.9.2及以上版本会自动安装依赖，无需手动 npm install 。错误截图解决方案npm install chromedriver@2.46.0 --ignore-scripts或者npm install chromedriver --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriv

2020-05-12 15:01:52 6503 2

原创 Vue-pdf预览插件-vue-pdf

应用场景在写H5项目的时候需要预览pdf文件解决方案步骤一：npm install --save vue-pdf步骤二: 这是template。<template> <div class="pdf" v-show="fileType === 'pdf'"> <pdf ref="pdf" :src="pdfUrl" ...

2020-04-30 17:52:35 1824

原创 Vue打包丢到服务器-请求后台的接口路径错误

问题描述项目打包部署到测试服务器上之后，axios访问路径一直不对，本地用的proxyTable代理解决的跨域问题。请求路径应该是“http://xxx.xxx.xx.xx:8080/zlhj_interface/rateScreen/queryProAndCity”，但是部署到测试服务器上之后多出下图框选的路径“zlhj/app/carAuth”（dist文件放在这个carAuth文件夹下）...

2020-04-23 19:14:51 6363 1

原创 Vue打包部署到服务器-找不到静态资源404错误

问题描述运行之后正常，npm run build打包正常，发布服务器静态资源丢失。报错截图导致原因打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。解决方法步骤一：更改config文件夹下index.js(config -> index.js -> build对象)资源发布路径下面展示一些内联代码片。//change...

2020-04-23 16:24:29 2285

AnnaF的博客