基于NodeJS的前后端分离的思考与实践（一）全栈式开发

首先，我们需要明确什么是前后端分离。前后端分离指的是将前端和后端的代码分离开来，前端和后端通过API进行交互，实现数据交互和页面渲染。这种模式的优点是使前后端分别负责自己的领域，提高了代码的可维护性和可扩展性。

接下来，我们讲解一下如何基于NodeJS进行前后端分离开发。

一、选择前端框架

首先，我们需要选择前端框架。目前比较流行的前端框架有React、Angular和Vue等。这里我们以Vue为例。

二、创建NodeJS后端项目

接下来，我们需要创建NodeJS后端项目。可以使用Express框架。

//package.json
{
  "name": "node-server",
  "version": "1.0.0",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "morgan": "^1.10.0"
  },
  "scripts": {
    "start": "node index.js"
  }
}

//index.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const morgan = require('morgan');

const app = express();

app.use(bodyParser.json());
app.use(cors());
app.use(morgan('combined'));

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

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

三、实现API接口

接下来，我们需要实现API接口。API接口的作用是连接前端和后端，实现数据交互。

//index.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const morgan = require('morgan');

const app = express();

app.use(bodyParser.json());
app.use(cors());
app.use(morgan('combined'));

app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
  ];
  res.send(users);
});

app.post('/api/users', (req, res) => {
  const user = req.body;
  console.log(user);
  res.send(user);
});

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

四、调用API接口

最后，我们需要在前端中调用API接口，实现数据交互。

<template>
  <div class="users">
    <div class="user" v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
    <div class="form">
      <input type="text" v-model="name" />
      <button @click="addUser">Add User</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      name: '',
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('http://localhost:3000/api/users').then((res) => {
        this.users = res.data;
      });
    },
    addUser() {
      const user = { name: this.name };
      axios.post('http://localhost:3000/api/users', user).then((res) => {
        this.users.push(res.data);
        this.name = '';
      });
    },
  },
};
</script>

以上就是基于NodeJS的前后端分离的思考与实践的完整攻略。示例中包含了创建NodeJS后端项目、实现API接口和调用API接口的示例。可以依据这些示例来开发自己的项目。