mschange-CSDN博客

/**常量：在程序运行期间，固定不变的量常量的分类： 1、字符串常量：凡是用双引号引起来的部分，叫做字符串常量，例如："avc"，"helloworl" 2、整数常量：直接写的数字，没有小数点,例如： 100，200 3、浮点型常量：直接写上的数字，有小数点，例如：3.14，-0.34 4、字符常量：凡是用单引号引起来的字符串，叫做字符常量，例如：'A'，'1' 5、布尔常量：只有两个取值，true以及false 6、空常量：null，代表没有任何数据 */ public class.

2021-04-13 22:36:49 227

原创 react源码解析（四）React.Component()PureComponent()

源文件地址：packages/react/src/ReactBaseClasses.jsgithub地址 * Base class helpers for the updating state of a component. * 相当于Es6 * class Component { * constructor(props, context, updater) { * this.props = props this.context&nb

2021-03-16 11:13:16 244 1

原创 react源码解析（三）context

文件位置：packages/react/src/ReactContext.jsgithub地址export function createContext<T>( // 默认值 defaultValue: T, // calculateChangedBits方法,使用Object.is()计算新老context变化 calculateChangedBits: ?(a: T, b: T) => number,): ReactContext<T> { //

2021-03-16 11:12:34 246

原创 react源码解析（二）createElement以及ReactElement

文件位置：packages/react/src/ReactElement.jsreact的jsx语法最终会通过React.createElement方法转为虚拟dom，如下图所示github地址相关内容可以在react官网了解https://reactjs.org/ * createElement()负责生成虚拟 * @param {type接受的是标签名称*} type * @param {config接受的是包含的props，style，class等*} config * @param

2021-03-16 11:11:50 220

原创 react源码解析（一）暴露出来的方法

为了能够加对react熟悉，所以fork了react源码，进行阅读。方便自己学习记录笔记，文中有的地方词不达意，见谅。github地址eact所提供的的api方法以及hooks方法从什么文件导出的具体方法入口为packages/react/index.js代码如下：它暴露出来了，react所提供的的api方法以及hooks方法等// react抛出来的方法export { // this.props.children Children, // 创建ref createRef,

2021-03-16 11:10:33 622

原创 vue3+element-plus实现form表单提交

vue2.0可以使用this，如果配合element的form表单的话，会比较方便，至于写这次的笔记是因为，3.0使用setup()以后不存在this，里面的model以及rules校验，最后的提交都跟之前有所不同，故有此文章。vue2.0配合element的代码如下<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-fo

2021-01-08 17:28:25 22839 31

原创 vue3挂载全局方法

vue2.x的全局挂载方法为如何所示：import Vue from "vue";import Echarts from "echarts";Vue.prototype.$echarts = Echarts;new Vue({ router, store, render: (h) => h(App),}).$mount("#app");使用的时候如下this.$echarts.xxx()vue3.0全局挂载方法以Ant Design Vue中的mess.

2021-01-07 15:43:52 13484 13

原创重学react(一)

react组件有两种形式，分为class组件跟function组件，以实现clock为例子，分别实现。代码如下import React, {useState, useEffect} from 'react'function App() { return ( <div className="App"> 6546546 <ClassComponent /> <FunctionComponent /> </

2020-11-18 11:01:21 105

原创关于echarts实线与虚线相结合（折线图）

效果如下图所示：代码如下：option = { title: { text: '实线与虚线' }, xAxis: { data: [220, 182, 191, 250, 290] }, yAxis: {}, series: [{ type: 'line', data: [-220, -182, -191, -250, -290] }, { type: 'l

2020-11-02 14:34:04 4487

原创 react native windows 启动报错处理unble to load script.Make sure you are either running a Metro server...

react native项目初始化启动报错。报错如下图所示解决办法：找到reactDemo\android\app\build.gradle里面的build.gradle文件，搜索project.ext.react，并找到如下jsproject.ext.react = [ enableHermes: false, // clean and rebuild if changing]修改为project.ext.react = [ enableHermes:...

2020-08-13 10:41:15 298

原创 koa2中使用的mysql总结

直接上代码：router.get('/', async (ctx, next) => { await ctx.render('index', { title: 'Hello Koa 2!' })})router.get('/string', async (ctx, next) => { let ev = 1; let age = 60 /**条件查询 */ sql.query(`select id from user where id=${ev}&am

2020-06-16 11:24:15 720

原创 Vue源码解析数据响应式(二)

Vue2.0数据响应式是利用ES5的Object.defineProperty以及watchers以及observe数据劫持实现，Vue3.0是利用ES6的proxy实现1、数据响应式在源码中的vue\src\core\instance\state.js文件中/* @flow */import config from '../config'// Watcher 和组件挂钩或者和用户定义的观察表达式挂钩，数据变更后执行更新import Watcher from '../observer/wa

2020-05-26 09:48:30 321

原创 vue2.0源码解析(一)

1、先下载vue源码(当前版本为：2.6.11) 地址：git clone https://github.com/vuejs/vue.git2.切换到package.jsondev脚本中 -c scripts/config.js 指明配置⽂件所在，参数为：TARGET:web-full-dev3、根据命令变量在scripts/config.js中找到如下代码'web-full-dev': { entry: resolve('web/entry-runtime-wi..

2020-05-25 17:38:39 1546

原创 vue-cli4.0脚手架建项目报错

报错信息如下：npm ERR! Unexpected end of JSON input while parsing near '...sh_time":144545599958'npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2020-05-19T05_29_49_168Z-debug.log ERROR comman

2020-05-19 13:38:04 320

原创文本框输入表情限制

因项目需要，不能输入Emoji表情解决1：let wxName = wxName.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");以上方法可能由于机型不一，所以，在有的手机上面可以处理，有的上面仍没办法处理。解决2：let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E8...

2019-12-09 15:59:57 3535

原创移动端左滑删除在ios10以下兼容处理

项目购物车要实现左滑删除，网上找了一个组件，用起来很方便，但是在ios10以下滑动不了https://segmentfault.com/a/1190000011062124下面是这个大哥的代码：<template> <div> <div class="slider-item" data-type="0"> <div ...

2019-04-30 10:38:24 459

原创 vue-cli3.0+vant出现的问题总结

1、轮播图在ios9以下都不能滑动解决办法：https://github.com/surmon-china/vue-awesome-swipernpm install vue-awesome-swiper --save全局引入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper...

2019-04-30 10:14:40 4832

原创移动端一个按钮长按以及点击事件（js）

应需求，移动端点击按钮以及长按按钮，做出不同的操作（同一个按钮）；<div class="join-car" @touchstart="gotouchstart" @touchend="gotouchend">加入购物车</div>gotouchstart(e) { e.preventDefault(); clearTimeout(ti...

2019-04-30 09:54:26 2684

原创 element-ui中的多层表单循环验证处理

项目中有如下需求：可以添加一个列表 => 添加弹框 => 里面可以添加多个产品（产品里面可以添加多个对接人跟政策），所以数据结构应该如下ruleForm: { companyName: '', // 公司名称 financialProduct: [ // 产品数组 { produc...

2019-03-27 11:28:48 5897

原创 web-view内嵌web分享功能以及小程序跟web分离实现

1、在小程序中添加新的页面，进行跳转处理html:<web-view @message="onMessageReceive" src="{{newsUrl}}"></web-view>js:data = { newsUrl: '', // 跳转的路径 openId:'', // 跳转携带的参数 agentId:'', // 跳转...

2019-03-12 18:02:46 1047

原创 vue服务端渲染nuxt（三） nuxt.config.js 配置

nuxt.config.js 配置结构，如下图所示1、build：应用依赖第三方模块2、cache：该配置项让你开启组件缓存策略以提升渲染性能。3、css：该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。4、dev：该配置项用于配置 Nuxt.js 应用是开发还是生产模式。5、env：该配置项用于定义应用客户端和服务端的环境变量。...

2019-01-30 11:37:18 6394 1

原创 vue服务端渲染nuxt（二）项目目录结构

上期我们看了nuxt的安装，这次我们看下nuxt的项目目录结构，方便我们写项目的时候进行一些合理的配置，如下图所示 1、assects：静态资源文件，图片，共用的css等2、components：组件存放的目录3、layouts：用于组织应用的布局组件，该目录名为Nuxt.js保留的，不可更改 4、middleware：目录用于存放应用的中间件5、pag...

2019-01-30 11:20:20 681

原创 vue服务端渲染nuxt（一）

由于项目需要，所以对nuxt进行了初步学习，自己也进行总结一下，方便以后查找浏览1、首先创建它的脚手架 create-nuxt-app，我们可以使用npm进行安装npm install create-nuxt-app -g create-nuxt-app '你的项目名称'2、如果你的npm版本在5.2.0，你可以使用下面的命令进行安装npx create-nuxt-app...

2019-01-23 18:39:06 444

原创小程序自定义是否转发（或分享）

项目中首页、音频、视频、自定义二级页都是自定义配置、以及是否分享都是在后台管理进行配置但是onShareAppMessage回调控制不了，是否分享这样的功能。根据接口返回是否分享的字段，我们通过判断。使用微信小程序提供的方法可以控制。方法如下wx.hideShareMenu(); ...

2018-12-03 13:27:45 958

原创 mpvue点击按钮转发引起的坑

项目中用任务得金币的功能，用户通过转发分享，被分享的用户登录并且浏览后，分享的用户能得到相应的金币，并且点击不同的列表，分享的path，title，以及图片也是不一样的，引发的问题，我在onShareAppMessage回调函数中拿不到数据原生小程序可通过一下方法进行解决<button open-type="share" class="share_btn" data-a="12"&...

2018-11-07 14:49:10 3981

原创小程序中的倒计时

var total_micro_second = 60 * 1000 * 60 * 24;/* 毫秒级倒计时 */function count_down(that) { // 渲染倒计时时钟 var arr = date_format(total_micro_second); that.setData({ clock:arr[5], secon...

2018-10-18 15:51:53 511

原创使用mpvue关于同一页面跳转

问题描述： A页面(A数据) 点击跳转到 A页面,(此时是B数据), 点击跳转到 A页面,(此时是C数据),然后再点击右上角返回, 回到A页面B数据，再点击右上角返回，回到A页面A数据解决办法：根据上面的大佬方案解决，但是在清除数据的时候，在mounted生命周期中发现并没有清除，在onHide生命周期中可以解决该问题代码：let dataArr = [];async m...

2018-10-16 14:01:41 593

原创 koa2中使用cookie（六）

我们项目中对数据的存储有很多种，cookie，sessionStorage，localstorage等等；我们今天看下koa中对cookie的存储以及读取。koa提供了从上下文直接读取、写入cookie的方法ctx.cookies.get(name, [options]) 读取上下文请求中的cookiectx.cookies.set(name, value, [options]) 在上下文中...

2018-07-16 14:04:26 2713

原创截取地址栏的参数

我们在项目中可能会有相同的部分的内容，但是为了项目简单，就用一个页面承接多个入口。所以我们需要判断它的来源，到底是来自哪个入口，遇到这种情况，我们在跳转路由的时候，会传递参数，有人可能会说，我们跳转路由传参的时候，在生命周期函数里面，直接使用this.$router.query.id获取不就可以了吗？是可以的，也没有问题，但是我们跟安卓或者ios的时候，我们这样是拿不到传递过来的参数，这样，我们就...

2018-07-11 15:43:21 869

原创 element-ui中远程搜索select

项目中有下拉框，需求：获取焦点，可以让用户选择，也可以让用户在输入框中输入，实现模糊搜索，也可以多选。因为使用element-ui，所以就使用了select的高级用法，需求如下图所示我们以代码的形式进行呈现<template> <div class="short-visit"> <el-form :model="ruleForm" :rules="...

2018-07-03 11:20:23 29472 9

原创 element-ui中的时间插件坑

最近项目有这个一个需求，如下图所示两个时间，一个是离开时间，一个是抵达（回来）的时间，选择离开时间，需要去判断，抵达时间有没有值，如果有值，那么离开时间必须小于抵达时间并且大于当前时间，如果抵达时间没有值，那么离开时间大于当前时间，当前之前的时间不能让用户选择；同理，抵达时间也是如此。我们看下面的代码进行说明<template> <div> <el...

2018-07-03 09:41:39 13318 9

原创 element-ui中表单验证rules

我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等而初次使用element-ui，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比别人多写了500行的js，有木有很夸张，所以，这个项目结束了，自己呢，去研究了下rules的神奇之处若有不足，请指出来，谢谢大佬们<template> <div class="short-vi...

2018-07-02 19:18:05 44722 1

原创关于element-ui中上传图片样式自定义的坑

我们在项目中可能遇到上传图片的问题，但是element-ui中提供的上传图片样式不满足我们的需求，我们在实现的时候可能会遇到坑。以我在项目中上传图片为例，如下图所示：像这种，在element-ui中是没有这种样式的，所以我们只能自己写，我们先看下代码<el-upload ref="foreignPersonUploadItem" class="avatar-uploa...

2018-07-02 18:21:42 22168 10

原创 vue2.0项目中的代理跨域proxyTable

前端跨域很常见，最近用vue做项目，用webpack中的代理跨域proxyTable解决，非常完美。所以进行总结一下，避免自己遇到类似的问题。我们先找到项目中的config目录下面的index.js，如下图所示然后在index.js中写入下面的代码，进行代理处理module.exports = { dev: { proxyTable: { '/getClubItems': ...

2018-06-29 15:03:05 3573

原创 vue2.0中axios拦截详细说明

最近项目中用vue全家桶实现，避免不了使用axios，axios不仅可以用来请求数据，沟通前后端的作用，还有以下的http请求拦截作用、http响应拦截作用。/** * http配置 */ // 引入axios以及element ui中的loading和message组件 import axios from 'axios' import { Loading, Message } fro...

2018-06-13 17:01:32 441

原创 koa2利用bodyparser中间件处理post请求（五）

上篇的原生写法不利用开发，我们使用已经有的插件koa-bodyparser来实现接收并解析post请求1》安装中间件使用npm进行安装，需要注意的是我们这里要用–save，因为它在生产环境中需要使用。npm install --save koa-bodyparser@32》引用const bodyParser = require('koa-bodyparser');我们需要在代码中引入，使用ES...

2018-06-11 14:19:51 2664

原创 koa2接收post请求参数进行处理（四）

我们发起一个请求后，肯定不是做一个渲染这样，我们要对参数进行解析，最终返回，在koa2中是以下这样解决的：const Koa = require('koa');const app = new Koa();app.use(async(ctx)=>{ //当请求时GET请求时，显示表单让用户填写 // 我们利用上文中说到的ctx.method判断请求的类型 if(ct...

2018-06-11 13:55:22 7589

原创 koa2的post请求参数（三）

ctx.request:是Koa2中context经过封装的请求对象，它用起来更直观和简单。ctx.req:是context提供的node.js原生HTTP请求对象。这个虽然不那么直观，但是可以得到更多的内容，适合我们深度编程。

2018-06-06 10:30:39 2884

原创 koa2的get请求获取参数（二）

在koa2中获取get请求参数：获得GET请求的方式有两种，一种是从request中获得，一种是一直从上下文中获得。获得的格式也有两种：query和querystring。我们先看一个请求的例子：const Koa = require('koa');const app = new Koa();app.use(async(ctx) => { //从request中获取GET请求 ...

2018-06-05 10:47:57 16936

空空如也

空空如也