王富贵的记录-CSDN博客

原创 Vuex基本理论

Vuex是对数据统一进行管理工具。

2024-03-14 13:28:39 338

示例：假设有两个表，users 表和 orders 表，这两个表通过 users 表中的 user_id 字段和 orders 表中的 user_id 字段进行关联。上述示例中，users 表和 orders 表通过 user_id 字段进行内连接，查询结果将返回 users 表中的 name 列和 orders 表中的 order_number 列。上述示例中的 0 是起始下标，表示从第一条数据开始。请将列名替换为要查询的列名，表1 和表2 替换为要连接的表名，字段替换为连接两个表的共同字段名。

2023-12-15 15:41:13 984

原创 Nginx基本使用

请注意，这些命令需要在命令提示符（Command Prompt）或 PowerShell 中以管理员身份运行。另外，如果您已将 Nginx 安装为 Windows 服务，则可以使用 Windows 服务管理工具（如服务管理器或 sc 命令）来启动、停止或重新加载 Nginx。(完整有序的停止nginx)。整有序的停止nginx)。(快速停止nginx)

2023-12-07 15:40:51 69

原创 vue@3路由全自动注册

在webpack中拥有require，可以使用require获取文件，但是在vite中没有require方法。封装起来的代码没有测试，因为没有时间，过段时间我会重新更新本文档，后期会树形结构打起来，因为最近有点忙。路由入口文件如下，可以获取基本的自动化路由。使用以下方法将平面的数据，封装起来；CompileRouter整体代码。这样的情况获取到的路由是平面的。

2023-11-20 17:14:39 191

原创在react的antd@5中form里面的Switch 为什么在 Form.Item 下不能绑定数据?

【代码】在react的antd@5中form里面的Switch 为什么在 Form.Item 下不能绑定数据?

2023-09-12 10:31:00 307

原创安装一个新的vue3

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。确保你安装了最新版本的 Node.js。

2022-12-20 16:28:14 160 1

原创 react-router-dom v6基本使用

随着版本迭代，现在react-router-dom已经到了V6，V6与V5相比之下，V6的使用更加简便，一下是我自己学习使用的V6版本import React, { useEffect } from 'react'import { Routes, Route, useNavigate } from 'react-router-dom'// 重定向function Redirect({ to }) { let navigate = useNavigate(); useEffect(()

2022-04-24 16:54:13 1115

转载 react useEffect详解

useEffect详解useEffect使用时有以下4种情况1、不传递useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。useEffect(()=>{undefinedconsole.log(props.number)setNumber(props.number)}) //所有更新都执行2、传递空数组useEffect(()=>

2022-04-24 16:50:31 20431

原创 XSS（Cross Site Scripting，跨站脚本攻击）

XSS（Cross Site Scripting，跨站脚本攻击）

2022-03-31 15:47:24 1268

原创 react 函数组件和类组件的区别

react 函数组件和类组件的区别一、react类组件和函数式组件重新渲染时的区别看现象1.1代码类组件： // 1、类组件 class ComClass extends React.Component { constructor(props) { super(); this.props = props; console.log("类组件的构造函数被调用了"); }

2021-11-11 17:51:26 515

原创 react自动化构建路由(简)

react自动化构建路由(简)//require.context()// 1. 一个要搜索的目录，// 2. 一个标记表示是否还要搜索其子目录， // 3. 一个匹配文件的正则表达式。let context = require.context("views", true, /\.js$/);let paths = context.keys()//获取了所有文件的路径let routes = paths.map(path => { //批量获取引入的组件 let c

2021-11-11 17:32:37 744

原创奇怪的setState

奇怪的setState使用 this.setState() 来时刻更新组件 state：首先我们去了解setState（）的三种情况：不要直接修改state// 此代码不会重新渲染组件：this.state.comment = 'Hello';这个时候我们应该使用this.setState()来进行修改state的值// 此代码可以重新渲染组件this.setState({comment: 'Hello'});构造函数是唯一可以给 this.state 赋值的地方。2.Sta

2021-10-12 11:56:51 81

原创 React-使用中报错处理ERROR

React常见错误①Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag虚拟DOM中只能有一个根标签②Warning: Invalid DOM property class. Did you mean className?in div 在react的jsx语法中，class是一个类的关键词，所以标签的class属性要改为className③U

2021-09-29 18:10:15 870

原创 react Hooks useState使用方法

react Hooks useState 使用方法1.引入import React, { useState } from 'react';2.定义const [data, setData] = useState(false);3.改变参数setData(true)useState 与setState的区别：setState在类组件中拥有this指向，在使用this.setState({})方法改变参数，页面数据重新渲染，但是在函数中没有this指向，当我们需要改变页面上面数据的时候

2021-09-15 18:03:01 257

原创 require.context( )；高效开发图片自动化引入工具

// require.context();// webpack的api，通过执行require.context()函数获取一个特定的上下文结构，主要用来实现自动化模块导入// 参数：需要检索的目录是否遍历文件夹文件正则// 获取“assets/image”下面所有图片包括子文件内部照片只获取png格式如果获取其他格式可以写为/.(png|jpg|...)$/ 即可引入其他类型图片按需加载const files = require.context( "assets/ima

