- 博客(94)
- 收藏
- 关注
RSS订阅
原创 CSS3--Flex布局
Flex布局CSS2传统的盒模型采用float – position布局方式。【PC端】CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootstrap】盒模型分类盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式Flex布局的术语Flex Container：Flex容器。启用了弹性盒布局（display:flex;）的块级元素被称为Flex容器。Flex...
2019-09-10 19:06:32
400
转载 WebStorm打不开解决办法
太久没用WebStrom，要用的时候，突然发现打开要密钥了。然后卸载，装个最新的吧，装完发现打不开了。。重启电脑、双击、右击管理员打开，都没任何反应。卸了装，装了卸，都不行。猜想到可能是之前的jetbrains-agent.jar破解插件引起的。但已经卸得干干净净了，怎么还会。看了 exe根目录下【webstorm64.exe.vmoptions】也没有指向jar文件。偶然发现根目录下，有个【webstorm.bat】，打开也是一闪而过。就在cmd模式下再打开，就看到了异常内容了。显示找不
2022-01-10 11:05:41
5760
原创 React 非受控表单组件
表单元素不采用value-onChange/checked-onChange方式来对state区中的数据进行双向绑定，我们就说表单元素是非受控表单元素。非受控表单元素需要使用<form></form>标记对。一、非受控文本框非受控文本框采用defaultValue来设置初始数据，defaultValue只能设置一次。<form>带有一个onSubmit事件，当表单中具有数据提交功能的按钮单击时，会自动执行这个事件。非受控文本框中设置一个ref属性，在onSub
2021-01-04 17:07:43
242
原创 React 受控表单组件
React 受控表单组件受控组件（Controlled Component）：组件的数据受到state组件状态的控制（组件的数据和state组件状态双向绑定）const {Component,Fragment} = React;//受控表单组件class FormItem extends Component{ constructor(props){ super(props); this.state = { nick:'', /
2020-12-31 16:38:30
278
原创 Color调色板 (React版)
案例：Color调色板兄弟组件之间的数据传递方式：现将数据传递给父组件，父组件再将数据传递给另一个子组件。const {Component,Fragment} = React;//子组件 ColorBoardclass ColorBoard extends Component{ render(){ const {color} = this.props; return( <Fragment>
2020-12-29 18:45:29
1056
原创 todoList (React版)
效果图：该案例引入了：<link rel="stylesheet" href="style/bootstrap.css"><div id="app"></div>//组件TodoItem(子组件)class TodoItem extends React.Component{ //删除待办事宜 deleteItem(index){ this.props.onCustom(index); } render(){
2020-12-28 19:45:14
240
原创 React基础知识(一)
一、搭建React工作环境React的核心库：react.development.js。React进行Dom操作的库：react-dom.development.js。将JSX语言转换为JavaScript语言：babel.min.js。如果我们将所有的React代码都书写在HTML文档中，则页面的启动不需要服务器。如果我们将所有的React代码都书写在独立的js文件中，则页面的启动需要服务器。<!-- 注:引入顺序不可改变 --><script type="text/j
2020-12-28 19:38:05
151
原创 认识Vue源码 （2）-- 手写类Vue框架：Zue
一、手写类Vue框架：zueclass Zue{ constructor(options){ //构造函数：this永远指向实例 }}1、在zue实例下创建$el，并指向挂载点this.$el = document.querySelector(options.el);2、在zue实例下创建$options，指向zue实例时的选项this.$options = options || {};3、在zue实例下创建$data，指向Vue实例的数据区内容this.$data = opt
2020-11-02 10:11:08
390
1
原创 认识Vue源码（1）
一、预备知识1、节点与节点类型如何获得元素节点var elementNode=document.querySelector('selector');var elementNodes=document.querySelectorAll('selector');如何获得属性节点（一个元素节点的html属性）var attrs=elementNode.attributes; //返回elementNode的所有属性节点的集合var attr=elementNode.getAttrubuteNo
2020-09-22 22:16:05
149
原创 利用canvas开发一个绘图板
【底部附有制作绘图板完整代码】编码过程中会遇到一些原生js的技术，小编会先罗列出来。1、在for循环中为多个元素利用索引值绑定事件，会产生异步问题。问题所在：在事件代码内部可以进行各种操作，就是不能引用循环变量。两种解决方案解决方案：利用一个自执行函数包裹住循环体，并将循环变量作为参数传递进去。//为每一个颜色设置单击事件，并让所有的颜色具备.currentColor类//自执行函数：语法(function(形参){})(实参)；//不一定非要拿小括号包裹起来，也可以在函数前面加单目运
2020-09-21 22:21:35
493
1
原创 canvas技术
【认识CAnvas技术】一、计算机中的图的分类1、位图位图：在计算机中使用像素点来描绘的图像被称为“位图”。展现更加丰富的颜色数，适用于表达真实的场景。放大之后会有失真。位图的格式：.jpg、.png、.gif等。2、矢量图矢量图：在计算机中利用数学公式对图形的表达进行精确的计算，得到的是“矢量图”。矢量图适用于表达线条和线条之间的关系。矢量图放大之后不会失真。矢量图只能在特定软件中放大不失真并可以使用，在设备上无法直接使用，需要转换成位图使用。二、认识canvas标记对
2020-09-19 23:41:57
942
原创 虚拟DOM技术（1）
VDOM的第一个目的：完成在Vue下实现DOM操作的功能。VDOM的第二个目的：实现比原生的DOM操作还要快的页面渲染机制。VDOM的本质：利用js对象模拟DOM节点。一、利用render函数代替组建中的templaterender函数的功能：在创建组件是实现DOM结构的生产，和template完全一致。格式：Vue.component('my-com',{ render:function(creatElement){ return creatElement('div'); .
2020-08-11 17:53:06
319
原创 Node.js（2）模块与包
一、模块（module）：本章主要讲解模块与包，认识模块请看小编上一篇文章Node.js的基础知识。1、 引入模块时的路径问题：（1）引入核心模块，不需要考虑路径，直接书写模块名即可。var http = require('http'); //引入核心模块http，并将其赋值给一个模块对象。（2）引入模块文件：引入本模块同路径下的模块：var 变量 = require('./模块名');引入本模块同路径下的下一级路径下的模块：var 变量 = require('./模块名');引入本
2020-08-02 00:45:05
177
原创 Node.js（1）Node.js的基础知识
Node.js严格来说不是一个框架，而是一个平台。node.js的技术栈：Node.js的核心模块。至少要学习一个Node.js下的框架：Express框架、KOA框架。模板引擎：是一种编译型HTML语言，例如：Pug(Jade)、EJS等。编译型CSS：Less/Sass/Stylus等。数据库：mongoDB、MySQL两种开发模式的区别前后台分离的开发模式Node开发模式一、MVC架构M：模型（Model），模型和数据有关。V：视图（View），视图和页面（模板引
2020-08-01 22:00:12
212
原创 uni-app app平台微信支付
一、App平台支付流程流程：支付平台功能申请 -> manifest.json 里配置支付参数 -> uni-app 里调用 API 进行支付二、微信App支付功能申请到 微信开放平台 申请移动应用并开通支付功能，申请应用后可以获取 AppID 和 AppSecret 值应用接入 微信商户平台，选择 App 支付开通支付功能后可获取支付业务服务器配置数据：PARTNER（财付通商户号）、PARTNER_KEY（财付通密钥）、PAYSIGNKEY（支付签名密钥）需要将从微信开放平台申
2020-07-02 10:30:51
8534
9
原创 uni-app app平台支付宝支付
先在uni-app中manifest.json中：App SD配置支付在uni-app中manifest.json中：源码视图配置//支付宝支付uni.getProvider({ service:'payment' ,//支付 success:(res)=>{ console.log(res.service); //服务类型：payment console.log(res.provider); //不同服务类型下可能的取值：["alipay","wxpay"] if(res
2020-07-02 10:03:34
5258
1
转载 Android平台签名证书(.keystore)生成指南
Android平台打包发布apk应用，需要使用数字证书（.keystore文件）进行签名，用于表明开发者身份。Android证书的生成是自助和免费的，不需要审批或付费。可以使用JRE环境中的keytool命令生成。以下是windows平台生成证书的方法：参考文档：uni-app官网 Android平台签名证书(.keystore)生成指南安装JRE环境（如已有可跳过）可从Oracle官方下载jre安装包：https://www.oracle.com/technetwork/java/javas
2020-07-02 09:34:10
734
原创 uni-app修改本地存储中key的单个值
let _userInfo = uni.getStorageSync('userInfo');_userInfo.nickName = res.data.nickName;uni.setStorageSync('userInfo',_userInfo);
2020-05-31 00:40:13
3213
原创 用户登录的token认证
1、注册成功的用户，后台会在数据库的users表中分配一个唯一的token值（十六进制、加密）2、登录成功之后，后台会为前端返回该用户的token值*用户的登录密码在数据库中也是加密（MD5）的。3、在所有和用户相关的接口调用过程中，token值必须作为请求头参数传递给后台wx.request({ url:,//请求地址 data:{ //普通参数 }, header:{ token: //token值 }, success:(res)=>{ console.log(r
2020-05-31 00:34:24
2295
原创 购物车的开发原理
一、传统购物车实现原理：在数据库中设置一个存储购物车信息的数据表。1、涉及到的数据表：商品/productproIdbrandnamenumaddresspic商品id品牌品名库存数量单价产地购物车/carcarIdproIdnumuserIdispay购物车id商品id购买数量客户id是否支付ispay：通过标志变量表示购物车条目是否有效，不删除购物车条目的原因是巍峨进行购买习惯的分析。注意car表将存储所
2020-05-31 00:27:59
770
原创 uni-app对富文本进行优化
1、让富文本段落两端对齐，并首航缩进需要将相应的CSS代码施加在富文本标记对中。<rich-text class="richText"></rich-text>.richText{ text-align:justify; text-indent:2em;}注意：对于富文本标记对内部的“文本标记对”不能设置样式。2、首行缩进导致图片说明文本具备缩进大小。解决：let reg1=new RegExp("<p><img","gi"); // le
2020-05-22 13:48:04
1790
原创 element UI表格绑定动态数据与selection复选操作的坑
当<el-table></el-table>的数据:data是一个动态数据时，若表格具备selection列，且对当前操作的事件（例如selection-change）也具备对变量的操作时：表格的复选功能会执行两次。...
2020-05-07 10:59:42
3493
原创 数组元素的批量删除
//获取到要删除的客户的索引值let temp = this.userClients.map(item=>{ //this.userClients所有选中的要删除的元素（数组） return this.clientData.indexOf(item) //this.clientData所有的客户信息元素（数组） //在所有的客户信息中查找到要删除的元素，返回其索引值，并赋值给te...
2020-05-06 18:08:56
1224
原创 Vue中的axios请求（get与post）
接口文件的主要内容（1）接口功能（2）接口地址（3）接口参数：参数个数。参数恨意，数据类型、示例值等（4）请求方式：get | post（5）返回值get和post方式的区别（Java）：get：所有的参数在地址栏显示。（Java利用get提交数据将，非ASCII字符需要转码）post：地址栏没有参数。（Java利用post提交数据，非ASCII字符不需要转码）一、调取接口先要安...
2020-05-06 15:17:10
787
原创 百度图表（一）
一、学习百度图表插件ECharts百度图表官方域名为：http://echarts.baidu.com。可以从该网站上下载百度图表的js文件，该文件的文件名为：echarts.js在使用百度图表的HTML文档中加载下载的echarts.js文件：<script type="text/javascript" src="js/echarts.js"></script>...
2020-05-05 21:31:44
3376
原创 Element UI框架中表单数据的验证方式
在Element UI框架中，表单是使用<el-form>和标记对<el-form-item>标记对实现的。其中表单的验证使用<el-form>标记对的rules属性来进行设置。Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub的地址是 https://github.com/yiming...
2020-05-05 20:59:12
1015
原创 Vue自定义域过滤器和管道符
一、过滤器的分类与语法格式1、本期过滤器（局部过滤器）：var vm = new Vue({ filters:{}})例一：实现一个对首字母大写的过滤器
2020-05-04 20:29:58
1539
原创 uni-app中调取接口的三种方式与封装uni.request()
一、uni-app中调取接口的三种方式1、uni.request({})uni.request({ url:'/api/getIndexCarousel.jsp', method:'get', success:res=>{ console.log(res.data); this.carouselData = res.data }})2、uni.request({})...
2020-05-04 16:19:41
8649
1
原创 uni-app：配置webpack代理，解决跨域问题
uni-app：配置webpack代理，解决跨域问题1、 打开项目文件manifest.json–>h5配置–>路由模式：history–>端口：9000mode：设置路由的工作模式mode:‘hash’，哈希模式，默认值。路由地址栏一直带有一个#。#后面的内容无法被后台获取。mode:‘history’，历史模式。去掉路由地址中的#。历史模式必须在后台中进行设置。...
2020-04-30 15:41:04
8078
原创 uni-app之商城分类导航
uni-app之商城分类导航系统效果：<template> <view class="productClass row" :style="productClassStyle"> <!-- 左侧一级分类列表 --> <scroll-view class="leftClassList col-3 h-100" scroll-y :scroll-...
2020-04-24 15:30:23
4649
原创 uni-app基础知识
Vue.js框架下的移动端（H5移动端页面、App手机应用程序、小程序）开发框架一、uni-app的基础知识1、利用HbuilderX创建uni-app项目“文件”菜单 | 新建 | 项目 | 默认模板uni-app项目结构描述[pages]存放页面的目录，里面的每一个文件夹就是一个页面[static]存放静态文件的目录，里面可以放置图片、字体等App....
2020-04-23 15:58:20
1244
1
原创 canvas画布
canvas标签<canvas></canvas>接下来使用支持H5的浏览器打开该页面，将会看到如下内容：canvas画布标签兼容处理：如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。<canvas>您的浏览器不支持canvas标签</canvas>结果分析：由上述结果可以分析出，在H5中，canvas标...
2020-04-21 20:35:11
1155
原创 移动端开发
移动端开发PC端移动端Vue.jsElement UIVant、uni-App、… …原生开发jQueryBootatrap、Frameworks 7适用于PC端的页面是可以直接在移动端显示的，只是需要双指缩放来放大界面一、视口（viewport）设置一个可以用来在移动端进行页面显示的区域，保证没有水平滚动条，还有一定的清晰程度。在HTML文档的&...
2020-04-08 12:06:06
549
原创 JSONP技术
一、跨域问题同源策略（SOP）：访问浏览器的URL地址和发送XHR请求的URL地址必须满足三个一致：协议一致、域名一致、端口一致同源策略规定：如果访问浏览器的URL地址和发送XHR请求的URL地址不同源，则无法发送XHR请求（ajax请求），会产生跨域问题。跨域问题：是浏览器的安全级别造成的。模拟跨域：在本地产生两个服务器：（1）客户端通过Hbuild而访问。（2）服务器通过自身的...
2020-02-20 18:13:10
100
原创 JavaScript同步和异步问题
一、什么叫同步、异步同步：同步操作没有结束之前，后面的代码是无法执行的。异步：异步操作没有结束之前，后面的代码是可以执行的。同步：在主线程排队的任务，只有前一个任务执行完毕才能执行后一个任务。异步：不进入主线程，而进入“任务队列”，只有等待主线程任务执行完毕，“任务队列”开始通知主线程，请求执行任务，该任务才会进入主线程执行二、那些是异步问题计时函数：setTimeout()...
2020-02-20 16:55:04
634
原创 jQuery下的ajax之省市区三级联动
jQuery下的ajax之省市区三级联动小编提醒一下别忘了引入jQuery文件哟HTML 所在省份：<select name="province"> <option selected="" disabled>请选择省份</option> </select> 所在城市：<select name="city"><...
2020-02-15 13:31:10
302
原创 Vue省市区三级联动
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> <script src="j...
2020-01-04 22:22:37
1072
1
原创 Vue计算属性和侦听属性
（一）计算属性1. 计算属性使用Vue实例的computed选项实现2. 计算属性的书写格式computed:{ 计算属性:function(){ ... ... return 计算属性的计算公式 } }3. 计算属性不能是出现在Vue实例data区中的变量4. 计算属性的含义：当计算属性的依赖变量发生变化时，计算属性会自动重新计算。5. 计算属性的gette...
2020-01-04 22:16:47
465
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人