MERN全栈开发demo

lilugirl

发布于 2020-11-23 10:25:50

7320

发布于 2020-11-23 10:25:50

文章被收录于专栏：前端导学

MERN技术栈简介

MongoDB简介

创建一个免费账号 https://www.mongodb.com/cloud/atlas

创建一个cluster 顺着提示设置好密码及可访问的ip ，获取访问链接字符串

使用create-react-app命令创建一个新的react项目

进入react项目在文件夹下创建backend子文件夹

进入backend文件夹输入命令 npm init -y 创建json文件

继续安装相关依赖

npm install express cros mongoose dotenv
npm install -g nodemon

创建server.js文件

const express =require('express');
const cors=require('cors');
require('dotenv').config();
const app=express();
const port=process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
app.listen(port ,()=>{
  console.log(`Server is running on port: ${port}`)
})

执行 nodemon server命令启动服务

在backend目录下创建一个.env文件内容如下：

ALTAS_URI=mongodb+srv://abcd1234:abcd1234@cluster0.g56r1.mongodb.net/test?retryWrites=true&w=majority

server.js改为

const express =require('express');
const cors=require('cors');
const mongoose=require('mongoose');

require('dotenv').config();

const app=express();
const port=process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

const uri=process.env.ALTAS_URI;
mongoose.connect(uri,{useNewUrlParser:true,useCreateIndex:true,useUnifiedTopology:true});
const connection=mongoose.connection;
connection.once('open',()=>{
  console.log('MongoDB database connection established successfully');
});


const exercisesRouter=require('./routes/exercises');
const usersRouter=require('./routes/users');

app.use('/exercises',exercisesRouter);
app.use('/users',usersRouter);

app.listen(port ,()=>{
  console.log(`Server is running on port: ${port}`)
})

model文件和router文件的写法，见github链接

然后就是做前端的代码

具体代码见githbu链接

源码地址 https://github.com/lilugirl/react-express-bootstrap-dom

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react