半度℃温热-CSDN博客

原创 WEB前端资源项目整合

vue.js高仿饿了么（1-13章全）链接：https://pan.baidu.com/s/1qYSiYXluA1AlEV0EskxWZw提取码：25z9Vue.js 2.5 + cube-ui 重构饿了么 App链接：https://pan.baidu.com/s/1UZyLkzYMvhUhhX3GH5ITvA提取码：bx53Vue2.0 + Node.js + MongoDB全栈打造商城系统链接：https://pan.baidu.com/s/10Jm22uzp4p2NMMRlNac7Rg

2020-07-30 19:11:20 7393

原创 JS版本号比较大小

在项目开发和运行的过程中，总是少不了各类升级。例如某个功能组件需要更高的依赖库、数据项需要进行兼容等等问题。遇到此类问题开发者需要使用版本号来解决。版本号通常由三部分组成：主版本号、次版本号和修订版本号。当你做了向下兼容的功能性新增时，就需要升级次版本号；当你做了向下兼容的问题修正时，就需要升级修订版本号。通常来说升级会涉及到三个点：向下兼容、协商升级、拒绝服务。

2024-04-17 22:53:28 94

原创 React中redux、react-redux、@reduxjs/toolkit状态管理库的使用方式

【代码】React中redux、react-redux、@reduxjs/toolkit状态管理库的多种使用方式。

2024-04-17 22:04:41 307

原创 JS实现大数相加

在JavaScript中，进行大数相加时，由于JavaScript的Number类型有一定的精度限制，直接相加可能会导致精度损失。

2024-04-10 21:39:27 217 1

原创 vue3中keep-alive的使用及结合transition使用

# 正确用法1. 在组件中使用（这里结合了 transition 内置动画组件）```javascript

2023-08-29 15:29:16 1415 1

原创 Vue导出当前页面为PDF文件

Vue导出当前页面为PDF文件。# 下载插件```javascriptnpm install html2canvas --savenpm install jspdf --save```# 创建导出函数文件htmlToPdf.js```javascript// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default {}

2023-01-06 15:30:39 542 1

原创 vue中实现导出、下载文件

Api// 导出/下载import request from './request';export default { exportData(params) { return request.post('/export', params, { responseType: 'blob' }); },}注意：responseType: ‘blob’下载/导出函数export function downLoad(res, filename) { // res

2022-04-13 18:42:32 6395 4

原创 element-ui的Upload上传图片、文件封装

上传文件<template> <el-upload action="#" list-type="picture-card" :file-list="fileList" accept=".jpg,.jpeg,.bmp,.png,.pdf,.doc,.docx,.xls,.xlsx" : before-upload="beforeUpload" :http-request="uploadFile"> </el-upload></temp

2022-04-13 18:17:07 898

原创 ECharts之横向柱状图一

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-18 08:54:36 5663

原创 ECharts之横向柱状图二

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-17 09:05:35 3455 2

原创 ECharts之3D立体柱状图一

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-16 08:54:40 2652

原创 ECharts之3D立体柱状图二

效果图背景图片下载EChartsnpm install echarts --save引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import echarts from 'echarts'Vue.prototy

2021-11-15 17:10:22 1678

原创常用的正则表达式

# 特殊校验- **手机号码：**`/^(\+86)?1[3-9][0-9]{9}$/ （支持+86）`- **固话（电话）：**`/^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/`- **Email（邮箱）：**`/^(\w-*\.*){6,}@(\w-?)+(\.\w{2,})+$/`- **身份证（18位）：**`/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-

2021-08-23 17:49:07 2149

原创 JS中slice和splice的区别

# slice()**1、String中**- 语法 `string.slice(start, end)` 抽取一个子字符串- 描述 `slice()`将返回一个含有字符串`string`的片段的字符串或返回它的一个子串。但是该方法不修改`string`- 参数 `start：`要抽取的片段的起始下标。如果是负数，那么该参数声明了从字符串的尾部开始算

