首页手记前端入门必备：前后端分离资料详解

前端入门必备：前后端分离资料详解

标签：

前端工具 React.JS Vue.js

概述

本文详细介绍了前后端分离的概念与优势，包括架构设计、开发工具及环境搭建等内容，并提供了实战案例和常见问题解决方案，帮助读者全面理解前后端分离资料。

前端基础知识介绍

HTML基础

HTML（超文本标记语言）是用于创建网页的标准标记语言。HTML文档由元素组成，每个元素由标签定义。以下是HTML的基础语法和常用的元素：

文档结构

HTML文档的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：根元素，整个HTML文档都包含在这个标签中。
<head>：定义文档头部，不显示在页面上，包含元数据（如<title>）。
<body>：包含页面的所有内容，如文本、图片、链接等。

常用元素

<p>：定义段落。
<a>：定义链接。
<img>：定义图片。
<div>：定义一个分区或区块。
<span>：定义一个内联元素。
<table>：定义表格。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>示例网页</title>
</head>
<body>
    <h1>欢迎来到示例网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.imooc.com/">访问慕课网</a>
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image.jpg" alt="示例图片">

    <div>
        <span>这是一个span元素</span>
    </div>

    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

CSS基础

CSS（层叠样式表）用于控制网页的样式，如颜色、字体、布局等。

选择器

元素选择器：p {} 选择所有<p>标签。
类选择器：.myclass {} 选择所有带有class="myclass"的元素。
ID选择器：#myid {} 选择唯一一个带有id="myid"的元素。
伪类选择器：a:hover {} 选择鼠标悬停在链接上的状态。

常用属性

color：定义文本颜色。
font-family：定义字体。
font-size：定义字体大小。
background-color：定义背景颜色。
padding：定义内边距。
margin：定义外边距。
display：定义元素如何显示。
position：定义元素定位方式。

示例代码

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: blue;
            font-family: Arial;
            font-size: 24px;
        }

        p {
            color: green;
            font-size: 18px;
        }

        .myclass {
            color: red;
        }

        #myid {
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>这是段落1。</p>
    <p class="myclass">这是段落2。</p>
    <p id="myid">这是段落3。</p>
</body>
</html>

JavaScript基础

JavaScript 是一种广泛用于客户端网页编程的脚本语言。它通过 DOM API 来操作 HTML 和 CSS，使网页具有动态效果。

变量与类型

JavaScript 中的变量可以用来存储数据，使用 var、let 或 const 声明：

var num = 10; // 数字类型
let str = "Hello"; // 字符串类型
const isTrue = true; // 布尔类型

函数

函数可以用来封装一段代码，以便多次调用。使用 function 关键字定义函数：

function greet(name) {
    console.log("Hello, " + name);
}

greet("World");

事件处理

DOM 事件允许 JavaScript 操纵网页中的事件，如点击、提交等。使用 addEventListener 方法：

document.getElementById("myButton").addEventListener("click", function() {
    console.log("按钮被点击了");
});

示例代码

<!DOCTYPE html>
<html>
<head>
    <script>
        function changeColor() {
            document.getElementById("myParagraph").style.color = "red";
        }

        function showText() {
            alert("你好，世界");
        }
    </script>
</head>
<body>
    <button id="myButton" onclick="showText()">点击我</button>
    <p id="myParagraph" onclick="changeColor()">这是一个段落。</p>
</body>
</html>

后端基础知识介绍

服务器的基础概念

服务器是提供特定网络资源（如网页、文件、应用程序等）的计算机。常见的服务器类型包括：

Web服务器：提供网页服务。如Apache、Nginx。
应用服务器：运行应用程序代码。如Tomcat、Jetty。

Web服务器的组成

HTTP协议

HTTP（超文本传输协议）是一种应用层协议，用于客户端和服务器之间的数据传输。客户端（如浏览器）发送HTTP请求到服务器，服务器响应HTTP响应。

URL

URL（统一资源定位符）表示Web资源的位置。格式如下：

协议://主机名[:端口号]/路径/文件名[?查询参数][#片段标识符]

示例代码

# 启动Apache服务器
sudo systemctl start apache2

数据库的基础概念

数据库用于存储和管理数据。常用的数据库类型包括：

关系型数据库：如MySQL、PostgreSQL。
NoSQL数据库：如MongoDB、Redis。

关系型数据库基础

数据库、表、记录

数据库：一组相互关联的数据。
表：数据库中的一个表格，包含若干列和行。
记录：表中的一行数据。

SQL基础

SQL（结构化查询语言）用于创建、查询和管理数据库。

-- 创建数据库
CREATE DATABASE mydb;

-- 创建表
CREATE TABLE users (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    email VARCHAR(100)
);

-- 插入数据
INSERT INTO users (id, name, email) VALUES (1, 'Alice', 'alice@example.com');

