首页手记前后端分离教程：新手入门指南

前后端分离教程：新手入门指南

标签：

前端工具 React.JS Vue.js

本文详细介绍了前后端分离的基本原理，包括前端和后端的职责区分、常用技术栈以及搭建前后端分离环境的步骤。文中还通过一个简单的博客应用示例，展示了如何实现前后端分离项目的开发流程，包括前端页面和后端服务的实现。此外，文章还提供了测试和部署的指导，帮助读者全面掌握前后端分离教程。

前端与后端基础概念介绍

什么是前端

前端是用户与网站或应用交互的界面。前端负责处理用户输入，展示信息，并与用户进行实时交互。前端技术主要包括HTML、CSS和JavaScript。

HTML

HTML（HyperText Markup Language）是创建网页的标准标记语言。它定义了网页的基本结构，如标题、段落、列表等。

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到示例页面</h1>
    <p>这是一个简单的HTML文档示例。</p>
</body>
</html>

CSS

CSS（Cascading Style Sheets）用于设计网页的样式，如颜色、字体、布局等。

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    font-size: 24px;
}

p {
    color: #666;
    font-size: 16px;
}

JavaScript

JavaScript是一种脚本语言，用于实现网页的动态交互功能。它可以在客户端进行复杂的逻辑处理。

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button").addEventListener("click", function() {
        document.getElementById("demo").innerHTML = "按钮被点击了！";
    });
});

什么是后端

后端是服务器端的应用程序，负责处理数据库操作、业务逻辑、数据存储和数据传输等。后端通过API接口与前端进行通信，提供所需的数据和服务。

语言与框架

后端开发常用的语言有Node.js、Python、Java等。这些语言通常与特定的框架搭配使用，如Node.js的Express、Python的Django和Java的Spring。

前端与后端的区别

前端与后端的主要区别在于它们处理的职责不同。前端主要处理客户端的展示和交互，而后端则处理服务器端的数据处理和逻辑运算。前端的工作环境是浏览器，而后端的工作环境是服务器。

前端示例代码

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button").addEventListener("click", function() {
        document.getElementById("demo").innerHTML = "按钮被点击了！";
    });
});

后端示例代码

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

前后端分离的基本原理

为什么要进行前后端分离

前后端分离可以提高开发效率和灵活性。前端和后端可以独立开发和部署，互不影响。前端专注于界面设计，后端专注于数据处理，可以更好地分工合作。此外，前后端分离也提高了系统的可维护性和扩展性。

前后端分离的基本架构

前后端分离的基本架构通常包含以下几个部分：

前端应用：负责用户界面和前端逻辑。
后端服务：负责处理服务器端逻辑，提供API接口。
数据库：存储和管理数据。
API网关：作为前端和后端的桥梁，负责路由请求到相应的服务。

前端应用通过HTTP请求与后端服务进行通信，获取数据并渲染到页面上。后端服务则处理请求，操作数据库，并返回相应数据。

常用技术栈简介

前端技术栈

HTML

HTML用于构建网页的基本结构。

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到示例页面</h1>
    <p>这是一个简单的HTML文档示例。</p>
</body>
</html>

CSS

CSS用于设计网页的样式。

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    font-size: 24px;
}

p {
    color: #666;
    font-size: 16px;
}

JavaScript

JavaScript用于实现网页的动态交互功能。

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button").addEventListener("click", function() {
        document.getElementById("demo").innerHTML = "按钮被点击了！";
    });
});

常见框架

前端开发中常用的框架有React、Vue.js和Angular。

React: 由Facebook开发，用于构建用户界面。
Vue.js: 由Evan You开发，用于构建用户界面。
Angular: 由Google开发，用于构建复杂的单页应用。

React示例

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Vue.js示例

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue.js!'
    },
    template: '<div>{{ message }}</div>'
});

Angular示例

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<div>Hello, Angular!</div>'
})
export class AppComponent { }

后端技术栈

Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以在服务器端运行JavaScript代码。

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Python

Python是一种高级编程语言，广泛用于数据科学、机器学习等领域。

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

Java

Java是一种广泛使用的编程语言，适用于企业级应用。

import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;

