Express 加 sqlite3 写一个简单博客

例图：

搭建 命令： 

   前提已装好node.js
  开始创建项目结构
  npm init -y

1. package.json:
3. {
4.   "name": "ex01",
5.   "version": "1.0.0",
6.   "main": "index.js",
7.   "scripts": {
8.     "test": "echo "Error: no test specified" && exit 1"
9.   },
10.   "keywords": [],
11.   "author": "",
12.   "license": "ISC",
13.   "description": ""
14. }

复制代码

安装必要的依赖
  npm install express sqlite3 ejs express-session body-parser
  目次：

代码：

    app.js

1. const express = require('express');
2. const session = require('express-session');
3. const bodyParser = require('body-parser');
4. const path = require('path');
5. const db = require('./database');
7. const app = express();
9. // 配置中间件
10. app.set('view engine', 'ejs');
11. app.use(express.static(path.join(__dirname, 'public')));
12. app.use(bodyParser.urlencoded({ extended: false }));
13. app.use(session({
14.     secret: 'blog_secret_key',
15.     resave: false,
16.     saveUninitialized: true
17. }));
19. // 首页路由
20. app.get('/', async (req, res) => {
21.     try {
22.         const category_id = req.query.category;
23.         const search = req.query.search;
24.         let posts;
25.         let categories = await db.all('SELECT * FROM categories');
26.         
27.         if (search) {
28.             // 搜索标题和内容
29.             posts = await db.all(`
30.                 SELECT posts.*, categories.name as category_name
31.                 FROM posts
32.                 LEFT JOIN categories ON posts.category_id = categories.id
33.                 WHERE title LIKE ? OR content LIKE ?
34.                 ORDER BY created_at DESC`,
35.                 [`%${search}%`, `%${search}%`]
36.             );
37.         } else if (category_id) {
38.             posts = await db.all(`
39.                 SELECT posts.*, categories.name as category_name
40.                 FROM posts
41.                 LEFT JOIN categories ON posts.category_id = categories.id
42.                 WHERE category_id = ?
43.                 ORDER BY created_at DESC`, [category_id]);
44.         } else {
45.             posts = await db.all(`
46.                 SELECT posts.*, categories.name as category_name
47.                 FROM posts
48.                 LEFT JOIN categories ON posts.category_id = categories.id
49.                 ORDER BY created_at DESC`);
50.         }
51.         
52.         res.render('index', {
53.             posts,
54.             categories,
55.             current_category: category_id,
56.             search_query: search || ''
57.         });
58.     } catch (err) {
59.         res.status(500).send('数据库错误');
60.     }
61. });
63. // 创建博文页面
64. app.get('/post/new', async (req, res) => {
65.     try {
66.         const categories = await db.all('SELECT * FROM categories');
67.         res.render('new', { categories });
68.     } catch (err) {
69.         res.status(500).send('获取分类失败');
70.     }
71. });
73. // 提交新博文
74. app.post('/post/new', async (req, res) => {
75.     const { title, content, category_id } = req.body;
76.     try {
77.         await db.run(
78.             'INSERT INTO posts (title, content, category_id, created_at) VALUES (?, ?, ?, ?)',
79.             [title, content, category_id, new Date().toISOString()]
80.         );
81.         res.redirect('/');
82.     } catch (err) {
83.         res.status(500).send('创建博文失败');
84.     }
85. });
87. // 查看单篇博文
88. app.get('/post/:id', async (req, res) => {
89.     try {
90.         const post = await db.get(`
91.             SELECT posts.*, categories.name as category_name
92.             FROM posts
93.             LEFT JOIN categories ON posts.category_id = categories.id
94.             WHERE posts.id = ?`, [req.params.id]);
95.         if (post) {
96.             res.render('post', { post });
97.         } else {
98.             res.status(404).send('博文不存在');
99.         }
100.     } catch (err) {
101.         res.status(500).send('数据库错误');
102.     }
103. });
105. // 编辑博文页面
106. app.get('/post/:id/edit', async (req, res) => {
107.     try {
108.         const post = await db.get('SELECT * FROM posts WHERE id = ?', [req.params.id]);
109.         const categories = await db.all('SELECT * FROM categories');
110.         if (post) {
111.             res.render('edit', { post, categories });
112.         } else {
113.             res.status(404).send('博文不存在');
114.         }
115.     } catch (err) {
116.         res.status(500).send('数据库错误');
117.     }
118. });
120. // 更新博文
121. app.post('/post/:id/edit', async (req, res) => {
122.     const { title, content, category_id } = req.body;
123.     try {
124.         await db.run(
125.             'UPDATE posts SET title = ?, content = ?, category_id = ? WHERE id = ?',
126.             [title, content, category_id, req.params.id]
127.         );
128.         res.redirect(`/post/${req.params.id}`);
129.     } catch (err) {
130.         res.status(500).send('更新博文失败');
131.     }
132. });
134. // 删除博文
135. app.post('/post/:id/delete', async (req, res) => {
136.     try {
137.         await db.run('DELETE FROM posts WHERE id = ?', [req.params.id]);
138.         res.redirect('/');
139.     } catch (err) {
140.         res.status(500).send('删除博文失败');
141.     }
142. });
144. const PORT = process.env.PORT || 3000;
145. app.listen(PORT, () => {
146.     console.log(`服务器运行在 http://localhost:${PORT}`);
147. });

