帮助你简易起步一个BLOG（博客搭建）项目

Blog项目

  • 后端
    • 项目结构
    • 1. 项目初始化
    • 2. 详细步骤
    • 3.postman测试
  • 前端
    • 1. 项目初始化
    • 2. 详细步骤

本章节是为了帮助你起步一个完整的前后端分离项目。
前端技术栈： react、vite、mantine、tailwind CSS、zustand、rxjs、threejs

后端技术栈：nodemon、nodejs、vite

后端

项目结构

blog-backend/
│
├── server/
│   ├── index.js
│   └── routes/
│       └── posts.js
├── package.json
└── vite.config.js

1. 项目初始化

  • 创建项目文件夹并初始化 Node.js 项目。
  • 安装必要的依赖项。

2. 详细步骤

  1. 创建项目文件夹并初始化 Node.js 项目
mkdir blog-backend
cd blog-backend
npm init -y
  1. 安装必要的依赖项
    安装 Express.js 作为我们的 web 框架，安装 Nodemon 作为开发依赖，用于监控文件变化并自动重启服务器。
npm install express
npm install --save-dev nodemon
  1. 创建 Express.js 服务器
    在 server 文件夹中创建 index.js 入口文件。
// server/index.js
const express = require('express');
const path = require('path');
const postsRouter = require('./routes/posts');const app = express();
const PORT = process.env.PORT || 3000;// 中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));// 路由
app.use('/api/posts', postsRouter);// 启动服务器
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
  1. 创建路由文件
    在 server/routes 文件夹中创建 posts.js 路由文件。
// server/routes/posts.js
const express = require('express');
const router = express.Router();// 模拟的博客帖子数据
let posts = [{ id: 1, title: 'First Post', content: 'This is the first post.' },{ id: 2, title: 'Second Post', content: 'This is the second post.' }
];// 获取所有博客帖子
router.get('/', (req, res) => {res.json(posts);
});// 获取单个博客帖子
router.get('/:id', (req, res) => {const post = posts.find(p => p.id === parseInt(req.params.id));if (post) {res.json(post);} else {res.status(404).json({ message: 'Post not found' });}
});// 创建新的博客帖子
router.post('/', (req, res) => {const newPost = {id: posts.length + 1,title: req.body.title,content: req.body.content};posts.push(newPost);res.status(201).json(newPost);
});// 更新博客帖子
router.put('/:id', (req, res) => {const post = posts.find(p => p.id === parseInt(req.params.id));if (post) {post.title = req.body.title || post.title;post.content = req.body.content || post.content;res.json(post);} else {res.status(404).json({ message: 'Post not found' });}
});// 删除博客帖子
router.delete('/:id', (req, res) => {posts = posts.filter(p => p.id !== parseInt(req.params.id));res.status(204).end();
});module.exports = router;
  1. 更新 package.json 脚本
    在 package.json 中更新脚本，以便在开发过程中使用 Nodemon 监控文件变化。
{"name": "blog-backend","version": "1.0.0","description": "A blog backend using Node.js and Express.js","main": "server/index.js","scripts": {"start": "node server/index.js","dev": "nodemon server/index.js"},"dependencies": {"express": "^4.17.1"},"devDependencies": {"nodemon": "^2.0.7"}
}
  1. 运行项目
    运行以下命令启动开发服务器：
npm run dev

通过以上步骤，我们已经创建了一个基本的博客后端项目，使用 Node.js 和 Express.js 提供 API 接口。这个后端支持获取、创建、更新和删除博客帖子。你可以在前端使用任何框架或工具与这个 API 进行交互。
a. 为这些 API 添加单元测试来验证其功能。
b. 增加用户认证和授权，以保护博客帖子数据。

3.postman测试

3.1 获取所有博客帖子

方法: GET
URL: http://localhost:3000/api/posts

点击 “Send” 按钮，你应该会看到类似下面的响应：

[{ "id": 1, "title": "First Post", "content": "This is the first post." },{ "id": 2, "title": "Second Post", "content": "This is the second post." }
]

3.2. 获取单个博客帖子

方法: GET
URL: http://localhost:3000/api/posts/1

点击 “Send” 按钮，你应该会看到类似下面的响应：

{ "id": 1, "title": "First Post", "content": "This is the first post." }

3.3. 创建新的博客帖子

方法: POST
URL: http://localhost:3000/api/posts

Body: 选择 raw 和 JSON，然后输入以下内容：

{"title": "New Post","content": "This is a new post."
}

点击 “Send” 按钮，你应该会看到类似下面的响应：

{"id": 3,"title": "New Post","content": "This is a new post."
}

3.4. 更新博客帖子

方法: PUT
URL: http://localhost:3000/api/posts/1

