在一个for循环中对同一接口调用多次,如何保证逐步执行,同步执行. html部分 <DcFileUpload v-for="(item, index) of fileLengthList" :key="index" ref="fileUploadData"> </DcFileUpload> DcFileIliad组件部分 //slot 标签就是为了备用留坑,如果用户需要在组件中增加节点就可以了,类似于插座功能 <te…

项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const merge…

团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码 二.开发SRC目录: 1.Vuex目录 (状态树配置) 2.Router目录(路由配置) 3.Pages目录 (放置主路由组件 注意命名规范) 4.Common目录 (放置静态文件) 5.Config目录 (全局配置项,路由拦截,报错信息,等枚举信息) 6.Api目录 ( 相关全局请求调用配…

Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置是通过 webpack-chain (链式操作)维护的.这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改. 它允许我们更细粒度的控制其内部配置.接下来有一个在 vue.config.js 中的 c…

一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP识别与拦截机器程序批量自动化操作的SaaS应用.它是由极验开发的新一代人机验证产品,它不基于传统“问题-答案”的检测模式,而是通过利用深度学习对验证过程中产生的行为数据进行高维分析,发现人机行为模式与行为特征的差异,更加精准地区分人机行为. 1.web部署介绍 客户端官方文档:https://doc…

目录 1 webpack简介 2 webpack实现多个输入输出多个html 3  webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面重新加载,而不是使用缓存,hash(版本号更新) 5 webpack output 里面的publicPath 6 webpack热加载 热更新 热替换 7 webpack dev-server 和nginx服务器之间的关系 8 webpack 构建的vue项目总是会出现内容先于样式出现的很乱的页面…

一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容器外部: <template> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item">…

本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在router的beforeEach事件里面控制loading的状态 <template> <div> <div v-show="isLoading" class="myloading"><van-loading type=&quo…

一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) => { return Axios.post('user/shop_cart/create/', params).then(res=>res.data) }; 2.添加Axios的请求拦截器 Axios 的拦截器:在请求或响应被 then 或 catch 处理前拦截它们,说明文档:Axios使用…

一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod…

1.使用elment或者mintUI库时,需要全局引入ui库的css文件:然后在修改自己样式时,需要将自己的css文件引入到main.js中才会生效,全局引用2.使用v-html展示dom字符串时,相应的css文件中的样式是不会生效的,需要使用组件展示dom 3.axios使用,是需要一个qs的node模块,然后请求的数据格式是表单格式的,需要设置header的Content-Type格式 import Vue from 'vue' import axios from 'axios' impor…

作用域链的形成 在 JS 中每个函数都有自己的执行环境,而每个执行环境都有一个与之对应的变量对象.例如: var a = 2 function fn () { var a = 1 console.log(a) } fn() // 输出 1 你就可以将 fn 当做函数 fn 执行环境对应的一个变量对象,这个变量对象我们通过代码是无法访问到的,但是 JS 引擎在解析代码时会用到它. 思考为什么上面函数中的 fn 运行后输出 1,可能大家都知道,但是为什么会输出 1 呢,用上面的变量对象来理解就可以得…

---恢复内容开始--- 一.在js中大家讨论的原形链都是围绕在prototype和__proto__. 1.__proto__是内部原型 2.prototype是构造器原型(构造器就是构造函数) 3.所有的构造器(构造函数)的__proto__都指向Function.prototype 4.所有的构造器(构造函数)都可以被看做是由Function()创建(new ==>  fn = new Function()  ,obj = new Function() ) 5.现在关于Function()…

js中一切皆为对象,其中函数也是一种对象, 而每个函数都有一个prototype属性,其值也是一个对象. 一.prototype的作用 1. 在多个实例对象之间共享数据和方法. 2. 通过原型链实现继承. 二.原型链: 1. 关系到构造函数,原型对象,实例对象. 2. 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而构造函数的实例对象都有一个指向原型对象的内部指针. 3. 如果让原型对象等于另一个构造函数的实例对象,则此时原型对象内部也包含一个指向另一个构造函数的原型对象的…

一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Course.vue 文件,给课程 div 绑定查看详情事件. <div class="courseList"> <div class="detail" v-for="(course, index) in courseDetail" :…

在js中数据的声明方式有两种: 1.用var声明,例如:var num = 10: 2.直接声明,例如:num = 10: 两种声明方式在某些情况下是有区别的: var data = 10; function fn01(){ var data = 100; function fn02(){ data = 1000; function fn03(){ data = 10000; } fn03(); } fn02(); } fn01(); console.log(data); 此时data会是多少呢…