复制代码

    database.js

1. const sqlite3 = require('sqlite3').verbose();
2. const path = require('path');
4. // 创建数据库连接
5. const db = new sqlite3.Database(path.join(__dirname, 'blog.db'), (err) => {
6.     if (err) {
7.         console.error('数据库连接失败:', err);
8.     } else {
9.         console.log('成功连接到数据库');
10.         initDatabase().catch(err => {
11.             console.error('数据库初始化失败:', err);
12.         });
13.     }
14. });
16. // 初始化数据库表
17. async function initDatabase() {
18.     try {
19.         // 检查表是否存在
20.         const tablesExist = await get(`
21.             SELECT name FROM sqlite_master
22.             WHERE type='table' AND (name='posts' OR name='categories')
23.         `);
25.         if (!tablesExist) {
26.             console.log('首次运行，创建数据库表...');
27.             
28.             // 创建分类表
29.             await run(`
30.                 CREATE TABLE IF NOT EXISTS categories (
31.                     id INTEGER PRIMARY KEY AUTOINCREMENT,
32.                     name TEXT NOT NULL UNIQUE
33.                 )
34.             `);
35.             console.log('分类表创建成功');
37.             // 创建文章表
38.             await run(`
39.                 CREATE TABLE IF NOT EXISTS posts (
40.                     id INTEGER PRIMARY KEY AUTOINCREMENT,
41.                     title TEXT NOT NULL,
42.                     content TEXT NOT NULL,
43.                     category_id INTEGER,
44.                     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
45.                     FOREIGN KEY (category_id) REFERENCES categories(id)
46.                 )
47.             `);
48.             console.log('文章表创建成功');
50.             // 插入默认分类
51.             await run(`
52.                 INSERT INTO categories (name) VALUES
53.                 ('技术'),
54.                 ('生活'),
55.                 ('随笔')
56.             `);
57.             console.log('默认分类创建成功');
58.         } else {
59.             console.log('数据库表已存在，跳过初始化');
60.         }
61.     } catch (err) {
62.         console.error('数据库初始化错误:', err);
63.         throw err;
64.     }
65. }
67. // Promise 包装数据库操作
68. function run(sql, params = []) {
69.     return new Promise((resolve, reject) => {
70.         db.run(sql, params, function(err) {
71.             if (err) {
72.                 console.error('SQL执行错误:', err);
73.                 reject(err);
74.             } else {
75.                 resolve(this);
76.             }
77.         });
78.     });
79. }
81. function get(sql, params = []) {
82.     return new Promise((resolve, reject) => {
83.         db.get(sql, params, (err, result) => {
84.             if (err) {
85.                 console.error('SQL执行错误:', err);
86.                 reject(err);
87.             } else {
88.                 resolve(result);
89.             }
90.         });
91.     });
92. }
94. function all(sql, params = []) {
95.     return new Promise((resolve, reject) => {
96.         db.all(sql, params, (err, rows) => {
97.             if (err) {
98.                 console.error('SQL执行错误:', err);
99.                 reject(err);
100.             } else {
101.                 resolve(rows);
102.             }
103.         });
104.     });
105. }
107. // 关闭数据库连接
108. process.on('SIGINT', () => {
109.     db.close((err) => {
110.         if (err) {
111.             console.error('关闭数据库时出错:', err);
112.         } else {
113.             console.log('数据库连接已关闭');
114.         }
115.         process.exit(0);
116.     });
117. });
119. module.exports = {
120.     run,
121.     get,
122.     all
123. };