2021-08-16 15:08:12 1047 1

原创 es6中Set、Map、WeakSet和WeakMap的区别

Set Set 类似于数组，本身是一个构造函数，用来生成 Set 数据结构，成员值是唯一且无序的，常用于数组去重 Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化 Set 数据结构允许存储任何数据，无论是基本数据类型值或者是对象引用 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（=

2021-08-13 15:33:07 911

原创 vue中使用mockjs模拟接口

效果图安装npm install mockjs --save // 三选一就可以了cnpm install mockjs --saveyarn add mockjs新建mock目录 mock目录下新建index.js和json文件 mock下的index文件，注意每改接口后都要重启才能生效// 引入外部资源const fs = require('fs')const path = require('path')const Mock = require('mockjs')

2021-07-22 19:54:28 1670 8

原创 vue中添加水印效果

效果图创建warterMark.js文件在src 目录下创建utils文件，在utils里新建warterMark.js文件let watermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let ca

2021-07-21 16:22:08 1142

原创 vue格式化时间

效果图简单实用，不需要下载插件，在项目中也可以这样用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>格式化时间</title> <style>

2021-07-17 13:50:20 1120

原创 element-ui表格多级表头、表头换行

效果图安装Element-uinpm i element-ui -S引入 Element-ui 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import 'element-ui/lib/theme-chalk/index.css'import

2021-06-01 17:36:21 1879 2

原创微信小程序实现新闻轮播、禁止手动竖向滑动

效果图片WXML 在 swiper-item 上加入 catchtouchmove 方法，截获竖向滑动<view class="container"> <view class="news"> <image class="icon-news" src="/images/news.png"></image> <swiper class="swiper" autoplay circu

2020-12-29 16:04:06 1673 2

原创微信小程序base64转为二维码、条形码图片

亲测可以显示Page({ data: { qrCodeUrl: null }, onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发 }, onShow: function () { this.getQrCode() }, // 获取二维码 getQrCode() { wx.request({ url: '', data: {}, header: { 'c

2020-12-15 15:48:13 2101 1

原创 element-ui自定义非必填字段的格式校验

场景 element 表单里非必填的字段需要校验格式时使用注意 rules 里面非必填字段不要加上 required 属性<template> <div class="container"> <el-form ref="elForm" :inline="true" :model="form" :rules="rules" size="small"> <el-form-item label="姓名" prop="name"&

2020-12-14 10:56:40 2920 2

原创 vue中两种history和hash模式的使用

vue2.0中的history和hash模式 1. history模式import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ mode: 'history', routes: [ { path: '/', name: '', component: '' } ]}) 2. hash模式import Vue f

2020-11-26 19:37:36 5556

原创微信小程序中使用Echarts统计图

效果图下载github：https://github.com/ecomfe/echarts-for-weixin解压之后把 ec-canvas 文件拷贝到小程序项目中WXML<view class="container"> <view class="echarts"> <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas> </view&gt

2020-11-05 10:43:57 5869 17

原创 vue3.0常用eslint配置详解 .eslintrc.js