-- 查询数据
SELECT * FROM users;

示例代码

# 安装MySQL
sudo apt-get install mysql-server

# 创建数据库
mysql> CREATE DATABASE mydb;

# 连接到数据库
mysql> USE mydb;

# 创建表
mysql> CREATE TABLE users (
    -> id INT PRIMARY KEY,
    -> name VARCHAR(50),
    -> email VARCHAR(100)
    -> );

# 插入数据
mysql> INSERT INTO users (id, name, email) VALUES (1, 'Alice', 'alice@example.com');

# 查询数据
mysql> SELECT * FROM users;

REST API基础

REST（表示状态转移）是一种设计风格，用于构建Web服务。它基于HTTP协议，采用资源导向的方式。

基本概念

资源：Web服务中的实体，如用户、文章等。
资源标识符：资源的唯一标识符，通常是URL。
表现层：资源的不同表示形式，如JSON、XML。
操作：对资源的操作，如创建、读取、更新、删除（CRUD）。

示例代码

// 创建用户
app.post('/users', (req, res) => {
    const user = req.body;
    // 插入数据库
    res.status(201).json(user);
});

// 获取用户列表
app.get('/users', (req, res) => {
    // 查询数据库
    res.json(users);
});

// 更新用户
app.put('/users/:id', (req, res) => {
    const id = req.params.id;
    const updatedUser = req.body;
    // 更新数据库
    res.status(200).json(updatedUser);
});

// 删除用户
app.delete('/users/:id', (req, res) => {
    const id = req.params.id;
    // 删除数据库
    res.status(204).send();
});

前后端分离的概念与优势

什么是前后端分离

前后端分离是一种开发模式，前端和后端各自独立开发，前端主要负责页面展示和交互，后端主要负责数据处理和服务提供。

架构图

+-------------------+
|   前端应用       |
|  - 浏览器渲染   |
|  - JavaScript   |
+-------------------+
          |
+-------------------+
|   后端服务       |
|  - 数据库       |
|  - 服务器       |
+-------------------+

前后端分离的优势

独立开发：前后端可以同时开发，互不影响。
快速迭代：前端可以快速迭代，而不需要等待后端完成。
易于维护：前端和后端职责分明，代码管理更清晰。
灵活部署：前后端可以分开部署，提高效率。

常见的前后端分离实现方式

客户端渲染：前端负责页面渲染，后端提供REST API。
服务端渲染：后端渲染HTML，前端加载JavaScript逻辑。
混合模式：结合客户端渲染和服务端渲染。

示例代码

// 前端请求API
fetch('/api/users')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

// 后端提供API
app.get('/api/users', (req, res) => {
    // 查询数据库
    res.json(users);
});

前后端分离开发环境搭建

前端开发工具介绍

常用工具

构建工具：如Webpack、Gulp。
包管理工具：如npm、Yarn。
IDE：如VS Code、WebStorm。

示例代码

# 安装Node.js
sudo apt-get install nodejs npm

# 初始化项目
npm init

# 安装依赖
npm install express body-parser --save

后端开发工具介绍

常用工具

服务器框架：如Express、Koa。
数据库驱动：如MySQL、MongoDB。
IDE：如VS Code、WebStorm。

示例代码

# 安装Node.js
sudo apt-get install nodejs npm

# 初始化项目
npm init

# 安装依赖
npm install express body-parser mysql --save

开发环境搭建步骤

前端开发步骤

安装Node.js和npm：
```
sudo apt-get install nodejs npm
```
初始化项目：
```
npm init
```
安装依赖：
```
npm install express body-parser --save
```
配置项目：
- 创建index.html和app.js。
- 在app.js中配置路由和数据处理逻辑。
- 在index.html中引入JavaScript文件。

后端开发步骤

安装Node.js和npm：
```
sudo apt-get install nodejs npm
```
初始化项目：
```
npm init
```

安装依赖：

npm install express body-parser mysql --save

配置项目：
- 创建index.js。
- 在index.js中配置路由和数据库连接。
- 启动服务器。

示例代码

// index.js (后端)
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

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

app.use(bodyParser.json());

// 连接数据库
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mydb'
});

connection.connect((err) => {
    if (err) {
        console.error('连接失败，错误: ' + err.stack);
        return;
    }
    console.log('连接成功');
});

