MERN Stack 教程

news2024/9/25 13:15:39

This tutorial will show you how to build a full-stack MERN application—in this case, an employee database—with the most current tools available. Before you begin, make sure that you are familiar with Node.js and React.js basics and have Node and Create React App installed. You will also need access to the MongoDB Atlas database for this tutorial. The full code is available on this GitHub repo.

源码:GitHub - mongodb-developer/mern-stack-example: Mern Stack code for the Mern Tutorial

What is the MERN Stack?

The MERN stack is a web development framework made up of the stack of MongoDB, Express.js, React.js, and Nodejs. It is one of the several variants of the MEAN stack. 

MERN stack visualized

When you use the MERN stack, you work with React to implement the presentation layer, Expressand Node to make up the middle or application layer, and MongoDB to create the database layer.

In this MERN stack tutorial, we will utilize these four technologies to develop a basic application that is able to record the information of employees and then display it using a React.

How to Get Started with the MERN Stack

To get started, you will need to do the following:

  1. Install Node
    To install Node, go to Node.js and download either the LTS version or the current version.

  2. Have or Install a Code Editor
    You can use any code editor of your choice for this tutorial. However, for the sake of demonstration, we will be using VS Code editor with the plugin prettier and vscode icons.

Setting Up the Project

(Feel free to code along or to download the full code from this GitHub repo.)

MERN lets us create full-stack solutions. So, to leverage its full potential, we will be creating a MERN stack project. For this project, we will create both a back end and a front end. The front end will be implemented with React and the back end will be implemented with MongoDB, Node, and Express. We will call the front end client and the back end server

Let’s start by creating an empty directory: mern. This folder will hold all our files after we create a new project. Then we will create a React app—client—in it.

mkdir mern
cd mern
npx create-react-app client

Then, we create a folder for the back end and name it server.

mkdir server

We will jump into the server folder that we created previously and create the server. Then, we will initialize package.json using npm init.

cd server
npm init -y

We will also install the dependencies.

npm install mongodb express cors dotenv

The command above uses a couple of keywords:

  • mongodb installs MongoDB database driver that allows your Node.js applications to connect to the database and work with data.
  • express installs the web framework for Node.js. (It will make our life easier.)
  • cors installs a Node.js package that allows cross origin resource sharing.
  • dotenv installs the module that loads environment variables from a .env file into process.env file. This lets you separate configuration files from the code.

 

 https://www.mongodb.com/languages/mern-stack-tutorial#:~:text=the%20Back%20End-,What%20is%20the%20MERN%20Stack%3F,variants%20of%20the%20MEAN%20stack.

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/935062.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构队列的实现

本章介绍数据结构队列的内容,我们会从队列的定义以及使用和OJ题来了解队列,话不多说,我们来实现吧 队列 1。队列的概念及结构 队列:只允许在一端进行插入数据操作,在另一端进行删除数据操作的特殊线性表,…

MATLAB图论合集(三)Dijkstra算法计算最短路径

本贴介绍最短路径的计算,实现方式为迪杰斯特拉算法;对于弗洛伊德算法,区别在于计算了所有结点之间的最短路径,考虑到MATLAB计算的便捷性,计算时只需要反复使用迪杰斯特拉即可,暂不介绍弗洛伊德的实现&#…

搜索二叉树的算法解析与实例演示

目录 一.搜索二叉树的特性与实现1.特点2.实现二.搜索二叉树的性能 一.搜索二叉树的特性与实现 1.特点 二叉搜索树是特殊的二叉树,它有着更严格的数据结构特点: (1)非空左子树的所有键值小于其根结点的键值。 (2&…

讯飞AI-SparkDesk

网址:https://m.xfyun.cn/login?callbackaHR0cHM6Ly94aW5naHVvLnhmeXVuLmNuL2NoYXQ/aWQ9MTUzMzc1MjA&website_namesparkdesk

【C++题解】[NOIP2018]龙虎斗

P a r t Part Part 1 1 1 读题 题目描述 轩轩和凯凯正在玩一款叫《龙虎斗》的游戏,游戏的棋盘是一条线段,线段上有 n n n个兵营(自左至右编号 1 − n 1-n 1−n),相邻编号的兵营之间相隔 1 1 1厘米,即棋盘…

springcloud初窥门径

一、概述 SprinfCloud组成部分 SpringCloud主流组件

【CSS】网站 网格商品展示 模块制作 ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) 绘制的如下模块 : 在上面的盒子中 , 没有设置高度 , 只设置了一个 1215px 的宽度 ; 在列表中每个列表项都设置了 浮动 ; /* 网格商品展示 */ .box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子…