复制代码

     views\index.ejs

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>我的博客</title>
5.     <meta charset="UTF-8">
6.     <style>
7.         body {
8.             font-family: Arial, sans-serif;
9.             max-width: 800px;
10.             margin: 0 auto;
11.             padding: 20px;
12.         }
13.         .post {
14.             margin-bottom: 20px;
15.             padding: 15px;
16.             border: 1px solid #ddd;
17.             border-radius: 5px;
18.         }
19.         .post h2 {
20.             margin-top: 0;
21.         }
22.         .post-date {
23.             color: #666;
24.             font-size: 0.9em;
25.         }
26.         .new-post-btn {
27.             display: inline-block;
28.             padding: 10px 20px;
29.             background-color: #007bff;
30.             color: white;
31.             text-decoration: none;
32.             border-radius: 5px;
33.             margin-bottom: 20px;
34.         }
35.         .categories {
36.             margin: 20px 0;
37.             padding: 10px 0;
38.             border-bottom: 1px solid #eee;
39.         }
40.         .category-link {
41.             display: inline-block;
42.             padding: 5px 10px;
43.             margin-right: 10px;
44.             text-decoration: none;
45.             color: #666;
46.             border-radius: 3px;
47.         }
48.         .category-link.active {
49.             background-color: #007bff;
50.             color: white;
51.         }
52.         .post-category {
53.             display: inline-block;
54.             padding: 3px 8px;
55.             background-color: #e9ecef;
56.             border-radius: 3px;
57.             font-size: 0.9em;
58.             margin-right: 10px;
59.         }
60.         .search-box {
61.             margin: 20px 0;
62.             display: flex;
63.             gap: 10px;
64.         }
65.         .search-input {
66.             flex: 1;
67.             padding: 8px;
68.             border: 1px solid #ddd;
69.             border-radius: 4px;
70.             font-size: 1em;
71.         }
72.         .search-btn {
73.             padding: 8px 20px;
74.             background-color: #007bff;
75.             color: white;
76.             border: none;
77.             border-radius: 4px;
78.             cursor: pointer;
79.         }
80.         .search-btn:hover {
81.             background-color: #0056b3;
82.         }
83.         .search-results {
84.             margin-bottom: 20px;
85.             padding: 10px;
86.             background-color: #f8f9fa;
87.             border-radius: 4px;
88.         }
89.         .search-results-hidden {
90.             display: none;
91.         }
92.     </style>
93. </head>
94. <body>
95.     <h1>博客文章列表</h1>
96.     <a href="/post/new" class="new-post-btn">写新文章</a>
97.    
98.     <form class="search-box" action="/" method="GET">
99.         <input type="text" name="search" class="search-input"
100.                placeholder="搜索文章标题或内容..."
101.                value="<%= search_query %>">
102.         <button type="submit" class="search-btn">搜索</button>
103.     </form>
105.     <div class="search-results <%= !search_query ? 'search-results-hidden' : '' %>">
106.         搜索结果: "<%= search_query || '' %>" - 找到 <%= posts ? posts.length : 0 %> 篇文章
107.     </div>
108.    
109.     <div class="categories">
110.         <a href="/" class="category-link <%= !current_category ? 'active' : '' %>">全部</a>
111.         <% categories.forEach(function(category) { %>
112.             <a href="/?category=<%= category.id %>"
113.                class="category-link <%= current_category == category.id ? 'active' : '' %>">
114.                 <%= category.name %>
115.             </a>
116.         <% }); %>
117.     </div>
118.    
119.     <% if (posts && posts.length > 0) { %>
120.         <% posts.forEach(function(post) { %>
121.             <div class="post">
122.                 <h2><a href="/post/<%= post.id %>"><%= post.title %></a></h2>
123.                 <div class="post-meta">
124.                     <span class="post-category"><%= post.category_name || '未分类' %></span>
125.                     <span class="post-date">发布时间: <%= new Date(post.created_at).toLocaleString() %></span>
126.                 </div>
127.                 <p><%= post.content.substring(0, 200) %>...</p>
128.             </div>
129.         <% }); %>
130.     <% } else { %>
131.         <p>还没有任何博客文章。</p>
132.     <% } %>
133. </body>
134. </html>

