pgzero的博客

原创 TypeScript

要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型。

原创 Vue3基础知识

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

原创 uniapp 横屏开发页面配置

一、pages.json配置页面大小根据开发的横屏项目的横屏设计图分辨率以及硬件分辨率，比如分辨率是1280*800二、manifest.json文件修改在源码视图的"app-plus"里添加子项三、App.vue文件配置在onLaunch生命周期函数中添加四、配置单位提示在编译器中，点击工具，配置px转rpx/upx比例，需要用当前的设计稿大小，单位是px，出除以750，得到的就是转化的比例。在设置保留几位小数就好了

原创 uniapp中如何使用微信SDK

一、 需要去微信公众号后台配置js接口安全域名二、安装jweixin-modulenpm i jweixin-module三，在需要分享的页面引入<script> // #ifdef H5 let jweixin = require('jweixin-module') // #endif .....</script>四、请求后台接口获取配置项并处理分享distributrShare() { this.$http({ apiN

原创 vue展示cron表达式

一、element使用cron1、引入vue-cronnpm install vue-cron2、main.js引入//全局引入import VueCron from 'vue-cron'Vue.use(VueCron);3、页面使用<template> <div class="cronDemo"> <el-popover v-model="isShow"> <el-input slot="reference" @clic

原创 vue使用代码编辑器vue2-ace-editor

一、安装npm install --save-dev vue2-ace-editor二、子组件<template> <div class="echart-pie-wrap"> <div class="myEditorTop">{{ title }} [读/写]</div> <editor ref="myEditor" @init="editorInit" :value="value"

原创 厂商推送应用创建配置流程

https://www.dcloud.io/docs/a/unipush/manufacturer.pdf

原创 node.js定时计划任务执行

