手把手,从零开始搭建个人博客网站(附源码)

article/2025/10/14 15:50:08

项目介绍

一、项目功能:

实现登录功能

密码数据加密

用户管理功能(用户增删改查)

文章管理功能(文章增删改查)

文章首页展示

文章评论功能(需登录)

首页文章展示、 用户管理、文章管理的数据分页功能

二、使用技术

主要:Node.js+Express+MongoDB

三、项目使用方法

前提条件:你的电脑要有Node.js 和 MongoDB数据库软件

使用命令行工具切换到项目根目录

下载项目依赖,命令行输入:

图片

四、项目页面展示

首页

图片

登录页面

图片

用户管理页面

图片

用户新增/修改页面

图片

文章管理页面

图片

文章新增/修改页面

图片

文章评论

图片

退出登录(清除cookie、session)

图片

用户数据加密

图片

五、部分项目代码展示

几乎每一行代码都有注释,所以点个一件赞支持一下吧!

图片

图片

图片

欢迎有需要的同学试试,如果本文对您有帮助,请帮忙点个一键三连吧!

在 Java大蜗牛 还有更多优质的干货文章,欢迎分享给其它同学!

 源码获取 

扫描下方二维码,后台回复【博客】即可获取

图片

咱们下次见!

版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。谢谢!


http://chatgpt.dhexx.cn/article/25WEIxBB.shtml

相关文章

HTML5+CSS编写个人博客界面

刚入门html和css,花了一天入门基础,第二天花了五六个小时完成老师布置的作业——个人博客界面,初学者可以进行参考编写。 注:里面的链接都不能点击 废话少说,看结果: 参考代码: microbloy.htm…

js个人博客设计大作业

视频演示: 大作业演示 图片看效果: 网站规划设计 1.结构设计 共设计3个HTML界面:一个登陆界面,一个注册界面,以及主页面; 2.内容规划 登陆界面包含logo,输入用户名,输入密码和登…

python数据可视化:使用dash给博客制作一个dashboard

项目部署在:https://ffzs-blog-dashboard.herokuapp.com/ 项目代码在:https://github.com/ffzs/dash_blog_dashboard 1.dashboard 仪表板通常提供与特定目标或业务流程相关的关键绩效指标(KPI)的概览。另一方面,“仪表…

四、登录注册页功能实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 首先打开在线编辑器进入我们的项目:https://editor.ivx.cn/ 一、登录页功能实现 上一节中已经完成了登录页的页面制作,那么这一节就开始对应的完成登录页的功能实现。 登录页的功能实现主要是对用户…

七、文章管理页面及功能实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、文章管理页页面制作 文章管理页的基本结构与首页类似,我们复制一个首页,并且重命名首页的名称为文章管理页: 我们接着删除如下图所框选部分内容: 接着重命名导航为内容…

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、详情页制作 在之前的章节中,我们已经制作完毕了登录、注册、首页等内容,在这一节中,我们编写详情页以及详情页功能制作。 详情页页面如下: 详情页头部也就是一个头部栏&…

三、登录页制作《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、登录页实现 本节需要做的登录页如下: 该页面我们复习可以的值,首先设置整个页面页面的垂直和水平对其为居中,随后一个容器包裹对应的登录区域,此时我们创建一个页面命名为…

一、首页、详情页、文章编辑页制作《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、首页制作 首页预览如下: 首先在博客页创建一个相对应项目: 接着选择前台,创建一个页面,命名为首页: 接着更改当前屏幕为小屏尺寸: 接着我们分…

二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》 一、文章编辑页制作 当首页制作完毕后,需要显示内容就需要有文章数据,此时我们创建一个文章编辑页增加对应的数据。 那么我们创建一个页面,命名为文章发布页: 接着我们查看标…

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容,并且可以进行拖动: 首先咱们添加一个行,命名为菜单: 接着肯定是需要设置上下的内边…

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容,底部的评论我们在此不必做悬浮内容,咱们直接放到博文之下进行显示即可;顶部标题需要…

博客中GIF动画超简单制作

前言: 在写博客的时候图片和视频是非常通俗易懂的,比文字表述更为清晰,有时候演示过程用动画效果更好,毕竟图片只是静态的,看不出整个过程。而录制成视频,体积大,保存发送也比较麻烦,最重要的事博客中不支持这种格式,所以制作成GIF动画,方便、占用空间又小、博客也支…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo&am…

《博客页面制作》教程

《博客页面制作》教程 一、《博客页面制作》第一部分 效果图&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>博客制作-第一部分</title><style type"text/css"&g…

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…

搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…