1. 安装 cli npm install -g @vue/cli vue create winyh-ui 2.安装 antd-design-vue cnpm i ant-design-vue --save 3.配置按需加载 cnpm i babel-plugin-import --save-dev 修改根目录的 babel.config.js, 配置 babel-plugin-import module.exports = { presets: [ '@vue/cli-plugin-babel

基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多个页面使用相同的功能,就要多次重复写逻辑上差不多的代码,所以打算对表格这个组件进行封装,将相同的代码和逻辑封装在一起,把不同的业务逻辑抽离出来.话不多说,下面就来实现一下吧. 一.原生el-tbale代码--简单の封装 这里直接引用官方的基础使用模板,直接抄过来(✪ω✪),下面代码中主要是抽离htm

近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios'   let cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => {     //发起请求时,取消掉当前正在进行的相同请求   

前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是Vue CLI 3 + element-ui + 多个二次封装的组件.最终想要的是 element-ui 这种感觉的,很多组件可以在不同项目中复用. 安装依赖 首先用Vue CLI 3来初始化项目 yarn global add @vue/cli vue create qiyun-el-ui vue

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c

在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不大,主要是补上了拦截器和和简洁一点. 安装axios npm install axios --save 通过挂载的axios(只是为了对比) main.js import Vue from "vue"; import App from "./App.vue"; impo

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '

主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 import axios from 'axios' import router from '../router' // 引入路由对像,用于路由跳转 // 创建一个新的 axios 实例 axios.defaults.withCredentials = true //解决跨域后如何在请求里带上cookie的问题

今日内容概要 二次封装Response 后台数据库配置 user模块user表设计 前台创建及配置 内容详细 补充--项目依赖模块 # 导出项目依赖模块和安装项目依赖模块 第三方模块--->导出来--->项目路径下-->requirements.txt 第三方模块名字和版本 pip freeze >requirements.txt # 会生成一个文本 内容都是模块与版本号 pip3 install -r requirements.txt # 执行后 会将文件中所有模块及指定版本装上

element-ui 因其组件丰富.可拓展性强.文档详细等优点成为 Vue 最火的第三方 UI 框架.element-ui 其本身就针对后台系统设计了很多实用的组件,基本上满足了平时的开发需求. 既然如此,那么我们为什么还要进行二次封装呢? 有以下两种场景 在日常的开发过程中,部分模块重复性比较强,这个时候就会产生大量重复的代码.这些模块的样式基本上是比较固定的,而且实现的功能也比较相近.如果每个地方都复制一份相似的代码,既不遵守代码的简洁之道,也不利于后期的维护修改 此外,在一些业务背景下,产

第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": "张三", "password": 123456} * succCallback 成功回调函数 * errorCallback 失败回调函数 * type 请求方式("POST" 或 "GET"), 默认已经设置为 "POST&q

来源:StrivEver 链接:http://www.jianshu.com/p/4c77aee0b41c 上个版本为了增加用户体验,部分页面集成了离线缓存数据功能,于是就在项目里使用了数据库管理离线数据.下面交大家一步步学会使用FMDB,以及FMDB的二次封装,同事把我二次封装的数据库放出来,希望能够帮助大家快速学习,集成数据库功能吧. 一.首先看一下STDB文件结构   STDB文件结构 Table.h主要放一些Table的创建语句, 方便管理我的数据库各张表创建 DBDefine.h主要放

今天成功把.Net Framework下使用Dapper进行封装的ORM成功迁移到.Net Core 2.0上,在迁移的过程中也遇到一些很有意思的问题,值得和大家分享一下.下面我会还原迁移的每一个过程,以及在此过程中遇到的问题和处理这些问题的方法. 一.迁移前的准备 之前对Dapper的封装使用的是.Net Framework下的ORM 框架Dapper,开发工具VS2013,现在既然想在.Net Core2.0上使用Dapper,我要先到NuGet看看有没有支持 .Net Core的,在Nug

基于Dapper二次封装了一个易用的ORM工具类:SqlDapperUtil,把日常能用到的各种CRUD都进行了简化封装,让普通程序员只需关注业务即可,因为非常简单,故直接贴源代码,大家若需使用可以直接复制到项目中,该SqlDapperUtil已广泛用于公司项目中. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;

from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium.webdriver.support import expected_conditions as ECfrom selenium.webdriver.support.select import Selectfrom selenium.webdriver.common.action_chains im

ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间较长后,会极大的影响用户体验. 在做一个展示系统的时候,数据库数据较多,页面报表调用接口较多,倒是页面刷新后需要4-5s去加载,所以将ajax封装的方法做了回调. 框架(vue) 在项目中封装了一个全局方法:ajaxData.js exports.install = function (Vue, o

vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值

Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 chorme浏览器添加vue扩展程序 七 xxx 八 xxx 一 阶段性项目流程梳理 直接上图吧: 1.首页: 2.免费课程页 还有比如全部里面有个django框架学习,点击进去,具体的信息展示和课程套餐选择等功能 3.登陆页 还有购物车添加成功提示,更新成功提示,当然这些都是前端根据后端的代码逻辑

package com.yanfuchang.selenium.utils; import java.awt.AWTException; import java.awt.Robot; import java.awt.event.KeyEvent; import java.io.File; import java.io.IOException; import java.net.MalformedURLException; import java.net.URL; import java.text.

from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import

AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允许JavaScript在浏览器上执行. 兼容性 封装 XMLHttpRequest 对象 // 创建 构造函数 function Ajax(obj) { this.url = obj.url ||''; this.type = obj.type || 'get'; this.data = obj.d