Body: 选择 raw 和 JSON，然后输入以下内容：

{"title": "Updated First Post","content": "This is the updated first post."
}

点击 “Send” 按钮，你应该会看到类似下面的响应：

{"id": 1,"title": "Updated First Post","content": "This is the updated first post."
}

3.5. 删除博客帖子

方法: DELETE
URL: http://localhost:3000/api/posts/1

点击 “Send” 按钮，你应该会看到类似下面的响应：

{}

你已经使用 Postman 成功地测试了这个博客 API 的所有基本功能，包括获取所有帖子、获取单个帖子、创建新帖子、更新帖子和删除帖子。

a. 在 API 请求中添加身份验证以保护博客内容。

b. 为 API 添加更多的功能，例如评论功能或者用户管理功能

前端

1. 项目初始化

  • 创建一个新的 Vite 项目并选择 React 作为框架。
  • 安装必要的依赖项。

2. 详细步骤

  1. 创建项目文件夹并初始化 Vite 项目
    首先，创建项目文件夹并初始化 Vite 项目：
mkdir blog-frontend
cd blog-frontend
npm init vite@latest

选择 react 作为模板：

# Project name: blog-frontend
# Select a framework: react
# Select a variant: react

然后安装项目依赖：

cd blog-frontend
npm install
  1. 安装必要的依赖项
    安装 Mantine、Tailwind CSS、Zustand、RxJS 和 Three.js：
npm install @mantine/core @mantine/hooks @emotion/react @emotion/styled zustand rxjs three
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install react-router-dom
  1. 配置 Tailwind CSS
    编辑 tailwind.config.js 文件以包含所有文件：
/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

在 src 文件夹中创建 index.css 文件，并添加 Tailwind 的基本样式：

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

确保在 main.jsx 中导入 index.css 文件：

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);
  1. 创建主要组件和结构
    在 src 文件夹中创建以下文件和文件夹结构：
src/
├── components/
│   ├── Header.jsx
│   ├── PostList.jsx
│   └── Post.jsx
├── hooks/
│   └── usePosts.js
├── pages/
│   ├── Home.jsx
│   └── PostDetail.jsx
├── App.jsx
└── main.jsx

App.jsx：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { MantineProvider } from '@mantine/core';
import Home from './pages/Home';
import PostDetail from './pages/PostDetail';
import Header from './components/Header';function App() {return (<MantineProvider withGlobalStyles withNormalizeCSS><Router><Header /><Routes><Route path="/" element={<Home />} /><Route path="/post/:id" element={<PostDetail />} /></Routes></Router></MantineProvider>);
}export default App;

Header.jsx：

import React from 'react';
import { Link } from 'react-router-dom';function Header() {return (<header className="bg-blue-600 p-4 text-white"><nav className="container mx-auto"><Link to="/" className="text-lg font-bold">My Blog</Link></nav></header>);
}export default Header;

Home.jsx：

import React from 'react';
import PostList from '../components/PostList';function Home() {return (<div className="container mx-auto p-4"><h1 className="text-3xl font-bold mb-4">Blog Posts</h1><PostList /></div>);
}export default Home;

PostDetail.jsx：

import React from 'react';
import { useParams } from 'react-router-dom';function PostDetail() {const { id } = useParams();// Fetch post detail using idreturn (<div className="container mx-auto p-4"><h1 className="text-3xl font-bold mb-4">Post Detail</h1>{/* Render post detail here */}</div>);
}export default PostDetail;

PostList.jsx：

import React from 'react';
import { Link } from 'react-router-dom';
import usePosts from '../hooks/usePosts';function PostList() {const posts = usePosts();return (<div>{posts.map(post => (<div key={post.id} className="mb-4 p-4 border rounded"><h2 className="text-2xl font-bold"><Link to={`/post/${post.id}`}>{post.title}</Link></h2><p>{post.content}</p></div>))}</div>);
}export default PostList;

usePosts.js：

import { useEffect, useState } from 'react';function usePosts() {const [posts, setPosts] = useState([]);useEffect(() => {fetch('/api/posts').then(response => response.json()).then(data => setPosts(data));}, []);return posts;
}export default usePosts;
  1. 配置 Vite 代理
    在 vite.config.js 文件中配置代理，以将 API 请求转发到后端服务器：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],server: {proxy: {'/api': 'http://localhost:3000'}}
});
  1. 运行前端项目
    在项目根目录下运行以下命令启动开发服务器：
npm run dev

通过以上步骤，我们已经创建了一个使用 React、Vite、Mantine、Tailwind CSS、Zustand、RxJS 和 Three.js 的博客前端。这个前端项目通过 Vite 开发服务器代理 API 请求，并与之前创建的 Node.js 和 Express.js 后端进行交互。

