- 博客(106)
- 收藏
- 关注
RSS订阅原创 nvm的安装
nvm和n都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。默认是https://nodejs.org/dist/。如果下载node过慢或者安装失败，请更换国内镜像源, 在 nvm 的安装路径下，找到 settings.txt，设置node_mirro与npm_mirror为国内镜像地址。nvm use版本号 使用指定版本的nodejs （ 这时会发现在启用的 node 版本前面有 * 标记，这时就可以使用 node.js ）
2025-04-09 10:17:41
260
原创 H5实现扫码读取二维码条形码功能（二维码+条形码)
2、主要用到 BrowserMultiFormatReader 这个构造函数，用于打开摄像头。
2023-04-05 18:49:24
6283
原创 react-redux的使用
下载依赖npm install --save react-redux在src目录下创建store文件夹store下新建index.js文件import { createStore, combineReducers } from 'redux'import Listcounter from './reducer'import userReducer from '../reducers/user'const rootReducer = combineReducers({ Listco.
2022-03-05 23:56:55
642
原创 useReducer的使用
在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。引入import React, { useReducer } f.
2022-03-01 23:22:15
399
原创 useState用法指南
1.引入import React, { useState } from 'react'使用 const [count, setcount] = useState(0)全部代码实现count加1import React, { useState } from 'react'export default function Example() { const [count, setcount] = useState(0) return ( <div>
2022-03-01 23:15:04
264
原创 React-Redux的学习
下载npm install react-reduxReact-Redux 是 Redux 的官方 React 绑定库。它能够使你的 React 组件从 Redux store 中读取数据，并且向 store 分发 actions 以更新数据React-Redux 将所有组件分成两大类：UI 组件和容器组件。UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。UI 组件：只负责 UI 的呈现，不带有任何业务逻辑；没有状态（即不使用 this.state 这个变量）；所有数据都由参数 t.
2022-03-01 23:04:03
190
原创 redux和axios的结合使用
安装axiosnpm install axios安装react和reduxnpm install react redux3, 在组件的生命周期componentDidMount中调用接口 axios.get('http://localhost:3005/api/list').then(res => { let data = res.data const action = getListAction(dataList,data) store.di.
2022-02-26 22:31:31
701
原创 Redux使用教程
此处以一个加减的方式，用来举例子首先在src中新建一个store文件夹， store中创建一个index.js引入createStore， 在redux中引入// 新建一个仓库import { createStore } from 'redux'import reducer from './reducer'// store是唯一的，多个store是不被允许的// 只有store可以改变自己的内容， reducer是不能改变的// reducer是一个纯函数const store .
2022-02-26 13:05:48
766
2
原创 fetch请求的封装
首先在react项目下的src文件夹中创建一个utils文件夹， 然后在utils文件夹中新建一个index.js文件index.js中写入代码const querystring = require("querystring");export function httpGet (url) { const result = fetch(url) return result;}export function httpPost(url, params) { const result = .
2022-02-20 00:54:42
1551
原创 Node.js实现文件上传的示例
node 中的文件上传这边介绍的是node中的两个框架（express和koa）express支持的文件上传1.首先安装expressnpm install express2.写简单的接口并监听相应的端口号const express = require('express')const app = express()app.listen(6902, () => { console.log('form-data中间件的解析')})...
2022-01-28 00:04:06
709
原创 前端项目部署到腾讯云服务器
怎么将前端的项目部署到服务器上面， 这里首先我们需要考虑的是购买的是服务器， 一般这个服务器我们考虑的是购买腾讯云的服务器还是阿里云的服务器我这边购买的是腾讯云的服务器， 如果你买的是window版本的你需要， 重新安装系统成linux系统2.安装linux系统的过程， 你可以在服务器的页面上面实现安装的过程点击重置应用， 安装cenos的指定的版本以上如果都做好了的话， 你需要安装一个连接服务器的软件我这边选择的weTERM这个软件， 首先你需要连接服务器红框区域填写你购买服.
2021-11-22 11:22:50
2646
2
原创 在vue3中使用vuex 4.x
在vue3中使用vuex 4.x首先你需要下载最新版本的vuexnpm install vuex@next -S首先通过命令新建脚手架，在src目录下新建store文件夹。并创建index.js入口和modules文件夹（因为我把模块拆分了）2. user.js文件，一个独立的模块const user = { namespaced: true, state () { return { userCount: 0 } }, mutations: {.
2021-11-10 12:37:04
1083
原创 vue3中vue-router的使用
首先需要使用vue-router在vue2和vue3的用法也是存在差别的首先你需要安装vue-routernpm install vue-router@next -S然后再项目的根目录下面src文件夹下面新建router这个文件夹， router中新建index.js这个文件import { createRouter, createWebHashHistory } from 'vue-router'const routes = [ // 路由重定向 { path: '.
2021-11-09 17:58:19
1166
原创 使用webpack独立开发vue项目
let path = require('path')let { CleanWebpackPlugin } = require('clean-webpack-plugin');let HtmlWebpackPlugin = require('html-webpack-plugin');let { DefinePlugin } = require('webpack')// const CopyPlugin = require("copy-webpack-plugin");module.exports
2021-10-15 14:10:34
208
原创 gitee码云的使用
初次使用gitee是因为github,有时候打不开的原因， 使用码云的话， 就不会出现这个问题了简易的命令行入门教程:git config --global user.name "飞行天下"git config --global user.email "5533701+AabbCcDdEe_abcde@user.noreply.gitee.com"创建gitee的仓库mkdir jixiao_learn1cd jixiao_learn1git inittouch README.mdgit
2021-10-14 13:18:17
150
原创 图解 JS 浅拷贝与深拷贝
深拷贝和浅拷贝的区别就在于： 深拷贝的对象的改变不会影响原对象的改变， 浅拷贝反之实现浅拷贝 var obj1= {a: 0} // 实现浅拷贝 var obj2 = obj1; obj2.a = 1; console.log("obj1.a", obj1.a) console.log("obj2.a", obj2.a)2、ES6扩展运算符，实现 深拷贝 var obj1= {a: 0} .
2021-10-09 14:05:24
187
原创 使用adb命令安装安卓apk包
虽然网上也有许多adb安装安卓包的教程，但经过自己亲自试了一下后，觉得自己写下来的才是自己的收获。一、下载安装adb工具 下载地址有很多，这里是我下载的地址：https://pan.baidu.com/s/1mgGkNZM，下载文件比较齐全。 下载后是个压缩包，解压后一共有5个文件，如下图：这里我都是解压到当前文件夹了因为安装包里就有个cmd，所以就省去了在运行中打开cmd，再在cmd中打开adb的步骤了，在要用adb工具时直接点击cmd.exe就可以了。如下有位网友总结的安.
2021-09-26 11:25:25
8056
原创 git clone 出现fatal: unable to access ‘https://github 类错误解决方法
git clone 遇到问题：fatal: unable to access ‘https://github.comxxxxxxxxxxx’: Failed to connect to xxxxxxxxxxxxx将命令行里的http改为git重新执行。
2021-09-23 13:08:01
798
原创 React + Redux实现计算案例
react实现常规的求和export default class Count extends Component { state = { count: 0 } increment = () => { // console.log(this.sele.value) let { value } = this.sele let { count } = this.state; this.setState({ count: count + val
2021-09-20 18:18:17
115
原创 react 路由传参及获取参数
1.params优势 ： 刷新地址栏，参数依然存在缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。传参import { Link, Route, Switch } from 'react-router-dom' <Link key={listObj.id} to={`/home/home_news/detail/${listObj.id}/${listObj.content}/${listObj.age}`} .
2021-09-16 23:33:51
7784
2
原创 vue弹窗锁定页面和释放页面
对于移动端项目， 弹窗无疑是最常见的问题， 点击按钮， 出现遮罩层， 然后弹窗在遮罩之上div结构<div id="page_home"></div>锁定窗口的事件函数（这里以vue2+ts)的写法为主 private fixWindow() { // 锁定窗口 let homePage = document.getElementById('home_page'); if (homePage) { .
2021-09-16 13:37:14
749
原创 react和vue配置本地代理
在react中配置开发环境下的本地代理相对比较简单，直接在package.json文件中修改即可。此处以本地服务器， 端口为5000为例"proxy": "http://localhost:5000"在项目目录的src /下新建setupProxy.js文件，然后写入如下代码：let proxy = require('http-proxy-middleware')module.exports = (app) => { app.use( proxy('/api', { .
2021-09-12 20:20:45
262
原创 使用Express搭建一个简单的服务器
let express = require('express')let app = express()app.use((request, response, next) => { console.log('有人请求服务器了。。。') next()})app.get('/student', (req, res) => { let student = [ { id: '001', name: 'zs', age: 20 }, { id: '002', name
2021-09-12 16:36:43
122
原创 react实现todoList
首先需要依据组件的结构拆分组件分为Header， List， LiistItem ， footer组件App为根组件App.js// 采用类组件的写法import React from 'react'// import { // Hello,// Welcome// } from './componnets'import { Header, List, Footer} from './componnets'class App extends React..
2021-09-12 15:55:09
310
原创 高阶函数和柯里化
高阶函数： 如果一个函数符合下面两个规则中的一个，那该函数就是高阶函数1。若a函数接收的参数是一个函数，那么a函数就可以成为高阶函数2.若a函数调用的的返回值是一个函数， 那么该函数也是高阶函数如： Promise, setInterval, setTimeout, arr.map()等等函数的柯里化：通过函数函数调用继续返回函数的方式，称为函数的柯里化``核心代码change1 = (evenType) => { return (event) => { .
2021-09-10 00:07:08
163
原创 react的受控组件和非受控组件
受控组件就是可以被 react 状态控制的组件在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。1.受控组件<!DOCTYPE html><html lang="en"><head.
2021-09-09 23:28:35
230
原创 React中ref的使用
React中Ref是什么？ref是React提供的用来操纵React组件实例或者DOM元素的接口。ref的作用对象ref可以作用于：React组件的实例React.createRef();的使用myRef = React.createRef()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.
2021-09-09 20:36:09
259
原创 React类组件
state特点1：单向绑定，state变化视图自动更新，视图变化state不更新的特点2：单向数据流，数据只能向下传递特点3：state不能直接修改，要使用 this.setState()来修改特点4：this.setState()是异步的，但在定时器里是同步的特点5：多个this.setState()同时发生时，会被react合并成一个this.setState({})通过{this.add.bind(this)来绑定事件以类组件为例<!DOCTYPE html><.
2021-09-07 22:59:32
72
原创 Git分支操作常用命令
Git分支，即从Git目标仓库获得一份项目拷贝，每份拷贝都有着和原仓库功能一样的开发线。这种分支模型(branching model)，也叫工作流(workflow)，即一个围绕项目（开发、部署、测试）等工作流程的分支操作（创建、合并等）的规范集合。Git分支常用的四个环境，分别是：开发环境（development分支）、测试环境（development分支 或 release分支）、预发布环境（release分支）、生产环境（master分支）。1、查看当前项目的所有分支git branch -.
2021-09-02 12:23:40
344
原创 JS数组之Reduce()用法
一.语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])reduce()函数的参数有2个，第一个参数是一个函数（必须），第二个参数是一个初始值（非必须）。callback：是一个回调函数，执行数组中每个值，注意：如果没有提供initialValue,将不会执行第一个值。包含4个参数：accumulator 累计器累计回调的返回值，是上一次调用回调时返回的累计值，如果提供了in.
2021-08-31 15:57:39
524
原创 深究vue3中provide与inject
前言provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个。一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。在组合式API中的用法基本用法似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。顶级组件：核心代码：<script>import { inject } from 'vue'export default { name: 'son'.
2021-08-31 00:36:36
594
原创 vue3 toRef函数和toRefs函数
这篇我们看下toRef和toRefs的基本使用我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有什么区别呢？事实上，如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。<template> <div class="ToRefsDemo"> <div>name: {{ name }}</div> <div>age: {{ age }}</div.
2021-08-31 00:06:08
360
原创 vue3中customRef自定义ref
customRef返回一个ref对象,可以显式地控制依赖追踪和触发响应``<template> <div class="CustomRef"> <h1>customRef 用于自定义一个 ref，可以显式地控制依赖追踪和触发响应，接受一个工厂函数，两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象</h1> <div> .
2021-08-31 00:02:23
270
原创 vue中watch的使用（主要介绍了vue2和vue3中watch的区别）
watch的使用： 这里介绍的是vue2和vue3中的用法vue2中的用法：1.sum属性为例：写法一： watch: { sum (newValue, oldValue) { console.log("sum的数值的变换.....", newValue, oldValue); } },2.sum属性为例： 写法二： watch: { sum: { handler (newvak, old) { console.log.
2021-08-29 16:37:36
1039
原创 vue2中的computed，vue3的computed
vue2中的computed``vue2中computed中的写法computed: {fullName () {return this.person.firstName + ‘-’+ this.person.lastName}},vue3中的computed 写法一：import { reactive, computed } from ‘vue’person.fullName = computed(()=> {return person.firstName + ‘-’+ .
2021-08-29 16:19:54
747
原创 vue3中 ref和reactive使用上的区别
vue3中ref的使用； 可使用于所有的数据类型reactive: 使用于对象或者数组ref 的核心代码<script>import { ref } from 'vue'export default { name: 'RefComponent', setup () { let name = ref('zs') let age = ref(20) let userInfo = ref({ type: '前端工程师', count.
2021-08-29 09:15:35
446
原创 Vue自定义进度条组件
进度条组件使用Vue自定义进度条 Progress 组件。基本实现思路：用两个嵌套的div，外层div给蓝色背景，内层div给黄色背景；动态地改变黄色div的宽度，动态地计算出色彩（宽度）占比。1、核心代码如下<body> <div id="app"> <my-progreess :rate="rate"></my-progreess> </div> <script src="https:..
2021-08-24 19:19:26
940
原创 js从数组中随机取出其中三个元素
数组中随机取出其中三个元素方法一实现：var Arr=["aaa","bbb","ccc","ddd","eee","fff"]var arrNew=[]; for(var i=0;i<3;i++){ var _num = Math.floor(Math.random()*Arr.length) var mm = Arr[_num]; Arr.splice(_num,1) arrNew.push(mm)}console.log(a.
2021-08-24 18:02:59
7064
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人