如何使用 MERN 堆栈构建动态单页 Web 应用程序?

Posted

技术标签:

【中文标题】如何使用 MERN 堆栈构建动态单页 Web 应用程序?【英文标题】:How to build a dynamic single page web app using MERN stack? 【发布时间】:2020-02-25 21:46:07 【问题描述】:

我阅读了很多关于使用 express js 使用(ejs、handelbars 等)创建动态应用程序的文章,但我希望我的网络应用程序通过使用 react 是动态的和单页的。

我的目的是渲染模板并从快速服务器插入动态数据以响应单页应用程序以使我的应用程序快速,有没有办法使用 MERN 堆栈来做到这一点?

【问题讨论】:

【参考方案1】:

当然有办法做到这一点,这就是 MERN 的用途:

M: Mongodb 是用于数据库的,你应该npm install mongoose, mongoose 是一个很好的处理 mongodb 的 npm 库

E:Expressjs 是一个框架,用于制作 web 应用程序(发送 在 Nodejs 上获取/发布/放置/删除.. 请求和许多其他东西)

R:如您所知,为您的前端使用 Reactjs

N:他们在网站上提到的 Nodejs; 'javascript 在 server' 用于后端

如果你想创建一个单页应用程序,你所要做的就是设置你的数据库(如果你需要的话)然后只需使用 nodejs 和 expressjs 对你的后端进行编码,一旦完成就使用 yarn start 为后端提供午餐node app.js 你喜欢,最后只需使用 create-react-app 命令打开一个反应项目(这是一个 npm 包,所以你有要先使用 npm i -g create-react-app 安装它,一旦完成了前端设置,您就可以在反应代码中使用 axios 从支持的数据中检索数据。一切都会好起来的。

这里有一些文章可能会对你有所帮助:

How to create your first MERN (MongoDB, Express JS, React JS and Node JS) Stack

Let’s build a full stack MongoDB, React, Node and Express (MERN) app

The MERN Stack Tutorial – Building A React CRUD Application From Start To Finish – Part 1

The MERN Stack Tutorial — Building A React CRUD Application From Start To Finish — Part 2

The MERN Stack Tutorial – Building A React CRUD Application From Start To Finish – Part 3

The MERN Stack Tutorial – Building A React CRUD Application From Start To Finish – Part 4

【讨论】:

以上是关于如何使用 MERN 堆栈构建动态单页 Web 应用程序?的主要内容,如果未能解决你的问题,请参考以下文章

当同时使用 GraphQL 时,Nodejs 和 Express 在 MERN 堆栈 Web 应用程序中的作用是啥?

尝试将带有顺风的 MERN 堆栈部署到 Heroku 时构建失败

如何在单页移动 Web 应用程序中实现我自己的历史堆栈?

即使设置了 sameSite:'none' 和 secure: true 对于 MERN 堆栈 Web 应用程序,Cookie 也不会保存在 chrome 中

使用 mern 堆栈和 socket.io 的聊天应用程序在发送超过 20 条消息后变慢

如何在 MERN 堆栈中发送响应模式?