- 博客(126)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vuex的使用(vue)
首先先要确定你需要几个模块，需要几个就需要在store文件下建立几个文件，文件夹下建立相同名字的js文件，如下图所示我需要五个模块index.js文件中需要把之钱建立的js文件全部引入，然后在modules中建立模块，如下图所示模块内js文件内内容和vuex中差不多，不过需要开启命名空间，以下为例import api from "../../http/api"import router from "../../router"import dayjs from "dayjs"import {
2020-10-17 18:14:01
144
1
原创 回顾总结
1.在用的一些组件中，如element-ui中按钮的点击事件是在组件中已经封装好的，通过$emit分发事件，事件名字叫click，然后才能绑定的点击事件2.当给直接一个子组件绑定点击事件后，点击并不会生效，需要@click.native（原理：给这个组件最外层通过操作dom元素然后添加点击事件）3. component 标签可以在页面生成任何类型的组件，需要后面跟一个is=“类型”，常用于封装表单，当需要一个组件特有的属性时需要v-bind，如下图所示4.v-model原理：给input框绑定i
2020-10-12 17:45:04
588
原创 vue2.0传值
这里写目录标题父传子$attrs$listeners（可直接改变父组件中的值）.send（可直接改变父组件中的值）子传父1.ref(可直接修改子组件值)2.this.$children （得到的为数组）（可直接修改子组件值）3.$emit(分发事件形式)4.通过插槽方式传给父组件$bus（两个组件中传值）父传子$attrs例：父组件中子组件中，如果没有在props中接收，那么就会在this.$attrs中，如果接收了的话就不会在this. $attrs中，如下图所示 $listeners
2020-10-12 09:49:34
1197
4
原创 NODE =＞ CORS跨域资源共享学习
HTTP头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downline、Save-Data、Viewport-width、Width、Contendt-Type（只有三个值application/x-www-form-urlencoded、multipart/from-data、text/plain）预检请求的特点：客户端与服务器之间会发生两次请求，OPTION预检请求成功之后，才会发起真正的请求。
2023-02-10 17:30:47
1083
原创 Node=＞Express自定义中间件 学习5
custom-body-parse模块完整代码。使用querystring模块解析请求体数据。讲解洗出来的数据对象挂碍为req.body。监听req的data事件。监听req的end事件。将定义中间件封装为模块。
2023-02-10 15:51:16
248
原创 Node=＞Express中间件分类 学习4
例如：在[email protected]之前的版本中，经常使用body-parser这个第三方中间件，来解析请求体数据，使用步骤如下。非express官方内置，认识由第三方开发出来的中间件，叫做第三方中间件，可以按需下载并配第三方中间件，从而提高项目开发效率。express.urlencoded（）解析URL-encoded格式的请求体数据（有兼容性，尽在4.16.0+版本使用）express.json（）解析JSON格式的请求数据（有兼容性，仅在4.16.0+版本可用）使用require导入中间件。
2023-02-10 15:11:03
418
原创 Node=＞Express中间件 学习3
客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件 调用app.use(中间件函数)，即可定义一个全局生效的中间件连续使用app.use（）定义全局中间件，执行顺序按照定义顺序。
2023-02-10 14:19:09
408
原创 Node=＞Express路由 学习2
为了方便对路由模块化的管理，express不建议将路由直接挂载到app上，而是土建将路由抽离为单独的模块。Express路由指的是客户端的请求与服务器处理函数之间的映射关系。Express路由由三部分组成 请求类型 请求URL地址 处理函数。请求类型和请求的URl同时匹配成功才会调用相应的处理函数。app.use()函数的作用就是来注册全局中间件的。根据定义的先后顺序进行匹配。
2023-02-10 11:37:22
424
原创 Node =》 nodemon
在编写调试Node.js的时候，如果修改了项目的代码，则需要频繁的手动close掉，然后再重新启动，非常频繁，现在可通过nodemon这个工具，能够监听项目文件的变动，当代码被修改后，nodemon会帮我们重新启动项目，极大方便了开发和调试。
2023-02-10 11:02:59
114
原创 Node =＞Express学习
注意：Express在指定静态目录中查找文件，并对外提供资源的访问路径，因此，存放静态文件的目录名不会出现在URl中。例如：通过一下代码就可以将public目录下的图片、css文件、javaScript文件对外开放访问。托管多个静态资源目录，就多次调用express.static（‘files’）通过express.static()可以方便的创建一个静态资源管理服务器，访问顺序先查找先托管的资源文件，未找到再向下个资源文件查找。在项目所处的目录中，运行以下命令，简装到项目中了。
2023-02-10 10:54:58
373
原创 Node学习1
初次安装包以后会多出 node_modules 的文件夹和 package-lock.json node_modules 里面是下载的包。注：Node.js中的包都是免费且开源的，不用付费即可免费下载试用包是基于内置模块封装出来的。和函数作用域类似，在自定义模块中定义的自变量只能在当前模块内访问。删除发布的包 npm unpublish 包名–force。删除的包，在24小时内不能重复发布。前面版本号增加 后面版本号要归零。只能删除72小时以内发布的包。commonJS规定。
2023-02-10 09:56:29
140
原创 avue+vue验证跳转具体位置
因为avue组件实在element ui基础上进行二次封装的,avue-crud渲染根据配置如下，为后端返回过来的 this.$refs.applyTplForm.validate((valid, done, msg) => { done() //验证全部通过msg为undefind if (msg) { console.log(msg); let props = this.$refs.applyTp
2022-05-11 10:56:16
508
原创 TS泛型用法
泛型，可以理解为更广泛的类型。也就是说我们在函数、接口、类等中，约束数据类型的时候，可以通过泛型的方式来实现类型的传参，让数据的类型也可以根据传递的类型值来控制。一、函数中的泛型1、定义泛型函数基础语法：function 函数名<类型变量>(参数名: 类型变量): 类型变量 { return 返回值；}函数名<类型>(参数)案例代码：function getValue<T>(params: T): T { return params;
2022-02-18 17:22:43
1757
原创 TS的接口
一、属性的接口属性接口，专门用来约束对象中的每一个属性。基础语法：interface 接口名 { 属性名: 类型; 属性名: 类型; // ...}案例：interface Info { id: number; name: string; age?: number; sayHello?: () => void}const user: Info = { id: 1, name: 'Lee', age: 2
2022-02-18 15:42:14
4684
原创 TS 的类
一、基础语法class Person { constructor() { }}二、类的属性1、属性的初始化在 TS 中，我们如果在要 constructor 中定义一个属性，必须先在 constructor 之前对数据进行初始化：class Person { city: string; // 初始化 constructor() { this.city = '成都' }}属性在初始化的时候可以选择不设置初始值，但是就必须在 con
2022-02-18 14:57:35
597
原创 TS断言基本使用
在某些情况下，我们会比 TS 更清楚一个数据的类型。这种时候，我们就可以使用断言来告诉 TS：相信我，我知道自己在干什么。一、基础语法断言的语法分为两种：<> 尖括号as 语法二、尖括号基础语法：<类型>变量名案例：function add(x: number, y?: number): number { return x + <number>y;}add(1, 2);as 语法基础语法：变量名 as 类型案例：functio
2022-02-18 14:27:36
6711
原创 TS 函数
在 TS 中，要使用函数，要求必须约束函数参数和返回值的类型。一、基础语法1、JS 中函数函数声明式：function 函数名(参数) { return 返回值}函数表达式：const 变量名 = function(参数) { return 返回值}2、TS 中的函数函数声明式：function 函数名(参数: 参数类型): 返回值类型 { return 返回值}函数表达式分为以下几种写法：1）只定义函数参数和返回值的类型const 变量名 = f
2022-02-18 14:25:59
1296
原创 TS 的数据类型
TS 中也和 JS 一样，将所有的数据类型都分为“基本（原始）数据类型”和“引用数据类型”。一、基本数据类型numberstringbooleannullundefinedvoidsymbolbigint1、TS 中使用基本数据类型基础语法：首先在 TS 中，创建变量时，var、let、const 还是和 JS 中的使用方式一样，但是，在声明变量时需要约束变量的数据类型：var 变量名: 类型 = 值;示例代码：var a: number = 1;let b: strin
2022-02-18 14:23:07
10406
原创 TS 的准备工作
在 JS 中，通常代码都需要进行到执行阶段时，才能开始对代码的语法进行验证，验证失败的代码才开始有报错提示。TypeScript，简称 TS，是 JS 的一个超集，TS 中包含 JS 的所有特性，同时又具备自己的新特性。一、环境搭建浏览器是不能运行 TS 代码的，因此，我们需要将写好的 TS 代码转换成 JS 代码。1、全局安装 TS npm i -g typescript安装完成后，可以查看版本：tsc -v2、编写 TS 代码let a: number = 100;conso
2022-02-18 14:19:06
404
原创 umi 中的 Dva（基于React）
umi 中内置了 Dva 插件，不用下载可以直接使用。一、创建配置文件在项目的 src 目录中创建 models 目录作为 dva 的配置文件目录（创建完成后重启一下项目）。然后在 models 中创建 playList.js 文件。二、配置 Dvaimport { getPlayListAsync } from '../api/playList'export default { state: { // 歌单数据 data: [] }, r
2022-02-17 14:47:07
1183
原创 umi-request 网络请求（基于React）
Umi 内置了一个 umi-request 插件来实现网络请求。该插件内部是基于 fetch 进行封装的。我们在 umi 项目中，可以选择使用内置的 umi-request，也可以单独下载 axios。一、基本使用import request from 'umi-request';export const getPlayListAsync = () => request.get('http://localhost:3000/personalized');二、传参语法1、get 请求r
2022-02-17 13:55:26
7615
原创 umi路由懒加载和权限验证（基于React）
一、路由懒加载在 umirc.ts 配置文件中，添加以下配置即可：{ dynamicImport: { loading: '@/components/Loading', },}其中，@/components/Loading 是我们自己创建的 loading 组件的路径。二、路由权限验证首先，在配置路由时，需要配置以下属性：{ // 关注 path: '/friend', component: '@/pages/friend', // 模
2022-02-17 13:53:29
3099
原创 umi路由跳转和传参（基于React）
一、路由跳转Umi 中路由跳转可以分为两种方式：组件（标签）跳转JS 跳转1、组件（标签）跳转Umi 中也可以通过 和 组件来实现跳转：<Link to="路径"></Link><NavLink to="路径" activeClassName="class名"></NavLink>2、JS 跳转在 Umi 中也可以通过 props.history.push(‘路径’) 和 useHistory().push(‘路径’) 来实现跳转。
2022-02-17 13:52:13
18390
原创 umi 约定式路由（基于React）
要想在 umi 项目中使用约定式路由，直接将 .umirc.ts 文件中的 routes 属性删掉就可以了。 import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, fastRefresh: {}, });一、创建一级路由文件我们在 pages 中分别创建 home、login 和 regi
2022-02-17 13:49:42
2048
原创 umi 配置式路由（基于React）
umi 中的路由分类两种：配置式路由：开发者需要单独创建一个配置文件，通过各种属性或方法来实现对路由规则的配置；约定式路由：开发者不需要手动配置，只需要按照 umi 的规则来创建路由目录和文件，umi 会自动根据文件目录将路由配置解析出来；当项目中的路由结构比较简单，就可以使用约定式路由。如果是比较复杂的项目，都建议使用配置式路由。一、路由模式umi 项目中的路由模式默认是 history 模式，可以通过 history 属性来切换路由模式：import { defineConfig } f
2022-02-17 13:47:09
6396
原创 创建 umi 项目（基于React）
一、创建项目umi 项目，需要我们自己先创建一个空文件夹来作为项目的根目录。然后，在终端中将路径定位到创建好的项目目录中，再执行以下命令，来创建项目中的其他文件。yarn create @umijs/umi-appnpx @umijs/create-umi-app二、下载依赖包默认创建好的 umi 项目，没有安装依赖包，需要我们自己手动下载所有依赖包：yarnnpm install三、启动项目执行以下命令来启动 umi 项目：yarn start...
2022-02-17 10:37:55
1661
原创 Dva models 配置（React）
在 Dva 项目中，状态机相关的插件都已经内置好了，不需要下载，直接在 models 中创建对应的文件，进行配置即可。一、配置初始数据在 models 目录中创建对应的模块文件，然后在文件进行以下配置：export default { // 命名空间 namespace: 'todoList', state: { todos: [ { _id: 1, value: '学习HTML', done: false }, .
2022-02-17 10:30:08
485
原创 Dva 中的异步处理（基于React）
Dva 中的异步处理一、不使用状态机的异步请求Dva 项目中默认使用 fetch 来发送网络请求。项目中的 utils 目录中，封装了一个 request.js 文件，该文件中将 fetch 请求封装成了一个 request() 方法。我们发送请求时只需要引入该文件并调用 request() 方法就可以了。1、封装请求 API在 Dva 的项目中，还自动创建了一个 services 目录，用来存放项目中所有请求 API 的文件。例如我们现在需要发送一个“获取待办事项数据”的请求，就可以在 s
2022-02-17 10:29:49
1353
原创 Dva路由配置（基于React）
Dva 中已经内置了 React Router，不需要再额外下载，直接配置使用即可。一、全局引入路由Dva 中已经自动生成了路由的引入代码，在 src/index.js 文件中：app.router(require('./router').default);我们也可以将 require(’./router’).default 改成 import from 的语法：import router from './router'app.router(router);二、路由的模式Dva 项
2022-02-16 22:42:52
2139
原创 Dva 创建项目（基于React）
一、全局安装 Dva 脚手架工具官网npm install dva-cli -g安装成功后，可以通过以下命令查看脚手架的版本（确保版本是 0.9.1 或以上）：dva -vdva-cli version 0.10.1二、创建 Dva 项目在终端中定位到需要创建项目的路径，然后执行以下命令创建 Dva 项目：dva new dva-demo通过以下命令启动项目：npm start三、引入 antd1、下载依赖包npm install antd babel-plugin-imp
2022-02-16 22:38:13
635
原创 路由的 Hook（React）
类组件中我们通过 this.props 获取到的关于路由的相关方法和数据，在函数组件中还是可以继续通过参数 props 来获取使用：export default function Login(prosp) { return ( <button onClick={() => { props.history.push('/') }}>登录</button> )}同样的，在类组件中，.
2022-02-16 17:18:35
1178
原创 状态机的 Hook（React）
和路由一样，函数组件中使用状态机也可以按照之前类组件的语法：import { connect } from 'react-redux'function TodoList(props) { const { todos } = props; return ( <></> )}const mapStateToProps = state => { return { todos: state.todoList.t.
2022-02-16 17:18:22
185
原创 useMemo、React.memo、useCallback（React）
一、useMemo 基本用法缓存数据，模拟 Vue 中的计算属性。import React, { useMemo, useState } from 'react';export default function UseMemo() { const [count, setCount] = useState(0); // 缓存 sum 的值 const sum = useMemo(() => { return count + count; },
2022-02-16 16:58:46
458
原创 useEffect（React）
useEffect 是 React 中针对函数组件没有生命周期的问题，给出的解决方案。一、没有第二个参数当 useEffect 没有传递第二个参数时，组件挂载完成和组件更新时都会执行，可以看作是类组件中 componentDidMount 和 componentDidUpdate 的结合：useEffect(() => { console.log('useEffect 没有传递第二个参数');})二、第二个参数是空数组当 useEffect 的第二个参数是一个空数组时，会在组件
2022-02-16 16:54:55
626
原创 useState（React）
关于 Hook在 React 16.8 版本以前，函数组件也称为“无状态组件”。即函数组件中不能使用 state，也不能使用生命周期函数。从 16.8 开始，React 中新增了 Hook，专门用来解决函数组件的一些问题。从代码层面来看，Hook 实际上就是一组函数，每一个函数都用自己的功能。useStateReact 中提供了 useState() 这个函数，来解决函数组件中不能设置状态的问题。一、引入import React, { useState } from 'react';
2022-02-16 16:53:20
150
原创 React 中使用 axios（React）
一、下载npm i axiosyarn add axios二、创建 api 文件夹在项目 src 目录中创建一个 api 目录，用来存放所有的请求接口。三、创建请求模块文件我们以获取商品分类数据为例。在 api 目录中创建一个 categories.js 文件，该文件中用来设置所有关于商品分类的请求：import axios from 'axios'export const getCategoriesAsync = (params) => axios.get('/categroy
2022-02-16 12:27:46
15377
原创 Redux 详细使用流程（React）
一、下载相关依赖包yarn add redux react-redux redux-actions redux-logger redux-saga依赖包说明：redux：redux 状态机的核心文件react-redux：用于关联 react 组件和 redux 状态机redux-actions：提供便捷创建 action 对象和 reducer 函数的方法redux-logger：redux 中间件，用来显示 redux 中数据的操作日志redux-saga：redux 中间件，用来处理
2022-02-16 12:26:03
2219
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人