- 博客(60)
- 收藏
- 关注
RSS订阅原创 markdown基本语法
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2022-02-15 15:13:29
517
3
原创 promise封装小程序api请求
在项目中我们使用请求 需要通过api封装为什么封装api因为在项目中 请求使用的地方会有很多 不利于后期维护 如果我我们讲api封装出来 只需要维护api文件就可以了这里以uniapp封装api来写小程序为例第一步先在项目目录中创建一个utils文件夹 在该文件夹下创建一个js文件为请求的封装 代码如下// 封装请求const http = ({url, method='get', data=''}) => { return new Promise((resolve, re
2022-01-03 16:47:19
3588
8
原创 ts使用vscode监视代码编译
安装全局安装ts命令 npm install -g typescript安装结束后运行tsc -v命令 显示版本号表示安装成功接下来可以使用tsc 文件名称 可以将ts文件转化为js文件 js文件可以引入在html文件中直接使用监视ts文件在文件夹中执行 tsc --init 可以生成tsconfig.json文件 打开该文件可以看到 内容如下{ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to rea
2021-12-06 10:48:22
1092
7
原创 Vue3.0如何在setup中获取定义的全局方法
有些情况下我们需要定义全局方法 然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的 我们这里就以定义在main.js中为例// 这里我们就简单的随便添加一个属性 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' let app = cre
2021-06-18 15:13:27
3216
5
原创 用canvas画的一个加载条
一个同学问的问题， 同样类型的问题不知道被问了多少变了， 这里写了一个例子，需要使用的同学可以自行复制粘贴，但是相关尺寸及内容请自行更改<template> <div class="about"> 总课程数量<input type="text" v-model="m"> 已完成数量<input type="text" v-model="n"> <button @click="finish">确认完成</butto
2021-06-17 09:25:54
413
1
原创 yarn + vite + element-plus搭建vue项目遇到的问题
从vue3的官网中看到我们可以使用vue-cli搭建项目，也可以使用vite搭建项目 ，因为vite执行的速度会相对来说快了一点 所以这里我们说一下使用vite搭建项目以及遇到的一些问题第一步创建项目创建项目的命令 yarn create vite-app vite-demo创建完成后可看到项目文件夹解构如下可以看到里面没有vue的路由 当然官网给我们了一个制作一个简单的路由跳转的方法，这个可以官网自行参考 我们这里使用vue-router安装vue-router安装命令yarn ad
2021-06-11 12:05:54
1993
4
原创 vue3.0使用vuex的过程
在vue3中使用vue2中的写法也可以 但是这里我们使用组合api来使用vuex的数据和各种方法打开store中的index.js 代码如下// 可以看出与vue2的写法有些区别，但是用法一样// 但是需要注意的是如果在创建项目时没有安装vuex 则需要自己安装 安装命令是 npm install vuex@next --save 这里需要注意命令的不同 安装的版本就不同import { createStore } from 'vuex'export default createStore(
2021-06-08 17:15:09
1070
3
原创 浅谈vue3里面的v-model指令
本来想着在vue3.X版本的项目中封装一个input组件，由于2.0中封装的收到擒来也就没有仔细去看文档最后导致效果怎么也实现不了，这就是不仔细看文档的代价吧，这里来说一下这个问题在vue3.0版本中对v-model的改动个人认为还是挺大的 这里就以封装一个input组件为例第一步在components文件夹中 创建一个myInput.vue文件代码如下 <template> <div> <input type="text" :value="mo
2021-06-04 14:58:06
905
10
原创 Property xxx was accessed during render but is not defined on instance
vue3.x版本在结合element-plus使用如果使用了表单元素以及v-model指令会在控制台看到类似的警告，虽然不影响js运行，但是对于强迫症玩家难受的不行，下面我们来看一下这个问题是如何产生的，应该怎么解决vue3.x版本中新增了组合api也就是setup方法，在该方法中我们可以通过ref创建一个具有响应式的基本数据类型的数据，但是呢在我们也可以通过给元素设置ref属性，从而来获取dom，具体细节可以查看官方文档，这也就导致了问题的产生相信大部分人还是只想知道解决办法是什么，往下看解决办法
2021-06-03 16:24:49
4841
3
原创 vue3使用js封装全局loading
第一步在components文件夹中新建myLoad.vue组件<template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div></template><script>export default { props: { msg: Object,
2021-06-01 09:18:28
1604
4
原创 vue3.0使用vant组件的过程
创建项目vue create yxsc_project安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next)第二部vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i
2021-05-31 10:35:14
1948
3
原创 一篇关于vue-cli3打包优化的文章
在开发过程中vue项目打包是需要做一些性能优化的，这里写了关于我知道的要做的优化的部分，废话不多说直接上代码了，仅供参考 欢迎提出意见const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const path = require('path')// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -Dconst CompressionWebpackPlugin = require('compr
2021-03-19 17:00:11
710
9
原创 js加减乘除精确运算方法
因为计算机数字是浮点型，所以在计算过程中通常得到的并不是一个准确的数据，所以在做一些数组运算的时候比较头疼，我们这里就来写一下精确运算的方法首先是加法 （这里以两个数据相加为例）function add(arg1, arg2) { arg1 = arg1.toString(), arg2 = arg2.toString(); // 将传入的数据转化为字符串 var arg1Arr = arg1.split("."), // 将小数的数据从小数点的位置拆开 arg2Ar
2021-01-15 12:18:39
4391
17
原创 递归深复制对象
话不多说直接上代码了<script> var obj = { // 定义要进行深复制的对象 name: "张三", age: 14, tel: 110, info: { isSingle: true } } // 定义深复制的函数 function deepClone(params) {
2020-12-19 13:18:15
393
1
原创 react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松第一步 先安装路由依赖yarn add react-router-dom --saveyarn add react-router-config --save第二部 配置路由文件新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件 import React from 'react'; impo.
2020-12-16 16:30:28
3030
5
原创 react非父子组件传值
非父子组件传值react的非父子组件传值可以是使用订阅模式首先定义订阅者 // 创建一个observer.js文件 const observer = { list: [], // 用力收集所有的函数 subscribe(callback) { // 接收dispatch触发的函数的方法 this.list.push(callback) } dispatch(data) { // 触发事件的方法
2020-12-16 16:28:03
772
原创 react非父子组件传值
这里采用的是发布订阅者模式订阅者交出一个回调函数，传给中央服务，发布者已发布，就调用中央服务的回调函数创建observer.js文件 即订阅者文件const observer = { list: [], subscribe(callback) { this.list.push(callback) }, dispatch(data) { this.list.forEach(item => { item(data
2020-12-16 08:18:31
269
原创 js冒泡排序的四种方法
更新个基础知识比较简单 仅供参考 //参考排序的数组 var arr = [3, 2, 5, 1, 4]第一种这种方法冒泡排序比较相邻的两个元素,如果前一个比后一个大，则交换位置。第一轮把最大的元素放到了最后面。由于每次排序最后一个都是最大的，所以之后按照步骤1排序最后一个元素不用比function arr_sort(data) { var temp for(var i = 0; i<data.length-1;i++) { for(var j = 0; j<.
2020-12-11 19:26:16
3003
4
原创 redux react-redux简介
相对于vue的vuex而言 react的redux确实要复杂许多，并且没有相对完善适合初学者的文档，所以学习起来特别困难，这里用一个小例子来写一下 redux react-redux的简单用法，事先声明所有的文件地址请读者根据自己的文件地址写连接首先是安装// 个人比较喜欢用yarn 不喜欢的可以自行换成npm 或者 cnpm yarn add redux --save yarn add react-redux --save在项目中创建store文件夹 并在其中创建actions.js 和.
2020-12-11 16:21:46
1214
4
原创 mockjs使用方法
在我们的实际开发过程中，经常性的会前端进程比较快，导致调试页面时没有数据支持，需要等待后台接口，其实我们可以通过使用mockjs来模拟自己需要的数据，然后让后台配合我们模拟的字段来写接口，这样前端就可以自行模拟逻辑了，那么mockjs要如何使用呢?这里以在vue中使用为例首先是安装npm install mockjs --save / yarn add mockjs --save使用mockjs模拟数据并开发接口//新建一个mockApi.js模块 来保存我们模拟的接口var Mock =.
2020-12-10 11:40:58
678
1
原创 对象根据key排序的方法
无意间获取大一组城市的数据 数据本身是一个对象 但是key是由A~Z的字母组成的 但是呢 字母的顺序是错乱的 所以数据无法直接渲染 需要根据对象的属性对对象进行排序，于是有了这次的果，话不多说 上代码// 这是我获取到的数据的大概类型 因为数据太多 不做全部的演示了var citys = { "E": [ {"name": "厄瓜多尔"}], "A": [ {"name"： "安阳"}], "R": [ {"name": "日照"}]}// 接下来是排序的代码第一种办法 var .
2020-12-09 14:11:38
763
1
原创 js将表格数据导出为excel数据
function ToExcel(){ //要导出的json数据 var jsonData = [ { name:'张三', id:'621' }, { name:'李四', id:'622' }, { name:'王五', id:'623' }, { name:'赵刘', id:'624' } ] //导出前要将json转成table格式..
2020-12-05 08:27:37
480
原创 element form表单的必填和重置事件不生效的问题
element表单在使用的时候可以配置验证规则 必填选项和事件重置 但是很多人都会忽略form表单使用的时候的细节用法 从而导致某些功能实现不了 其实就是表单项要有一个prop属性例如<el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline"> <el-form-item label="名称"> <el-input v-model="s
2020-12-02 16:32:23
934
转载 js将excel数据转化为数组的方法
这里是h5的方法 仅供参考 如有雷同 纯属巧合不说废话直接上代码<input type="file" onchange="importf(this)" /><div id="demo"></div>/* FileReader共有4种读取方法： 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 2.readAsBinaryString(file)：将文件读取为二进制字符串
2020-12-02 11:56:52
1232
原创 h5的video标签的用法及问题
关于HTML5视频标签的问题一、基本video标签在兼容性上还是比较差的，如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。但是由于H5在移动设备上展现，基本都是使用webkit内核，只需要考虑Android、IOS设备上的差异。浏览器不支持/正在加载中 (指定的视频都不能播放时，返回的内容)video标签有src、poster
2020-10-22 08:15:20
2269
1
原创 ajax请求的优缺点
ajax的概念：相当于在客户端与服务端之间加了一个抽象层(Ajax引擎)，使用户请求和服务器响应异步化，并不是所有的请求都提交给服务器，像一些数据验证和数据处理都交给Ajax引擎来完成，只有确认需要向服务器读取新数据时才右Ajax引擎向服务器提交请求。ajax的优点：1.无刷新更新数据Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信2.异步与服务器通信使用异步的方式与服务器通信，不打断用户的操作3.前端与后端负载均衡将一些后端的工作移到前端，减少服务器与带宽的负担4.基于
2020-10-17 08:24:18
1452
原创 mysql和moogoDB的区别
MySQL是关系型数据库。优势：在不同的引擎上有不同 的存储方式。查询语句是使用传统的sql语句，拥有较为成熟的体系，成熟度很高。开源数据库的份额在不断增加，mysql的份额页在持续增长。缺点：在海量数据处理的时候效率会显著变慢。Mongodb是非关系型数据库(nosql ),属于文档型数据库。文档是mongoDB中数据的基本单元，类似关系数据库的行，多个键值对有序地放置在一起便是文档，语法有点类似javascript面向对象的查询语言，它是一个面向集合的，模式自由的文档型数据库。存储方式：
2020-10-17 08:18:36
1116
原创 常见错误码介绍
1**：请求收到，继续处理2**：操作成功收到，分析、接受3**：完成此请求必须进一步处理4**：请求包含一个错误语法或不能完成5**：服务器执行一个完全有效请求失败100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成
2020-10-13 08:07:29
1059
原创 动态设置rem
动态配置rem其实就是在窗口大小改变时重新设置rem的值(function(doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function() { if (docEl.clientWidth > 750) {
2020-09-28 07:51:43
1397
7
原创 构造函数
概念：严格来说js并不是一门面对对象的语言，通过构造函数可以像其他语言一样实现面对对象的过程，构造函数就是js实现面对对象的一种方式new关键字的作用声明了一个空对象调用了构造函数，使构造函数内部的this指向了实例化对象使函数的原型对象指向了构造函数将属性和值赋值给了声明的对象在函数中默认返回了实例化对象原型概念原型是一个对象，只是对象可以通过原型继承另一个对像的属性和方法每一个函数声明时，都会自动生成一个对象prototype，prototype通过constructor指针指向
2020-09-28 07:50:06
144
原创 vue项目配置rem
export default function() { // 7.5根据设计稿的横向分辨率/100得来 var deviceWidth = document.documentElement.clientWidth; // var deviceWidth = window.screen.availWidth // console.log(navigator.userAgent) // console.log(deviceWidth) // console.log
2020-09-09 08:22:57
592
原创 css样式重置
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, l
2020-09-09 08:18:39
1155
转载 史上最全常用正则表达式大全
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式数字：1*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
2020-08-26 09:22:33
1315
3
原创 git 命令
git 命令git init 作用是初始化一个能让git进行管理的仓库 使用 attrib -h .git可以释放出隐藏文件.git创建出自己的项目文件 打开项目文件夹 然后在文件夹中打开git命令窗git add ‘文件名称’ 提交单个文件 git add . 提交所有修改的文件git status 可以查看当前git所处的装太 比如放在git add 后执行git status命令可以查看当前都添加了那些修改的内容git commit -m “本次更改的描述内容” 因为描述内容
2020-08-12 17:10:56
405
1
原创 闭包的作用和优缺点
闭包的作用和优缺点例子 function fun() { var num = 0; return function() { num++ // console.log(num) return num } } var result = fun() var num1 = result() // 1 var num2 = result() // 2
2020-08-10 17:17:58
736
原创 webscoket的使用
webscoket的使用可以使用ws完成实时通讯前端要写的内容 // WebScoket参数是要连接的服务的地址 使用ws协议 例如 ws://localhost:3000 var connect = new WebScoket('ws://localhost:3000') connect.onopen = function() { console.log('开启ws连接 - 连接成功') } connect.onmessage = func
2020-08-10 17:17:29
273
原创 js ajax请求封装及解决node请求跨域问题
ajax请求 var ajax = new XMLhttpRequest(); // 实例化一个ajax请求的对象 ajax.open(method, url, false) // 开启一个ajax请求 第一个参数是请求的方式 可以是get/post 第二个参数是请求的地址 第三个参数是否发送同步请求 ajax.send() // 向服务器发送ajax请求 // 获取ajax请求的响应数据 ajax.onreadystatechange = function(
2020-07-29 17:08:44
266
原创 web存储和cookie
总结cookie的使用（node）第一步 安装cookie-parser yarn add cookie-parser --save / npm install cookie-parser --save使用 // 引入cookie-parser var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); app.u
2020-07-28 17:18:51
175
原创 node express框架发post请求 连接mysql
总结post 请求在js文件中 var express = require('express'); var app = express(); // 考虑到post的请求的参数在请求体内 req.body 所以要安装body-parser来解析请求体中的数据 // 安装body-parser的命令 npm install body-parser --save var bodyparser = require('body-parser'); // 已解析
2020-07-24 17:12:17
616
原创 nodejs http/url/fs模块搭建服务
总结文件流 var fs = require('fs'); // 如果文件存在 则向文件中写入内容 如果文件不存在则创建该文件并写入内容 var writeStream = fs.createWriteStream('要写入内容的文件地址') writeStream.write('要写入的内容', 'utf-8'); // 用来标记结尾 writeStream.end() writeStream.on('finish', function() {}
2020-07-21 17:00:10
220
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人