### 搭建 MongoDB、
Node.js、
Express、
EJS 和 jQuery 的开发环境
以下内容详细介绍了如何配置和搭建一个包含 MongoDB、
Node.js、
Express、
EJS 和 jQuery 的开发环境。
#### 1
. 安装
Node.js 和 npm
Node.js 是 JavaScript 运行时环境，npm 是其包管理器。可以从官方站点下载并安装最新版本的
Node.js[^2]。安装完成后，可以通过以下命令验证：
```bash
node -v
npm -v
```
#### 2
. 创建项目并安装依赖
创建一个新的项目文件夹，并初始化 `package
.json` 文件：
```bash
mkdir my-project
cd my-project
npm init -y
```
安装必要的依赖库：
```bash
npm install
express ejs mongoose body-parser jquery
```
- `
express`：Web 框架。
- `
ejs`：模板引擎。
- `mongoose`：MongoDB 的对象数据建模工具。
- `body-parser`：解析请求体中间件。
- `jquery`：前端库，用于简化 HTML 文档遍历和事件处理。
#### 3
. 配置
Express 应用
创建 `app
.js` 文件，配置
Express 应用的基本设置：
```javascript
const
express = require('
express');
const path = require('path');
const bodyParser = require('body-parser');
const app =
express();
// 设置
EJS 为模板引擎
app
.set('view engine', '
ejs');
app
.set('views', path
.join(__dirname, 'views'));
// 使用 body-parser 中间件
app
.use(bodyParser
.urlencoded({ extended: false }));
// 静态文件目录
app
.use(
express.static(path
.join(__dirname, '
public')));
// 路由示例
app
.get('/', (req, res) => {
res
.render('index'); //
渲染 index
.ejs
});
// 启动服务器
const PORT = process
.env
.PORT || 3000;
app
.listen(PORT, () => {
console
.log(`Server is running on port ${PORT}`);
});
```
#### 4
. 配置 MongoDB 并连接数据库
安装 MongoDB 并确保其服务已启动。使用 `mongoose` 连接数据库：
```javascript
const mongoose = require('mongoose');
// 连接 MongoDB 数据库
mongoose
.connect('mongodb://localhost:27017/mydb', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => {
console
.log('Connected to MongoDB');
})
.catch(err => {
console
.error('Database connection failed:', err);
});
```
#### 5
. 创建模型和 CRUD 操作
定义一个简单的博客模型：
```javascript
const blogSchema = new mongoose
.Schema({
title: String,
content: String
});
const Blog = mongoose
.model('Blog', blogSchema);
// 示例：创建新博客
app
.post('/blogs', async (req, res) => {
const blog = new Blog(req
.body);
await blog
.save();
res
.redirect('/');
});
// 示例：获取所有博客
app
.get('/blogs', async (req, res) => {
const blogs = await Blog
.find();
res
.render('blogs', { blogs });
});
```
#### 6
. 配置
EJS 模板
在 `views` 文件夹中创建 `index
.ejs` 文件：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<script src="https://code
.jquery
.com/jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<h1>Welcome to My Blog</h1>
<form id="blogForm">
<input type="text" name="title" placeholder="Title">
<textarea name="content" placeholder="Content"></textarea>
<button type="submit">Post</button>
</form>
<div id="blogs"></div>
<script>
$(document)
.ready(function() {
$('#blogForm')
.on('submit', function(e) {
e
.preventDefault();
$
.post('/blogs', $(this)
.serialize(), function(data) {
location
.reload();
});
});
$
.get('/blogs', function(data) {
let output = '';
data
.blogs
.forEach(blog => {
output
+= `<p>${blog
.title}: ${blog
.content}</p>`;
});
$('#blogs')
.html(output);
});
});
</script>
</body>
</html>
```
#### 7
. 测试应用
启动服务器并访问 `http://localhost:3000`，测试博客的创建与显示功能。
---
###
在使用NodeJS和EJS模板引擎进行服务器端渲染时，遇到图片无法显示的问题。尝试设置响应头`res.type('html')`，但公共目录下图片仍然无法加载。本文探讨了可能的原因和解决方案，帮助开发者解决静态资源处理的常见困扰。
扫一扫
1074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