规则值" off " 或者 0，关闭" warn " 或者 1，警告" error " 或者 2，报错.eslintrc.js配置module.exports = { root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找 env: { // 预定义的全局变量，这里是浏览器环境 amd: true, es6: true, commonjs: true, node: true, jquery: true, br

2020-10-28 16:02:56 6790 1

原创 vue3.0常用配置详解 vue.config.js

在项目文件下的根目录创建 vue.config.jsmodule.exports = { baseUrl: '', // 从 Vue CLI 3.3 起已弃用，请使用 publicPath publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', // 输出文件目录 outputDir: 'dist', // 静态资源目录 (js, css, img, fonts) assetsDir: 'assets', /

2020-10-28 15:24:02 2224

原创微信小程序table表格自定义组件实现

效果属性属性类型默认值必填说明tabDataArray[ ]否数据源columnsArray[ ]是数据列settingObject{ }否自定义样式配置项columns属性类型默认值必填说明labelString是表格标题propArray是表格中需要展示的数据列onclickBooleanfalse否为某一列设置点击事件，若同时为多列设置了点击事件，则只有第一个生效

2020-10-22 17:16:22 10521 36

原创微信小程序map自定义组件实现

效果实际手机效果不会点击时突然闪一下，气泡弹窗也不会被其他坐标点挡住图片鼠标放在图片上可以看到使用的图片名称子组件WXML<map id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;">&lt

2020-10-16 11:24:59 3630 2

原创微信小程序实现tabs标签栏自定义组件

效果子组件WXML<view class="tabs"> <view class="tab-item" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" data-value="{{item}}" bindtap="changeTab"> <text class="tab-text {{currentIndex == index ? 'active'

2020-10-12 21:09:38 2955 4

原创微信小程序中observer的详解

概述 observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段效果

2020-09-29 20:55:21 12541 2

原创微信小程序实现星级评价和效果展示

效果图片WXML<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"

2020-09-26 16:10:28 2863 1

原创 JS中浅拷贝和深拷贝的几种实现方式

概念深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。它们最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。简单来说，假设B复制了A，当修改B时，看A是否会发生变化，如果A变了，说明是浅拷贝；如果A没变，那就是深拷贝浅拷贝1. 用 = 号赋值引用地址let obj = { name: '李四', age: 20, sex: '男', tel: /^1[345789]\d{9}$/, address: undefined

2020-09-22 21:07:29 4995 21

原创 ajax的深入理解及封装

概念 AJAX： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX 不是新的编程语言，而是一种使用现有标准的新方法，一种用于创建快速动态网页的技术 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个

2020-09-22 14:57:04 1352

原创微信小程序实现列表项左滑删除效果

效果图图片WXML<view class="container">  <view class="address"> <view class="left"> <view class="icon"> <image src="../../images/address.png"></image> </view>

2020-09-12 11:29:06 2005

原创微信小程序实现上传图片功能

效果图WXML<view class="img-wrap"> <view class="txt">上传截图</view> <view class="imglist"> <view class="item" wx:for="{{imgs}}" wx:key="item"> <image src="{{item}}" alt=""></image> <view class='d

2020-09-10 11:51:12 14905 40

原创微信小程序禁止转发和长按转发

禁止当前页面转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.hideShareMenu() // 禁止页面转发}禁止当前页面长按转发分享到个人时可以长按转发，分享到群聊里不能长按转发/** * 生命周期函数--监听页面加载 */onLoad: function (options) { wx.showShareMenu({ withShareTicket: true })},/** *

2020-09-05 18:29:30 9905 6

原创微信小程序动态设置页面标题

JOSN文件里设置页面标题{ "navigationBarTitleText": "首页"}JS文件里动态设置页面标题这里设置的标题会覆盖 JOSN 文件里的标题，最好去除 JOSN 文件里的标题/** * 生命周期函数--监听页面加载*/onLoad: function (options) { wx.setNavigationBarTitle({ title: '电影' })},...

2020-09-05 17:09:37 1854

原创微信小程序发送短信验证码倒计时

效果图WXML文件<view class="container"> <view class="userinfo"> <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image> <text class="userinfo-nickname">什么</text> </view> <view

2020-08-27 15:49:10 1415

原创微信小程序列表项数据详情折叠效果

效果图WXML文件<view class="container"> <view class="wrap"> <view class="item" wx:for="{{list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{{item.img[0]}}"> &l

2020-08-15 15:56:06 2239

原创微信小程序实现图片放大预览保存和滑动功能

效果图右边是手机展示效果![在这里插入图片描述](https://img-blog.csdnimg.cn/20200814193808538.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4,size_16,color_FFFFFF,t_70 width=400x #pic_center)WXML文件&l

2020-08-14 19:44:39 2054 6

空空如也

空空如也