mern技术栈好处?_我如何在一周内建立自己的第一个Mern Stack应用程序

最新推荐文章于 2024-08-18 00:08:01 发布

weixin_26711867

最新推荐文章于 2024-08-18 00:08:01 发布

阅读量742

点赞数

文章标签： python java

原文链接：https://medium.com/dailyjs/how-i-built-my-first-mern-stack-app-in-a-week-243f04787db6

版权

mern技术栈好处?

发展杂志与回顾(A Development Journal and Retrospective)

总览(Overview)

I’m no stranger to learning and creating on the fly, in fact, I think it’s when I learn best. I decided it was time I ventured out and used a tech stack I haven’t used before. I decided to create my first web app with the MongoDB, Express, React, Node.js (MERN) stack.

我对即时学习和创造并不陌生，事实上，我认为这是我学得最好的时候。我认为是时候该冒险了，使用了以前从未使用过的技术堆栈。我决定使用MongoDB，Express，React，Node.js(MERN)堆栈创建我的第一个Web应用程序。

I really wanted to work with a NoSQL database like MongoDB and learn how to create RESTful APIs with Node.js, so it was the perfect fit. Bouncing between a couple of ideas to implement, I recalled a conversation I had with a friend and settled on creating a simple inventory management system. What I ended up with over the past week was a simple web application, an understanding of creating REST APIs, and an understanding of what goes into creating a full-stack application.

我真的很想使用像MongoDB这样的NoSQL数据库，并学习如何使用Node.js创建RESTful API，因此非常适合。在实现两个想法之间跳来跳去，我回想起与朋友的一次对话，并决定创建一个简单的库存管理系统。在过去的一周中，我最后得到的是一个简单的Web应用程序，对创建REST API的理解，以及对创建全栈应用程序的理解。

This article details my journey to create my first MERN stack web app. If you want to play around with my app or check it out before reading on it’s available here, it’s deployed on free tier so it may or may not be available at the time you use it. If you want to check out my Github repo containing my code it’s available here.

本文详细介绍了我创建第一个MERN Stack网络应用程序的过程。如果您想在这里阅读我的应用程序，或者在查看该应用程序之前先对其进行检查，则该应用程序已部署在免费层上，因此在您使用该应用程序时可能会或可能无法使用。如果您想查看包含我的代码的我的Github存储库，可以在这里找到。

目录： (Table of Contents:)

开始(The Start)

I was not sure what to build. Should I just do a simple order management system, tiger selling marketplace, game? It wasn’t until I recalled a conversation I had with a friend. She works in the dental industry and mentioned how in private practices they sometimes don’t have a system to track inventory doing everything by hand. An inventory management system, that’s simple enough. I figured why not take a crack at it.

我不确定要建造什么。我是否应该做一个简单的订单管理系统，老虎销售市场，游戏？直到我想起与朋友的一次对话。她在牙科行业工作，并提到在私人诊所中，有时他们没有系统来手动跟踪库存。一个库存管理系统，非常简单。我想出了为什么不去破解它。

I’ve made web applications with Python before so I made sure to stay away from that. I was hoping to learn something new from this side project so I started looking into developing with other tech stacks. I was also in part, inspired by my current recruiting status where I’ve seen a lot of job descriptions asking for experience with a variety of things like Angular, Node, React, and setting up REST APIs. The next thing I knew I was reading about tech stacks such as MERN, MEAN, LAMP. I decided to go with ones that used MongoDB since I’ve never worked with a NoSQL database before. The difference between MERN and MEAN was minor so it was up to a coin toss, I ended up using React for my frontend. With the idea and tech stack settled there was nothing else to do but dive in.

我所做的与Python的Web应用程序之前，所以我就确定从远离。我希望从这个附带项目中学到一些新东西，所以我开始考虑与其他技术堆栈一起开发。我也从某种程度上受到当前招聘状态的启发，在该岗位上，我看到了许多职位描述，他们要求获得有关Angular，Node，React和设置REST API的各种经验的经验。我知道的下一件事是阅读有关MERN，MEAN，LAMP等技术堆栈的信息。我决定与使用MongoDB的用户一起使用，因为我以前从未使用过NoSQL数据库。 MERN和MEAN之间的差异很小，因此最多可以掷硬币，我最终使用React作为前端。有了想法和技术栈之后，别无他法，只能潜入水中。

