munanc_-CSDN博客

原创 Vue3 丐版 Vuex

Vue3 丐版 Vuex// src/common/myVuex.tsimport { App, inject, Plugin, reactive } from 'vue'// 基本功能类型type StoreType<T = any> = { state: T, mutations?: { [key: string]: (state: T, payload?: unknown) => void }, actions?: { [key: string]: (conte

2022-02-17 14:13:03 451

原创 react-redux 简单封装

react-redux 简单封装安装npm install --save reduxnpm install --save react-reduxnpm install --save-dev redux-devtools依照官方实例 Todo List处理 reducers// 官方例子const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [

2022-02-16 12:05:26 898

原创 Node 后端 git 提交规范化处理

Node 后端 git 提交规范化处理创建项目以 koa 为例使用 koa-generator 创建项目# 安装npm install -g koa-generator# 创建项目koa2 test-demo# 安装依赖cd test-demonpm install# 启动npm run dev访问 http://localhost:3000/创建 .gitignore 忽略掉 node_modulesnode_modules/windows 系统注意把 dev 路径

2021-12-22 11:16:09 1102

原创 Rollup 打包 Vue3 组件

Rollup 打包 Vue3 组件库安装 Rollupnpm install --global rollup安装 @vue-clinpm install -g @vue/cli初始化一个 vue3 项目vue create my-components-lib在 src/components/ 创建一个测试组件// MyComponent/index.tsimport { App } from 'vue'import MyComponent from './MyComponent.v

2021-12-06 17:34:32 4385 4

原创 React(react-router-dom) 根据路径自动配置路由第三版

React(react-router-dom) 根据路径自动配置路由第三版这一版本主要调整了 src\utils\common.tsx，重点更改了匹配逻辑。现版本，使用路由组件，不再需要使用文件夹包裹，直接跟在文件夹后即可，同时新增了{} 匹配规则例如：{e} 即使用 exact 修饰同时每个页面的配置都是独立的，不会依赖到父级配置规则如 /Home(AuthRoute){e}/Default[id] 会转换为 <AuthRoute exact path="/home:id" ...

2021-11-09 16:45:36 1137

原创 Redux 简单使用

Redux 简单使用# 创建一个测试项目npx create-react-app test-redux-demo# 安装 reduxyarn add redux// src/redux/store.ts// 创建 store 文件import { createStore } from 'redux';// action 类型const actionTypes = { ADD: "add", SUB: "subtract",}// 初始化 stateconst initS

2021-11-08 15:04:53 116

原创 React(react-router-dom) 根据路径自动配置路由延申

React(react-router-dom) 根据路径自动配置路由延申// app.jsimport './App.css';import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'// 将 routerHandle 抽离import { routerHandle } from './utils/common.tsx'// 通过正则排除无需创建路由文件夹，这里排除的是 components 下包

2021-11-04 15:08:37 599

转载 [] == false 为什么是 True

[] == false 为什么是 True参考JS的隐式转换 [] ==false 说起 - 南辰_k - 博客园 (cnblogs.com)首先很明显，在对比的时候，js 内部进行了隐式类型转换，并且在发生转换的时候，js 其实都是会将操作对象转化为原始的对象。ECMAScript 规范中有一个内部函数， ToPrimitive() （JavaScript中不能访问）能实现这个功能。ToPrimitive(input, [PreferredType])input表示要转换的内容， Prefer

2021-10-29 10:21:42 270

原创 React(react-router-dom) 根据路径自动配置路由，简单处理

React(react-router-dom) 根据路径自动配置路由，简单处理# 创建 create-react-appnpx create-react-app my-appcd my-appnpm start在 src 目录下创建页面文件夹，如 pages# 安装 react-router-domyarn add react-router-dom// app.jsimport './App.css';import { BrowserRouter as Router, Route,

2021-10-19 14:57:15 1450

原创 node koa 笔记

Koa 笔记Koa 旨在为Web应用程序和API提供更小、更丰富和更强大的能力，相对于 express 具有更强的异步处理能力，Koa的核心代码只有1600+行，是一个更加轻量级的框架。koa 注册的中间件提供了两个参数ctx：上下文（Context）对象koa并没有像express一样，将req和res分开，而是将它们作为 ctx的属性ctx代表依次请求的上下文对象ctx.request：获取请求对象ctx.response：获取响应对象next：本质上是一个dispatch，类似

