Node.js + MongoDB 搭建博客 -- 登录页面

news2024/10/7 10:18:12

准备工作

  • 安装Node.js
  • 安装express等相关库
  • MongoDB数据库
  • 电脑系统：win11

功能分析

搭建一个简单的具有多人注册、登录、发表文章以及登出功能的博客。

设计目标

未登录：主页左侧导航栏显示home、login、register，右侧显示已发表的文章、发表日期及作者。

登录后：主页左侧导航显示home、post、logout，右侧显示已发表的文章、发表日期及作者。

路由规划

路由规划可以说是网站的骨架部分，因为它处于整个架构的枢纽位置，相当于各个接口之间的粘合剂，所以应该优先考虑。

/ : 首页
/login : 用户登录页面
/reg : 用户注册
/post : 发表文章
/logout : 登出

我们要求 /login 和 /reg 只能是未登录的用户访问，/post 和 /logout 只能是已登录的用户访问。
左侧导航栏列表针对已登录或未登录的用户显示不同的内容。

先初始化并配置工程 ：具体过程可以查看我的另一篇博客 ： 点击这里进入

修改index.js如下：

var express = require('express');
var router = express.Router();

/* GET home page. */

module.exports = function (router) {
  router.get('/', function (req, res, next) {
    res.render('index', { title: '主页' });
  });

  router.get('/reg', function (req, res, next) {
    res.render('reg', { title: '注册' });
  })

  router.post('/reg', function (req, res, next) {

  })

  router.get('/login', function (req, res, next) {
    res.render('login', { title: '登录' })
  })

  router.post('/login', function (req, res, next) {

  })

  router.get('/post', function (req, res, next) {
    res.render('post', { title: '发表' })
  })

  router.post('/post', function (req, res, next) {
    
  })

  router.get('/logout',function(req,res,next){
    
  })
};

我们通过引入会话(session)机制记录用户登录状态，还要访问数据库来保存和读取用户信息。

使用数据库（MongoDB）

连接MongoDB数据库

我们使用官方提供的node-mongodb-native 驱动模块

在package.json 里的 dependencies里添加如下代码：

"mongodb":"*"

然后运行npm install 更新依赖的模块

配置数据库

在根目录下新建一个settings.js的文件作为数据库的配置文件，输入以下代码：

module.exports = {
    cookieSecret: 'myblog',
    db: 'blog',
    host: 'localhost'
}

创建数据库实例

在根目录下新建一个models的文件夹 并在dodels目录下新建一个db.js文件 在该文件里写入如下代码创建数据库连接实例并exports导出：

var settings = require('../settings'),
    Db = require('mongodb').Db,
    Connection = require('mongodb').Connection,
    Server = require('mongodb').Server;
module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), { safe: true });

这样我们就可以使用require导入这个文件 来对数据库进行读/写了。

会话支持

会话(session)是一种持久网络协议，在用户端和服务端之间创建关联，从而起到交换数据包的作用，session在网络实例中是非常重要的一部分。
为了在无状态的HTTP协议上实现会话，Cookie诞生了，Cookie是一些储存在客户端上的信息，每次连接的时候由浏览器向服务器递交，服务器也向浏览器发起存储Cookie的请求，依靠这样的手段服务器可以识别客户端。

浏览器首次向服务器发起请求时，服务器生成一个唯一标识符发送给客户端浏览器，浏览器会将这个唯一标识储存在Cookie中，以后每次再发起请求，客户端浏览器都会向服务器传送这个唯一标识符，服务器通过这个唯一的标识符来识别用户。而对于开发者来说，我们无需关心浏览器的储存，需要关注的仅仅是如何通过这个唯一标识符来识别用户。很多服务端脚本语言都有会话功能，如PHP把每个唯一标识符储存在了文件中。

express也提供了会话中间件，默认情况下是把用户信息储存在内存中，但我们既然已经有了mongodb数据库，不妨把会话信息储存在数据库中，便于持久维护。为了使用这一功能，我们首先要获取一个叫做connect-mongo的模块。

在package.json 中添加以下代码：

"connect-mongo": "*"

控制台输入如下代码安装模块：

npm install

在导入模块的代码块里输入以下代码：

