商朝

antd 优化upload组件

需求：根据前一个表单项用户选取的值，动态选择后面的表单项应该绑定哪个属性。比如前者选了1，那么后者绑定formObj.stu,选2，后者绑定formObj.tea坑那么针对这个场景我们第一个想法肯定是三目,你肯定会写出如下的代码<el-input :v-model:'formObj.xx == 1?this.formObj.stu':'this.formObj.tea'></el-input>恭喜你，这么些不生效。因为vue有自己的规则针对v-model是不允许使用表达

前言作为前端开发人员,calc()这个函数一定不陌生,但是它存在一定的局限性,假如无限缩小页面或者无限放大页面都会导致calc()标签里面的内容变形,所以紧跟着它还要有一个最小宽度min-width / min-heightdiv{ width:calc(100vw); /**最小宽度固定大小**/ min-width:1400px; }拓展响应式要求摒弃px,web字体使用rem，app使用rpx页面布局div使用calc()配套min-width去使用位置属性使用% 例如:(p

在开始之前请先这样做在main.js中添加Date和String的扩展方法效果图-级联:做到监听 没大不有小-添加表格空数据处理-添加表格loadding加载-分页总条数存至计算属性 一般不会变动则不吃消耗-传参处理:使用计算属性传递参数 不会导致频繁访问data()中的内容 而且由于存在缓存所以请求效率会提高很多-时间处理:使用组件封装的date.prototype使js date类型转yyyy-MM-dd-表单校验<template> <a-card :bor

在你的mian.js中添加Date.prototype.Format = function (fmt) { // author: shang var o = { "M+": this.getMonth() + 1, // 月份 "d+": this.getDate(), // 日 "h+": this.getHours(), // 小时 "m+": this.getMinutes(), // 分 "s+": this.getSeconds(), // 秒

通常来说在dom中使用三目运算的频率很高，但是很多小伙伴可能不知道如下写法但是有的时候我们并不需要if else中的else所以可以用||来优化一下写法经典三目{{this.count?this.count:'0'}}替代{{this.count||'0'}}...

效果图由于’饿了么’进度条不支持中心添加图标所以我们采用最原始的’父相子绝’来调整位置和大小<div class="progress-div"> <el-progress type="circle" :percentage="100"

技术栈侧边栏用 Antdtab使用element效果<template> <div class="main-card"> <el-row> <el-col :span="3"> <div class="menu-all"> <div class="menu-head"> <

封装请求请求拦截器响应拦截器设置响应等待时间、baseUrl、反向代理断网处理错误跳转首先需要安装 qs axios vant在src目录下新建request目录,request下新建http.js，api.js两个文件http.js/** * axios封装 * 请求拦截、响应拦截、错误统一处理 */ import axios from 'axios'; import router from '../router'; import store from '../sto

在根目录创建vue.config.js复制下面代码进去// vue.config.jsconst path = require('path');function resolve (dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: config => { //路径配置 config.resolve.alias .set('as

前端js根目录创建一个js文件import Vue from 'vue'//创建websocket对象import store from '@/store/index'let webSocket = null;//创建webSocket连接let createWebSocket = () => { try { let url = window.location.href const ip = url.split('//')[1].split

前言Vuex中储存的的数据由于是存放在内存中的,浏览器刷新之后,state就清空了,我们需要将state持久化操作下载vuex-persisterdstatenpm install vuex-persistedstate配置打开store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'//在此引入Vue.use(Vuex)

四类请求方法GetPostPutDelete其中发axios自动发json的是Post和Delete,而Get和Put请求则是发k=v的表单形式,这一块有时候比较混乱,我试着给大家解释一下Get发参数发一个对象axios.get('url',{params:{Student:this.addForm}}).then(res=>{ ..})//发送表单对象后端接这个对象,因为不是发的Json,千万不要加@RequestBody@GetMapping("/")public

前言用到的技术手段后端SpringMVC请求拦截器-Intercepter前端Vue路由守卫axios请求拦截器axios响应拦截器流程下面是一个单线的流程,拦截器一个都不加 @PostMapping("/login") public Result login(@RequestParam String username,@RequestParam String password){ User u =service.login(username);

前言对于前后端分离的项目,Cookie和Session是前后端通信的两种重要手段,我们今天来看看两者的区别,以及提供一个引出Redis的使用案例一 Cookie它的流程是这样的????拿登录模块举个例子#mermaid-svg-HMOx262atRwy0AgE .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-

前言模态框+表单的组合十分普遍,你有没有遇到this.$ref[formName].resetFields()无效的情况?解决在onReset()方法中做一点小手脚onReset(formName){ this.$nextTick(() => { this.formLabelAlign = formName;//formLabelAlign是我form表单绑定的对象 }); this.$refs[formName].resetFields(); }

前言表单校验不想那么麻烦就可以这样正文 rules: { username: [ { pattern: /^[\x7f-\xffA-Za-z0-9_]+$/, message: "不允许中文", trigger: "blur", }, { required: true, message: "请填写用户名", trigger: "blur" },

需求概述excel相信大家都不陌生了,公司里的白领也好大学学生也好的老朋友了,今天说说后端数据库里的内容怎么导出成excel表格技术手段后端:Servlet,poi前端:axios啥效果?上图

qs首先呢说说为啥不用json ,嗯因为…懒 因为我自己写后端我还得拿过json字符串来转成集合的形式那不如前端发请求直接给我 key=value的形式呢 怎么做呢?下依赖根目录下集成终端打开npm i qs -S //回车npm i axios -S //回车Vue工程的配置main.jsimport Vue from "vue";import App from "./App.vue";import router from "./router";import store from

正则验证年龄 let checkAge = (rule, value, callback) => { let reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/; //年龄是1-120之间有效 if (value == undefined) { callback([new Error("帐号输入不合法")]); } else { if (value && value.length

需求全选列????<el-table-column label="全选" width="50" type="selection"></el-table-column>整个表格????<el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label="全选

clearFiles()我们提交表单希望清空一下页面上 的上传列表可以这么做????<el-upload......ref="myUpload"></el-upload>Js????onSubmit(){ this.$refs.myUpload.clearFiles()}

Vue axios_crud纯前端练习三 添加+删除添加mockdao层add()函数html+vue添加测试删除mockdao层html+vue删除测试总结添加mock由于上面两篇已经把架子搭好了 我们直接开始 还是从我们的后台mock开始下手ok 在mock文件夹下新建addResp.js 由于原理都是一样的我们快速进行 进入addResp.jsMock.mock('http://mock.api.com/add','post',{ "code":200, "flag":tr

Vue axios_crud纯前端练习二 普通查询部署mockqueryResp.jsmock制造假数据dao层书写dao层query()函数jshtml页面总结部署mock上一篇我们已经把依赖和相关的文件建立完毕了 那么我们从登录的基础上继续 没有部署的小伙伴请移步上一篇Vue axios_crud纯前端练习一 登录queryResp.js在mock文件下建立 queryResp.js文件 目前的结构大概是这样的mock制造假数据因为我们是纯前端项目 并没有后台数据 我们需要自己造 ok打

Vue axios_crud纯前端练习一 登录项目建立导入依赖新建目录静态html书写布局布局mock布局request.jsdao层请求发送html和vue运行总结项目建立导入依赖这里笔者用的时Vscode开发工具所以我们按照vscode来讲解在本地选择新建一个文件夹命名axios_crud并用vscode打开,如图在该目录下初始化对象:点击左侧空白区域,右键在集成终端打开右侧输入框初始化:npm init -y //回车导入依赖npm i vue@2.6