- 博客(109)
- 收藏
- 关注
RSS订阅原创 canvas初识
什么是canvascanvas是h5新增的api,正如字面意思画布一样，是用来做画东西的创建上下文 <canvas id="canvas" width="600" height="600"> // 需要注意的是，如果设置style为px像素是设置容器的宽高，不是真正的canvas的宽高 // 如果需要设置画布的宽高，只需要设置画布的width和height属性即可 let canvas = document.querySelector("#canvas"); le
2022-01-16 15:14:48
1207
原创 promise初识
(1)：promise对象 什么是promsie,promise字面就是承诺，承诺一段时间做出回应 promise产生的历史原因，回调函数的层层嵌套的回调"地狱"，不够优雅和易用 promise的三种状态 pending fulfilled reject promise的特点 promise的状态不可逆，要么是成功要么是失败，当处于pending状态，未知是成功还是失败 promise的结果必须通过回调函数返回出去，不然就会处于pending未知状态 promise对象的状态不受外界影
2022-01-15 19:27:36
392
原创 vue实现穿梭框
页面展示html <body> <div id="my"> <div class="container-fluid"> <div class="row"> <!--左侧--> <div class="col-xs-5 col-sm-5"> <div class="panel panel-success">
2022-01-12 22:42:54
463
原创 node-express路由
下载yarn add -D express nodemon新建routes文件夹，新建user.jsvar express = require("express")var router = express.Router()var Mock = require("mockjs")let data = Mock.mock({ "list |5-10":[ { "id | +1": 1, "name":" @cname", "sex|1":"@
2022-01-10 21:18:28
343
原创 uniapp之请求拦截器和响应拦截器的使用
拦截器目录如下api.js （api配置）env.js （环境配置）interceptos (拦截器)index.js (导出配置)main.js (注入)页面使用页面展示目录如下api.js （api配置）export const api = { // 默认请求就是get请求 user: { url: '/user', name: '用户信息', method: 'GET', },}env.js （环境配置）// prod 生产 dev 开发c
2022-01-08 22:58:31
4610
1
原创 uniapp开发微信小程序使用分包
为什么使用分包因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，按需加载，优化小程序的下载和启动速度。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。详情参考uniapp官网subPackages项目目录package.json{ "pages": [{ "path": "pages/index/index", "style": { "navigat
2022-01-06 20:40:20
723
原创 小程序动态设置导航栏和状态栏
设置导航栏为自定义"navigationStyle": "custom"{ "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black", "navigationStyle": "custom" },}
2022-01-05 21:29:19
1553
原创 vue中使用i18n
下载i18nyarn add -D vue0i18nsrc目录下新建 i18n文件夹(en.js和zh.js)en.jsimport Vue from "vue";import VueI18n from "vue-i18n";Vue.use(VueI18n) var locale = "cn"locale = localStorage.getItem("type") ? localStorage.getItem("type") : "zh"console.log("loca
2022-01-04 21:18:59
566
原创 webpack中使用ts
目录如下下载相关依赖 yarn add -D clean-webpack-plugin yarn add -D html-webpack-plugin yarn add -D cross-env yarn add -D webpack webpack-cli webpack-dev-server yarn add -D ts-loader typescriptwebpack.config.js配置const {CleanWebpackPlugin} = require("clean
2022-01-03 19:30:40
494
原创 ES6-promise简单理解
文章目录promise是什么promise的三种状态promise的特点promise的链式调用promise之returnpromise.all(处理并发请求)promsie.allSettled(批量处理请求)promise.racepromise.resolve和rejectpromise是什么Promise 是异步编程的一种解决方案,也是为了解决回调函数层层嵌套的地狱而生promise的三种状态**1. pending (等待)fulfilled(成功的)reject(失败的)**
2022-01-02 15:31:20
485
原创 javascript-鄙人常用的功能函数
常用的功能函数(1): 功能函数1: 回到顶部Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => { window.scrollTo({ top: x, left: y, behavior: type // 滚动行为：smooth平滑滚动，instant瞬间滚动，默认值auto，等同于instant })}2: 判断传递过来的值是否为空//判断传过来的值是否为空export function isN
2022-01-01 19:14:12
611
原创 ES6-summary
(1): 箭头函数箭头函数是函数的语法糖，准确来说是函数表达式的简写// 没有参数的写法let fn = ()=> 1;console.log(fn()); // 1// 有一个参数的写法let fn1 = res => res; console.log(fn1(1)); //1// 两个参数的写法let fn2 = (res1,res2) => res1+res2;console.log(fn2(1,1)); // 2// 返回对象的写法(需要加上括号)
2022-01-01 00:40:36
104
原创 ES6-set和map
map和set(1): set类似于数组，属性值是独一无二的set设置let set = new Set();set.add(1);set.add(2);set.add(3).add(4) // 链式写法console.log("set",set); // set Set(3) { 1, 2, 3 }let set1 = new Set([1,2,3,4])set三个迭代器和一个遍历的方法set.valuesset.keysset.entriesset.forEachfor(
2021-12-31 23:52:32
184
原创 vue-前端分页和后端分页实现
1：前端手写分页(数据量小的情况下)前端需要使用slice截取： tableData((page-1) * pageSize,page * pageSize)2：后端分页，前端只需要关注传递的page和pageSize了，这里就不一一赘述了3：前端手写分页按钮window.onload = function () { new Vue({ el: '#app', data: { params:{ page:1, pagesize:2
2021-12-30 22:18:34
6472
6
原创 javascript-简单理解设计模式
JS设计模式有很多种下边我举几个学习常见的模式（1): 单例模式(Singleton Pattern)-创建1: 第一种// 单例模式(Singleton Pattern),后端用的比较多// 单例模式创建多少对象就只有一个实例var SinglePattern = (function(){ function Single(name) { this.name = name; } return function(name) { if(!Single.ins
2021-12-30 21:23:46
228
原创 vue实现todolist的增删改查
vue实现todolist的目录和效果图app.vue<template> <div id="app"> <div className='container'> <Inputs @addItem="addItem" @search="search"></Inputs> <List :list="list"></List> <Total @sendCheckAll=
2021-12-29 18:34:26
1315
原创 前端vue+express实现文件的上传下载
新建server.js yarn init -y yarn add express nodemon -D var express = require("express");const fs = require("fs");var path = require("path");const multer = require("multer"); //指定路径的var app = express();app.use(express.json());app.use(express.urlenco
2021-12-28 16:28:40
1309
原创 javascript-闭包(closure)
什么是闭包最简短的话解释内部函数引用外部的变量使用闭包// function fn1() {// var a = 20;// function fn2() {// a++;// console.log("a",a);// }// fn2()// }// fn1() // 21 永远是21// 内部函数被外部引用，内部的闭包才不会消亡，需要设置 fn =nullfunction fn1() { var a = 20; return f
2021-12-26 22:35:54
297
原创 javascript-this指向问题
this指向问题1: 普通函数调用,this指向window function a() { // 严格模式下 this为undefined console.log(this) // window } 在node.js中运行的话,this指向global全局对象 2: 谁调用指向谁 let obj = { name: '张三', age: 10， fn3() { console.log(this) }}obj.fn3() // this指向obj
2021-12-26 20:47:08
360
原创 微信小程序自定义tabbar
(1): 在app.json配置如下，主要是custon配置和usingComponents"tabBar": { "custom": true, "color": "#999999", "selectedColor": "#000000", "borderStyle": "black", "backgroundColor": "#FFFFFF", "list": [ { "pagePath": "pages/index/inde
2021-12-26 15:04:29
589
原创 react解决跨域的两种方式
(1): 在package.json下新建proxy的 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "proxy": "http://localhost:8888",(2): 下载中间件 http-proxy-middlew
2021-12-24 20:15:07
628
原创 react实现todolist的增删改查
以todolist为例目录如下app.js import React, { PureComponent } from 'react'import Input from './components/Input'import List from './components/List'import Total from './components/Total'import Mask from './components/Mask'import { bus as $bus } from './
2021-12-23 22:21:31
756
原创 react受控组件和非受控组件
受控组件就是受到state控制 import React, { Component } from 'react'export default class App extends Component { constructor() { super() this.state = { username: "" } } changeHandler = (e)=> { console.log("e",e.target); let { valu
2021-12-22 20:17:17
355
原创 react中的setState是同步的还是异步的
为什么setState本身是同步的，有时候表现是同步的或者异步的呢 setState是批量更新的，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。(1): 在合成事件和生命周期中是异步的 increment = ()=>{ // 合成事件异步的 this.setState(state => ({ count: state.count+1})) console.log("count===",this.state
2021-12-22 19:55:58
206
原创 nodejs-express+mock数据
var express = require("express");var Mock = require("mockjs")let data = Mock.mock({ "list|20-100":[ { "id|+1": 1, "name": "@cname", "gender|1": '@string("男女",1)', "age":'@natural(1,100)', "address": "@county(true)",.
2021-12-21 20:56:03
288
原创 react中使用styled-components
下载 yarn add -D styled-components import React, { Component } from 'react'import styled from 'styled-components'const Container = styled.div` background-color : #f60; border : 10px solid #f60; text-align: center; font-size: 40px;`const H1 =
2021-12-20 23:58:59
130
原创 nodejs-读写文件
const fs = require('fs')// fs写入文件fs.writeFile("2.txt","hello file",(error)=>{ if(error) { console.log("文件写入失败"); } else { console.log("文件写入成功"); }})// fs.writeFileSync("2.txt","hello fileSync1") // 同步// fs读取文件fs.readFile('2.txt', '.
2021-12-20 17:10:17
1509
原创 nodejs-简单搭建HTTP 服务器
const http = require('http')const port = 5000const hostname = "localhost"const server = http.createServer((req, res) => { res.statusCode = 200 res.setHeader('Content-Type', 'text/plain') res.end('你好世界\n')})server.listen(port, () => { .
2021-12-20 16:46:50
201
原创 node支持es-modules
npm init -y初始化文件名后缀改为mjs1.mjs export const a = 12.mjs import { a } from './1.mjs' console.log(a)node 2.mjs a =1
2021-12-20 15:39:41
231
原创 vue3-element-plus按需引入
项目目录下载element-plus yarn add -D element-plus新建plugins文件夹新建element-plus.js文件夹import { ElButton } from "element-plus";const components = [ElButton]export const componentsPlugin = app => components.forEach(app.use, app)import { Edit,Search } f
2021-12-19 22:03:07
809
原创 nodejs-get和post接收前端传递过来的参数
(1):get 接收前端传递过来的参数后端配置var express = require("express")var app = new express()// 后端解决跨域问题app.all("*",(req,res,next)=>{ res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-headers","X-Requested-with"); res.header("A
2021-12-19 19:11:41
955
原创 vue中简单使用mock.js
下载mock.jsyarn add -D mockjsutil下的mock.js import Mock from 'mockjs'const data = Mock.mock("/user","get",{ "userinfo|1-10":[{ "key|+1":1, "name":"@cname", "city":"@city", "age|18-28":25, "sex|1":["男","女"], "job|1":["
2021-12-19 17:09:44
410
原创 nodejs解决跨域问题
目录如下server.jsyarn add -D express nodemon -D var express = require("express")var app = new express()// 后端解决跨域问题app.all("*",(req,res,next)=>{ res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-headers","X-Requeste
2021-12-19 16:11:40
258
原创 nodejs-初始
什么是node.js 其实就是js的后台版本 ,普通的js用的是前台，而nodejs是在服务器端运行的 简单的说 Node.js 就是运行在服务端的 JavaScript。nodejs下载安装https://nodejs.org/zh-cn/docs/node的三个特性 1 单线程 2 非阻塞IO模型 3 事件驱动核心API- Event- HTTP- I/O 非阻塞IOnodejs导入导出使用的是common.js module.exports = { a:1
2021-12-19 15:25:13
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人