2021-10-11 11:40:27 211

原创 Ejs 编译过程简单理解

Ejs 编译过程简单理解// 编写一个简单的 ejs 编译, 使用 debug 输出编译完成的执行函数const ejs = require('ejs');const html = `<% for (let i = 0; i < n; i++) { %><div><%= i %></div>_%><% } %>`const template = ejs.compile(html, { debug: true })co

2021-09-24 17:18:32 546

原创 Node express

Node ExpressWeb框架原生http在进行很多处理时，会较为复杂有URL判断、Method判断、参数处理、逻辑代码处理等，都需要自己来处理和封装并且所有的内容都放在一起，会非常的混乱Web框架可以通过一些实用工具和中间件来扩展功能，提高开发效率Express安装# 通过express提供的脚手架，直接创建一个应用的骨架# 安装npm install -g express-generator# 创建项目express demo# 安装依赖npm i# 启动项目nod

2021-09-22 17:20:05 109

原创 Node Buffer

Node Buffer计算机中所有的内容：文字、数字、图片、音频、视频最终都会使用二进制来表示JavaScript可以直接去处理非常直观的数据：比如字符串，通常展示给用户的也是这些内容事实上在网页端，图片一直是交给浏览器来处理的JavaScript 或者 HTML，只是负责告诉浏览器一个图片的地址浏览器负责获取这个图片，并且最终讲这个图片渲染出来但是对于服务器来说是不一样的：服务器要处理的本地文件类型相对较多;比如某一个保存文本的文件并不是使用 utf-8 进行编码的，而是用 GBK，

2021-09-13 17:25:43 73

原创 Node 命令行交互选项

Node 命令行交互选项const EventsEmitter = require('events')const readline = require('readline')const MuteStream = require('mute-stream') // 用于沉默输出流const ansiEscapes = require('ansi-escapes') // 用于输出空行const option = { // 选项参数 type: 'list', name: 'name',

2021-09-08 15:03:09 898

原创苹果授权登录 jwt node 解码

苹果授权登录 jwt node 解码const jwt_decode = require('jwt-decode')const NodeRSA = require('node-rsa');const axios = require('axios');const jwt = require('jsonwebtoken');let token = 'ios端返回的 identityToken'// 获取公钥async function getApplePublicKey(token) {

2021-09-07 16:37:40 430

原创 Node readline 简单实现