2021-09-13 18:42:24 492 1

原创 padStart()和padEnd()--字符串填充 Es7语法

padStart()和padEnd()字符串填充padStart()和padEnd()padStart()用法String.padStart(targetLength, padding)参数：字符串目标长度和填充字段填充方向：从头填充'Vue'.padStart(10) //' Vue''React'.padStart(10) //' React''JavaScript'.padStart(10) //'JavaScri

2021-07-16 12:07:47 138

原创 git使用

git基本命令git init //初始化工作git status // 查看工作区状态git diff // 查看工作区和暂存区的区别git diff -cached //查看工作区和分支去变化git diff 分支名 // 查看暂存区和本地版本库的变化git add 文件名 // 把指定文件从工作区添加到暂存区 .或者*表示全部文件git commit -m ‘描述’ // 把修改后的文件从暂存区添加到本地库git push // 推送代码到分支git log // 查看历史gi

2021-07-13 16:36:43 219

原创封装react 路由高效开发

基本使用下载：npm install -S react-router使用的时候路由器router就是react的一个组件import { Router } from 'react-router';render(<Router/>, document.getElementById('app'));创建router目录 index.jsindex.js ：import React from 'react'import { Switch, Route, Redirect } f

2021-06-24 15:22:07 209

原创微信小程序构建npm找不到miniprogram文件

微信小程序构建npm找不到miniprogram文件在project.config.json文件中找到setting，增加如下代码 "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./../你的项目名" } ],...

2021-05-18 10:28:57 1720 6

原创 registerServiceWorker缓存文件

1.新建registerServiceWorker.js2.并在main.js中引入3.registerServiceWorker.js代码片段/* eslint-disable no-console */import { register } from 'register-service-worker'if (process.env.NODE_ENV === 'production') {// 上线打开 register(`${process.env.BASE_URL}service

2021-05-07 11:03:43 985

原创 require.context()

require.context()一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块语法：/** * directory {String} -说明需要检索的目录 * useSubdirectories {Boolean} -是否遍历文件的子目录 * regExp {R

2021-05-06 15:57:43 86

原创 vue 组件自动化全局注册

参考官网：https://cn.vuejs.org/v2/guide/components-registration.html 下的：基础组件的自动化全局注册在日常开发中，为了高效开发，为了避免在开发过程中不停地映日，或者在main.js中不停的注册，或者每增加一个组件就与需要手动去注册一次，所以产生了自动化封装注册全局组件。1.自定义文件夹在src下新建一个components文件夹，用于存放组件。并新建一个用于存放需要自动化全局注册的组件，例如lib。2.自动化封装组件代码片段如下：// 自

2021-05-06 15:53:52 338

转载 html详细讲解

一、简介介绍html,超文本标记语言（HyperText Markup Language）a. “超文本”：页面不仅包含文本，还包含图片、超链接等非文本内容。b. “标记”：使用一套事先约定的标签，来表达特别的意思。c. “语言”：编程语言，程序员与计算机交流的方式。作用用于编写网页。了解网页的构成a. 在浏览器访问网页的时候，可以通过“右键/查看网页源代码”的方式，看到具体的代码。b.页面代码包含:html代码，css代码，javaScript代码等。html代

2021-02-04 15:42:20 1137

翻译 babel

Babel 是什么？Babel 是一个 JavaScript 编译器Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：// Babel 输入： ES2015 箭头函数[1, 2, 3].map((n) => n + 1);// Babel 输出： ES5 语法实现的同等功能[1, 2, 3].map(function(n)

2020-06-26 19:50:45 154

原创 ESlint 简介

ESlint 简介1.什么是ESlint？ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。安装使用你可以使用 npm 安装 ESLint：$ npm install eslint --save-dev紧接着你应该设置一个配置文件：$ ./node_modules/.bin/eslint --init之后，你可以在任何文件或目录上运行ESLint如下：$ ./node_modules/.b

2020-06-26 19:43:51 949

原创 cookies，sessionStorage和localStorage的区别

请描述一下 cookies，sessionStorage 和 localStorage 的区别？cookie是网站为了表示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie还可以设置有效时间cookie 数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务期间来回传递，每次ajax请求都会把cookie传送到后台，cookie一半用作用户登录，后台可以根据cookie信息判断用户是否登录状态sessionStorage和localStorag

2020-05-25 15:30:04 120

原创 html5的离线储存怎么使用，工作原理的介绍

html5的离线储存怎么使用，工作原理能不能解释一下?在用户没有连网是，可以正常访问站点或应用，在用户与网络连接是更新用户机器上的缓冲文件、原理：html5的离线存储是基于一个新建的。appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会想cookiie一样被存储了下来。之后当网络处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。如何使用：页面头部像下面一样加入一个manifest的属性：在cache。manifest文件的编写离线存储的资源；

2020-05-24 22:02:29 553

weixin_45760365的博客