1. git前后端分离简介
在传统的前后端开发模式中，前端和后端是紧密耦合在一起的，整个应用的代码都集中在一个代码库中，前端代码通过后端来运行和获取数据。这种模式存在着以下问题：
- 代码架构混乱，前后端耦合严重，难以维护及迭代
- 前后端开发进度难以同步，构建和部署时间长
- 后端代码的变动会导致前端代码的变动，反之亦然
因此，git前后端分离应运而生。通过将前后端代码分别放在不同的代码库中，前后端开发人员可以独立地开发、测试和部署，大大提高了开发效率和稳定性。本文将为大家介绍git前后端分离的使用方法。
2. 前后端代码库的分离
为了实现前后端代码库的分离，我们需要创建两个不同的代码库，一个用于前端代码，一个用于后端代码。这两个代码库可以使用不同的版本控制工具，但我们推荐使用git。
2.1 创建前端代码库
首先，在本地创建一个新的目录，用于存放前端代码。进入该目录，执行以下命令：
git init这个命令会在本地创建一个新的git仓库，我们需要将这个仓库推送到远程代码托管平台上。
假设我们要将代码托管在GitHub上，我们可以在GitHub上创建一个新的repository，得到该仓库的URL地址，然后执行以下命令提交代码：
git remote add origin <仓库URL地址>
git add .
git commit -m "Initial commit"
git push -u origin master
这些命令的作用是：为仓库添加远程代码仓库，将当前目录下的所有文件添加到仓库中并提交，将本地代码推送到远程代码仓库中。
2.2 创建后端代码库
接下来，我们同样需要在本地创建一个新的目录，用于存放后端代码。进入该目录，执行以下命令：
git init同样需要将该仓库推送到远程代码托管平台上。假设我们要将代码托管在GitHub上，在GitHub上创建一个新的repository，得到该仓库的URL地址，然后执行以下命令提交代码：
git remote add origin <仓库URL地址>
git add .
git commit -m "Initial commit"
git push -u origin master
3. 前后端代码库的分离与同步
前后端代码库的分离并不意味着两个代码库的代码不需要进行交互，实际上前后端之间仍然需要进行数据交互。
3.1 API
前后端之间的数据交互通常通过API实现。在后端代码库中，我们需要实现一系列API接口，供前端代码库调用。例如，我们可以在后端代码库的根目录下创建一个`api`目录，用于存放后端API相关的代码。
在后端代码库中，我们可以使用第三方库（如express）创建API接口，实现以下功能：
- 接收请求数据
- 处理请求数据，包括调用数据库等后台操作
- 返回数据给前端
以下是一个使用express实现API的例子：
const express = require('express')
const app = express()
app.get('/api/user', (req, res) => {
const user = {
name: 'John',
age: 30
}
res.json(user)
})
app.listen(3000, () => {
console.log('Server started on port 3000')
})
这段代码创建了一个简单的API，可以通过访问`/api/user`获取一个名为John、年龄为30的用户对象。我们可以将这个API挂载到一个特定的路由路径上，例如：`http://localhost:3000/api/user`。
3.2 AJAX
在前端代码库中，我们可以使用AJAX调用后端API获取数据，例如：
const xhr = new XMLHttpRequest()
xhr.open('GET', '/api/user')
xhr.onload = function() {
const user = JSON.parse(xhr.responseText)
console.log('User name: ' + user.name + ', Age: ' + user.age)
}
xhr.send()
这段代码会向`/api/user`发起一个GET请求，获取对应的用户数据，并将其解析为JSON格式。我们可以将这个请求添加到网页中的任意位置，例如在按钮点击事件中调用。
3.3 数据库
如果需要使用数据库进行数据存储和检索，我们可以在后端代码库中使用数据库（如MySQL、MongoDB等）的API实现相关功能。
以下是一个使用MySQL实现数据库读取操作的例子：
const mysql = require('mysql')
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'mydb'
})
connection.connect()
connection.query('SELECT * FROM customers', (error, results, fields) => {
if (error) throw error
console.log('Results: ', results)
})
connection.end()
这段代码连接了一个名为`mydb`的数据库，并从其中的`customers`表中读取数据。我们可以使用类似的代码实现数据的增删改查等操作。
4. 总结
本文介绍了git前后端分离的使用方法，包括创建前后端代码库、前后端代码库的分离与同步、使用API实现前后端数据交互以及使用数据库实现数据存储和检索。通过git前后端分离，前后端开发人员可以独立地开发、测试和部署，提高了开发效率和稳定性。同时，前后端代码库的分离也规范了代码架构，避免了前后端耦合，便于维护和迭代。