【Node.js实战】一文带你开发博客项目之登录(前置知识)

news2025/7/6 22:59:48

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端
📃个人状态: 在校大学生一枚,已拿多个前端 offer(秋招)
🚀未来打算: 为中国的工业软件事业效力n年
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

Node.js系列文章目录

内容参考链接
Node.js(一)初识 Node.js
Node.js(二)Node.js——开发博客项目之接口
Node.js(三)Node.js——一文带你开发博客项目(使用假数据处理)
Node.js(四)Node.js——开发博客项目之MySQL基础
Node.js(五)Node.js——开发博客项目之API对接MySQL

文章目录

  • Node.js系列文章目录
    • 一、前言
    • 二、cookie、session、redis
      • 1、cookie
      • 2、session
      • 3、redis
      • 4、为什么 session 适合用 redis?
      • 5、为何网站数据不适合用 redis?
    • 三、安装 redis
    • 四、nodejs 连接 redis 的测试
    • 五、写在最后


一、前言

登录功能一般都是有 约定俗成的方法 的。

在这里我们使用 session 的方式 去实现登录功能!

二、cookie、session、redis

1、cookie

  • 存储在浏览器的一段字符串(最大 4kb)
  • 跨域不共享
  • 格式如 k1=v1;k2=v2;k3=v3; 因此可以存储结构化数据
  • 每次发送 http 请求,会将请求域的 cookie 一起发送给 server
  • server 可以修改 cookie 并返回给浏览器
  • 浏览器中也可以通过 JavaScript 修改 cookie(有限制)

2、session

  • 单独使用 cookie 会暴露 username,很危险
  • 如何解决:cookie 中存储 userid,server 端对应 username
  • 解决方案:session,即 server 端存储用户信息

在这里插入图片描述

3、redis

  • web server 最常用的缓存数据库,数据存放在内存中
  • 相比于 mysql,访问速度快(内存和硬盘不是一个数量级的)
  • 但成本更高,可存储的数据量更小(内存的硬伤)
  • 将 web server 和 redis 拆分为两个单独的服务
  • 双方都是独立的,都是可扩展的(例如都扩展成集群)
  • (包括 mysql,也是一个单独的服务,也可扩展)

在这里插入图片描述

4、为什么 session 适合用 redis?

  • session 访问频繁,对性能要求极高
  • session 可不考虑断电丢失数据的问题(内存的硬伤)
  • session 数据量不会很大(相对于 mysql 中存储的数据)

5、为何网站数据不适合用 redis?

  • 操作频率不是太高(相比于 session 操作)
  • 断电不能丢失,必须保留
  • 数据量太大,内存成本太高

三、安装 redis

安装 redis 参考链接

有以下内容输出,即安装成功:

在这里插入图片描述

blog.csdnimg.cn/c9759ae9b1524ba88c49ffab17264cbe.png)

四、nodejs 连接 redis 的测试

创建 redis-test 文件夹,控制台输入 npm init -y 进行初始化,并创建 index.js 文件

在这里插入图片描述

安装 redis

npm i redis

index.js 文件

  • 导入 redis 模块
  • 创建客户端并连接(端口号,服务端地址)
  • 退出
const redis = require('redis')

!(async function () {
    // 创建客户端
    const redisClient = redis.createClient(6379, '127.0.0.1')

    // 连接
    await redisClient.connect()
        .then(() => console.log('redis connect success!'))
        .catch(console.error)
        
    // set
    await redisClient.set('myname', 'zahuopu')
    
    // get
    const myname = await redisClient.get('myname')
    console.log('myname', myname)
    
    // 退出
    redisClient.quit()
})()

开启 redis 服务,终端运行文件:

在这里插入图片描述

五、写在最后

至此,我们明白了为什么要把 session 存入 redis,并对 redis 做了连接的测试。继续跟进学习吧!

后续会对该项目进行多次重构【多种框架(express,koa)和数据库(mysql,sequelize,mongodb)】

如果你需要该项目的 源码,请通过本篇文章最下面的方式 加入 进来~~


在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405711.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序自定义组件(超详细)

💌写在开头: 哈喽呀,亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分:组件的创建,组件的结构,组件的引用,组件样式,组件的生命周期等。 文章目录…

【蓝桥杯真题】当蓝桥杯开设Web组之后,对几题能拿省一?

目录 🏆难度分析 🏆一、水果拼盘 🏆二、展开你的扇子 🏆三、和手机相处的时光 🏆四、灯的颜色变化 🏆五、冬奥大抽奖 🏆六、蓝桥知识网 🏆七、布局切换 🏆八、购…

vue3,使用watch监听props中的数据