var MongoStore = require('connect-mongo')(express)
var settings = require('./settings')

导入connect-mongo模块 已经之前写好的数据库配置文件

在中间件代码块里写入以下代码：

app.use(cookieParser());
app.use(express.session({
  secret: settings.cookieSecret,
  key: settings.db,
  cookie: {
    maxAge: 1000 * 60 * 60 * 24 * 30
  },
  store: new MongoStore({
    db: settings.db
  })
}))

cookieParser()是Cookie解析的中间件。express.session(()则提供会话支持，secret用来防止篡改Cookie，key的值为Cookie的名字，通过设置Cookie的maxAge的值来设定Cookie的生存期，这里我们设置三十天，设置它的store参数为Mongestore实例，把会话信息储存到数据库中，以避免丢失。我们可以通过req,session来获取当前用户的会话对象，获取用户相关 信息。

注册和登录

页面设计

登录页和注册页面设计

修改views/index.ejs:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Blog</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <header>
    <h1>
      <%= title %>
    </h1>
  </header>
  <nav>
    <span><a title="主页" href="/">home</a></span>
    <span><a title="登录" href="/login">login</a></span>
    <span><a title="注册" href="/reg">register</a></span>
  </nav>
  <article>

  </article>
</body>

</html>

修改css目录中的样式

* {
  padding: 0;
  margin: 0;
}

body {
  width: 600px;
  margin: 2em auto;
  padding: 0 2em;
  font-size: 14px;
  font-family: "Microsoft YaHei";
}

p {
  line-height: 24px;
  margin: 1em 0;

}

header {
  padding: 0.5em 0;
  border-bottom: 1px solid #cccccc;

}

nav {
  position: fixed;
  left: 12em;
  font-family: "Microsoft YaHei";
  font-size: 1.1em;
  text-transform: uppercase;
  width: 9em;
  text-align: right;
}

nav a {
  display: block;
  text-decoration: none;
  padding: 0.7em 1em;
  color: #000;
}

nav a:hover {
  background-color: #ff0000;
  color: #f9f9f9;
  -webkit-transition: color 0.2s linear;
}

article {
  font-size: 16px;
  padding-top: 5em;
}

article a {
  color: #dd0000;
  text-decoration: none;
}

article a:hover {
  color: #333333;
  text-decoration: underline;
}

.info {
  font-size: 14px;
}

在这里插入图片描述

在这里插入图片描述

新建一个login.ejs文件写入代码并插进index.ejs中

<form method="post">
    用户名:<input type="text" name="name" /><br>
    密码:<input type="password" name="password" /><br>
    <input type="submit" value="登录">
</form>

在这里插入图片描述
登录界面就完成了

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

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

相关文章

视觉SLAM14讲第三章习题作业

视觉SLAM14讲第三章习题作业

这是本人的解答&#xff0c;并非官方解答 验证旋转矩阵是正交矩阵 在第44页中&#xff0c;旋转矩阵的引入是这样的&#xff1a; 所以&#xff0c;我们需要验证矩阵 R[e1Te1′e1Te2′e1Te3′e2Te1′e2Te2′e2Te3′e3Te1′e3Te2′e3Te3′]R \begin{bmatrix} e_1^{T}e_1^{}&am…
阅读更多...
【Java开发】设计模式 02：工厂模式

【Java开发】设计模式 02：工厂模式

1 工厂模式介绍工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。在工厂模式中&#xff0c;我们在创建对象时不会对客户端暴露创建逻辑&#xff0c;并且是通过使…
阅读更多...
Weblogic管理控制台未授权远程命令执行漏洞复现（cve-2020-14882/cve-2020-14883）

Weblogic管理控制台未授权远程命令执行漏洞复现（cve-2020-14882/cve-2020-14883）

目录漏洞描述影响版本漏洞复现权限绕过漏洞远程命令执行声明&#xff1a;本文仅供学习参考&#xff0c;其中涉及的一切资源均来源于网络&#xff0c;请勿用于任何非法行为&#xff0c;否则您将自行承担相应后果&#xff0c;本人不承担任何法律及连带责任。 漏洞描述 Weblogic…
阅读更多...
CorelDRAW2023最新版新增功能200多个新模板

CorelDRAW2023最新版新增功能200多个新模板

CorelDRAW是一款平面矢量绘图排版软件&#xff0c;CorelDRAW运用涵盖企业VI设计&#xff0c;广告设计&#xff0c;包装设计&#xff0c;画册设计&#xff0c;海报、招贴设计&#xff0c;UI界面设计&#xff0c;网页设计&#xff0c;书籍装帧设计&#xff0c;插画设计&#xff0…
阅读更多...
韩信点兵问题，鸡兔同笼问题，闰年判断问题等，我用Python瞬间搞定(13)

韩信点兵问题，鸡兔同笼问题，闰年判断问题等，我用Python瞬间搞定(13)

小朋友们好&#xff0c;大朋友们好&#xff01;我是猫妹&#xff0c;一名爱上Python编程的小学生。欢迎和猫妹一起&#xff0c;趣味学Python。今日主题最近猫妹一直在练习Python编程&#xff0c;有些习题真是经典啊&#xff01;比如韩信点兵问题&#xff0c;比如鸡兔同笼问题等…
阅读更多...
【Linux】线程实例 | 简单线程池

【Linux】线程实例 | 简单线程池

今天来写一个简单版本的线程池 1.啥是线程池 池塘&#xff0c;顾名思义&#xff0c;线程池就是一个有很多线程的容器。 我们只需要把任务交到这个线程的池子里面&#xff0c;其就能帮我们多线程执行任务&#xff0c;计算出结果。 与阻塞队列不同的是&#xff0c;线程池中内有…
阅读更多...
代码随想录刷题-数组-螺旋矩阵II

代码随想录刷题-数组-螺旋矩阵II

文章目录螺旋矩阵 II习题我的解法别人的解法螺旋矩阵 II 本节对应代码随想录中&#xff1a;代码随想录&#xff0c;讲解视频&#xff1a;一入循环深似海 | LeetCode&#xff1a;59.螺旋矩阵II_哔哩哔哩_bilibili 习题 题目链接&#xff1a;59. 螺旋矩阵 II - 力扣&#xff0…
阅读更多...
将spring boot项目打包成一个可执行的jar包

将spring boot项目打包成一个可执行的jar包

将spring boot项目打包成一个可执行的jar包&#xff0c;jar包自带了整个运行环境简化配置&#xff0c;可直接运行&#xff0c;本次使用HelloWorld项目演示。 创建Spring Boot项目在pom.xml中导入插件 <build><plugins><plugin><groupId>org.springfr…
阅读更多...
计算机网络：移动IP

计算机网络：移动IP

移动IP相关概念 移动IP技术是移动结点&#xff08;计算机/服务器&#xff09;以固体的网络IP地址&#xff0c;实现跨越不同网段的漫游功能&#xff0c;并保证了基于网络IP的网络权限在漫游中不发生任何改变。移动结点&#xff1a;具有永久IP地址的设备。归属代理&#xff08;本…
阅读更多...
西瓜播放器全屏功能源码分析

西瓜播放器全屏功能源码分析

H5业务中使用了西瓜播放器&#xff0c;嵌入各个APP&#xff0c;全屏时候会有相应的差异。带着好奇心&#xff0c;阅读一下xgpplayer全屏功能部分源代码。源码地址一、工具方法其他方法看名称就知道是dom操作相关&#xff0c;无需多说&#xff0c;上面这两个工具方法主要用来检测…
阅读更多...
数学建模资料整理

数学建模资料整理

数学建模中有三类团队&#xff1a; 第一类&#xff1a;拿到题目&#xff0c;讨论&#xff0c;然后建模手开始建模&#xff0c;编程手开始处理数据&#xff0c;写作手开始写作。 第二类&#xff1a;拿到题目&#xff0c;团内大佬&#xff0c;开始建模&#xff0c;然后编程&#…
阅读更多...
【GAOPS055】verilog 乘法、除法和取余

【GAOPS055】verilog 乘法、除法和取余

乘法硬件原理结论思路1思路2举例编码仿真综合除法硬件原理verilog代码仿真结果资源占用乘法硬件原理 结论 可以将乘法A x B转为A的移位相加。 利用乘2n就是左移n位的特性乘2^n就是左移n位的特性乘2n就是左移n位的特性&#xff0c;将数拆分为2n2^n2n表示 思路1 原始列竖式计…
阅读更多...
【C++】通过priority_queue、reverse_iterator加深对于适配器和仿函数的理解

【C++】通过priority_queue、reverse_iterator加深对于适配器和仿函数的理解

苦尽甘来 文章目录一、仿函数&#xff08;仿函数就是一个封装()运算符重载的类&#xff09;1.C语言的函数指针2.C的仿函数对象二、priority_queue中的仿函数1.模拟实现优先级队列1.1 优先级队列的本质&#xff08;底层容器为vector的适配器&#xff09;1.2 向下调整算法建堆1.3…
阅读更多...
git添加子模块(submodule)

git添加子模块(submodule)

git添加子模块(submodule) 背景 有时候自己的项目需要用到别人的开源代码&#xff0c;例如 freertos 和 tinyusb 这个时候有两种选择 将开源的代码下载下来放到自己的 git 中管理 缺点&#xff1a;如果远端仓库更新&#xff0c;自己仓库的代码不会更新 将开源代码通过子模块…
阅读更多...
2023河北沃克HEGERLS甘肃金昌重型仓储项目案例｜托盘式四向穿梭车智能密集存储系统在工业行业的创新应用

2023河北沃克HEGERLS甘肃金昌重型仓储项目案例｜托盘式四向穿梭车智能密集存储系统在工业行业的创新应用

项目名称&#xff1a;自动化仓储托盘式四向穿梭车智能密集立体库项目 项目合作客户&#xff1a;甘肃省金昌市某集团企业 项目施工地域&#xff1a;甘肃省金昌市 设计与承建单位&#xff1a;河北沃克金属制品有限公司&#xff08;自主品牌&#xff1a;海格里斯HEGERLS&#x…
阅读更多...
Mysql的Explain关键字

Mysql的Explain关键字

引入 MySQL为我们提供了 explain 关键字来直观的查看一条SQL的执行计划 概念 1.id SELECT识别符&#xff0c;这是SELECT的查询序列号 2.select_type 查询类型 SIMPLE:简单SELECT(不使用UNION或子查询) PRIMARY:最外面的SELECT UNION:UNION中的第二个或后面的SELECT语句 DEPEND…
阅读更多...
你的游戏帐号是如何被盗的

你的游戏帐号是如何被盗的

据报道&#xff0c;2022上半年&#xff0c;中国游戏市场用户规模达到了5.54亿人&#xff0c;游戏市场销售收入1163.1亿元&#xff0c;相较去年均为同比增长的情况。如此庞大的市场规模&#xff0c;黑色产业链是绕不开的话题。 但相较于游戏中大家常见的玩家与玩家、玩家与官方…
阅读更多...
一维连续型随机变量函数的分布例题（一）

一维连续型随机变量函数的分布例题（一）

设随机变量X的概率密度为&#xff0c;求Y2X8的概率密度。 令g(x)Y&#xff0c;即g(x)2X8。我们可以得到Y的值域为(8,16)。 方法一&#xff1a;看看Y是不是单调可导的函数 此处Y单调可导。 然后求Y的反函数&#xff0c;即。再对h(x)求导可得。 再由公式我们可得 再补上定义域…
阅读更多...
[洛谷-P1273]有线电视网（树形DP + 分组背包DP）

[洛谷-P1273]有线电视网（树形DP + 分组背包DP）

[洛谷-P1273]有线电视网&#xff08;树形DP&#xff09;一、题目内容题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1提示二、思路分析三、代码一、题目内容 题目描述 某收费有线电视网计划转播一场重要的足球比赛。他们的转播网和用户终端构成一棵树状结构&#xff…
阅读更多...
Nacos配置拉取及配置动态刷新原理【源码阅读】

Nacos配置拉取及配置动态刷新原理【源码阅读】

Nacos配置拉取及配置刷新原理 一、初始化时获取配置文件 背景 SpringCloud项目中SpringBoot在启动阶段除了会创建SpringBoot容器&#xff0c;还会通过bootstrap.yml构建一个SpringCloud容器&#xff0c;之后会在准备上下文阶段通过SPI加载实现类后&#xff0c;会进行配置合并…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023