本文主要介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据。1、效果展示2、VUE代码VUE之视图定义<el-row> <el-table :data="tableData"...

背景接口域名没有写死，而是动态获取。具体实现就是 通过读取一个静态json文件，来设置真实的接口域名。好处是原域名有可能被封，这样可以直接后台操作修改该配置文件即可；不然的...

前言　　本文记录一下自己手动实现的一个前端常见的短信验证码输入组件，从需求到实现逐步优化的过程。正文　　1.需求分析　　首先看一下效果图。 　　首先页面加载的时候，输...

Vue foreach数组与js中遍历数组的写法场景Vue中使用Axios发送get或者post请求，发送请求时需要在js中对请求参数进行遍历并处理。接收响应时需要对响应结果进行遍历和处理。注...

React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的JavaScrip...

1、组件First.js下有子组件：import Admin from './Admin'import FormCom from './FormCom'import One from './One'import ButtonCom from './ButtonCom'import MenuCom from...

之前的文章都是自己的学习日志，主要是防止自己遗忘之前遇到的坑。这次将从最基础的项目搭建开始讲起，做一个基于react和antd的后台管理系统。我会一步步进行下去，所以看完本文...

之前写动态表单遇到过坑，就是用index下标做key会导致bug，而且很严重！今天有空写下文章记录下：怎么处理和逻辑我用的是antd3的版本，3和4的表单有点不一样，不过差别应该不大。需求：1...