// 获取用户列表
app.get('/api/users', (req, res) => {
    connection.query('SELECT * FROM users', (err, results) => {
        if (err) {
            console.error('查询失败，错误: ' + err.stack);
            return;
        }
        res.json(results);
    });
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

实战案例：简单的前后端分离项目

项目需求分析

开发一个简单的用户管理系统，包含用户列表展示和用户信息编辑功能。

功能需求

用户列表：展示所有用户信息。
用户编辑：编辑用户信息并保存。

数据结构

用户：包含id、name、email。

前端实现步骤

创建前端项目

初始化项目：
```
npm init
```
安装依赖：
```
npm install express body-parser --save
```
配置项目：
- 创建index.html。
- 创建app.js，配置路由和数据交互。

示例代码

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>用户管理系统</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div>
        <h2>用户列表</h2>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="userList">
            </tbody>
        </table>
    </div>
    <script>
        function fetchUsers() {
            axios.get('/api/users')
                .then(response => {
                    const userList = document.getElementById('userList');
                    response.data.forEach(user => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.email}</td>
                            <td>
                                <button onclick="editUser(${user.id})">编辑</button>
                            </td>
                        `;
                        userList.appendChild(row);
                    });
                });
        }

        function editUser(id) {
            // 实现编辑功能
        }

        fetchUsers();
    </script>
</body>
</html>

// app.js (前端)
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');

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

app.use(bodyParser.json());
app.use(express.static('public'));

// 获取用户列表
app.get('/api/users', (req, res) => {
    axios.get('/api/users')
        .then(response => {
            res.json(response.data);
        });
});

app.listen(port, () => {
    console.log(`前端运行在 http://localhost:${port}`);
});

后端实现步骤

创建后端项目

初始化项目：
```
npm init
```

安装依赖：

npm install express body-parser mysql --save

配置项目：
- 创建index.js。
- 配置数据库连接和路由。

示例代码

// index.js (后端)
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
const port = 3001;

app.use(bodyParser.json());

// 连接数据库
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mydb'
});

connection.connect((err) => {
    if (err) {
        console.error('连接失败，错误: ' + err.stack);
        return;
    }
    console.log('连接成功');
});

// 获取用户列表
app.get('/api/users', (req, res) => {
    connection.query('SELECT * FROM users', (err, results) => {
        if (err) {
            console.error('查询失败，错误: ' + err.stack);
            return;
        }
        res.json(results);
    });
});

// 添加用户
app.post('/api/users', (req, res) => {
    const user = req.body;
    connection.query('INSERT INTO users SET ?', user, (err) => {
        if (err) {
            console.error('插入失败，错误: ' + err.stack);
            return;
        }
        res.status(201).json(user);
    });
});

app.listen(port, () => {
    console.log(`后端运行在 http://localhost:${port}`);
});

整合前后端

部署前后端

启动前端服务器：
```
npm run dev
```
启动后端服务器：
```
node index.js
```
访问前端页面：
```
http://localhost:3000
```

示例代码

# 启动前端
npm run dev

# 启动后端
node index.js

常见问题与解决方案

跨域问题及解决方法

跨域问题是指浏览器对不同源的请求进行限制。常见的解决方法包括：

CORS（跨域资源共享）：后端通过设置响应头允许跨域请求。
代理服务器：前端通过代理服务器转发请求。
JSONP：通过<script>标签动态加载数据。

示例代码

// 后端设置CORS
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

// 前端请求时设置跨域
axios.get('/api/users', {
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
});

数据交互常见问题及解决方法

数据格式问题：确保前后端数据格式一致。
数据验证问题：前后端都需进行数据验证。
数据同步问题：前后端数据实时同步，避免数据不一致。

示例代码

// 后端数据验证
app.post('/api/users', (req, res) => {
    const user = req.body;
    if (!user.name || !user.email) {
        return res.status(400).json({ message: '姓名和邮箱必填' });
    }
    // 插入数据库
    res.status(201).json(user);
});

// 前端数据验证
function addUser(name, email) {
    if (!name || !email) {
        console.error('姓名和邮箱必填');
        return;
    }
    // 发送请求
    axios.post('/api/users', { name, email });
}

技术选型建议

前端框架：React、Vue、Angular。
后端框架：Express、Koa。
数据库：MySQL、PostgreSQL、MongoDB。
构建工具：Webpack、Gulp。

示例代码

// 前端选型示例
// 使用React
npm install create-react-app
npx create-react-app myapp
cd myapp
npm start

// 后端选型示例
// 使用Express
npm install express body-parser

以上是前后端分离的基本介绍和实战案例，希望你能够通过本文掌握前后端分离的基本概念和技术实现。更多深入学习，可以参考慕课网的教程。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

ITMISS

手记
篇

粉丝

51

获赞与收藏

244

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

前端入门必备：前后端分离资料详解

文档结构

常用元素

示例代码

选择器

常用属性

示例代码

变量与类型

函数

事件处理

示例代码

Web服务器的组成

HTTP协议

URL

示例代码

关系型数据库基础

数据库、表、记录

SQL基础

示例代码

基本概念

示例代码

架构图

示例代码

常用工具

示例代码

常用工具

示例代码

前端开发步骤

后端开发步骤

示例代码

功能需求

数据结构

创建前端项目

示例代码

创建后端项目

示例代码

部署前后端

示例代码

示例代码

示例代码

示例代码

阅读免费教程