后端开发教程 - Java、Spring Boot 实战 - msg200.com
Next.js 简介 - 将 express 和 mongo 添加到项目中
欢迎来到我对 Next 探索的第三部分。在第一部分中，我介绍了基础知识：如何构建和设计一个基本的网站。在第二部分中，我介绍了如何从 API 获取数据并将其注入到 React 组件的生命周期中。
今天我想在项目中添加 express 和 mongo。这意味着在同一个项目中，next.js 可以让我们非常轻松地运行 express 和 react。
让我们开始吧
正如你将看到的，我们将要编写的大部分代码都是纯 Express 代码。我已经介绍过如何使用 React 和 MongoDB 构建 RESTful API，所有这些都是完全相同的。
让我们安装本部分教程所需的软件包
npm i -S express mongoose body-parser
现在让我们开始创建./server/index.js页面并添加以下代码
const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const PORT = process.env.PORT || 3000
const dev = process.env.NODE_DEV !== 'production' //true false
const nextApp = next({ dev })
const handle = nextApp.getRequestHandler() //part of next config
const mongoose = require('mongoose')
const db = mongoose.connect('mongodb://localhost:27017/Photos')
nextApp.prepare().then(() => {
// express code here
const app = express()
})
这就是将 express 添加到我们的项目非常简单。
只有四行代码与 next.js 相关，其他都是通常的 express 代码：
- 需要下一个。
- 通过让它知道我们正在使用哪个环境来启动它（我选择调用它
nextApp并调用快速实例app- 因为我可以在接下来的几个月回来并毫无问题地阅读快速代码。） - 接下来需要
getRequestHandler() - 然后我们运行
prepare，nextApp我猜它准备好了一切（！）然后then我们运行express。
让我们添加组成./server/index.js
nextApp.prepare().then(() => {
// express code here
const app = express()
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/api/photos', require('./routes/index'))
app.get('*', (req,res) => {
return handle(req,res) // for all the react stuff
})
app.listen(PORT, err => {
if (err) throw err;
console.log(`ready at http://localhost:${PORT}`)
})
})
再说一遍，这没什么新鲜的，你可以在这里学习如何搭建一个 Express 网站。然而，唯一重要的是 start 部分app.get('*', ...)。它只是说所有尚未指定的路由器，都让 next.js 来处理它们——当然，反过来，它也让我们在 React 代码中处理它们。
让我们创建 API 路由./server/routes/index.js
const express = require('express')
const router = express.Router()
const Photos = require('../models/photoModel')
router.get('/', (req, res) => {
Photos.find({}, (err, photos) => {
res.json(photos)
})
})
router.use('/:id', (req, res, next) => {
console.log(req.params.id)
Photos.findById(req.params.id, (err, photo) => {
if(err)
res.status(500).send(err)
else
req.photo = photo
next()
})
})
router
.get('/:id', (req, res) => {
return res.json( req.photo )
})
.put('/:id', (req, res) =>{
Object.keys(req.body).map(key=>{
req.photo[key] = req.body[key]
})
req.photo.save()
res.json(req.photo)
})
module.exports = router;
上面我们基本上创建了 React 代码所需的 API 接口。当/api/photos请求 时，我们会返回数据库中找到的所有照片。如果请求的类型是 ，/api/photos/:id我们就必须在数据库中找到相关的对象。然后，根据请求的类型，get我们put要么返回对象，要么根据收到的所需数据对其进行编辑。
最后我们需要创建./server/models/photoModel.js
const mongoose = require('mongoose')
const schema = mongoose.Schema
const photoModel = new schema({
tagline: { type: String} ,
image: { type: String},
likes: { type: String},
comments: { type: Array, default: [] }
})
module.exports = mongoose.model('photos', photoModel)
就是这样！
运行应用程序
与之前的教程不同，现在我们要从./server/index.js
node server/index.js
当然，如果您继续往下看，您还需要做两件事：
在 React 代码中，/pages/index.js我们/pages/photo.js需要编辑获取数据的地址，现在需要指向3000/api/photos。此外，在获取数据时，我们将其更改id为_id。当然，我们使用的数据库必须包含这些数据。您可以通过运行以下命令导入我留在存储库中的数据：
mongoimport --jsonArray --db Photos --collection photos --file '/your-project-folder/data/db.json'
将数据导入Photos数据库，并放入名为的集合中photos。
现在应该使用 express 作为起点来运行项目。因此，你应该运行
node server/index.js
由于我们配置代码的方式，next 会接管并运行 React 代码。因此，所有 in/api都由 express 处理，其余都由 React 处理。
在开发应用程序时，运行会更有用nodemon server/index.js。nodemon它会监控你的代码，并在你修改代码时重启服务器。非常有用。但是，你肯定不希望它在你修改 React 代码时重启服务器。除此之外，它还可能陷入循环。接下来，它会重新加载 React，然后nodemon由于文件更改而重新加载服务器。为了解决这个问题，你应该创建一个名为 的文件夹nodemon.json，并添加以下内容：
{
"verbose": true,
"ignore": ["node_modules", ".next"],
"watch": ["server/**/*"],
"ext": "js json"
}
我们基本上告诉nodemon它关注服务器目录中的 javascript 和 JSON 文件，特别是忽略指定的文件夹。
nodemon是一个非常有用的包，您应该将其作为全局包安装（npm install -g nodemon）。nodemon基本上监视您的节点代码并在文件更改时重新运行服务器。
完结。
本教程就到这里，希望你喜欢。本系列教程中还有一些内容我打算介绍，敬请期待，感谢阅读！本部分代码的仓库位于名为part3的分支中。
第一部分：
第二部分：
鏂囩珷鏉ユ簮锛�https://dev.to/aurelkurtula/introduction-to-nextjs---adding-express-and-mongo-to-the-project-2d38