public class SimpleServer {
    public static void main(String[] args) {
        try (ServerSocket serverSocket = new ServerSocket(8000)) {
            System.out.println("服务器已启动，监听端口8000");
            while (true) {
                Socket clientSocket = serverSocket.accept();
                new ClientHandler(clientSocket).start();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

常见框架

后端开发中常用的框架有Express、Django和Spring。

Express: 用于Node.js的Web应用框架。
Django: 用于Python的Web框架。
Spring: 用于Java的Web应用框架。

Express示例

const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

搭建前后端分离环境

安装必要的开发工具

安装Node.js

Node.js可以从官网下载安装包，也可以使用包管理器如NPM进行安装。

# 使用NPM安装Node.js
npm install -g node

安装Python

Python可以从官网下载安装包，也可以使用包管理器pip进行安装。

# 使用pip安装Python
pip install python

安装Java

Java可以从官网下载安装包，也可以使用包管理器如SDKMAN进行安装。

# 使用SDKMAN安装Java
sdkman install java

安装前端工具

安装NPM

NPM是Node.js的包管理器，用于管理依赖和运行脚本。

npm install -g npm

安装Vue CLI

Vue CLI是Vue.js的命令行工具，用于快速搭建Vue应用。

npm install -g @vue/cli

安装React脚手架

React脚手架是创建React应用的工具。

npm install -g create-react-app

配置环境

前端配置

前端项目依赖文件package.json示例：

{
  "name": "frontend",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.0"
  }
}

后端配置

后端项目依赖文件package.json示例：

{
  "name": "backend",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

环境变量配置

后端项目环境变量文件.env示例：

PORT=3000
DATABASE_URL=mysql://root:password@localhost/dbname

创建项目的目录结构

一个典型的前后端分离项目的目录结构如下：

my-app/
│── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   └── App.vue
│   │   ├── main.js
│   │   └── App.vue
│   └── package.json
│── backend/
│   ├── server.js
│   ├── package.json
│   └── .env
└── README.md

前端目录结构

前端项目位于frontend目录下，包含以下子目录和文件：

public：存放静态资源，如HTML、CSS和图片。
src：存放源代码，包括组件、样式和逻辑文件。
package.json：存放项目依赖和脚本。

后端目录结构

后端项目位于backend目录下，包含以下子目录和文件：

server.js：存放服务器端代码。
package.json：存放项目依赖和脚本。
.env：存放环境变量。

配置开发环境

前端配置

安装依赖

在frontend目录下运行以下命令安装依赖：

npm install

启动开发服务器

在frontend目录下运行以下命令启动开发服务器：

npm run serve

后端配置

安装依赖

在backend目录下运行以下命令安装依赖：

npm install

启动服务器

在backend目录下运行以下命令启动服务器：

node server.js

开发一个简单的前后端分离项目

设计项目需求

假设我们要开发一个简单的博客应用，包含以下功能：

用户可以查看博客文章列表。
用户可以查看单篇文章的详细信息。
用户可以发布新文章。
用户可以编辑已发布的文章。
用户可以删除已发布的文章。

实现前端页面

博客文章列表页面

<!DOCTYPE html>
<html>
<head>
    <title>博客文章列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>博客文章列表</h1>
    <ul id="articles">
    </ul>
</body>
</html>

博客文章详情页面

<!DOCTYPE html>
<html>
<head>
    <title>博客文章详情</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="title">文章标题</h1>
    <p id="content">文章内容</p>
</body>
</html>

前端逻辑实现

const fetchArticles = async () => {
    const response = await fetch('/api/articles');
    const articles = await response.json();
    const articleList = document.getElementById('articles');

    articles.forEach(article => {
        const li = document.createElement('li');
        li.textContent = article.title;
        li.addEventListener('click', () => {
            window.location.href = `/article/${article.id}`;
        });
        articleList.appendChild(li);
    });
};

fetchArticles();

实现后端服务

创建文章列表API

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

const articles = [
    { id: 1, title: '文章1', content: '这是文章1的内容' },
    { id: 2, title: '文章2', content: '这是文章2的内容' },
    { id: 3, title: '文章3', content: '这是文章3的内容' },
];

app.get('/api/articles', (req, res) => {
    res.json(articles);
});

app.listen(3000, () => {
    console.log('服务器运行在端口3000');
});

创建文章详情API

app.get('/api/articles/:id', (req, res) => {
    const articleId = req.params.id;
    const article = articles.find(article => article.id === parseInt(articleId));

    if (!article) {
        res.status(404).json({ error: '文章不存在' });
    } else {
        res.json(article);
    }
});

创建文章发布API

app.post('/api/articles', (req, res) => {
    const newArticle = {
        id: articles.length + 1,
        title: req.body.title,
        content: req.body.content
    };

    articles.push(newArticle);
    res.json(newArticle);
});

创建文章编辑API

app.put('/api/articles/:id', (req, res) => {
    const articleId = req.params.id;
    const updatedArticle = {
        id: parseInt(articleId),
        title: req.body.title,
        content: req.body.content
    };

    articles = articles.map(article => article.id === updatedArticle.id ? updatedArticle : article);

    res.json(updatedArticle);
});

创建文章删除API

app.delete('/api/articles/:id', (req, res) => {
    const articleId = req.params.id;
    articles = articles.filter(article => article.id !== parseInt(articleId));

    res.json({ message: '文章删除成功' });
});

测试与部署

单元测试与集成测试

单元测试

单元测试用于测试单个函数或模块的功能。

const assert = require('assert');

describe('文章列表API测试', () => {
    it('应该返回所有文章', () => {
        return fetch('/api/articles')
            .then(response => response.json())
            .then(articles => {
                assert.ok(Array.isArray(articles));
                assert.strictEqual(articles.length, 3);
            });
    });
});

集成测试

集成测试用于测试不同模块之间的交互。

describe('文章创建和读取测试', () => {
    it('应该创建并读取文章', () => {
        const newArticle = {
            title: '新文章',
            content: '这是新文章的内容'
        };

        return fetch('/api/articles', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(newArticle)
        })
        .then(() => fetch('/api/articles'))
        .then(response => response.json())
        .then(articles => {
            assert.ok(Array.isArray(articles));
            assert.strictEqual(articles.length, 4);
            assert.strictEqual(articles[3].title, newArticle.title);
        });
    });
});

本地开发环境与生产环境的部署

本地开发环境

本地开发环境通常使用开发服务器进行开发，如前面提到的Node.js服务器。开发过程中需要频繁启动和停止服务器，所以开发服务器通常会提供热重载功能，以便在代码发生变化时自动重新加载。

# 启动开发服务器
npm run serve

生产环境部署

生产环境部署通常使用更稳定、更高效的服务器。常见的生产环境部署包括使用Docker、Kubernetes或云服务提供商提供的服务。

使用Docker部署

首先，为项目创建Dockerfile：

FROM node:14

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 3000
CMD ["node", "server.js"]

然后，构建并运行Docker容器：

# 构建Docker镜像
docker build -t my-app .
# 运行Docker容器
docker run -p 3000:3000 my-app

使用云服务提供商部署

可以使用云服务提供商如AWS、Google Cloud或阿里云等提供的服务进行部署。

创建EC2实例或云函数。
上传代码和依赖到实例。
配置服务器参数和端口。
启动应用。

使用云服务提供商提供的服务进行部署可以简化部署流程，提高应用的可用性和稳定性。

通过充分理解前后端分离的基本概念及其技术栈，搭建开发环境，设计并实现一个简单的前后端分离项目，最后进行测试和部署，你就能很好地掌握前后端分离的开发流程。希望本指南能帮助你入门前后端分离开发。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

MM们

手记
篇

粉丝

4

获赞与收藏

15

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31348 348

网络编程入门教程

20个小节 12858 242

Pandas 入门教程

25个小节 18732 351

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

前后端分离教程：新手入门指南

HTML

CSS

JavaScript

语言与框架

前端示例代码

后端示例代码

HTML

CSS

JavaScript

常见框架

React示例

Vue.js示例

Angular示例

Node.js

Python

Java

常见框架

Express示例

安装Node.js

安装Python

安装Java

安装前端工具

安装NPM

安装Vue CLI

安装React脚手架

配置环境

前端配置

后端配置

环境变量配置

前端目录结构

后端目录结构

前端配置

安装依赖

启动开发服务器

后端配置

安装依赖

启动服务器

博客文章列表页面

博客文章详情页面

前端逻辑实现

创建文章列表API

创建文章详情API

创建文章发布API

创建文章编辑API

创建文章删除API

单元测试

集成测试

本地开发环境

生产环境部署

使用Docker部署

使用云服务提供商部署

阅读免费教程