我对技术探索与实践的看法：从前端到后端的零基础入门指南

预发守门员

2025-12-16 20:06

阅读 650

大家好，我是小林，一名211高校计算机专业的研二学生，平时喜欢写技术博客帮助刚入行的新人。今天我想和你聊聊我对技术探索与实践的理解，并通过一个具体项目带你真正“动手”理解前端和后端。

我当初学编程的时候，最大的困惑不是语法，而是不知道前端和后端到底有什么区别，更别说怎么把它们连起来。很多教程要么讲得太抽象，要么直接甩一堆代码让人摸不着头脑。所以，我决定写这篇手把手实战教程，用最简单的方式，带你从零搭建一个能前后端通信的小应用。

一、前端 vs 后端：到底在做什么？

先打个比方：

前端（Frontend） 就像餐厅的服务员 —— 负责和顾客（用户）打交道，展示菜单（界面），接收点单（用户操作）。
后端（Backend） 就像厨房的厨师 —— 接到订单后，去冰箱拿食材（数据库）、烹饪（逻辑处理），最后把菜做好送回给服务员。

角色	负责内容	常见技术
前端	用户看到的页面、交互效果	HTML, CSS, JavaScript, React, Vue
后端	数据处理、业务逻辑、数据库操作	Python, Node.js, Java, MySQL, Redis

💡 关键理解：前端运行在你的浏览器里，后端运行在服务器上。它们通过“请求-响应”模式通信。

二、环境准备：5分钟搭好开发环境

我们用最轻量级的组合：HTML + JavaScript（前端） + Node.js + Express（后端）。不需要复杂配置！

步骤 1：安装 Node.js

访问 https://nodejs.org
下载 LTS 版本（长期支持版，最稳定）
安装时一路“下一步”即可

验证是否安装成功：

node -v  # 应输出类似 v18.x.x
npm -v   # 应输出类似 9.x.x

步骤 2：创建项目目录

mkdir my-first-app
cd my-first-app

步骤 3：初始化后端项目

npm init -y  # 自动生成 package.json
npm install express  # 安装 Express 框架

三、核心概念：用代码说清楚前后端如何通信

1. 后端：创建一个 API 接口

新建文件 server.js：

// server.js
const express = require('express');
const app = express();
const PORT = 3000;

// 允许跨域（新手常卡在这里！）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 定义一个 GET 接口：当访问 /api/hello 时返回数据
app.get('/api/hello', (req, res) => {
  res.json({ message: "Hello from backend!" });
});

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

✅ 解释：这段代码启动了一个本地服务器，监听 3000 端口。当你在浏览器输入 http://localhost:3000/api/hello，会看到一段 JSON 数据。

2. 前端：发起请求并显示结果

新建文件 index.html：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>我的第一个前后端应用</title>
</head>
<body>
  <h1>前端页面</h1>
  <button onclick="fetchData()">点击获取后端数据</button>
  <p id="result"></p>

  <script>
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:3000/api/hello');
        const data = await response.json();
        document.getElementById('result').innerText = data.message;
      } catch (error) {
        document.getElementById('result').innerText = '请求失败: ' + error.message;
      }
    }
  </script>
</body>
</html>

✅ 解释：

fetch() 是浏览器提供的函数，用于向后端发起 HTTP 请求。

await 表示“等请求完成再继续”，避免代码乱序执行。

结果通过 document.getElementById 显示在页面上。

四、实战项目：构建一个“留言本”应用

现在我们来做一个稍微复杂的例子：用户输入名字和留言，提交后保存到后端，并实时显示所有留言。

第一步：完善后端（支持存储和返回留言）

修改 server.js：

// server.js（更新版）
const express = require('express');
const app = express();
const PORT = 3000;

// 存储留言的“假数据库”（实际项目用 MySQL/MongoDB）
let messages = [];

// 解析 JSON 请求体
app.use(express.json());

// 允许跨域
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 获取所有留言
app.get('/api/messages', (req, res) => {
  res.json(messages);
});

// 提交新留言
app.post('/api/messages', (req, res) => {
  const { name, content } = req.body;
  if (!name || !content) {
    return res.status(400).json({ error: '名字和留言不能为空' });
  }
  messages.push({ name, content, time: new Date().toLocaleString() });
  res.json({ success: true });
});

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

第二步：编写前端页面

更新 index.html：

<!DOCTYPE html>
<html>
<head>
  <title>留言本</title>
  <style>
    body { font-family: Arial; max-width: 600px; margin: 20px auto; }
    input, button { padding: 8px; margin: 5px; }
    .message { border-bottom: 1px solid #eee; padding: 10px 0; }
  </style>
</head>
<body>
  <h1>我的留言本</h1>
  
  <div>
    <input type="text" id="name" placeholder="你的名字">
    <br>
    <textarea id="content" placeholder="写下你的留言..." rows="3" cols="50"></textarea>
    <br>
    <button onclick="submitMessage()">提交留言</button>
  </div>

  <hr>
  <h2>所有留言：</h2>
  <div id="messages"></div>

  <script>
    // 页面加载时获取已有留言
    window.onload = loadMessages;

    async function loadMessages() {
      try {
        const res = await fetch('http://localhost:3000/api/messages');
        const messages = await res.json();
        displayMessages(messages);
      } catch (e) {
        alert('加载留言失败: ' + e.message);
      }
    }

    async function submitMessage() {
      const name = document.getElementById('name').value.trim();
      const content = document.getElementById('content').value.trim();
      
      if (!name || !content) {
        alert('请填写完整信息！');
        return;
      }

      try {
        const res = await fetch('http://localhost:3000/api/messages', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, content })
        });

        if (res.ok) {
          document.getElementById('name').value = '';
          document.getElementById('content').value = '';
          loadMessages(); // 重新加载留言
        } else {
          const err = await res.json();
          alert('提交失败: ' + err.error);
        }
      } catch (e) {
        alert('网络错误: ' + e.message);
      }
    }

    function displayMessages(messages) {
      const container = document.getElementById('messages');
      container.innerHTML = '';
      messages.forEach(msg => {
        const div = document.createElement('div');
        div.className = 'message';
        div.innerHTML = `<strong>${msg.name}</strong> (${msg.time})<br>${msg.content}`;
        container.appendChild(div);
      });
    }
  </script>
