- 博客(52)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 typescript的axios封装，实现回调带有类型
需要实现的效果是请求成功之后使用返回的数据不需要抓包看属性，直接获取对象属性开始使用。
2022-07-26 16:10:16
753
1
原创 js遍历对象
js遍历方法第一种const obj = { id:1, name:'zhangsan', age:18} for(let key in obj){ console.log(key + '---' + obj[key]) }第二种const obj = { id:1, name:'zhangsan', age:18 }
2021-10-08 11:53:06
99
原创 整理一些好使的网站
1. 纹理库 配色不错！！！http://www.wenliku.com/2. 图贴士 gif处理https://www.tutieshi.com/3. 100font 字体库https://www.100font.com/
2021-08-21 11:12:32
168
原创 js 控制滚动条位置，实现 锚点效果
<div id="test" style={{ backgroundColor: 'red' }} onClick={() => { let test = document.getElementById('a'); document.body.scrollTop = test?.getBoundingClientRect()?.top||0; }} .
2021-08-10 11:07:22
713
原创 react 实现一个简单的excel表格（可以改变宽度、实时输入、select *ui自行优化，思路可以参考）
首先看效果：1、首先就是主要代码 index.tsximport { FC, useEffect, useRef, useState } from "react";import columns, { columnsType } from "./config";import { Input } from "antd";import "./style.less";//是不是拖拽情况let isMouseWidth: boolean = false;//相同class的集合let clas
2021-08-03 22:22:26
1493
4
原创 antd pro component - EditableProTable 表单重置
antd pro component - EditableProTable受控情况之下，改变 dataSource之后，但是表格编辑组件还是记录上次编辑状态记录的数据，没有及时更新，解决办法就是手动更新表单（其实整个表格就是一个form）开始干活，上代码！(代码直接从项目摘出来的，看起来有点乱，核心部分都在） // 声明form实例 const [form] = Form.useForm(); console.log('打印formValues：',form.getFieldsVal
2021-07-29 09:43:23
4532
4
原创 es6的深拷贝
1、场景描述react项目 ，拿到后台数据之后需要经过处理之后显示在页面，所以：const [primary, setPrimary] = useState<OrderCargoDtoType[]>([]);const data = primary for (let i = 0; i < primary.length; i++) { data[i].itemVolume = data[i].itemVolume / 1000000; }上面的代码，看起来就
2021-07-01 11:43:35
2009
原创 react hook使用useState()更新状态（state）异步导致不能及时读取更新之后的数据
1、场景描述我在更新一个状态之后要立马用这个状态去更新其他状态我的源代码const onChange = (nextTargetKeys: any) => {//更新状态 setTargetKeys(nextTargetKeys); let v = 0; let n = 0; let g = 0; //立马使用 targetKeys.forEach((item: number, index) => { v += mockData[
2021-07-01 09:38:25
9580
原创 React路由守卫，用于自动登录页面和404页面的指向
首先明确，在之前的版本中，React Router 也提供了类似的 onEnter 钩子，但在 React Router 4.0 版本中，取消了这个方法。React Router 4.0 采用了声明式的组件，路由即组件，要实现路由守卫功能，就得我们自己去写了。BeforeEach.jsximport { Route, Redirect } from "react-router-dom";import React, { Component } from "react";class BeforeEach
2021-06-16 16:37:08
489
原创 React笔记
react学习笔记基础篇1、条件渲染const isLoading = true;const loadData = () => { if (isLoading) { return <div> loading...</div>; } return <div>数据加载完成。。。</div>;};const loadData2 = () => { return isLoading?(<div> loa
2021-06-14 00:30:44
180
原创 typescript+cookie的封装
/** * * @param key 就是key * @param value 就是value * @param time:number 以毫秒的形式设置过期时间 ===》3000 * @param time:string 以时间字符的形式设置过期时间 ===》Sat, 13 Mar 2017 12:25:57 GMT * @param time:Date 以Date设置过期时间
2021-05-28 14:22:09
1996
原创 vue监听返回键
有这么一个应用场景，axios发送请求携带token,当后台检测到token过期（或者压根没有登录），返回相应的状态码。axios在响应拦截处判断状态码是不是以上情况，之后跳转到登录页面。这里存在一个问题是：a页面------>b页面 -------->生命周期函数（mounted）自动发起axios请求 ------>返回token过期（未登录）------>直接跳转到 login页面 ------> 用户不登陆，并且点击了返回键(这个时候就出现了bug)-----
2021-05-19 14:45:15
1556
1
原创 vuex持久化
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。但是开发者往往把他当作数据仓库使用（确实香），但是vuex储存的状态在用户刷（F5)之后状态就重置了，数据丢失。传统的前端保存数据是在 localStorage或sessionStorage，但是它俩的操作性远远不如vuex。这时候就可以采取把他们结合的方法。插件 vuex-persistedstate插件就能完美解决这个需求。安装方式npm install vuex-persistedstate --save配置 index.js（v
2021-05-17 09:40:37
220
1
原创 vue3.0模块化(modules) vuex
当项目的vuex储存太多时，非常臃肿 ，特定是多人合作的公司项目，为了便于项目的维护，采取vuex模块化。更具模块建立文件首先拆分vuex index.js里面的模块import { createStore } from 'vuex'import mutations from "@/store/mutations";import actions from "@/store/actions";import getters from "@/store/getters";import modul
2021-05-14 09:56:58
2489
原创 当前页面的video只播放一个
nextTick(function () { //当前页面的video只播放一个 var videos = document.getElementsByTagName("video"); for (var i = videos.length - 1; i >= 0; i--) { (function () { var p = i; videos[p].addEventListen..
2021-05-07 14:21:25
3804
原创 js转化字符串、emoji为Base64
base64.js (function () { var BASE64_MAPPING = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i
2021-05-07 10:11:57
627
原创 vue点赞特效
<template> <div class="videoEvent"> <div class="item" @click="canvas"> <canvas id="cvs"></canvas> </div> </div></template><script>import LikeHeart from "../../../common/flutter-he
2021-05-06 16:24:24
1176
1
原创 vue路由拆分模块管理
路由拆分模块，便于管理，拆分之后的文件夹层级目录pano.js/** * 全景页面的路由 */export default [ { path: '/designDescription', name: 'designDescription', component: () => import('../../views/panoramas/DesignDescription.vue'), meta: { title: '设计说明'
2021-05-06 13:58:51
295
原创 uni-app，携带cookie（用户后台shiro的认证）
首先要知道的是，微信小程序是没有cookie机制的 ，也就是说，当uniapp运行在微信端是没有cookie供后台认证，需要开发者自定义cookie,并且让请求携带。android、ios同理。h5则不用考虑这个问题，uniapp自己携带无需考虑。const http = (options) => { return new Promise((resolve, reject) => { uni.request({ withCredentials: true, url: pubU
2021-04-25 11:23:04
17162
7
原创 uni-app网络请求的封装
http.js// 环境的切换let pubUrl = ""if (process.env.NODE_ENV === 'development') {// 开发环境 pubUrl = "http://192.168.1.101:8888/****"} else if (process.env.NODE_ENV === 'debug') { pubUrl = "" // 调试环境} else if (process.env.NODE_ENV === 'production') { pubUr
2021-04-25 11:21:45
1229
原创 vue检测div滚动到底部
nextTick(() => { const el = document.querySelector(".list"); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if...
2021-04-15 18:40:20
1284
原创 Vue实现简单的瀑布流
<template> <div> <div class="list"> <div :class="[ index == 1 ? 'listItem2' : 'listItem', index % 2 == 1 && index != 1 ? 'listItem3' : 'listItem', index==list.length-1&&
2021-04-15 16:15:47
213
原创 js转化对象为Formadata
//转化对象为formdataconst paramsToFormData = (json) => { const formData = new FormData(); Object.keys(json).forEach((key) => { if (json[key] instanceof Array) { json[key].forEach((item) => { formData.append(key, item); });
2021-04-15 11:36:13
356
原创 Vue3.0路由传参
Vue 之路由传参在 vue3.0 里面使用路由必须要引入 useRouter 和 useRouteimport { useRoute, useRouter } from 'vue-router'秉承谁长谁先死,Router 长 所以他负责跳转,Route 负责接收数据传参使用query和params，主要区别就是前者使用path进行跳转，后者使用name进行跳转//使用queryfunction useHooks() { const Router = useRouter() //跳转
2021-04-12 13:49:23
5637
原创 vue的axios网络请求的封装，包含请求时的加载提示（vue3.0环境）
1.处理跨域有些后台没有处理跨域，我们可以直接在前端进行处理vue.config.jsmodule.exports = { devServer: { open: true, //是否自动弹出浏览器页面 // host: "localhost", port: '8080', https: false, hotOnly: false, proxy: { '/api': { target: 'http://192
2021-04-02 16:59:09
893
原创 微信小程序的缓存
onLoad: function (options) { //获取缓存 const Cates = wx.getStorageSync('cates') //判断缓存是否存在 if (!Cates) { //不存在，去网络请求 this.apiCategories() } else { //存在判断时间是否超时 if (Date.now() - Cates.time > 1000 * 5) { ..
2021-03-29 18:04:01
1041
原创 微信小程序网络请求的封装（request）
request的封装，这部分是每次请求的必经之路http.jsconst pubUrl = "https://api-hmugo-web.itheima.net/api/public/v1"//这是我要请求的数据接口的公共部分const http = (options) =>{ return new Promise((resolve,reject) => { wx.request({ url: pubUrl+options.url, method:opt
2021-03-29 14:05:32
331
原创 vue3.0获取dom
<div @click="test" ref="myRe">test</div> setup(props, context) { const state = reactive({ active: [], }); const myRef = ref("carousel"); const test = () => { console.log(myRef.value); }; onMoun...
2021-03-22 13:26:14
733
原创 Vue3.0子向父传参
1、父组件<template> <view class="index"> <BaseNavBar :showBack="false" title="首页" @onBack="onBack"></BaseNavBar> </view></template> <script>import { ref, reactive } from 'vue'; import BaseNavBar
2021-03-19 17:40:10
1130
原创 input选择图片预览
export default {props: [“msg”],setup(props) {const state = reactive({// myMsg:props.msgmyMsg: inject(“msg”),});function Id(id) {return document.getElementById(id);}function changeToop() {var file = Id(“file”);if (file.v...
2021-03-16 09:39:37
391
原创 springboot文件上传
//文件上传@RequestMapping(value = "/userPhoto/{user}", method = RequestMethod.POST) @ResponseBody public void userPhoto(@Param("file") MultipartFile file, @Param("user") String user) throws IOException { String path =
2021-03-15 16:54:29
95
原创 Vue3.0全局.less文件
添加的依赖vue add style-resources-loadervue.config.js的配置const path = require("path");module.exports = { chainWebpack: (config) => { const types = ["vue-modules", "vue", "normal-modules", "normal"]; types.forEach((type) => addStyleResource(c
2021-03-14 09:19:04
245
原创 Vue.js 3.x学习笔记
1.setup()<template> <div class="about"> <h1>This is an about page</h1> <div>{{msg0}}</div> <div id="a" @click="changeMsg">{{ msg }}</div> </div></template><script>impor
2021-03-13 13:35:31
267
原创 axios封装（vue3.0环境）
1、http.jsimport axios from 'axios'// 环境的切换if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://10.22.160.24:8888/lanlema/user/' // 开发环境} else if (process.env.NODE_ENV === 'debug') { axios.defaults.baseURL = 'http://10.22
2021-03-13 13:34:39
701
原创 mybatis-plus的小坑
1.首先附上demo地址https://gitee.com/wangming0123/mybatis-plus2.排坑当使用mapping.时出现类似bug时注意以上图片
2021-03-12 13:57:48
133
1
原创 Less的学习笔记
Less的学习笔记1.首先附上less的官方网址https://less.bootcss.com/2.其次是自己的码云地址（gitee)https://gitee.com/wangming0123/less_note笔记内容：官方文档的demo实现。
2021-03-11 11:23:32
81
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人