复制代码

    views\post.ejs 

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title><%= post.title %> - 我的博客</title>
5.     <meta charset="UTF-8">
6.     <style>
7.         body {
8.             font-family: Arial, sans-serif;
9.             max-width: 800px;
10.             margin: 0 auto;
11.             padding: 20px;
12.         }
13.         .post-title {
14.             margin-bottom: 10px;
15.         }
16.         .post-meta {
17.             color: #666;
18.             margin-bottom: 20px;
19.         }
20.         .post-content {
21.             line-height: 1.6;
22.             white-space: pre-wrap;
23.         }
24.         .back-link {
25.             display: inline-block;
26.             margin-bottom: 20px;
27.             color: #007bff;
28.             text-decoration: none;
29.         }
30.         .post-category {
31.             display: inline-block;
32.             padding: 3px 8px;
33.             background-color: #e9ecef;
34.             border-radius: 3px;
35.             font-size: 0.9em;
36.             margin-right: 10px;
37.         }
38.         .action-buttons {
39.             margin: 20px 0;
40.             display: flex;
41.             gap: 10px;
42.         }
43.         .edit-btn {
44.             padding: 5px 15px;
45.             background-color: #28a745;
46.             color: white;
47.             text-decoration: none;
48.             border-radius: 3px;
49.             font-size: 0.9em;
50.         }
51.         .delete-btn {
52.             padding: 5px 15px;
53.             background-color: #dc3545;
54.             color: white;
55.             border: none;
56.             border-radius: 3px;
57.             cursor: pointer;
58.             font-size: 0.9em;
59.         }
60.         .delete-btn:hover {
61.             background-color: #c82333;
62.         }
63.     </style>
64. </head>
65. <body>
66.     <a href="/" class="back-link">← 返回首页</a>
67.    
68.     <article>
69.         <h1 class="post-title"><%= post.title %></h1>
70.         <div class="post-meta">
71.             <span class="post-category"><%= post.category_name || '未分类' %></span>
72.             <span class="post-date">发布时间: <%= new Date(post.created_at).toLocaleString() %></span>
73.         </div>
74.         
75.         <div class="action-buttons">
76.             <a href="/post/<%= post.id %>/edit" class="edit-btn">编辑文章</a>
77.             <form action="/post/<%= post.id %>/delete" method="POST" style="display: inline;"
78.                   onsubmit="return confirm('确定要删除这篇文章吗？');">
79.                 <button type="submit" class="delete-btn">删除文章</button>
80.             </form>
81.         </div>
82.         
83.         <div class="post-content">
84.             <%= post.content %>
85.         </div>
86.     </article>
87. </body>
88. </html>

