# 今天，我将带你从零开始，使用 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 %>

欢迎来到我的博客

<%= 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.ejs` 和 `login.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](http://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](http://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 创建路由、处理表单、管理会话、集成数据库等。希望这篇教程对你有所帮助，祝你在未来的开发旅程中取得更多成就！ 👉 [野卡 | 一分钟注册，轻松订阅海外线上服务](https://bit.ly/yeka)

欢迎来到我的博客

<%= post.title %>

创建文章

Client-side Error