第一种： 项目本来是上传一张pdf或者图片，后来需求变化需要上传多个文件，但是之前上传使用的是转换base64然后传给后端，后端再去转化。这种方式用于多文件的话由于转换base64后体积过大，会造成请求时间过长，上传时间过长等等问题。所以需要改造，上传文件需换成文件流形式，需要换成FormData形式。由于项目所有post接口之前都定义为默认请求头application/x-www-form-urlencoded 而FormData需要multipart/form-data。所以对项目...
需求分析： 1.根据图片路径，展示不同的图片 2.图片大小 封装组件—》Avatar <template><div><imgclass="avatar-img":src="url":style="{ width: size + 'px', height: size + 'px' }"/></div> </template><script> export default {props: {url: {//图片路径type: String,require: true,},size: {//图片大小type: Number,},}, }; </script><style scoped> .avatar-img {border-radius: 50%;object-fit: cover;display: block; } ...
<template> ??<div> ????<s-table ??????ref="table" ??????size="default" ??????rowKey="id" ??????:columns="columns" ??????:data="loadData" ??????:alert="true" ??????:rowSelection="rowSelection" ??????showPagination="auto" ????> ??????<span?slot="serial"?slot-scope="text,?record,?index"> ????????{{?index?+?1?}} ??????</span> ??????<span?slot="status"?slot-scope="text"> ????????<a-badge?:status="text?...
适用于vue项目中管理接口 说明：需要创建的文件 具体思路 方法步骤需要创建的文件src/assets/js/request/api.js src/assets/js/request/request.js具体思路引入axios 封装axios.js 接口统一管理api.js方法步骤引入axiosnpm i aixos --save封装axios（文件名：request.js）import axios from 'axios'; const http = "http://192.168.1.12"; //请求拦截 axios.interceptors.request.use((config) => {//请求之前重新拼装urlconfig.ur...
各种UI库的功能都是非常强大的，尤其对于我这种不会 css 的人来说，就更是帮了大忙了。 只是嘛，如果再封装一下的话，那么用起来就会更方便了。 那么如何封装呢？ 封装三要素 —— 属性、插槽、事件、方法 可以封装，但是原生UI库提供的强大功能不能给封装没了吧，吃了回扣可是不好滴。 那么如何做到不遗漏呢？先做一个合格的传声筒。 传递属性 先看看 el-input 提供的属性：太长了，这里只截了一半。 这么多的属性，如果一个一个都...
话不多少，上代码(fetch文件)： import Vue from 'vue' import axios from 'axios' import Store from '../vuex/store.js' //运用到Vuex可使用 const QS = require('qs')/*** 开发配置baseUrl*/ // const PRIVARY_URL = '/quality' // 生产 const PRIVARY_URL = '/dev' // 开发/**** 生产配置baseUrl*/ const PROXY_URL = '/qualitydev' axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? PROXY_URL : PRIVARY_UR...
?不是吧，不是吧，原来真的有人都2021年了，连TypeScript都没听说过吧？在项目中使用TypeScript虽然短期内会增加一些开发成本，但是对于其需要长期维护的项目，TypeScript能够减少其维护成本，使用TypeScript增加了代码的可读性和可维护性，且拥有较为活跃的社区，当居为大前端的趋势所在，那就开始淦起来吧~ 使用TypeScript封装基础axios库 代码如下： // http.ts import axios, { AxiosRequestConfig, AxiosResponse } from 'axi...
1.创建JS文件 2.在JS文件中写你想写的方法，进行抛出 3.在main.js中引入并使用 总结：代码很简单，主要是封装的思想。
开发通用组件是很基础且重要的工作，通用组件必须具备高性能、低耦合的特性 一、数据从父组件传入 为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去。 父对子传参，就需要用到 props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则 二、在父组件处理事件 在通用组件中，通常会需要有各种事件， 比如复选框的 change 事件，或者组件中某个按钮的 click 事件 这些...
一：目录结构二：utils.js文件 /* 防抖节流函数 */ let timeout = null // 创建一个标记用来存放定时器的返回值 let canRun = true; //!!!!这里一定要把变量设在外面，不然会失效！我搞了好久才搞明白！ export function debounce(fn) {return function() {clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 in...
1、安装 axios npm install axios --save 2、在src目录里新建目录结构index.js内容 // // axios封装// //1.引入axiosimport axios from axiosimport { addPending, removePending } from "./cancleRequest.js"// // 2. 配置信息const config = { // 每次请求的协议、IP地址。 设置该配置后，每次请求路径都可以使用相对路径，例如"/admin/login" baseURL: "http://ztdoc.wisedu.com", // 请求超时时间 timeout: 10000,...
面包屑是一种常见的导航工具，通常出现在网页内容的上方。面包屑小巧，简单，网站面包屑作为一种辅助导航工具，作用是告诉访问者他们目前在网站中的位置以及如何返回，提高用户的体验。 面包屑的作用 作为一种辅助导航工具，面包屑为用户呈现出网页的结构层次，让用户知道自己目前所处的位置以及自己还能到哪里去。面包屑鼓励用户浏览更多的内容，提升了整个网站的可访问性，降低网站的跳出率。利于搜索引擎蜘蛛对网站的抓取，实现...
一篇写的很通俗易懂的jsonp文章https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html在Vue中封装的jsonp方法@param { string } url – url地址 @param { object } data – 传参配置项（url传参配置） @param { object } option – 传参配置项（jsonp回调名称）import originJsonp from 'jsonp'export default function jsonp(url, data, option) {url += (url.indexOf('?') < 0 ? '?' : '&') + param(dat...
1.引入axios npm install axios2.src下面创建http文件夹(下图) api.js import axios from 'axios' var $http = axios.create({baseURL: 'https://wwww.baidu.com'//服务器地址 }); // 添加请求拦截器 $http.interceptors.request.use(function (config) {// 在发送请求之前做些什么config.headers['Authorization'] = 'Bear ' + '123456'//按需求写入tokenreturn config; }, function (error) {// 对请求错误做些什么return Promi...
返回顶部组件封装 移动H5网页端每一页超过1.5屏则出现返回顶部得按钮，随页面滑动固定在左下角 <template><divv-show="showToTop"id="top-box"@click="handleToTop"><div class="go-top">顶部</div></div> </template><script> export default {name: 'ToTop',data() {return {showToTop: false,screenH: 0}},mounted() {window.addEventListener('scroll', this.scrollTop);this.$nextTick(() => { this.screenH = window.screen....