全栈项目配置模板构建之旅：webpack5+express+react+mongoose

前言

在上一篇笔记中，我们已经完成了webpack5与react项目的配置，并且将该项目部署到了GitHub Pages上。本篇笔记将以该项目为基础，逐步搭建一个完整的全栈项目配置模板，包括前端、后端和数据库的搭建与配置。

项目结构

为了让项目结构更加清晰，我们将对上一篇笔记中的项目结构进行一些调整：

├── client   # 前端代码
│   ├── src
│   │   ├── App.js
│   │   ├── index.js
│   │   ├── components
│   │   └── pages
│   └── package.json
├── server   # 后端代码
│   ├── app.js
│   ├── routes
│   ├── models
│   ├── config
│   └── package.json
├── db   # 数据库
│   ├── mongo.js
│   └── schema.js
├── package.json  # 项目根目录的package.json
├── .gitignore
├── README.md

前端代码

前端代码部分与上一篇笔记中的代码基本相同，只是我们将项目结构进行了调整。

安装依赖

cd client
npm install

运行项目

npm start

后端代码

后端代码部分我们将使用express框架来搭建。

安装依赖

cd server
npm install express mongoose

创建app.js文件

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

const app = express();

mongoose.connect('mongodb://localhost:27017/test', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

运行项目

npm start

数据库

我们将使用MongoDB作为我们的数据库。

安装依赖

cd db
npm install mongoose

创建mongo.js文件

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/test', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

创建schema.js文件

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const userSchema = new Schema({
  name: String,
  email: String,
  password: String,
});

const User = mongoose.model('User', userSchema);

module.exports = User;

整合前端、后端和数据库

现在，我们已经完成了前端、后端和数据库的搭建，接下来我们将把它们整合在一起。

在前端代码中导入后端代码

// client/src/index.js
import express from 'express';

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在后端代码中导入数据库代码

// server/app.js
const db = require('./db/mongo.js');

mongoose.connect(db, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

运行项目

现在，我们可以运行我们的全栈项目了。

cd client
npm start

cd server
npm start

结语

至此，我们就完成了一个完整的全栈项目配置模板的搭建。这个模板可以作为我们未来构建全栈项目的基础，帮助我们快速搭建出符合需求的项目结构。

在下一篇笔记中，我们将继续探索webpack5的更多高级用法，敬请期待！