创建一个项目目录
创建项目目录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)
})
标签:res,app,req,json,server,全栈,products,MERN,搭建
From: https://www.cnblogs.com/llk2000/p/16728891.html