
Node.js与React.js项目实战
文章平均质量分 51
这里是个人的Node.js使用经验总结和React.js项目实战记录。
优惠券已抵扣
余额抵扣
还需支付
¥199.90
¥299.90
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
jimson_zhu
Think more and do more.
展开
-
前端项目技术点总结:ReactNative技术和案例分析
1、RN开发常用组件标签1)View2)Text3)TextInput常用属性:underlineColorAndroid:设置下划线颜色;placeholder:提示语。4)Image常用属性:source={{uri:''}}5)TouchableOpacity常用属性:activeOpacity:设置按下时的透明度;onPress...原创 2019-12-29 13:26:21 · 100 阅读 · 1 评论 -
前端项目技术点总结:ReactNative部分
一)搭建Android开发环境1、安装jdk1.82、安装AndroidStudio2+3、配置Android的环境变量:添加环境变量:ANDROID_HOME :android sdk根路径修改path路径:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools二)安装其他1、安装python22、安装Node 10....原创 2019-12-24 19:28:17 · 71 阅读 · 1 评论 -
前端项目技术点总结:React项目案例——大案例
大案例创建一个浏览当前上映的电影信息和热门电影的前台项目。项目创建步骤如下:1)安装使用antdyarn add antd2)配置按需加载yarn add babel-plugin-import --dev然后在.babelrc文件里的plugins下进行配置:"plugins": [ "transform-runtime", ...原创 2019-12-24 15:16:39 · 84 阅读 · 1 评论 -
前端项目技术点总结:React——路由
路由概念:根据不同的url展示不同的页面或内容。原理:通过onhashchange来改变,只要hash变化,就可以触发hashchange指令。代码举例:window.onhashchange = function(){ console.log(window.location.hash);}React路由使用步骤1)使用组件通过三个常用组件:HashRout...原创 2019-12-24 14:38:29 · 83 阅读 · 1 评论 -
前端项目技术点总结:React项目案例——小案例
小案例:博客评论1)首先添加标签样式,引入bootstrapRecommendObject.jsimport React, { Component, Fragment } from 'react';export default class RecommendObject extends Component { constructor(props) { su...原创 2019-12-24 14:09:14 · 75 阅读 · 0 评论 -
前端项目技术点总结:React项目创建
React项目创建步骤1)安装相应loader和插件,并配置安装插件html-webpack-plugin;安装对应loader(css,js,图片等等);安装webpack-dev-server;创建webpack.config.js,配置入口、出口、插件和loader;然后在package.json里配置热启动等命令(之前也说过了)。2)安装react和reac...原创 2020-01-10 19:38:12 · 64 阅读 · 1 评论 -
前端项目技术点总结:React核心知识点(虚拟DOM等)
1、webpack基本使用和配置1)项目初始化npm init -y说明:-y指yes的意思,省略了敲回车的麻烦。2)安装webpack和webpack-clinpm install webpack webpack-cli --save-dev或者:yarn add webpack webpack-cli --save-dev3)新建webpack.config.j...原创 2020-01-07 23:46:59 · 56 阅读 · 1 评论 -
十五)React项目实战记录:手写封装路由守卫
2、如果访问的不是登录页面,并且没有token, 跳转到登录页;1、如果访问的是登录页面, 并且有token, 跳转到首页;而react没有路由守卫,需要自己手动封装。3、其余的都可以正常放行。原创 2024-01-16 01:39:48 · 269 阅读 · 0 评论 -
十四)React项目实战记录:网络接口封装和数据交互
【代码】十四)React项目实战记录:网络接口封装和数据交互。原创 2024-01-16 01:33:08 · 261 阅读 · 0 评论 -
十三)React项目实战记录:react-redux封装
react-redux封装步骤如下。可以先安装redux-thunk。其余的类似,代码分别如下。原创 2024-01-16 01:24:54 · 304 阅读 · 0 评论 -
十二)React项目实战记录:redux-dev-tools安装
网上搜索,添加到谷歌浏览器的插件里即可。原创 2024-01-16 01:11:52 · 182 阅读 · 0 评论 -
十一)React项目实战记录:登录页面编写
【代码】十一)React项目实战记录:登录页面编写。原创 2024-01-16 01:10:18 · 746 阅读 · 0 评论 -
十)React项目实战记录:项目页面布局和菜单栏配置
上面代码还进行了菜单的选中、打开、折叠等状态的处理。原创 2024-01-16 01:00:26 · 348 阅读 · 0 评论 -
九)React项目实战记录:路由配置
【代码】九)React项目实战记录:路由配置。原创 2024-01-16 00:47:13 · 236 阅读 · 0 评论 -
八)React项目实战记录:配置Antd样式的自动按需引入
5.0版本以前需要手动配置自动按需引入,这里还是说一下吧。原创 2024-01-15 18:46:15 · 847 阅读 · 0 评论 -
七)React项目实战记录:Antd初步使用
【代码】七)React项目实战记录:Antd初步使用。原创 2024-01-15 18:28:53 · 189 阅读 · 0 评论 -
六)React项目实战记录:模块化管理样式
首先我们先创建目录和组件来验证这一问题。此时需要修改引入方式:模块化管理样式。scss文件的全局引入会影响其他组件。此时,发现组件2的样式不再受到影响了。这就是模块化管理样式的方式。原创 2024-01-15 17:43:23 · 128 阅读 · 0 评论 -
五)React项目实战记录:路径别名配置
但是出现了不存在path的警告提示,其实path是node的内置模块,安装node就已经安装了path模块了,所以出现警告提示是因为path和__dirname没有进行ts声明而已。这里的@代表的是绝对路径,因为它表示的是“./src”。-D是--save-dev的简写。这种效果,需要进行路径别名配置。原创 2024-01-15 17:00:28 · 128 阅读 · 0 评论 -
四)React项目实战记录:sass安装和使用
我们安装sass,以达到更好的写css的目的。原创 2024-01-15 16:44:00 · 613 阅读 · 0 评论 -
三)React项目实战记录:样式初始化
我们安装reset-css插件,对样式进行初始化,使页面去掉margin边距等:项目运行,页面的边距被去掉了:原创 2024-01-15 16:21:38 · 340 阅读 · 0 评论 -
二)React项目实战记录:目录初始化
创建完项目之后,我们需要把其余目前不需要的文件删掉,只保留下面几项,然后初始页面也删除其他标签,只保留最外层的div标签:原创 2024-01-15 16:11:19 · 139 阅读 · 0 评论 -
一)React项目实战记录:项目创建和运行
因为package-lock.json里的vite版本和package.json里的不一致,或者package-lock.json干脆就没有vite的版本信息,所以报错。redux是一个状态管理插件,类似vuex,redux可以用于其他框架如vue,react-redux是作者针对react能更好使用redux开发的一个插件。原创 2024-01-15 12:24:19 · 269 阅读 · 0 评论 -
Node.js日记:一个nodejs接口案例
node写接口。原创 2021-10-08 17:18:31 · 1342 阅读 · 0 评论 -
Node.js日记:爬虫demo
爬虫创建步骤1、http模块创建服务和request请求测试nodejs环境下,主要以模块来进行开发,离开了模块nodejs将失去光彩。http模块作为它比较重要的一个模块,可以用来帮我们创建一个服务器。我们来测试使用一下这个模块:const http = require("http");//创建服务http.createServer((req,res)=>{ ...原创 2020-11-21 15:42:55 · 298 阅读 · 0 评论 -
Node.js日记:项目案例举例
到目前为止,实现一个项目的Node.js知识已经在之前的博客完成说明,接下来以一个项目案例巩固之前的知识。项目需求与技术架构1)完成一个新闻发布,修改,删除,展示的网站,及完成对新闻的 CRUD,加高级查询和分页查询。2)因为要操作新闻数据,所以要使用 Mongoose + MongoDB,也需要处理用户的请求,需使用 Express + Node.js。功能分析- 新闻...原创 2020-11-21 15:41:58 · 1060 阅读 · 0 评论 -
Node.js日记:Mongoose
简介Mongoose 库简而言之就是在 Node.js 环境中操作 MongoDB 数据库的一种便捷的封装,一种对象模型工具,Mongoose 将数据库中的数据转换为 JavaScript 对象以供你在应用中使用。(即可以通过 JavaScript 代码去操作 MongoDB 数据库)。连接数据库1)新建项目目录 mongoose-demo,打开命令行跳转这个项目目录路径,执行以下命令...原创 2020-11-21 15:42:32 · 200 阅读 · 0 评论 -
Node.js日记:数据库(MongoDB)
为什么使用数据库原本存储数据的方式比如使用 Excel,不适合存储大量数据,也不适合需求变得复杂的环境。Excel 的储存量有限,访问速度及处理速度在数据量大时也是短板,且扩展性(兼容性)是远远不如数据库的。数据库相关概念数据库(DB)Database:是按照数据结构来组织、存储和管理数据的仓库。数据库管理系统(DBMS):是专门用于管理数据库的计算机系统软件。数据库管理系统能...原创 2019-12-16 14:25:25 · 231 阅读 · 0 评论 -
Node.js日记:Express
Express虽然使用 Node.js 中的 http 模块是可以开发 Web 应用的,处理静态资源,处理动态资源,请求分发(路由)等等,也可以让开发者对 HTTP 协议的理解更加清晰,但是使用起来比较复杂,开发效率低。作为 Web 应用开发者,我们不需要知道实现的细节,更不想与这些细节纠缠从而降低开发效率。npm 提供了大量的第三方模包,其中不乏许多 Web 框架,我们没有必要重复发...原创 2019-12-16 01:48:10 · 211 阅读 · 0 评论 -
Node.js日记:模板技术
模板技术模板技术的诞生是为了将显示与数据分离,模板技术多种多样,但其本质是将模板文件和数据通过模板引擎生成最终的文件内容。模板技术原理模板技术并不是什么神秘技术,干的是拼接字符串的体力活。模板引擎就是利用正则表达式识别模板标识,并利用数据替换其中的标识符。模板技术包含两个方面:- 定义模板标识符- 解析模板标识符代码举例://字符串替换的思想functio...原创 2019-12-16 01:08:45 · 207 阅读 · 0 评论 -
Node.js日记:包
包- 包(Package)是 Node.js 最重要的支柱。- Node.js 根据 CommonJS 规范实现了包机制,但不完全遵循。- 包是在模块基础上更深一步的抽象,Node.js 的包类似于 C/C++ 的函数库或者 Java/.Net 的类库。它将某个独立的功能封装起来,用于发布、更新、依赖管理和版本控制。- 开发中使用 npm 来解决包的发布和获取需求。CommonJ...原创 2019-12-16 00:48:47 · 135 阅读 · 0 评论 -
Node.js日记:Web相关
Web 服务器Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,主要功能是提供网上信息浏览服务。用户通过浏览器遵循 HTTP 协议访问 Web 服务器上所提供信息。目前最主流的三个 Web 服务器是 Apache、Nginx、IIS。Web 应用开发Web 应用程序是一种部署在 Web 服务器中的,可以通过 HTTP 协议访问的应用程序。可以通过什么来...原创 2019-12-15 18:20:36 · 154 阅读 · 0 评论 -
Node.js日记:url、querystring和util模块
url 模块作用:url 模块用于处理与解析 URL。使用前需引入:const url = require('url');1)url 属性说明2)代码举例const url = require('url');let myUrl1 = url.parse('https://user:pass@sub.host.com:8080/p/a/t/h?name=xx#has...原创 2019-12-15 17:26:34 · 170 阅读 · 0 评论 -
Node.js日记:FS模块(文件系统模块)
File SystemNode.js 提供一组标准的文件操作 API。Node 导入文件系统模块(fs),语法如下所示:const fs = require("fs");Node.js 文件系统模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的fs.readFileSync()。异步的方法函数最后一个参数为回调函数,回调函数的...原创 2019-12-15 17:16:58 · 212 阅读 · 0 评论 -
Node.js日记:Path模块
path因为 Node.js 是可以运行在不同操作系统上的,而不同操作系统的路径分隔符是不一样的,在 Windows 中,标准分隔符是“\”,在 UNIX 中,标准分隔符是“/”,还有它们之间根路径也是不一样的,所以 Node.js Path 模块提供了一些用于处理文件路径的小工具。注意在使用前需要通过以下方式引入该模块:const path = require("path");...原创 2019-12-15 16:53:13 · 184 阅读 · 0 评论 -
Node.js日记:文件系统
为何要有计算机文件系统计算机运行时所需要的数据和代码从主存储器或者内存中来。如果计算机不在运行状态时,这些数据和代码保持在何处呢?我们当然可以试一下内存,但问题是内存不是持久性的存储介质,它是进程运行过程中临时分配的存储空间。一旦进程结束运行,其所占内存空间就会被释放,存放在内存的数据和代码也将消失。而且,内存需要电能维持才能保持数据(指⼀般的内存),一旦断电,所有数据都将丢失。...原创 2019-12-15 16:38:41 · 190 阅读 · 0 评论 -
Node.js日记:Events
简介events 是 Node.js 最重要的模块,没有“之一” ,原因是 Node.js 本身架构就是事件式的,而它提供了唯一的接口,所以堪称 Node.js 事件编程的基石。events 模块不仅用于用户代码与 Node.js 下层事件循环的交互,还几乎被所有的模块依赖。例如,net.Server 会在每次有新连接时触发事件,fs.ReadStream 会在打开文件时触发事件。...原创 2019-12-15 16:21:24 · 131 阅读 · 0 评论 -
Node.js日记:I/O
IO 概述IO 在计算机中指 Input/Output,也就是输入和输出。程序运行时需要获取数据在内存操作,而程序的执行由 CPU 这个超快的计算核心来负责,涉及到数据读写的通常是磁盘、网络等。1)网络操作网络操作中,比如你打开浏览器访问新浪首页,浏览器这个程序就需要通过网络 IO 获取新浪的网页。浏览器首先会发送数据给新浪服务器,告诉它我想要首页的 HTML,这个动作是往外发...原创 2019-12-15 16:04:34 · 152 阅读 · 0 评论 -
Node.js日记:模块化
为什么需要模块化在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护。为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式,这种方式就是模块化的方式。使用模块有什么好处:1)最大的好处是大大提高了代码的可维护性;2)其次,编写代码不必从零开始。当一个模...原创 2019-12-15 15:36:18 · 141 阅读 · 0 评论 -
Node.js日记:Buffer
BufferJavaScript 语言自身只有字符串数据类型,没有二进制数据类型。但在处理像文件流时(文件读写操作),必须使用到二进制数据。因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门存放二进制数据的缓存区。说白了,Buffer 类似于一个整数数组。创建 Buffer 对象- Buffer.from(array): ...原创 2019-12-15 15:06:29 · 148 阅读 · 0 评论 -
Node.js日记:ES6——全局对象
几个重要概念1)在 Node.js 全局对象是哪个:global;//浏览器环境添加的变量都属于window对象var i = 1;console.log(window.i); //1//Node环境的全局变量是global,添加变量,只能直接添加global.j = 2;2)在 Node.js 环境中:this != global(重要);3)__dirname...原创 2019-12-14 00:31:14 · 245 阅读 · 0 评论