使用express框架,实现新闻模板功能:所有新闻,新闻分类,新闻详情,新闻搜索
时间: 2024-06-08 16:05:18 浏览: 12
好的,下面我为您介绍如何使用Express框架实现新闻模板功能:
1.创建Express项目
首先,我们需要在本地创建一个Express项目,可以使用以下命令:
```
mkdir news-template
cd news-template
npm init
npm install express --save
```
2.创建路由
在项目根目录下创建一个`routes`文件夹,并在其中创建以下文件:
- `index.js`:用于显示所有新闻列表
- `category.js`:用于显示特定类别的新闻列表
- `details.js`:用于显示特定新闻的详细信息
- `search.js`:用于搜索新闻
在`routes`文件夹中创建以上四个文件,并编写相应的路由处理程序。
例如,在`index.js`中,我们可以编写以下代码:
```
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.send('显示所有新闻列表');
});
module.exports = router;
```
在`category.js`中,我们可以编写以下代码:
```
const express = require('express');
const router = express.Router();
router.get('/:category', (req, res) => {
const { category } = req.params;
res.send(`显示${category}类别的新闻列表`);
});
module.exports = router;
```
在`details.js`中,我们可以编写以下代码:
```
const express = require('express');
const router = express.Router();
router.get('/:id', (req, res) => {
const { id } = req.params;
res.send(`显示ID为${id}的新闻详细信息`);
});
module.exports = router;
```
在`search.js`中,我们可以编写以下代码:
```
const express = require('express');
const router = express.Router();
router.post('/', (req, res) => {
const { keyword } = req.body;
res.send(`搜索关键词为${keyword}的新闻`);
});
module.exports = router;
```
3.创建视图
在项目根目录下创建一个`views`文件夹,并在其中创建以下文件:
- `index.ejs`:用于显示所有新闻列表
- `category.ejs`:用于显示特定类别的新闻列表
- `details.ejs`:用于显示特定新闻的详细信息
- `search.ejs`:用于搜索新闻
在`views`文件夹中创建以上四个文件,并编写相应的HTML代码。
例如,在`index.ejs`中,我们可以编写以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>所有新闻</title>
</head>
<body>
<h1>所有新闻</h1>
</body>
</html>
```
在`category.ejs`中,我们可以编写以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= category %>类别的新闻</title>
</head>
<body>
<h1><%= category %>类别的新闻</h1>
</body>
</html>
```
在`details.ejs`中,我们可以编写以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID为<%= id %>的新闻</title>
</head>
<body>
<h1>ID为<%= id %>的新闻</h1>
</body>
</html>
```
在`search.ejs`中,我们可以编写以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索新闻</title>
</head>
<body>
<h1>搜索新闻</h1>
<form method="post" action="/search">
<label for="keyword">关键词:</label>
<input type="text" name="keyword" id="keyword">
<button type="submit">搜索</button>
</form>
</body>
</html>
```
4.注册路由
在项目根目录下的`app.js`文件中,我们需要注册路由,并设置模板引擎。
例如:
```
const express = require('express');
const app = express();
// 设置模板引擎
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
// 注册路由
const indexRouter = require('./routes/index');
const categoryRouter = require('./routes/category');
const detailsRouter = require('./routes/details');
const searchRouter = require('./routes/search');
app.use('/', indexRouter);
app.use('/category', categoryRouter);
app.use('/details', detailsRouter);
app.use('/search', searchRouter);
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000!');
});
```
5.访问页面
现在,我们可以在浏览器中访问以下页面:
- 所有新闻:http://localhost:3000/
- 特定类别的新闻:http://localhost:3000/category/体育
- 特定新闻的详细信息:http://localhost:3000/details/123
- 搜索新闻:http://localhost:3000/search
以上就是使用Express框架实现新闻模板功能的步骤,希望对您有帮助!