一、安装依赖npm install cron二、使用var CronJob = require('cron').CronJob;new CronJob('* * * * * *', function() { console.log('You will see this message every second');}, null, true, 'America/Los_Angeles');三、API使用constructor(cronTime, onTick, onComplete,

原创 微信小程序各门类需申请资质

原创 node+express实现邮箱发送验证码

一、安装nodemailer依赖npm install nodemailer --save二、创建sendMail.js//发送邮箱验证码const nodemailer = require('nodemailer');var $commonJS = require('./common.js');// 创建可重用邮件传输器const transporter = nodemailer.createTransport({　　host: "smtp.qq.com", // qq的邮件地址

原创 node+express实现微信登录和获取手机号

一、安装request依赖npm install request --save二、通过code获取用户openidconst request = require('request');//全局变量let appid = "xxxxxx";//自己小程序后台管理的appid，可登录小程序后台查看let secret = "xxxxxx";//小程序后台管理的secret，可登录小程序后台查看let grant_type = "authorization_code";// 授权（必填）默认值

原创 node生成token

一、安装依赖npm install jsonwebtoken二、生成token//引入const jwt = require('jsonwebtoken');let secret = 'test'; //签名module.exports={ //生成token generateToken(data) { let token = jwt.sign(data,secret); return token; }}

原创 node使用session存储校验验证码

一、安装依赖npm install express-sessionnpm install cookie-parser二、app.js中注册使用const session = require('express-session')// 使用express-session 来存放数据到session中app.use( session({ secret: 'keyboard cat', resave: false, saveUninitializ

原创 vue如何下载文件

一、使用axios请求后台接口this.$http({ url:'请求地址', method: 'post', responseType:'blob', data: data,}).then(res => { this.downloadFile(res.data) })二、下载downloadFile(data) { // 文件导出 if (!data) { return } let url = window.URL.createObjectURL(new Blob

原创 vue使用富文本编辑器

一、安装依赖npm install vue-quill-editor --savenpm install quill-image-extend-module --save-dev二、使用编辑器<template> <div class="quill-wrap"> <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" /> </div>&

原创 js处理浏览器声音提示

var utterThis = new window.SpeechSynthesisUtterance('支付宝到账，323324234');window.speechSynthesis.speak(utterThis);

原创 vue 事件处理函数传递e对象和额外的参数

<switch :checked="isChecked" @change="switch4Change($event,4)" color="#57BE6C"/>switchChange(e,value){ console.log(e.detail.value,value) // true 4},第一个参数为event对象，第二个参数为额外要传入的值

原创 js操作对象方法

1、遍历对象并赋值Object.keys(this.form).forEach(key=>{this.form[key]=''})

原创 vue生成图形验证码

一、创建验证码组件identify.vue<template> <div class="s-canvas" style="display: inline"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export default{ na

原创 Node.Js使用mongoose操作mongodb基础操作

一、安装mongoosenpm install mongoose二、连接数据库// app.jsvar mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/blog') //连接本地数据库blog var db = mongoose.connection;// 连接成功db.on('open', function(){ console.log('MongoD

原创 vue+element-ui实现表格列表拖拽

一、安装sortablejs 依赖npm install sortablejs --save二、vue页面代码<template> <div > <el-table :data="tableData" row-key="id"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="

原创 Nodejs+Express+mongoose 连接Mongodb

一、安装依赖npm install mongoose --save 二、连接MongoDB在app.js 文件中// app.jsvar mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/blog') //连接本地数据库blog var db = mongoose.connection;// 连接成功db.on('open', function(){ c

原创 MongoDB基础操作

一、数据库基础操作//进入mongo语法环境mongo//查看现有数据库列表show dbs//切换到admin数据库，如没有即创建admin数据库use admin//使用use切换后，db即指向当前数据库//新建的数据库不在列表中，是因为其内没有数据，添加条数据即可显示db.runoob.insert({"name":"测试"})//删除当前数据库db.dropDatabase()二、集合（数据库表）基础操作//创建runoob集合db.createCollecti

原创 MongoDB安装与配置

一、安装mongoDbhttps://www.mongodb.com/try/download/community?tck=docs_server二、安装到指定目录，文件功能解释三、安装MongoDB数据库可视(图形)化管理工具https://www.mongodb.com/try/download/compass四、环境变量编辑查看MongoDB数据库存的版本mongod -version // 该命令会显示MongoDB数据库的相关信息，如果能显示信息，就表示已安装成功了！！！

原创 node.js + express 接收请求

一、在routes文件夹中新建test.js文件二、在app.js中引用此文件var testRouter = require('./routes/test');app.use('/test', testRouter);三、test.js文件中编写代码var express = require('express');var router = express.Router();//前端请求的路径即为/test/getUserInfo?id=1router.get('/getUserInfo

原创 node.js+express创建项目

一、下载node.js二、全局安装express-generatornpm install express --save -gnpm install express-generator --save -g三、创建express项目express demo四、安装依赖包npm i五、运行项目npm start六、修改端口号在www文件内修改默认端口号，并重新运行项目七、热重启npm i -g nodemon//在package.json中修改"scripts": {

原创 如何下载redis并运行

一、下载redis下载地址：https://github.com/tporadowski/redis/releases。二、解压到文件夹，建议c盘>redis文件二、在redis文件夹下使用管理员运行redis-server.exe redis.windows.confredis-cli.exe -h 127.0.0.1 -p 6379...

原创 vue数组或对象直接赋值问题

data:{ index:0, list: [ { title:'名字1', }, { title:'名字2', } ], froms:{ title:'' }},methods:{ change(){ this.list[index] = this.froms; //这会导致改变froms的数据的时候，list[0]也会改变; //可使用JSON.pars

原创 element-ui的表单验证

一、对单个表单域进行校验如下，对于单个表单域，可以直接对表单域的rules参数进行配置，来实现格式验证，这种方法一般比较适用于格式验证比较简单的情况。如果需要进行验证的字段比较多，或者验证规则比较复杂，那么最好使用下方对整个表单校验的方式<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item

原创 128问题

卸载完后直接下载nvm安装 (推荐使用nvm-setup.zip)[地址]：https://github.com/coreybutler/nvm-windows/releasesnpm install -g node-sass

原创 js方法总结

一、字符串方法所有字符串方法都会返回新字符串。它们不会修改原始字符串。正式地说：字符串是不可变的：字符串不能更改，只能替换。split() 把字符串转换为数组var txt = "Hello"; // 字符串txt.split(""); // 分隔为字符length() 字符串长度var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";var sln = txt.length;indexOf()、lastIndexOf()

原创 Vue2.0项目在ie11页面显示空白内容

一、安装babel-polyfillnpm install babel-polyfill -D二、然后在main.js里引入mport 'babel-polyfill'三、修改webpack配置文件webpack.base.conf中{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'),resolve('static'), resolve('node_modules/we

原创 Vue使用vue-element-admin

一、首先git开发vue-element-template版本码云地址：https://gitee.com/panjiachen/vue-admin-template.git二、安装依赖包# 安装依赖npm install# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://registry.npm.taobao.org# 本地开发 启动项目npm run dev运行项目即可开

原创 vue如何使用less

1、首先使用npm下载依赖；npm install --save less less-loader2、如果第一步安装失败，即代表less版本太高npm install --save [email protected] -snpm install --save [email protected] -s安装完毕即可使用less

原创 js求数组最大值最小值方法

1、假设法假设当前数组中的第一个值是最大值，然后拿这个最大值和后面的项逐一比较，如果后面的某一个值比假设的值还大，说明假设错了，我们把假设的值进行替换。最后得到的结果就是我们想要的。// 获取最大值：var arr = [22,13,6,55,30];var max = arr[0];for(var i = 1; i < arr.length; i++) { var cur = arr[i]; cur > max ? max = cur : null}consol

原创 unicloud基础操作

一、clientDB操作数据库1、查找数据//db.env.uid 当前用户uid，依赖uni-id//db.env.now 服务器时间戳//db.env.clientIP 当前客户端IP// 查询当前用户的数据const db = uniCloud.database()let res = await db.collection('table').where({ user_id: db.env.uid }).get()//查询列表分页const db = uniCloud.dat

原创 vue使用Animate.css动画

Vue动画库插件animategit地址：https://github.com/daneden/animate.css演示地址：https://www.dowebok.com/demo/2014/98/如何在vue项目中使用呢一、安装npm install animate.css --save二、使用<!--Vue中，要做动画或者过渡都需要加一个transition标签--><!--enter-active-class="animated tada"，进入生效动画直接使用

原创 Vue获取点击元素到顶部的距离

//template<div @click="add($event)")></div><div class="top" ref="top"></div>//methodsadd(e){ e.currentTarget //获取当前dom元素后可进行操作 //获取元素距离视口高度 var top1 = e.currentTarget.getBoundingClientRect().top //获取滚动条位置 var top2 = doc

原创 vue如何生成二维码

使用vue-qrnpmnpm install vue-qr --saveimportimport vueQr from 'vue-qr'使用<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> <script> export default { name: "qecode", data() { return {

原创 vue的ref ($refs)的用法介绍

ref 有三种用法：1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。3、如何利用 v-for 和 ref 获取一组数组或者dom 节点注意：1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。2、如果ref 是循环出来的