前端(React&Vue&其他)
记录了小编在学习前端知识时遇到的一些问题。
zqq_2016
无
展开
-
truffle npm run dev | npm start配置package.json
package.json"scripts": { "start": "webpack", "dev": "webpack-dev-server --open chrome --hot", "test": "echo \"Error: no test specified\" && exit 1" }重新运行一遍npm run dev 或者 npm start 即可。原创 2020-11-03 14:53:08 · 489 阅读 · 0 评论 -
【Node.js】测试mongodb的增删改查
/* * 测试使用mongoose操作mongodb数据库 */const md5 = require('blueimp-md5')// 1. 连接数据库// 1.1 引入mongooseconst mongoose = require('mongoose')// URiconst uri = "mongodb://localhost:27017/recruit_db_test"// 1.2 连接指定数据库(URL只有数据库是变化的)mongoose.connect(uri, {us.原创 2020-10-26 16:33:11 · 108 阅读 · 0 评论 -
【Node.js】IDEA创建mongodb数据库,并显示已保存的数据
1. 选择右侧菜单中的“Database”,按照图示选择DataSource—>MongoDB.2. 只需要填写数据库名Database即可。3. 双击集合users,即可以查看插入到数据库recruit_db_test中的数据。原创 2020-10-26 15:07:56 · 913 阅读 · 0 评论 -
【Node.js】使用mongoose连接数据库以及进行数据保存
一、代码实现/* * 测试使用mongoose操作mongodb数据库 */const md5 = require('blueimp-md5')// 1. 连接数据库// 1.1 引入mongooseconst mongoose = require('mongoose')// URiconst uri = "mongodb://localhost:27017/recruit_db_test"// 1.2 连接指定数据库(URL只有数据库是变化的)mongoose.connect(原创 2020-10-26 14:27:53 · 813 阅读 · 0 评论 -
【Node.js】MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017 & mongod.exe启动后闪退问题
在进行mongodb连接测试的时候,出现UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017,mongoose没有启动,去启动mongod.exe时,出现启动闪退问题。解决方案:切换到mongodb所在bin目录,并执行以下命令(若没有data目录,则需要自己新建一个data目录):mongod --dbpath D:\softwares\Mo...原创 2020-10-26 13:50:09 · 5063 阅读 · 3 评论 -
【React】获取InputItem输入框中的数据
一、效果图二、需求描述 获取用户在注册时输入的信息,并弹框显示出来。三、代码实现import React from 'react';import {NavBar, InputItem, WhiteSpace, WingBlank, List, Radio, Button} from 'antd-mobile'import Logo from "../../components/logo/logo";const ListItem = List.Itemclass R...原创 2020-10-23 21:25:19 · 1721 阅读 · 0 评论 -
【React】The “injectBabelPlugin“ helper has been deprecated as of v2.0.
具体错误信息:解决方案:react-app-rewired的新版本中删除injectBabelPlugin方法,这些方法被移到一个“customize-cra”包中了。1. 下载customize-cra依赖包cnpm i customize-cra --save-dev或yarn add customize-cra --save-dev2. 下载less,less-loader(如果用不到可以暂时不下载,直接跳转到第3步)cnpm i less cnpm i -D .原创 2020-10-23 12:31:29 · 259 阅读 · 1 评论 -
【React】Module not found: Can‘t resolve ‘react-router-dom‘ in ‘D:\contrac t\recruit-client\src‘
解决方案:cnpm i -S react-router-dom 执行完以上命令后,重新执行npm start即可。原创 2020-10-22 21:23:05 · 7340 阅读 · 1 评论 -
【React】在Chrome浏览器上安装redux调试工具
1. 安装Chrome浏览器插件redux-devtools 2.17.0.crx① 如果可以翻墙的话,直接在chrome商店中搜索redux-devtools,安装即可。② 若不能翻墙,如下是github下载链接:https://github.com/zalmoxisus/redux-devtools-extension2. 下载工具依赖包cnpm i --save-dev redux-devtools-extension3. 编码(store.js)import {com..原创 2020-10-22 20:08:19 · 773 阅读 · 0 评论 -
【React】使用react-redux编写counter应用(优化后)
继续根据上一篇博文中提出的问题进行优化:https://blog.csdn.net/zqq_2016/article/details/1092277611. 下载依赖包cnpm i --save redux react-reduxcnpm i --save redux-thunk //redux插件(异步中间价),用来写异步代码2. action-types.js/* * 包含所有的action type的常量字符串 */export const INCREMENT = 'I原创 2020-10-22 19:48:37 · 202 阅读 · 0 评论 -
【React】使用react-redux编写counter应用
1. 下载依赖包cnpm i --save react-redux2. action-types.js/* * 包含所有的action type的常量字符串 */export const INCREMENT = 'INCREMENT'export const DECREMENT = 'DECREMENT'3. actions.js/* * 包含所有action creator */import {DECREMENT, INCREMENT} from "./acti原创 2020-10-22 18:26:33 · 143 阅读 · 0 评论 -
【React】Invalid hook call. Hooks can only be called inside of the body of a function component.
具体报错信息:解决办法:cnpm install --save react@^16.12.0 react-dom@^16.12.0 最好在执行完以上命令后,重新执行一下npm start.原创 2020-10-22 18:17:04 · 1439 阅读 · 0 评论 -
【React】使用redux编写counter应用(优化后)
目录结构: src/index.js src/App.js redux/action-types.js redux/actions.js redux/reducers.js redux/store.js1. 下载redux依赖包cnpm i --save redux2. action-types.js/* * 包含所有的action type的常量字符串 */export const INCREMENT =...原创 2020-10-22 15:01:28 · 120 阅读 · 0 评论 -
【React】简单使用redux编写counter应用(未优化前)
redux编写的应用主要的目录包括src/index.js、src/App.js、redux/action-types.js、redux/reducers.js. 注意:this.props.store.getState()与this.props.store.dispatch()的使用1. 下载redux依赖包cnpm i --save redux2. action-types.js/** 包含所有的action type的常量字符串* */export co...原创 2020-10-22 13:21:45 · 179 阅读 · 0 评论 -
【React】非受控组件select的使用&使用react编写counter应用
一、效果图二、需求描述 count变量的初始值为0,select的选择值分别为1、2、3,并定义变量number用于获取select当前选择值; 1. 点击“+”,获取number和count值,并实现简单相加; 2. 点击“-”,实现count+number; 3. 点击“increment if odd”,如果count是奇数,count与number相加; 4. 点击“increment async”,异步相加,设置延时定时...原创 2020-10-20 13:36:27 · 249 阅读 · 0 评论 -
【React】向路由组件传递数据
一、效果二、需求描述 点击菜单message001,显示对应id为1的详情内容; 点击菜单message003,显示对应id为3的详情内容。三、代码实现message.jsimport React, {Component} from 'react';import {Link, Route} from "react-router-dom";import MessageDetail from "./message_detail";class Me...原创 2020-10-19 19:51:55 · 444 阅读 · 0 评论 -
【React】嵌套路由使用
一、效果二、需求描述 默认显示一级菜单Home中的内容,分别是两个二级菜单News和Message。点击二级菜单News显示一个list列表;点击二级菜单Message异步显示message数组的title内容。三、代码实现 main.js | about.js | user.js 的内容不变(参考链接:https://blog.csdn.net/zqq_2016/article/details/109162418) home.jsimpo...原创 2020-10-19 18:16:24 · 243 阅读 · 0 评论 -
【React】基本路由的使用_单个页面的切换
一、效果二、需求描述 点击菜单项,显示对应组件内容。三、代码实现index.jsimport React from 'react';import ReactDOM from 'react-dom';import Main from "./components/react_router/main";import {BrowserRouter} from "react-router-dom";ReactDOM.render(( <Browse...原创 2020-10-19 16:00:33 · 637 阅读 · 0 评论 -
【React】React-Router 4 API文档
React-Router 4 API文档:https://reactrouter.com/web/guides/quick-start原创 2020-10-19 13:47:08 · 377 阅读 · 0 评论 -
【React】两种方式发送异步ajax请求
说明:1)React本身只关注于界面,并不包含发送ajax请求的代码;2)前端应用需要通过ajax请求与后台进行交互(json数据)3)react应用中需要集成第三方ajax库(或自己封装)一、axios封装XmlHttpRequest对象的ajax promise风格 可以在浏览器端和node服务器端1. 下载axioscnpm i axios --save2. 引入axiosimport axios from 'axios'3. 使用axios...原创 2020-10-18 17:54:01 · 996 阅读 · 0 评论 -
【React】实现评论的添加和删除
一、效果图二、需求描述 1. 手动输入用户名和评论内容,点击提交;输入内容被追加到右侧评论列表; 2. 点击评论列表的“删除”按钮,弹框提示确定删除用户“xx”; 3. 点击“确定”,“xx”用户发表的评论被删除; 4. 所有评论均被删除时,显示“暂无评论,点击添加评论!!!”三、代码实现App.jsimport React from 'react';import './App.c...原创 2020-10-18 15:42:40 · 763 阅读 · 1 评论 -
【React】定时器效果
一、效果图定时器启动(文本显示/隐藏)...清除定时器...二、代码实现Time.jsimport React, {Component} from 'react';import ReactDOM from 'react-dom'class Time extends Component { constructor(props) { super(props); this.state = { opacity: ..原创 2020-10-15 20:37:02 · 280 阅读 · 0 评论 -
【React】收集输入框的表单数据(受控组件vs非受控组件 input的使用)
受控组件:表单项输入数据能自动收集成状态。非受控组件:需要时才手动读取表单输入框中的数据。一、需求描述 收集输入的用户名和密码,并以弹框的方式显示出收集的用户名和密码。二、代码实现1. 通过非受控组件的方式实现import React, {Component} from 'react';class LoginForm extends Component { constructor(props) { super(props); thi..原创 2020-10-15 19:10:13 · 365 阅读 · 0 评论 -
【React】组件组合(实现将手动输入的内容追加显示到列表上)
一、需求描述 将手动输入的内容,追加显示到默认list列表上,最后将输入的内容进行清除。二、代码实现import React from 'react';class Test extends React.Component { constructor(props) { super(props); // 1. 初始化状态 this.state = { lists: ["list1", "list2", "lis..原创 2020-10-15 17:52:50 · 516 阅读 · 0 评论 -
【React】组件的三大属性之refs
获取input输入框中的值(分为两种情况):1. 仅获取input输入框的值,该input不存在事件发生handleClick() { // const input = this.refs.content // alert(input.value) const input = this.input.value alert(input)}2. 获取存在事件发生的input元素的值(利用形参event)handleBlur(event) { const in.原创 2020-10-15 15:34:46 · 166 阅读 · 2 评论 -
【React】ESLint: Useless constructor.(no-useless-constructor)
牢记一点:在类组件中,如下内容是一体的,要写必须一起写,哪怕this.state为空。 constructor(props) { super(props); this.state = {} }原创 2020-10-15 13:32:37 · 968 阅读 · 0 评论 -
【React】组件的三大属性之props
props的理解:① 每个组件对象都会有props(properties的简写)属性;② 组件标签的所有属性都保存在props中。props的作用:① 通过标签属性从组件外向组件内传递变化的数据;注意点:组件内部不要修改props数据。一、 注意工厂函数模式创建组件和类模式创建组件时props使用的区别?1. 工厂函数模式创建组件时props的使用:Fun.jsimport React from 'react';// 1. 创建组件function Fun(p.原创 2020-10-15 14:23:55 · 297 阅读 · 0 评论 -
【React】组件的三大属性之state
state的理解:① state是组件对象最重要的属性,值是对象(可包含多个数据);② 组件被称为“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件)。一、需求描述 点击文本“你喜欢我”,切换成文本“我喜欢你”二、具体代码(牢记状态的三个操作:① 初始化状态;② 读取状态;③ 更新状态)import React from 'react';import './App.css';class App extends React.Componen...原创 2020-10-15 12:51:42 · 180 阅读 · 0 评论 -
【React】安装React开发调试工具:React Development Tools
如果可以翻墙的话,直接在谷歌商店中搜索React Development Tools,添加插件到Chrome即可。 如果不能翻墙,网盘下载链接:https://pan.baidu.com/s/17a6rRrZf_-IcnZQgBULcPw 提取码: aa6w 如何将下载好的.crx插件加载到Chrome,具体请参考:https://blog.csdn.net/zqq_2016/article/details/103537269安装好React Development Tools工...原创 2020-10-14 19:20:16 · 795 阅读 · 1 评论 -
【React】两种方式使用Umi创建react项目
在正式创建项目前,需要具备的环境如下:1. node.js 下载链接:https://nodejs.org/zh-cn/download/ 验证是否安装成功:node -v2. 全局安装yarnnpm i yarn -g 验证是否安装成功:yarn -v一、使用yarn创建Umi框架的react项目yarn create @umijs/umi-app出现如下图,证明创建成功!!!二、使用npm创建Umi框架的react项目npx @umijs...原创 2020-10-13 19:48:08 · 1423 阅读 · 0 评论 -
【React】引入antd.css
import "antd/dist/antd.css"原创 2020-10-03 14:28:18 · 1032 阅读 · 0 评论 -
【div】 设置水平居中
在设置好高度之后,添加一句如下代码:margin:0 auto;原创 2020-09-29 14:15:02 · 756 阅读 · 0 评论 -
【React】实现div高度适配浏览器窗口大小
实现的方法有好几种,本人仅提供自己在实现过程中使用的这一种。<div style={{height:"100%",position:"absolute",width:"100%",left:0,top:0}}> {/* 中间内容省略 */}</div>实现效果:原创 2020-09-29 10:29:38 · 1784 阅读 · 0 评论 -
【React】使用import引入图片
需求描述:本人要用React实现一个底部TabBar功能,点击按钮之后,图标和字体更换颜色。问题描述:使用import在jsx文件中引入图片,图片显示不出来。 解决方案:import menu from "@/assets/menu.png"url(' + menu + ')其中,别名@,本人已在config-overrides.js文件中进行配置:const {override, fixBabelImports, addWebpackAlias} = ...原创 2020-09-28 19:41:44 · 2111 阅读 · 0 评论 -
使用两种方式创建react项目
一、开发环境 系统:win10 开发工具:IDEA node v11二、创建react项目myapp第一种方式:原创 2020-09-28 15:13:25 · 623 阅读 · 0 评论 -
Module build failed (from ./node_modules/_babel-loader@8.1.0@babel-loader/lib/index.js)
这个问题是本人在配置babel-loader之后,试图通过npm run dev命令打开主页面引起的。两种解决方案:第一种:均降低版本(本人使用的第一种方法解决的问题)npm install babel-loader@7 babel-core babel-preset-env -D第二种:均更新版本npm install babel-loader @babel/core @babel/preset-env webpack -D...原创 2020-09-14 20:23:04 · 2734 阅读 · 0 评论 -
ERROR in Entry module not found: Error: Can‘t resolve ‘./src‘ in ‘D:\contract\ipfs\go-ipfs\react_app
最近在学习React相关的内容,由于之前并没有专门系统地学习过前端的知识,学起来还是挺费劲的呢,希望能够帮助到像我一样刚开始学习React的小伙伴!出现这个问题的原因:webpack版本更新问题,webpack 4.x之后,有一个很大的特性,约定大于配置(webpack配置文件中进行配置);这个约定就是:默认的入口文件是:src目录下的index.js文件,当然也不是必须的。解决方案:方案一(推荐):在src目录下创建一个index.js文件,取代原有的main.js文件(webpac...原创 2020-09-07 15:27:50 · 868 阅读 · 0 评论