Node readline 简单实现function myReadline(callback) { const input = process.stdin; // 获取标准输入流 const output = process.stdout; // 获取标准输出流 let line = '' // 缓存输入 function handleKeyPress(s){ // 键盘输入处理 line += s // 缓存 output.write(s) // 输出 swi

2021-09-05 23:34:30 176

转载 Docker安装mongodb

Docker 安装 mongodb# 查找镜像docker search mongo# 安装镜像docker pull mongo# 创建容器docker run -itd --name mongo -p 27017:27017 mongo --auth-p 27017:27017 ：映射容器服务的 27017 端口到宿主机的 27017 端口。外部可以直接通过宿主机 ip:27017 访问到 mongo 的服务。–auth：需要密码才能访问容器服务。docker exec -it

2021-09-03 11:24:20 113

原创 Window10 Docker 安装 Nginx

Window10 Docker 安装 Nginx安装 Docker 下载地址默认安装，启动，如果遇到 WSL 2 installation is incomplet 报错，可能是版本太低了，需要更新创建 Centos 容器# 查看镜像docker search centos# 拉取镜像docker pull centos# 查看镜像docker images# REPOSITORY TAG IMAGE ID CREATED SIZE# c

2021-07-28 12:17:56 373

原创简单搭建的 webpack 5 开发环境

简单搭建的 Webpack 5 开发环境首先进入目标文件夹# 初始化项目npm init -y# 安装 webpacknpm i webpack webpack-cli --save-dev# 安装插件npm i html-webpack-plugin clean-webpack-plugin copy-webpack-plugin --save-dev# js 处理# 安装 babelnpm i @babel/core @babel/preset-env @babel/plugin-t

2021-07-26 16:11:34 231

原创 Babel 笔记

Babel 笔记Babel 是什么？Babel是一个工具集，用于将高版本的 js代码（如：ES6）转换为版本低兼容性好的代码，从而可以运行在低版本浏览器或其它环境中。安装npm install -g npx # 安装 npxnpm init # npm 初始化npm i @babel/cli @babel/core @babel/preset-env --save-dev # 安装 babel 依赖配置文件.babelrc.js、.babel.config.jsmodule.ex

2021-07-18 12:25:20 300

原创如何让 Node 支持ES module 导入

如何让 Node 支持 ES Module 导入模块化CMD/AMD/requrie.jsCommonJS加载：require()输出： module.exports / exports.xES Module加载：import输出：export default / export function / const x方法使用 Webpack在项目中安装 webpack webpack-clinpm i webpack webpack-cli -D安装 babel

2021-07-07 15:42:56 983 2

原创 Uni-App Android 本地打包

Uni-App Android 本地打包基本配置Hbuilder X 版本 3.1.18.20210609Android Studio 版本 4.2.2Jre 版本 1.8.0_291App离线SDK 根据 Hbuilder X 自行下载3.1.10版本起需要申请Appkey申请 Appkey 需要生成Android平台签名证书(.keystore)简单生成一个签名证书使用 cmd 添加当前临时环境变量 pathset PATH=%PATH%;"C:\Program Files\J

2021-07-06 16:57:00 456

原创脚手架初步开发笔记

脚手架初步开发笔记创建一个简单的脚手架创建一个目录初始化项目npm init -y创建 bin文件夹添加 index.js 文件#!/usr/bin/env node // 配置获取环境变量 node 第一行// bin/index.jsconsole.log('cli')修改 package.json，添加配置{ ... "bin": { "cliName": "bin/index.js" }, // cliName 名称自拟

2021-07-04 15:02:55 104

原创理解 @Vue/cli 脚手架执行原理

理解 @Vue/cli 脚手架执行原理进行安装npm install -g @vue/cli安装完成后可以全局调用vue --version脚手架本质类似于一个系统的终端，例如 cmd，可以通过命令进行执行，如vue create vue-demo 上述命令由三个部分组成主命令：vue执行命令：create命令参数：vue-demo脚手架的执行原理在终端输入vue create vue-demo终端解析出 vue 命令终端在环境变量中找到 vue

2021-06-10 14:43:00 361

原创 Vue Composition Api

Vue Composition Apisetup() 函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca

2021-05-30 23:34:00 149 2

原创 uni-app vue 全局模态框

Uni-app Vue全局模态框思路是将模态框作为一个页面，进而可以全局显示首先创建一个页面用来显示模态框 u-modal<template> <view>  <u-modal v-model="showModel" @confirm="co

2021-05-28 11:43:43 3782 1

原创 Vue provide inject

Vue provide inject在 vue 嵌套组件之间，上级组件可以通过使用 provide 将值传送到深层的子组件内（通过inject接收）<template> <sub-component></sub-component></template><script>import subComponent from './SubCompenent.vue'export default

2021-05-20 16:28:45 53

原创 uni-app_input_焦点手动获取

uni-app input 焦点手动获取<template> <view>  <input v-model="value" :focus="focusState" @blur="focusState = false" />

2021-05-17 11:17:49 8652 2

原创 uni-app_单选、多选_搜索框组件

uni-app 单选、多选搜索框组件<template> <view> <view class="search-input-content" :style="{ width: inputWidth ? inputWidth : '100%' }" > <view c

2021-05-12 11:41:18 2189

原创 uni-app_scroll-view_ios端_组件内部z-index失效处理

uni-app scroll-view ios端组件内部z-index失效处理主要原因<scroll-view> 内部设置了 -webkit-overflow-scrolling: touch 样式，导致z-index失效（safari 3D变换会忽略z-index的层级问题）造成内部组件的弹出框显示遭到遮挡<template> <uni-scroll-view v-on="$listeners"> <div ref="wrap"

2021-05-12 11:06:20 1944 1

原创 JavaStript_异步

同步、异步同步同步调用函数的时候会马上执行，同时等待返回结果，即进入阻塞状态，得到返回结果后再进行下一步执行异步异步会将操作和结果在时间上分隔开，在执行完操作后，并不会等待返回结果，继续执行同步代码，等到执行结果返回后，再来进行返回结果的处理，也就是说异步执行是非阻塞的let timeOut = setTimeout(() => { console.log('一秒后打印') clearTimeout(timeOut)}, 1000)console.log('马上打印')//

2021-05-06 23:24:24 115

原创 JavaScript_函数

函数函数转换隐式转换函数 toString() 和 valueOf()toString() 函数会在打印函数的时候调用，如console.log()valueOf 会在获取函数原始值时调用，如运算原型原型是 JavaScript 重要的特性之一可以让对象从其他对象继承功能的特性JavaScript 也被称之为基于原型的语言严格的说原型应该是对象的特性，但函数其实也是一种特殊的对象function fn() {}console.log(fn instanceof Object) //

2021-05-05 17:12:28 39

原创 JavaScript this 关键字

JavaScript this 关键字this 是 JavaScript 的一个关键字，一般指向调用它的对象首先 this 指向的应该是一个对象，更具体的说是函数执行的上下文如果调用它的不是对象或者对象不存在默认指向全局对象，严格模式下为 ``undefined`let a = { a1: 'a1', fn() { console.log(this.a1) }}a.fn() // a1class B { b1 = 'b1' fn() { consol

2021-05-05 14:38:33 87

原创处理js深拷贝嵌套对象情况

JavaScript 对象深拷贝，嵌套对象处理可以使用 ES6 的 WeakMap 将对象保存起来，循环中遇到相同对象直接指向已经存在的对象即可WeakMap 对象是一组键值对的集合，其中的键是弱引用的，其键必须是对象，而值可以是任意值function clone(obj) { let map = new WeakMap() // 创建 WeakMap 用于保存已经被创建的对象 function deep(data) { let result = {} const keys =

2021-05-04 23:04:00 392 1

原创 html笔记_2_浏览器渲染过程

浏览器渲染从 HTML 到 DOM浏览器通过请求获取页面字节流，对字节流进行解码成字符流输入流预处理，将字符转换成统一格式，例如对\n进行处理，最终生成规范化的字符流数据令牌化，将字符数据转换成令牌（Token）,同时解析 HTML 生成 DON 树令牌化每次接收一个或多个字符，同时更具当前状态和字符来更新下一个状态，不同状态相同数据可能产生不同结果补充：如果遇到 script 标签，如果是内联代码，直接交给 Js 脚本引擎，等待 Js 指向完成后再启用渲染引擎继续解析，

2021-05-04 17:54:25 45

原创 html笔记_1

Html标签meta<head> <meta http-equiv="Refresh" content="3">  <meta http-equiv="Refresh" content="3;URL=test.html"> </head><!-- 使用场景，

2021-05-04 16:59:00 59

原创 uni-app-卡片组件

Uni-app 卡片组件<template> <view class="card-content"> <span v-if="cardData.length === 0" class="no-data">No data</span> <block v-for="(item, itemIndex) of cardData" :key="itemIndex"> <view clas

2021-04-28 15:36:39 1867

原创 Uni-app 笔记_2 scroll-view 定位问题

Uni-app 笔记_2 scroll-view 定位问题在使用了 position 后便会失去滑动效果，例如，使用uViewUI 的 <style> .tabs { position: fixed; top: 0; left: 0; }</style><u-tabs :list="list" :is-scroll="true" :current="current" @change="change" cl

2021-04-15 17:08:43 1097

原创 Uni-App笔记 App端文件上传

Uni-App笔记 App端文件上传由于 uni.chooseFile(OBJECT) api 不支持 App端，故使用 plus.webview 导入 html 来进行文件的选择Web-View 使用注意事项小程序仅支持加载网络网页，不支持本地的html补充说明：app-vue下web-view组件不支持自定义样式，而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show。小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navi

2021-04-15 16:41:35 2391 1

原创 Uni-app 笔记_1

Uni-app 笔记uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。环境安装按照 vue-cli 脚手架npm install -g @vue/cli创建demo# 正式版本vue create -p dcloudio/uni-preset-vue 项目名称# 使用alpha版vue create -p dcloudio/

2021-03-25 17:34:08 390

空空如也

空空如也