初识前后端数据交互(新手篇)

一个软件项目的开发必然是离不开前端和后端的协作，对于刚入行的新手前端或者新手后端来说，很有必要了解一下对方是在做什么，以及提供给自己什么样的帮助，为什么需要对方共同协作才能完成整个软件项目的开发呢？希望这篇博客可以让你初步了解一下。

1.前端和后端的定位

Long long ago 是没有严格意义上的前后端区分，有的就是一个程序员直接把前后端全做了。也就是我们现在所说的全栈。与之相关的语言就是如jsp，php这类的脚本语言。既可以提供后端服务，又可以在客户端提供渲染。因此在那个群魔并起的时期，前端页面中总是会穿插大量的后端脚本渲染语句。随着项目复杂度不断增加，维护起来也是难上加难。后面，才有了将前后端分开的开发理念。

前端，通俗的理解就是做面向客户端的工作。比如各种跨端的页面。因为是要写页面，涉及到页面的布局，效果以及色彩相关，而这些工作又是由UI设计来完成，所以与之工作交流最多的就是UI设计了。所以，千万别得罪UI哦，小心她给你设计一个五彩斑斓的黑。刚开始学前端的时候，只知道写页面，数据交互哪些都是不懂的。所以也叫页面仔。这是所有入门前端的第一步。暂且不提，当页面写好了，第二步就是和后端协同做对接。

后端，用户在使用软件和网站的时候，只能看到页面。而页面又是前端和UI设计的结果，因此，后端其实是有一个和客户有隔代沟通的障碍。换而言之，后端是一个在背后默默付出的职业。但是在整个软件开发项目中，却是个不容忽视的存在。因为有他的存在，你的页面才能“活”起来。

通俗理解，前端写页面，提供给用户使用。用户可以看到设计出的精美页面，但是，这只是视觉上的效果，功能呢？假如用户要看一篇文章。文章的内容前端可以直接写到页面里，作为页面的一部分。但是假如有一百篇文章呢？难不成写一百个页面吗？明明只是内容的差异而已，布局和色调都是一样的。所以，这个时候就需要后端的帮助了，让数据变得动态。

前者内容都写在页面中，改变不了。没有和后端进行动态的数据交互，所以这类的前端页面统称静态页面。后面通过数据交互，让数据从后端返回，前端再写入页面上。数据就动态了。至于数据为什么经过后端的返回就动态了，看下面这个就懂了。

前端页面————后端服务————数据库

简单粗暴的理解就是：

对于前端而言：根据你的需求，让后端返回对应的数据。来丰富你的页面功能。

对于后端而言：前端需要啥，我给啥就行。有些数据涉及到隐私，你得拿东西(请求参数)来换

2.php数据交互示例

前端代码：index.html

<!DOCTYPE html>
<html><meta charset="utf-8">
<head><title>Axios Example</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><button onclick="sendRequest()">发送请求</button><script>function sendRequest() {axios.get('http://localhost/api.php').then(function (response) {console.log(response.data);}).catch(function (error) {console.error(error);});}</script>
</body>
</html>

php后端代码：api.php

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');if ($_SERVER['REQUEST_METHOD'] === 'GET') {$data = array('message' => 'Hello, world!','timestamp' => date('Y-m-d H:i:s'));echo json_encode($data);
} else {// 处理其他HTTP请求方法的代码...
}

3.node数据交互示例

前端代码：index.html 请求路径修改成node服务启动的路径：http://localhost:3000

node后端代码：node.js

const express = require('D:/nodejs/node_modules/express');
const app = express();// 定义路由和处理程序
app.get('*', (req, res) => {res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源访问，也可以指定具体的来源res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的 HTTP 请求方法res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // 允许的请求头字段const data = {message: 'Hello, world!',timestamp: new Date().toISOString()};res.json(data);
});// 启动服务器
const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});