学习 (The Learning)

To provide context I had no experience using any part of the MERN stack. I’ve only worked with Python and SQL for web apps. A quick reminder, the MERN tech stack consists of the following:

为了提供上下文，我没有使用MERN堆栈的任何部分的经验。我只为网络应用程序使用过Python和SQL。快速提醒一下，MERN技术堆栈包括以下内容：

MongoDB: Database
M ongoDB：数据库
Express: Middleware
Ë随心：中间件
React.js: Frontend
R eact.js：前端
Node.js: Backend
N ode.js：后端

With my lack of experience using these tools, there was only one place to start, Google. After searching for a while I ended up using these resources to help build my foundation.

由于我缺乏使用这些工具的经验，因此只有一个地方可以开始使用Google。经过一段时间的搜索，我最终使用了这些资源来帮助建立自己的基金会。

CodingTheSmartWay’s build a MERN CRUD Web App
CodingTheSmartWay构建MERN CRUD网络应用
Academind’s creating RESTful APIs
Academind正在创建RESTful API
Esterling Accime’s building a MERN App and deploying to Heroku
Esterling Accime正在构建MERN应用并部署到Heroku

These tutorials were great, allowing me to build a strong enough foundation with the MERN stack and build a web app in under a week. They also gave me a pretty solid code basis to build on as I started building my application. Looking back I wish I had found Esterling Accime’s tutorial series first before CodingTheSmartWay’s because it covers building the app and deploying. It would’ve made my deployment process easier but it really wasn’t that big of a deal.

这些教程非常棒，使我能够使用MERN堆栈构建足够强大的基础，并在不到一周的时间内构建Web应用程序。在我开始构建应用程序时，它们还为我提供了扎实的代码基础。回顾过去，我希望我在CodingTheSmartWay之前先找到Esterling Accime的教程系列，因为它涵盖了构建应用程序和部署的过程。这本来可以简化我的部署过程，但实际上没什么大不了的。

建筑/部署 (The Building/Deploying)

建造(Building)

The great thing about finishing the tutorials above was that I did have a functioning web app. While I could have simply deployed the application we built, I figured it was still worth creating my own implementation of an inventory management system. A lesson I’ve learned a long time ago was that there’s only so much learning you get from following coding tutorials. The real learning comes when you attempt to implement your own ideas and troubleshoot them, that’s when you deal with having to navigate your code, code from other people online, and learning the intricacies of the tools.

完成以上教程的好处在于，我确实有一个正常运行的Web应用程序。尽管我可以简单地部署我们构建的应用程序，但我认为仍然值得创建自己的库存管理系统实现。我很久以前学到的一课是，从下面的编码教程中学到的东西很多。真正的学习来自于您尝试实现自己的想法并对其进行故障排除的时候，那就是当您不得不导航自己的代码，从他人在线获取代码以及学习工具的复杂性时。

One of the first decisions I made early on was using MongoDB’s Atlas cloud platform to manage the database instead of managing my own database. It took under 5 minutes to set up and really simplified deploying my application later. The icing on the cake was that they offer a free tier version.

我早期做出的第一个决定就是使用MongoDB的Atlas云平台来管理数据库，而不是管理自己的数据库。花费了不到5分钟的时间来完成设置，并在以后简化了我的应用程序的部署。锦上添花的是，他们提供了免费版本。

After reworking the code from the tutorials to set up my basic web pages. I was focused on creating an application that could at the bare minimum create, read, update, and delete items from a database. Which wasn’t hard, at least until I got into the more specific implementations of my ideas. That’s when I ran into a lot of problems. One of my ideas that sounded simple at first was my Restock/Use page. I wanted a table that allowed users to easily increase or decrease their item quantity as the company restocks or uses them. The part that gave me the most trouble was adding an input field and buttons to a table. To top it off, those buttons would use the information provided in the input field and send requests to REST APIs to modify the item quantity in the database.

