今天，我将带你一步一步地使用 Windsurf 框架构建一个完整的博客网站。无论你是编程新手还是有一定经验的开发者，这篇教程都将引导你完成整个项目。我们的目标是让你在阅读完这篇教程后，能够独立使用 Windsurf 构建自己的 Web 应用程序。
目录
- 项目介绍
- 环境准备
- 创建 Windsurf 项目
- 项目结构
- 构建博客首页
- 用户注册与登录
- 创建博客文章
- 查看博客文章
- 编辑与删除博客文章
- 部署项目
- 总结
项目介绍
我们将构建一个简单的博客网站，用户可以注册、登录，创建、查看、编辑和删除博客文章。这个项目将涵盖 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
│ └── home.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
欢迎来到我的博客
-
<% 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 user = new User({ username: req.body.username, password: req.body.password });
user.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 post = new Post({ title: req.body.title, content: req.body.content, author: req.session.userId });
post.save().then(() => res.redirect(‘/’));
});
创建文章模板
在 views 目录下创建 create-post.ejs 文件：
html
创建文章
查看博客文章
显示所有文章
在 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 创建路由、处理表单、管理会话、集成数据库等。希望这篇教程对你有所帮助，祝你在未来的开发旅程中取得更多成就！