a. 在前端添加更多组件，例如博客详情页和评论功能。

b. 使用 Three.js 创建炫酷的 3D 动画效果，并将其集成到博客前端中。

前后端都起起来，就可以在浏览器中访问前端页面了。
在这里插入图片描述
这一章主要是帮助小伙伴迅速起一个前后端分离的blog项目，后续可以自行diy。
后续我可能会继续更新自己的项目。

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Django项目部署：uwsgi+daphne+nginx+vue部署

Django项目部署：uwsgi+daphne+nginx+vue部署

一、项目情况 项目根目录&#xff1a;/mnt/www/alert 虚拟环境目录&#xff1a;/mnt/www/venv/alert 激活虚拟环境&#xff1a;source /mnt/www/venv/alert/bin/activate 二、具体配置 1、uwsgi启动配置 根目录下&#xff1a;新增 uwsgi.ini 注意&#xff1a;使用9801端…
阅读更多...
redis实战-添加商户缓存

redis实战-添加商户缓存

为什么要使用缓存 言简意赅&#xff1a;速度快&#xff0c;好用缓存数据存储于代码中&#xff0c;而代码运行在内存中&#xff0c;内存的读写性能远高于磁盘&#xff0c;缓存可以大大降低用户访问并发量带来的服务器读写压力实际开发中&#xff0c;企业的数据量&#xff0c;少…
阅读更多...
短视频矩阵系统：打造品牌影响力的新方式

短视频矩阵系统：打造品牌影响力的新方式

一、短视频矩阵概念 短视频营销革命&#xff1a;一站式解决策略&#xff01;短视频矩阵系统是一款专为企业营销设计的高效工具&#xff0c;旨在通过整合和优化众多短视频平台资源&#xff0c;为企业呈现一个全面的短视频营销策略。该系统致力于协助企业以迅速且高效的方式制作…
阅读更多...
从万里长城防御体系看软件安全体系建设@安全历史03

从万里长城防御体系看软件安全体系建设@安全历史03

长城&#xff0c;是中华民族的一张重要名片&#xff0c;是中华民族坚韧不屈、自强不息的精神象征&#xff0c;被联合国教科文组织列入世界文化遗产名录。那么在古代&#xff0c;长城是如何以其复杂的防御体系&#xff0c;一次次抵御外族入侵&#xff0c;而这些防御体系又能给软…
阅读更多...
无人机挂载抛弹吊舱技术详解

无人机挂载抛弹吊舱技术详解

随着无人机技术的飞速发展&#xff0c;无人机在军事、安全、农业、环保等领域的应用越来越广泛。其中&#xff0c;挂载抛弹吊舱的无人机在精确打击、应急处置等场合发挥着重要作用。抛弹吊舱技术通过将弹药、物资等有效载荷挂载在无人机下方&#xff0c;实现了无人机的远程投放…
阅读更多...
MySQL表解锁

MySQL表解锁

查看锁信息 show full processlist 如果一个表被锁定了&#xff0c;会有一个 “Waiting for table metadata lock” 的提示&#xff0c;表明该表正在等待锁定。 解锁表 删除state上有值的事务 kill query 事务id 表解锁完成
阅读更多...
LDM论文解读

LDM论文解读

论文名称&#xff1a;High-Resolution Image Synthesis with Latent Diffusion Models 发表时间&#xff1a;CVPR2022 作者及组织&#xff1a;Robin Rombach, Andreas Blattmann, Dominik Lorenz,Patrick Esser和 Bjorn Ommer, 来自Ludwig Maximilian University of Munich &a…
阅读更多...
Markdown、Latex编辑小工具

Markdown、Latex编辑小工具

Markdown、Latex编辑小工具 文章说明主要代码效果展示源码下载 文章说明 本文主要为了书写Latex的书写风格&#xff0c;以及了解自己实现一个markdown类型的编辑器的过程&#xff1b;目前实现了当前的效果&#xff1b;书写文章进行记录&#xff0c;方便后续查阅 目前还未添加好…
阅读更多...
Linux实用命令练习

Linux实用命令练习

目录 一、常用命令 二、系统命令 三、用户和组 四、权限 五、文件相关命令 六、查找 七、正则表达式 八、输入输出重定向 九、进程控制 十、其他命令 1、远程文件复制&#xff1a;scp 2、locate查找 3、which命令 4、设置或显示环境变量&#xff1a;export 5、修…
阅读更多...
【.NET全栈】第16章 Web开发

【.NET全栈】第16章 Web开发

