MERN全栈框架搭建

项目仓库：https://github.com/lilingkang/mern-demo.git
docker仓库：https://hub.docker.com/r/llk2000/mern-demo

创建一个项目目录

创建项目目录mern-demo

搭建前端react框架

进入项目目录mern-demo，初始化前端react框架

npx create-react-app frontend

初始化完成后，前端项目目录格式如下

运行

cd frontend
npm start

可以看到界面

关闭eslint代码检测，修改package.json中eslintConfig

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest",
  ],
  "rules": {
    "no-undef": "off",
    "no-restricted-globals": "off",
    "no-unused-vars": "off"
  }
},

删除不需要的文件

frontend/src/App.css
frontend/src/App.test.js
frontend/src/logo.svg

清空默认主页，并简单测试

效果

删除frontend中.git文件，将.gitignore移动到项目根路径，并两处作修改

其中
node_modules\用于忽略子路径下的node_modiles文件夹
.env用于忽略项目环境变量（敏感信息）

将整个项目用git进行管理

git init
git add .
git commit -m 'react setup'

搭建后端express框架

在项目根路径新建文件夹backend，进入backend运行

npm init
npm i express --save

创建文件及文件夹

backend/server.js
backend/data/

编写server.js

const express = require("express")
const products = require("./data/Products")

const app = express()

app.get("/", (req, res) => {
  res.send("server running...")
})

app.get("/api/products", (req, res) => {
  res.json(products)
})

app.get("/api/products/:id", (req, res) => {
  const product = products.find((product) => product._id === req.params.id)
  res.json(product)
})

app.listen(5000, console.log("服务器已经在5000端口运行..."))

浏览器输入http://localhost:5000可以看到页面输出

前端利用axios请求数据

import axios from "axios"

const fetchProducts = async () => {
    const { data } = await axios.get("/api/products")
    console.log(data)
}
fetchProducts()

配置开发依赖项

在项目根路径下运行

npm init

安装开发依赖

npm i -D nodemon concurrently

其中
nodemon可以实现服务器动态刷新
concurrently可以实现同时启动前后端

修改package.json(项目根路径下)

{
  "name": "demo02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "nodemon backend/server",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^7.4.0",
    "nodemon": "^2.0.20"
  }
}

搭建mongodb数据库

mongodb官网下载压缩包

将压缩包加压到安装路径，进入安装目录创建文件夹

data/db

进入bin目录，运行

mongod --dbpath=..\data\db

即可启动数据库

后端连接并查询数据库

连接

// server.js
import mongoose from "mongoose"

// 数据库建立并连接
var url = "mongodb://localhost:27017/mern-demo"
mongoose.connect(url)
var db = mongoose.connection
db.on("error", console.error.bind(console, "MongoDB connection error:"))

查询

// server.js
app.get("/api/products", (req, res) => {
  Product.find((err, docs) => {
    if (!err) {
      console.log("查询到记录:\n" + docs)
      res.json(docs)
    }
  })
  // res.json(products)
})

app.get("/api/products/:id", (req, res) => {
  Product.findById(req.params.id, (err, docs) => {
    if (!err) {
      console.log("查询到记录:\n" + docs)
      res.json(docs)
    }
  })
  // const product = products.find((product) => product._id === req.params.id)
  // res.json(product)
})