结合时下流行技术，轻松入门前后端分离小项目制作

前端

2023-12-01 01:06:17

前后端分离开发指南：快速入门

欢迎来到前后端分离开发的世界！它已成为现代Web开发的基石，分离了前端和后端的职责，带来了无可匹敌的优势。作为初学者，本指南将带你踏上征服前后端分离项目的精彩旅程。

准备你的工具

踏上任何旅程都始于必要的工具。对于前后端分离开发，你需要以下装备：

文本编辑器：Visual Studio Code、Sublime Text 或 Atom
Node.js：服务器端开发基础
MySQL：流行的数据库系统
MySQL Workbench：用于操作数据库的工具
Vue.js：JavaScript 框架，用于构建前端界面
Element-UI：基于 Vue.js 的 UI 库，提供丰富的组件
Axios：用于在浏览器中发送 HTTP 请求的库

构建你的后端

后端就像舞台背后的魔术师，处理数据和业务逻辑。让我们一步步构建它：

创建服务器端入口文件 ，在 Node.js 中，使用 Express.js。
导入模块 ，例如 MySQL、Axios，进行数据交互和请求处理。
定义路由 ，用于处理客户端请求。
建立 MySQL 连接池 ，方便与数据库交互。
创建数据库操作函数 ，用于获取或修改数据。

打造你的前端

前端是用户体验的舞台。让我们用 Vue.js 来点亮它：

创建前端入口文件 ，在 Vue.js 中。
导入模块 ，例如 Element-UI、Axios，用于构建界面和数据请求。
定义 Vue 组件 ，它们是界面的构建块。
使用 Axios 向后端发送请求 ，获取或修改数据。
使用 Element-UI 组件 ，构建界面元素。

测试你的杰作

现在，是时候见证你的杰作了：

启动 Node.js 服务器 。
在浏览器中打开前端页面 。
与界面交互 ，测试其功能。

代码示例

后端（服务器端）

const express = require('express');
const mysql = require('mysql');
const app = express();

// MySQL 连接池
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydb'
});

// 获取所有用户
app.get('/users', (req, res) => {
  pool.query('SELECT * FROM users', (err, rows) => {
    if (err) {
      res.status(500).send('Error fetching users');
    } else {
      res.json(rows);
    }
  });
});

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

前端（客户端）

import Vue from 'vue';
import ElementUI from 'element-ui';
import axios from 'axios';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  render: h => h(App)
}).$mount('#app');

const vm = new Vue();

// 获取所有用户
vm.getUsers = function() {
  axios.get('/users')
    .then(response => {
      this.users = response.data;
    })
    .catch(error => {
      console.error(error);
    });
};