Navisworks2020~2023安装包分享(附安装教程)

目录 一、软件介绍 二、下载地址 一、软件介绍 Navisworks是一款专业的建筑、工厂、机械和设备设计软件工具,旨在帮助项目相关方可靠地整合、分享和审阅详细的三维设计模型。它提供了一系列功能强大的工具,使设计师、工程师和建筑师能够更好地协作、沟…

代码随想录算法训练营第四十六天 | 139.单词拆分

代码随想录算法训练营第四十六天 | 139.单词拆分 139.单词拆分 139.单词拆分 题目链接 视频讲解 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 注意:不要求字典中出现的单词全部都使用,并且字典…

【效能平台】django项目中集成httprunner做接口测试补(五)

这里写目录标题 一、登录接口数据驱动测试1、定义登录api:api/login_api_form.yml2、定义login_testcases.yaml3、定义login_testcases.yaml4、debugtalk.py文件5、执行测试用例6、测试报告7、优先级:二、将httprunner集成到测试平台中一、登录接口数据驱动测试 1、定义登录a…

电脑视频编辑软件前十名 电脑视频编辑器怎么剪辑视频

对于大多数创作者而言,视频后期工作基本都是在剪辑软件上进行的。一款适合自己的视频剪辑软件,能够节省出大量的时间和金钱成本,让剪辑师省钱又省心。那么有关电脑视频编辑软件前十名,电脑视频编辑器怎么剪辑视频的相关问题&#…

【Python从入门到进阶】33、使用bs4获取星巴克产品信息

接上篇《32、bs4的基本使用》 上一篇我们介绍了BeautifulSoup的基本概念,以及bs4的基本使用,本篇我们来使用bs4来解析星巴克网站,获取其产品信息。 一、星巴克网站介绍 星巴克官网是星巴克公司的官方网站,用于提供关于星巴克咖啡…

收费文章怎么复制

1.复制这篇文章发现收费 2.电脑登录一个qq,截图找到这个屏幕视图 3.右边这个文字可以复制 4.这个只能识别一段一段复制

网卡重启,导致docker容器暴露端口都无法对外开放

公司内部网络ip冲突,重新分配了某个范围的ip后,修改网络信息(位于/etc/sysconfig/network-scripts目录下对应网卡)后,重启网卡(systemctl restart network);后面导致docker容器暴露的…

计算机网络-笔记-第三章-数据链路层

目录 三、第三章——数据链路层 1、数据链路层概述(帧) (1)封装成帧、差错检测、可靠传输(简单介绍) (2)CSMA/CD 2、封装成帧 (1)透明传输(…

JVM虚拟机:定位对象的两种方式

定位对象的方式 1、句柄池 2、直接指针 ‘句柄池 直接指针 在Java中,可以使用两种方式来定位对象:句柄池和直接指针。 1. 句柄池:在Java的句柄池模型中,Java虚拟机(JVM)会为每个对象创建一个句柄&#xff…

2022 ICPC 南京 M Drain the Water Tank(叉积 + 思维)

2022 ICPC 南京 M. Drain the Water Tank(叉积 思维) Problem - M - Codeforces 大意:给一个多边形 ,多边形充满水 , 点集逆时针给出 , 求最少的出水阀门的数量使得水可以全部流出。 思路:通过画图发现 &#xff0…

vector VS deque

1. vector与deque vector与动态数组相同,能够在插入或删除元素时自动调整自身大小,其存储由容器自动处理,vector通常占用多于静态数组的空间,因为要分配更多的内存以管理将来的增长,在每次插入元素的时,仅…

红外与可见光图像融合入门教学

红外与可见光图像融合入门教学 什么是红外与可见光图像融合论文DeepFuseDenseFuseRFN-NestFusionGANDDcGANAttentionFGANGANMcC 总结 博主目前马上进入研二阶段,也算是入门了红外与可将光图像领域,正好总结下,以供刚接触该领域的萌新们参考。…

ADC模块之HX711

今天,回顾了HX711模数转换模块,HX711模块经常用于电子秤的设计。 模数转换模块的输入有三种(HX711的输入为差分输入): HX711的驱动程序 #include "HX711.h"//********************************************…