Windsurf 从零开始构建完整博客网站的终极指南
February 11th, 2025

今天,我将带你从零开始,使用 Windsurf 框架构建一个完整的博客网站。无论你是编程新手还是有一定经验的开发者,这篇教程都将一步一步地引导你完成整个项目。我们的目标是让你在阅读完这篇教程后,能够独立使用 Windsurf 构建自己的 Web 应用程序。

目录

  1. 项目介绍

  2. 环境准备

  3. 创建 Windsurf 项目

  4. 项目结构

  5. 构建博客首页

  6. 用户注册与登录

  7. 创建博客文章

  8. 查看博客文章

  9. 编辑与删除博客文章

  10. 部署项目

  11. 最后

项目介绍

我们将构建一个简单的博客网站,用户可以注册、登录,创建、查看、编辑和删除博客文章。这个项目将涵盖 Windsurf 的核心功能,包括路由、中间件、模板引擎、数据库集成等。

环境准备

在开始之前,请确保你的开发环境已经配置好:

  • Node.js:从 Node.js 官网 下载并安装。

  • npm:Node.js 自带 npm,用于安装依赖包。

  • 代码编辑器:推荐使用 Visual Studio Code。

安装完成后,打开终端并运行以下命令,确保 Node.js 和 npm 已经正确安装:

bash node -v npm -v

创建 Windsurf 项目

首先,创建一个新的项目目录,并在该目录下初始化一个 Node.js 项目:

bash mkdir my-blog cd my-blog npm init -y

接下来,安装 Windsurf 和一些必要的依赖:

bash npm install windsurf

项目结构

我们的项目结构如下:

my-blog/ ├── app.js ├── models/ │ ├── User.js │ └── Post.js ├── views/ │ ├── register.ejs │ ├── login.ejs │ ├── create-post.ejs │ └── edit-post.ejs └── public/ └── css/ └── style.css

构建博客首页

配置 Windsurf

首先,在 app.js 中配置 Windsurf:

javascript const windsurf = require('windsurf'); const app = windsurf();

创建首页路由

app.js 中添加首页路由:

javascript app.get('/', (req, res) => { res.render('home', { title: '我的博客' }); });

创建首页模板

views 目录下创建 home.ejs 文件:

html <%= title %> 欢迎来到我的博客 <% posts.forEach(post => { %> <%= post.title %> <%= post.content %> 作者: <%= post.author %> <% }) %>

添加样式

public/css 目录下创建 style.css 文件:

css body { font-family: Arial, sans-serif; }

启动服务器

在终端中运行以下命令启动服务器:

bash node app.js

打开浏览器,访问 http://localhost:3000,你应该会看到博客的首页。

用户注册与登录

配置会话

app.js 中配置会话管理:

javascript const session = require('express-session'); app.use(session({ secret: 'your-secret-key', resave: false, saveUninitialized: true }));

创建用户模型

models 目录下创建 User.js 文件:

javascript const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({ username: String, password: String });

module.exports = mongoose.model('User', userSchema);

连接数据库

app.js 中连接 MongoDB:

javascript const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/my-blog', { useNewUrlParser: true, useUnifiedTopology: true });

用户注册

app.js 中添加用户注册路由:

javascript app.post('/register', (req, res) => { const newUser = new User({ username: req.body.username, password: req.body.password }); newUser.save().then(() => res.redirect('/login')); });

用户登录

app.js 中添加用户登录路由:

javascript app.post('/login', (req, res) => { User.findOne({ username: req.body.username }).then(user => { if (user && user.password === req.body.password) { req.session.userId = user._id; res.redirect('/'); } else { res.redirect('/login'); } }); });

创建注册与登录模板

views 目录下创建 register.ejslogin.ejs 文件。

创建博客文章

创建文章模型

models 目录下创建 Post.js 文件:

javascript const postSchema = new mongoose.Schema({ title: String, content: String, author: String });

module.exports = mongoose.model('Post', postSchema);

创建文章路由

app.js 中添加创建文章的路由:

javascript app.post('/create-post', (req, res) => { const newPost = new Post({ title: req.body.title, content: req.body.content, author: req.session.userId }); newPost.save().then(() => res.redirect('/')); });

创建文章模板

views 目录下创建 create-post.ejs 文件:

html <%= title %> 创建文章 标题: 内容: 创建文章

查看博客文章

显示所有文章

app.js 中添加显示所有文章的路由:

javascript app.get('/posts', (req, res) => { Post.find().then(posts => { res.render('home', { title: '我的博客', posts }); }); });

编辑与删除博客文章

编辑文章

app.js 中添加编辑文章的路由:

javascript app.post('/edit-post/:id', (req, res) => { Post.findByIdAndUpdate(req.params.id, { title: req.body.title, content: req.body.content }).then(() => { res.redirect('/'); }); });

删除文章

app.js 中添加删除文章的路由:

javascript app.post('/delete-post/:id', (req, res) => { Post.findByIdAndDelete(req.params.id).then(() => { res.redirect('/'); }); });

部署项目

使用 PM2 部署

安装 pm2

bash npm install pm2 -g

使用 PM2 启动应用:

bash pm2 start app.js

部署到 Heroku

如果你有 Heroku 账号,可以将项目部署到 Heroku。首先,安装 Heroku CLI 并登录:

bash heroku login

创建 Heroku 应用:

bash heroku create

推送代码到 Heroku:

bash git push heroku main

最后

现在,你已经成功使用 Windsurf 构建了一个完整的博客网站。通过这个项目,你学习了如何使用 Windsurf 创建路由、处理表单、管理会话、集成数据库等。希望这篇教程对你有所帮助,祝你在未来的开发旅程中取得更多成就!

👉 野卡 | 一分钟注册,轻松订阅海外线上服务

Subscribe to youqian
Receive the latest updates directly to your inbox.
Nft graphic
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.
More from youqian

Skeleton

Skeleton

Skeleton