文章目录 前言16.1 HTML概述16.1.1 HTML的基本概念16.1.2 HTML语言的基本元素16.1.3 格式设置16.1.4 超级链接16.1.5 图像16.1.6 表格16.1.7 框架16.1.8 表单 16.2 ASP.NET Web Forms的组织16.2.1 认识ASP.NET16.2.2 Web Forms的组织 16.3 Web服务器组件16.3.1 使用Label和Text…
阅读更多...
[AIGC] 深入了解标准与异常重定向输出

[AIGC] 深入了解标准与异常重定向输出

在操作系统和编程环境下&#xff0c;有时我们需要更加精细地控制程序的输入或输出过程&#xff0c;这就涉及到了标准输入输出流&#xff0c;以及重定向的概念。接下来&#xff0c;我们将详细介绍标准输出、标准错误输出&#xff0c;以及如何进行输出重定向。 文章目录 1. 标准输…
阅读更多...
网线直连电脑可以上网，网线连tplink路由器上不了网

网线直连电脑可以上网，网线连tplink路由器上不了网

家里wifi网络连不上好几天了&#xff0c;用网线直连电脑可以上网&#xff0c;但网线连tplink路由器wan口上不了网&#xff0c;无Internet连接&#xff0c;网线连lan口可以电脑上网&#xff0c;手机上不了。 后来发现网线的主路由用的192.168.0.1&#xff0c;我的路由器wan口自…
阅读更多...
将某列缺失分隔符的文字读入 Excel

将某列缺失分隔符的文字读入 Excel

有个逗号分隔的 txt&#xff0c;共 10 列&#xff0c;第 3 列有时候缺少分隔符&#xff0c;导致该列缺失&#xff0c;数据不齐只剩 9 列。比如最后两行&#xff1a; 01-0104-0133,MAYO, RONIE #2,202403,2024-03-21 22:51:43.000,1449.49,0.00,0.00,08,6CC6BDAC7E45 17-1782-02…
阅读更多...
百强韧劲，进击新局 2023年度中国医药工业百强系列榜单发布

百强韧劲，进击新局 2023年度中国医药工业百强系列榜单发布

2024年&#xff0c;经济工作坚持稳中求进、以进促稳、先立后破等工作要求。医药健康行业以不懈进取的“韧劲”&#xff0c;立身破局&#xff0c;迎变启新。通过创新和迭代应对不确定性&#xff0c;进化韧性力量&#xff0c;坚持高质量发展&#xff0c;把握新时代经济和社会给予…
阅读更多...
ubuntu 编译交叉环境arm 版本的openssl库

ubuntu 编译交叉环境arm 版本的openssl库

一&#xff0c;下载源码 [ Old Releases ] - /source/old/index.html 二&#xff0c;设置交叉编译环境 我的交叉环境是RV1126开发板&#xff0c;/home/rpdzkj/development/cross-compile-tools/rv1126/ 对应的是我电脑里的RV1126开发板的交叉环境下的gc g等路径存放 设置环境…
阅读更多...
【C++深度探索】继承机制详解（一）

【C++深度探索】继承机制详解（一）

hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;大耳朵土土垚的博客 &#x1…
阅读更多...
43.三倍游戏

43.三倍游戏

上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动，旨在激发青少年对学习人工智能与算法设计的热情与兴趣，提升青少年科学素养，引导青少年投身创新发现和科研实践活动。https://www.iai.sh.cn/problem/390 题目描述 三倍游戏是一种单人游戏。玩…
阅读更多...
忍法：声音克隆之术

忍法：声音克隆之术

前言&#xff1a; 最近因为一直在给肚子里面的宝宝做故事胎教&#xff0c;每天&#xff08;其实是看自己心情抽空讲下故事&#xff09;都要给宝宝讲故事&#xff0c;心想反正宝宝也看不见我&#xff0c;只听我的声音&#xff0c;干脆偷个懒&#xff0c;克隆自己的声音&#xf…
阅读更多...
【SpringBoot】SpringBoot应用Yaml 解析冒号（:）字符串踩坑排查记录

【SpringBoot】SpringBoot应用Yaml 解析冒号（:）字符串踩坑排查记录

文章目录 一、现象二、原因排查三、怎么办 一、现象 某次在配置中心Nacos上配置了一个字符串&#xff0c;采用YAML格式&#xff0c;如下&#xff1a; id: 114:1代码中采用的是Value注解的形式获取配置&#xff1a; Value("${id}")代码中预期获取的是字符串&#x…
阅读更多...
微服务中的Docker详细学习

微服务中的Docker详细学习

Docker的个人理解 首先我对于Docker的理解分为两部分&#xff0c;第一是对名字上的理解&#xff0c;我们都知道docker的英文翻译是“码头工人”的意思&#xff0c;所以我们也可以理解为docker是码头上的一个个集装箱的使用。这也与他的图标很相似。其次我是对于其功能上的理解&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023