js中字符串间的比较是按照位次优先,比较各字符的ASCII大小,包括数字字符串之间的比较. 1.console.log("1"<"3");//true 2.console.log('5'<'10');//false 3.console.log("123"<"123");//false 4.console.log("abc"<"aad");//false…

在router文件夹下的index.js中的router实例中添加mode属性,值设置为history export default new Router({ mode:"history",//去除哈希值的#号 routes }) 使用这种模式需要后端的配合,如果没有后端的配合在打包的时候页面会是空白的.一般还是使用hash模式…

一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 url 构成:http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace 如上的 url 由以下部分组成:协议.域名.文件名称.get参数.锚点 1.http:// 规定了页面采用的协议. 2.www.feng…

编译项目出现如下错误: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 原因: node的堆内存上限大概在1.7G,如果超过就会出现次错误: 解决方法: 全局安装increase-memory-limit npm install -g increase-memory-limit 进入工程目录,执行: increase-memory-limit 即可解决.…

公司前端写的后台部署到tomcat webapps目录下后,无法进行刷新,一刷新就会报错404,自动跳的404页面.在网上查了下,官方说是HTML5 History 模式引发的问题,但是解决方案中,并没有tomcat的解决方案.如链接:https://router.vuejs.org/zh-cn/essentials/history-mode.html 于是,我百度了下,找到了解决方案! 一.vue创建项目使用脚手架有两种方式 1.vue init webpack my 这种方式的项目打包,需要…

昨天压缩Js文件时发现了项目中的一个prototype的问题代码如下所示: 1. <script> var XXX = function(){ }; var x1 = new XXX(); XXX.prototype.fnx = function(){ alert("123"); } x1.fnx(); </script> 2. <script> var XXX = function(){ }; var x1 = new XXX(); XXX.pro…

学习前端也有一段时间了,觉得自己可以与大家分享一些我当初遇到疑惑的东西,希望能给对此问题有疑惑的朋友带来一点帮助. 先来普及一下JS的概念(不要嫌我啰嗦,可能一些朋友开始学习JS是跟着视频和写好的代码学的,应该有一部分对它的结构或者说它的历史还不太了解),JavaScript由三种东西组成,一个叫ECMAScript,一个叫DOM,还有一个叫BOM,我们现在说的JS其实是它的核心--ECMAScript,简称ES.如今市面上的浏览器大部分是运行的ES5,但有一些也支持ES6,某些技术大牛都是用E…

 1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下,初次进入会执行钩子函数,再次进入时则不会. 解决方案: 监听路由变化 watch : { "$route" (to, from) { if(to.path.indexOf('/home') > -1) { this.initData() } } } 2.setInterval路由跳转继续运行并没有及时进行销毁 比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁…

最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweichao/p/9620940.html https://www.jianshu.com/p/56680ce1cc97 https://www.cnblogs.com/jasmine-95/p/6054652.html https://www.cnblogs.com/duke-peng/p/886277…

这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很好,今天我以JS为例,探索一下JS不同于其他面向对象的语言的地方-------原型和原型链 首先,假设你在做一个项目,要造一个新的对象,标准库里面没有.那你只能用构造函数去构造一个 function Person(){ //构造函数 } 以上Person就是一个构造函数,可以用来生成小明 小红 等等…

(转自)https://www.cnblogs.com/zifayin/p/8312677.html 1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下,初次进入会执行钩子函数,再次进入时则不会. 解决方案: 监听路由变化 watch : { "$route" (to, from) { if(to.path.indexOf('/home') > -1) { this.initData() } } } 2.setInterval路由跳转继续…

我们首先定义一个构造函数Person,然后定义一个对象p,JS代码如下: function Person(name) { this.name = name; } var p = new Person("Ben"); console.log(p.name); 上面new过程中,p对象的__proto__属性会指向Person构造函数的prototype. 实际上new过程由三步组成,具体参见我的另外一篇博客. 自己定义构造函数时有两点需要注意: 1. 由构造函数生成的对象都有__prot…

前端我刚开始接触Vue,从GitHub上下载了代码程序,但缺少一些插件,用vscode打开并下载插件执行报错cd() never called! 解决的方式 1.执行cmd命令行不要再vscode里执行,因为哪个不一定是管理人员模式打开的. 2.用管理员身份打开cmd命令行,目录定位到程序的文件上,随后执行npm cache clean -f清理一下. 3.随后再执行一下npm install它就成功了,而且正常下载,最后再执行一下npm run dev ,项目正常运行,OK了.说明还是得要管理…

效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnify"> <!-- 左边产品图片区域 --> <div class="left_contaner"> <div class="middle_img" @mouseover="boxMouseOver" @m…