</body>
</html>

第三步：运行项目

启动后端：
```
node server.js
```
用浏览器打开 index.html（直接双击文件即可）
输入名字和留言，点击提交 —— 你会看到留言立刻显示出来！

🎉 恭喜！你刚刚完成了一个完整的前后端分离应用！

五、新手常见问题解答（FAQ）

Q1：为什么前端访问后端时报错 “CORS 错误”？

原因：浏览器出于安全限制，禁止网页随意访问不同域名/端口的接口（即“跨域”）。
解决：后端必须显式允许跨域。我们在 server.js 中加了 Access-Control-Allow-Origin: * 就是这个作用。生产环境应指定具体域名，而非 *。

Q2：`fetch` 和 `axios` 有什么区别？

fetch 是浏览器原生 API，无需安装，但写法稍繁琐。
axios 是第三方库，功能更强大（自动转换 JSON、拦截器等），但需额外引入。

对于初学者，先掌握 fetch 足够了！

Q3：数据存在哪里？关掉服务器就没了？

是的！我们用 let messages = [] 只是在内存中临时存储。真实项目会用 数据库（如 MySQL、MongoDB）持久化数据。这是下一步要学的内容。

Q4：为什么不能直接在 HTML 里写后端代码？

因为 HTML 只能在浏览器运行，而浏览器无法直接读写服务器文件或连接数据库（安全限制）。必须通过 HTTP 请求与后端通信。

六、学习建议：下一步该学什么？

我当初就是从这样一个小项目开始，逐步深入的。以下是我为你规划的学习路径：

📌 前端进阶路线

HTML/CSS/JavaScript 基础 → 掌握 DOM 操作、事件处理
学习一个框架 → 推荐 Vue（中文文档友好）或 React（生态强大）
工具链 → 了解 npm、Webpack、Vite
状态管理 → Vuex / Redux

📌 后端进阶路线

Node.js 深入 → 学习模块系统、异步编程（Promise/async-await）
数据库 → 从 SQLite（轻量）开始，再到 MySQL 或 MongoDB
API 设计 → RESTful 规范、JWT 鉴权
部署 → 学会用云服务器（如阿里云、Vercel）上线你的项目

💡 我的避坑指南

不要死记代码：理解“为什么这样写”比背语法重要100倍。
多造轮子：哪怕是一个 Todo List，自己从零写一遍，胜过看十篇教程。
善用调试：学会用 console.log 和浏览器开发者工具（F12）查问题。
加入社区：Stack Overflow、GitHub、中文论坛都是宝藏。

结语

技术探索的本质，不是记住多少概念，而是在实践中不断试错、反思、重构。我写这篇教程，就是希望你能迈出“动手”的第一步。前端和后端看似复杂，但拆解开来，不过是一次次“请求”与“响应”的对话。

你现在拥有了一个能跑起来的全栈小应用。接下来，试着给它加个“删除留言”功能，或者把数据存到文件里 —— 这就是属于你的技术探索之旅的开始。

加油，未来的开发者！我在代码的世界里等你 👨‍💻

标签:前端后端

最热最新

暂无评论

为你推荐

暂无相关推荐

我对技术探索与实践的看法：从前端到后端的零基础入门指南

一、前端 vs 后端：到底在做什么？

二、环境准备：5分钟搭好开发环境

步骤 1：安装 Node.js

步骤 2：创建项目目录

步骤 3：初始化后端项目

三、核心概念：用代码说清楚前后端如何通信

1. 后端：创建一个 API 接口

2. 前端：发起请求并显示结果

四、实战项目：构建一个“留言本”应用

第一步：完善后端（支持存储和返回留言）

第二步：编写前端页面

第三步：运行项目

五、新手常见问题解答（FAQ）

Q1：为什么前端访问后端时报错 “CORS 错误”？

Q2：`fetch` 和 `axios` 有什么区别？

Q3：数据存在哪里？关掉服务器就没了？

Q4：为什么不能直接在 HTML 里写后端代码？

六、学习建议：下一步该学什么？

📌 前端进阶路线

📌 后端进阶路线

💡 我的避坑指南

结语

评论 0

为你推荐

精选内容

我对技术探索与实践的看法：从前端到后端的零基础入门指南

一、前端 vs 后端：到底在做什么？

二、环境准备：5分钟搭好开发环境

步骤 1：安装 Node.js

步骤 2：创建项目目录

步骤 3：初始化后端项目

三、核心概念：用代码说清楚前后端如何通信

1. 后端：创建一个 API 接口

2. 前端：发起请求并显示结果

四、实战项目：构建一个“留言本”应用

第一步：完善后端（支持存储和返回留言）

第二步：编写前端页面

第三步：运行项目

五、新手常见问题解答（FAQ）

Q1：为什么前端访问后端时报错 “CORS 错误”？

Q2：fetch 和 axios 有什么区别？

Q3：数据存在哪里？关掉服务器就没了？

Q4：为什么不能直接在 HTML 里写后端代码？

六、学习建议：下一步该学什么？

📌 前端进阶路线

📌 后端进阶路线

💡 我的避坑指南

结语

评论 0

为你推荐

相关推荐

精选内容

Q2：`fetch` 和 `axios` 有什么区别？