异步遍历在讲解异步遍历之前，我们先回想一下ES6中的同步遍历。根据ES6的定义，iteration主要由三部分组成：Iterable先看下Iterable的定义：interface Iterable { [Symbol.itera...

简介在ES5中，引入了strict模式，我们可以称之为严格模式。相应的sloppy mode就可以被称为非严格模式。严格模式并不是非严格模式的一个子集，相反的严格模式在语义上和非严格模式...

最近微信小程序对于审核小程序提出了带有wx.login、wx.getUserInfo接口的调整，并提出了一个新的接口供开发者调用下图是对于新的接口的官方文档详情点击前往官网查看更多详细...

1.需求
后台给了一个这样的数据让咱前端去转换为树形结构（没有重复数据）。不多说，先来看看给了一个怎样的数组数据，转换为怎样的树形结构。服务器传过来的数组
const arr = [...

1.使用场景
有这么一个需求，开发了一套系统，当用户离开桌面或者一段时间不操作的话，需要把该系统所有打开页面锁定起来，就跟桌面锁屏一样，只能输入密码验证成功后，或者重新登录，才...

项目需求：点击产品树节点时获取该节点的所有父节点，同时回填表格的搜索条件，完成搜索功能，搜索结果展示在下方的table中。写了三个组件：现在有个业务场景交互：在orderTree组件中点...

Redux，本身就是一个单纯的状态管理者，我们不追溯它的历史，从使用角度来说：它提供一个全局的对象store，store中包含state对象用以包含所有应用数据，并且store提供了一些reducer方法...

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下先上图话不多说，代码奉上，喜欢的请留下你的小星星&#9829;(&#710;&#9697;&#710;&#1285;)<!DOCTYPE h...

1.首先在配置文件中添加cnpm install 下载jquery文件2.在webpack配置文件中添加下面代码3.接着在webpack.base.conf.js中module.exports的最后加入下面代码4.最后在main.js...

1、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。2、同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本...

上面要求做一个根据后台数据动态生成控件，然后让用户输入提交查询信息，然后动态生成表格在显示出来。动态控件代码如下<el-form :model="formData" style="padding: 0 5...

vue的默认配置是使用hash模式，这样我们访问的时候都带有了一个#号，再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式，优势就出现了需要去除#号，于是vue端就需要配置...

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来...

前言本人在公司主要负责中后台系统的开发，其中路由和权限校验算是非常重要且最为基本的一环。实际开发项目中，关于登录和路由权限的控制参照了vue-element-admin这个明星项目，...

前言对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过...

说明：debounce和throttle在脚手架的使用，此处以防抖函数debounce为例避免按钮被重复点击引入：import lodash from 'lodash'使用：直接使用debounce方法 // 审核 audit: lodash....

我的问题出在js引入的顺序不对，导致不能正常显示vue中的值正确的顺序应该是：先引入vue的js--------html代码-----最后引入自己写的js补充知识：vue中子组件的created、mounted生...

闲扯两句最近想给自己的博客上加上一个3D标签云的效果，用来表示自己博客文章的分组，网上找到了canvas实现的，还有a元素实现的解析3D标签云，我想让标签可以选择和点击，又不想在标...

如： this.list = this.list2, 结果在list改变后 list2也改变，这不是我们想要的效果第一种：利用 JSON.parse 和 JSON.stringifythis.list= JSON.parse( JSON.stringify(this.lis...

很多人习惯用watch，但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌，请谨慎使用watch。示例1，下面会触发watch 吗？<script> new Vue({ data() { return {...

场景需求：需要同时请求5个接口都请求成功后执行下一步操作解决方法：定义一个变量i=5，请求成功一个接口，让i–，直到i=0时执行下一个操作，否则不执行axios.all 并发请求，.then(axios....

有时候下载依赖的时候网速不行，这时候我们选择手动下载依赖有时候下载依赖的时候网速不行，这时候我们选择手动下载依赖：选择 No,I will handle that myself生成完项目之后，再cd...

项目场景：项目场景：示例:A(商品详情)——B(商品购买页面)-C(支付成功页面)——D(订单页面）问题描述：提示：这里描述项目中遇到的问题：
如果我们不做控制的话，安卓按照浏览器返回机制...

前言vue构建的单页大型项目中，可能会用到Vuex 。Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高...

我们在使用vue开发过程中会遇到这样的情况，在父组件中引入了子组件，需要将父组件的值传到子组件中显示，同时子组件还可以更改父组件的值。以我目前的一个项目的开发为例，如下图...

我就废话不多说了，大家还是直接看代码吧~第一种：const query = Qs.parse(location.search.substring(1))let passport = query.passport;第二种：var query=this.$route.query;l...

为什么实现数据响应式
当前vue、react等框架流行。无论是vue、还是react框架大家最初的设计思路都是类似的。都是以数据驱动视图，数据优先。希望能够通过框架减少开发人员直...

element默认中文版，但是我们在做英文页面时自己翻译很不爽，所以我们用element自带英文包，只要在html页面中引入就可以了，具体引入方法有很多种，在此提供了我用过的一种，仅作为参考...

如果连续点击提交按钮，可能会重复提交数据，导致出错，解决的方法可以使用disabled限制点击，感觉体验不是太好，所有给大家分享下面的方法<el-button @click="throttle()">测试</el-...

先看一下总体效果:上传文件做了大小和类型的限制，在动图中无法展现出来。使用file类型的input实现选择本地文件但是浏览器原生的文件上传按钮的颜值不尽人意，而且按钮上的文字...

在使用vant的picker组件时，我希望有在页面加载时向数据库获取值来设置picker的默认值。开始我使用官方文档中的default-index属性，并在onLoad方法中进行this.setData()。但是...

这是vue过滤器 获取url参数，返回数组Vue.prototype.$url=function(){ var url = decodeURIComponent(location.search); //获取url中"&#63;"符后的字串 var theRequest = new...

1.官网下载http://www.lodop.net/download.html2.解压安装运行3.vue部分实现　　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html3.2 编...

前几天做的项目里有用到下拉刷新。使用了vant-ui里的List 列表瀑布流滚动加载，用于控制长列表的展示先说使用 1.用npm下载该模块包npm i vant -S2.引入组件官方提供了三种方...

1.安装Vuexnpm install vuex --save2. 新建store目录结构3. 编辑store.jsimport Vuex from 'vuex'import Vue from 'vue'import defaultState from './state/state'import m...

问题背景我想在vuex的state中使用map，这样可以使很多操作变得方便const state = { all: new Map()}这样的写法是没有问题的，不会报错，state.all可以像正常的Map一样使用。但是...

van-list里面的元素不能有float样式，否则会连续触发 load 事件原代码<template> <div class="about"> <van-tabs v-model="active" sticky @change="getTypeDate"> <van-t...

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。本文我们一起从源码的角度，了解一下组件的底层...

1 概述前后端分离的一个简单用户登录 Demo 。2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus3 前端3.1 创建工程使用 vue-cli 创建，没安装的可以先安装：sud...

用axios前台代码： let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this...

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1：npm install image-webpack-loader --save-devste...

今天遇到一件很奇葩的事情输入npm run build-test 突然停在这不动了 what&#63; 不动了？！后来google了一下 大家都是人才运行一下这句话 就动了！！npm config set registry http:/...