在重新编写了教程中的代码后，设置了我的基本网页。我专注于创建一个应用程序，该应用程序至少可以创建，读取，更新和删除数据库中的项目。这并不困难，至少直到我深入了解我的想法的具体实现为止。那是我遇到很多问题的时候。一开始听起来很简单的想法就是我的“重新库存/使用”页面。我想要一个允许用户在公司补充或使用它们时轻松增加或减少其项目数量的表。给我最大麻烦的部分是在表中添加输入字段和按钮。最重要的是，这些按钮将使用输入字段中提供的信息，并将请求发送到REST API，以修改数据库中的项目数量。

It was a couple of hours of searching and asking my first question on Stack Overflow before I finally was able to figure out how to have my data represented in the table and include inputs/buttons that were able to pass information and send API requests. What was great about solving this problem was that once I figured it out, developing my Create Item and Remove Item pages were a lot simpler.

经过两个小时的搜索，我问了关于Stack Overflow的第一个问题，之后我终于能够弄清楚如何在表中表示数据，并包括能够传递信息和发送API请求的输入/按钮。解决这个问题的最大好处是，一旦我弄清楚了，开发“创建项目”和“删除项目”页面就简单得多了。

The next problem that came up was adding pagination to my tables. I knew potentially there could be more than 5–10 items in the inventory list. However, it wasn’t until I saw my tables slowly getting larger while testing out the functions of each page that I knew they could become unwieldy pretty quickly. That’s when I knew I had to include pagination for all my tables.

出现的下一个问题是在我的桌子上增加了分页功能。我知道库存清单中可能有5-10个以上的物品。但是，直到测试表格的功能逐渐变大时，我才看到表格逐渐变大。那时我知道我必须在所有桌子上都包括分页功能。

So began my search for how to paginate tables in React. That way only a couple of items were shown at a time instead of the whole list. The first couple of solutions I saw for pagination were node modules that I could install that allowed me to easily create tables with pagination. It worked perfectly for my inventory list page that only displayed the item name and quantity. However, I quickly found out that configuring these tables to include input fields and buttons for my other pages was not easy. I ended up finding a solution online allowing me to create a table with pagination without having to install a node module. It was a pretty simple solution where you created functions for when the previous/next buttons were clicked and indexed the data to show small snippets of the inventory list. Those two major hurdles took the majority of my time in development, otherwise, it was a simple process setting up the REST APIs, and building out the rest of the website.

因此，我开始寻找如何在React中对表进行分页。这样，一次只显示几个项目，而不是整个列表。我看到的用于分页的前几个解决方案是可以安装的节点模块，这些模块使我可以轻松地创建具有分页的表。它只显示商品名称和数量，非常适合我的清单列表页面。但是，我很快发现将这些表配置为包括其他页面的输入字段和按钮并不容易。我最终找到了一个在线解决方案，使我无需安装节点模块即可创建具有分页的表。这是一个非常简单的解决方案，您在其中创建了用于单击上一个/下一个按钮并为数据编制索引以显示清单清单的小片段的功能。这两个主要障碍花费了我大部分的时间，否则，这是设置REST API并构建网站其余部分的简单过程。

部署方式 (Deployment)

I originally was deciding between a couple of different platforms such as AWS, GCP, and Azure, but seeing as I’ve already deployed apps on those platforms. I decided to use Heroku because I’ve seen it come up a couple of times before and it was something I haven’t used yet. It’s similar to Google App Engine, a platform as a service so you only have to worry about deploying your app and not managing computing instances or load balancing. To further simplify the process Heroku even allows someone to connect to their Github so all you have to do is push your code to Github and you can deploy to Heroku from there.

我最初是在两个不同的平台(例如AWS，GCP和Azure)之间做出决定，但是看到我已经在这些平台上部署了应用程序。我决定使用Heroku是因为我之前已经看过几次了，但是我还没有使用过。它类似于Google App Engine(平台即服务)，因此您只需要担心部署应用程序而不必管理计算实例或负载平衡。为了进一步简化流程，Heroku甚至允许某人连接到他们的Github，因此您要做的就是将代码推送到Github，然后可以从那里部署到Heroku。

Normally I’d have to deal with deploying my database online. However, due to my decision earlier to use already have my database managed online with MongoDB Atlas, it actually circumvented that whole process. All in all, using Heroku with MongoDB Atlas, simplified the deployment process so much all I had to do was change my file structure and environment variables.