复制代码

     views\new.ejs

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>写新文章 - 我的博客</title>
5.     <meta charset="UTF-8">
6.     <style>
7.         body {
8.             font-family: Arial, sans-serif;
9.             max-width: 800px;
10.             margin: 0 auto;
11.             padding: 20px;
12.         }
13.         form {
14.             display: flex;
15.             flex-direction: column;
16.         }
17.         input, textarea, select {
18.             margin: 10px 0;
19.             padding: 8px;
20.             border: 1px solid #ddd;
21.             border-radius: 4px;
22.         }
23.         textarea {
24.             height: 300px;
25.         }
26.         button {
27.             padding: 10px 20px;
28.             background-color: #007bff;
29.             color: white;
30.             border: none;
31.             border-radius: 5px;
32.             cursor: pointer;
33.         }
34.         button:hover {
35.             background-color: #0056b3;
36.         }
37.         .back-link {
38.             display: inline-block;
39.             margin-bottom: 20px;
40.             color: #007bff;
41.             text-decoration: none;
42.         }
43.         label {
44.             margin-top: 10px;
45.             color: #666;
46.         }
47.     </style>
48. </head>
49. <body>
50.     <a href="/" class="back-link">← 返回首页</a>
51.     <h1>写新文章</h1>
52.    
53.     <form action="/post/new" method="POST">
54.         <label for="title">文章标题</label>
55.         <input type="text" id="title" name="title" placeholder="文章标题" required>
56.         
57.         <label for="category">选择分类</label>
58.         <select id="category" name="category_id" required>
59.             <option value="">请选择分类</option>
60.             <% categories.forEach(function(category) { %>
61.                 <option value="<%= category.id %>"><%= category.name %></option>
62.             <% }); %>
63.         </select>
64.         
65.         <label for="content">文章内容</label>
66.         <textarea id="content" name="content" placeholder="文章内容" required></textarea>
67.         
68.         <button type="submit">发布文章</button>
69.     </form>
70. </body>
71. </html>

复制代码

     views\edit.ejs

1. <!DOCTYPE html>
2. <html>
3. <head>
4.     <title>编辑文章 - 我的博客</title>
5.     <meta charset="UTF-8">
6.     <style>
7.         body {
8.             font-family: Arial, sans-serif;
9.             max-width: 800px;
10.             margin: 0 auto;
11.             padding: 20px;
12.         }
13.         form {
14.             display: flex;
15.             flex-direction: column;
16.         }
17.         input, textarea, select {
18.             margin: 10px 0;
19.             padding: 8px;
20.             border: 1px solid #ddd;
21.             border-radius: 4px;
22.         }
23.         textarea {
24.             height: 300px;
25.         }
26.         button {
27.             padding: 10px 20px;
28.             background-color: #007bff;
29.             color: white;
30.             border: none;
31.             border-radius: 5px;
32.             cursor: pointer;
33.         }
34.         button:hover {
35.             background-color: #0056b3;
36.         }
37.         .back-link {
38.             display: inline-block;
39.             margin-bottom: 20px;
40.             color: #007bff;
41.             text-decoration: none;
42.         }
43.         label {
44.             margin-top: 10px;
45.             color: #666;
46.         }
47.     </style>
48. </head>
49. <body>
50.     <a href="/post/<%= post.id %>" class="back-link">← 返回文章</a>
51.     <h1>编辑文章</h1>
52.    
53.     <form action="/post/<%= post.id %>/edit" method="POST">
54.         <label for="title">文章标题</label>
55.         <input type="text" id="title" name="title" value="<%= post.title %>" required>
56.         
57.         <label for="category">选择分类</label>
58.         <select id="category" name="category_id" required>
59.             <option value="">请选择分类</option>
60.             <% categories.forEach(function(category) { %>
61.                 <option value="<%= category.id %>" <%= post.category_id == category.id ? 'selected' : '' %>>
62.                     <%= category.name %>
63.                 </option>
64.             <% }); %>
65.         </select>
66.         
67.         <label for="content">文章内容</label>
68.         <textarea id="content" name="content" required><%= post.content %></textarea>
69.         
70.         <button type="submit">更新文章</button>
71.     </form>
72. </body>
73. </html>

复制代码

运行：

   node app.js
  服务器运行在 http://localhost:3000

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。