情况一:监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick () > {testStr.value P }子组件中监听传入的数据 watch(() > props.testStr,(newVal, oldVal) > {console.log(监听基本类型数据testStr)console.log(new, newVal)cons…

Vue 和 React 有什么不同?

大家好,我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。 本人 Vue2 和 React 都用过,但不熟悉 Vue3,没用它做过项目。 其实我对这两大框架也没有认真钻研过它们的细节,也就是工作上用它们写一些简单业务&#xf…

解决npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

在vue项目中,使用npm i 命令安装node modules时,出现报错。 第一句: npm ERR! Cannot read properties of null (reading pickAlgorithm) 搜索的话也是有很多答案的,比如: 在终端中运行命令:npm cache cle…

Vue使用axios进行get请求拼接参数的几种方式

前言 本文主要介绍如何在Vue使用axios进行get请求拼接参数的两种方式 我们就以github上的一个开源接口举例: https://api.github.com/search/users?qxxx 这是github给开发人员提供的一个接口,是get请求。我们可以直接通过浏览器访问 很明显&#xff0…

ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色

本文首发:《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》 ECharts 饼状图颜色设置教程 方法一:在 series 内配置饼状图颜色方法二:在 option 内配置饼状图颜色方法三:在 data 内配置饼状图颜色方法四:配置 E…

UE4 利用WEBUI插件完成UE与JS的交互 (UE4嵌入WEB)

目录 一、UE4显示Echart图表 二、UE调用JS(修改Echart图表数据) 三、JS调用UE(UE4中打印js传递过来的数据) 一、UE4显示Echart图表 步骤: 1.下载WEBUI插件 我的UE编辑器版本是4.24.3对应版本的插件下载地址是 链…

全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】

源码获取方式: 数据滚动大屏源码,原生js实现超级简单-Javascript文档类资源-CSDN下载原生js实现的数据滚动大屏案例,实现应该是全网最简单的,拿来直接使用即可,没有会员的小伙伴去我文章主更多下载资源、学习资料请访问…

聊一聊浏览器打印 - window.print

前言 一般信息填写类的需求页面,都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图,而打印则是基于预览来生成 PDF 文件。 浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图…

CSS中animation动画-详解

1、animation有什么组成? Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作 2、关键帧应该怎么表示? 0%表示…

CSS的hover属性

1.hover的定义 :hover在鼠标移到链接上时添加的特殊样式 :hover适用于任何元素 2.hover的使用方法 用法1:控制自身的样式 鼠标悬浮在元素上改变元素样式,改变本身的背景颜色,例如: 用法2:通过hover控制其他块的样式 (1)控制子元素的样式…

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航 回顾上篇文章&#x1f449…

nvm管理node版本

nvm 使用 1. nvm介绍 nvm 全英文也叫 node.js version management,是一个 nodejs 的版本管理工具 nvm 和 npm 都是 node.js 版本管理工具,为了解决 node.js 各种版本存在不兼容现象可以通过它可以安装和切换不同版本的 node.js 2. 安装与配置 2-1 nv…

CSS绝对定位(absolute)、相对定位(relative)方法(详解)

CSS中几种常用的定位方法,直接上干货! 什么是定位? 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定 position属性。他们也有不同的工作方式,这…

Echarts直角坐标系x轴y轴属性设置大全

1、Echarts版本 "echarts": "^5.3.3", 2、最简单的直角坐标系,以柱状图为例。 常见的直角坐标系,x轴设置type: category,为类目轴,适用于离散的类目数据;y轴设置type: value,为数值轴…

前端编程中你是如何进行调试代码的?这篇文章让你学会更多调试方法——前端新手进阶

要我讲就是:对自己代码自信的人,从来不需要调试,只是log一下值是否符合预期(doge)。 哈哈,这当然是一句玩笑话,不管你是刚刚起步的新手,还是从业多年的老手,编程中或多或少都会遇到一些瓶颈&…

Vue3中的watch监听

目录 一、监听基础ref类型 1、监听单个ref数据 2、 监听多个ref数据 二、监听reactive类型 1、监听对象中单个属性 2、监听对象中多个属性 3、同时监听ref基本类型数据和reactive对象中的属性 4、监听整个对象 5、监听对象中值为对象的属性 三、watchEffect 一、监听基础…

JS数组方法中哪些会改变原数组,哪些不会?

前言 作为一名前端开发人员,我们每天都会与数组打交道。JS 也提供了很多操作数组的原生 API 供我们调用。在这些方法里面,有的方法会改变原数组,有些不会改变原数组。别看这一点小小的区别,往往会造成巨大的影响,特别…

HTML常用标签超详细整理

HTML概述 1.1 什么是HTML HTML是做网站的、Web开发、互联网生态开发(PC端移动端微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术 1.2 HTML概念 HTML:Hyper Text Markup Language&#…