通常，我不得不处理在线部署数据库的问题。但是，由于我早先决定使用该数据库，因此已经通过MongoDB Atlas在线管理了我的数据库，因此实际上绕过了整个过程。总而言之，将Heroku与MongoDB Atlas结合使用，简化了部署过程，因此我要做的就是改变文件结构和环境变量。

回顾性 (Retrospective)

Could this project be made better? Definitely, looking back on the project my critiques are based around designing the whole application and other things that realistically I wouldn’t have known beforehand without learning a lot more about the MERN stack. There are two major things that I would have done differently.

这个项目可以做得更好吗？毫无疑问，回顾项目时，我的批评基于设计整个应用程序和其他事情，而如果不进一步了解MERN堆栈，我实际上是不会事先知道的。我会做两件不同的事情。

My first critique is regarding web application architecture. I’ve run into a problem where sometimes when I refresh on one of the pages it comes back with a server request instead of the web page. After digging around I found this question on Stack Overflow that beautifully breaks down this problem. Discussing server-side vs client-side routing. Seeing as I’m using React.js and Node.js a way to solve this problem is to create an isomorphic app. So whenever the user refreshes the page or types in a direct URL it doesn’t send a request to the server but instead is able to render the page they want.

我的第一个批评是关于Web应用程序体系结构的。我遇到了一个问题，有时当我刷新其中一个页面时，它会返回服务器请求而不是网页。深入研究后，我在Stack Overflow上发现了这个问题，可以很好地解决这个问题。讨论服务器端和客户端路由。看到我正在使用React.js和Node.js时，解决此问题的一种方法是创建一个同构的应用程序。因此，每当用户刷新页面或输入直接URL时，它都不会向服务器发送请求，而是能够呈现所需的页面。

My second critique regarding the creation of my REST APIs. As is, the APIs are pretty unsafe. Anyone is able to send a request to any of the API endpoints if they know the paths regardless of whether or not they should be. Looking back I probably would have focused more on designing my REST APIs to only respond to authorized requests such as from the web page itself.

关于创建REST API的第二个评论。照原样，API是非常不安全的。如果任何人知道路径，则无论他们是否应该知道路径，任何人都可以向任何API端点发送请求。回顾过去，我可能会更多地专注于设计REST API，使其仅响应诸如网页本身之类的授权请求。

Thank you for reading this development journal. That is all for my article showcasing my learning and creating a MERN web app. If you want to reach out to me. I’m available on LinkedIn.

感谢您阅读本发展杂志。这就是我所有展示我的学习和创建MERN网络应用程序的文章。如果您想与我联系。我可以在LinkedIn上找到。

🔗参考 (🔗 References)

Github repository containing code for my deployed website: https://github.com/MartinBeckUT/MERN-Web-App

Github存储库，其中包含我部署的网站的代码： https : //github.com/MartinBeckUT/MERN-Web-App

Link to my application deployed on Heroku: https://martinb-inventory.herokuapp.com/

链接到部署在Heroku上的我的应用程序： https : //martinb-inventory.herokuapp.com/

Tutorial video series for creating a MERN web app and deploying on Heroku: https://www.youtube.com/watch?v=5PaUiPyBDJY&ab_channel=EsterlingAccime

创建MERN网络应用程序并在Heroku上部署的教程视频系列： https : //www.youtube.com/watch?v= 5PaUiPyBDJY & ab_channel = EsterlingAccime

Tutorial video followed for creating REST APIs: https://www.youtube.com/watch?v=0oXYLzuucwE&list=PL55RiY5tL51q4D-B63KBnygU6opNPFk_q&ab_channel=Academind

创建REST API的教程视频如下： https : //www.youtube.com/watch?v= 0oXYLzuucwE&list = PL55RiY5tL51q4D-B63KBnygU6opNPFk_q & ab_channel =Academind

Tutorial video followed for creating MERN Web App: https://www.youtube.com/watch?v=qvBZevK1HPo&ab_channel=CodingTheSmartWay.com

创建MERN Web应用程序的教程视频如下： https : //www.youtube.com/watch?v= qvBZevK1HPo & ab_channel = CodingTheSmartWay.com