11 - 一口气从零到全栈开发（综合实战）

全栈开发入门 管理员 2026年06月23日 284 次阅读 1215 字 约 5 分钟

视频教程：BV1FPCzYdEeH

视频链接：BV1FPCzYdEeH
发布日期：2024-12-26
视频时长：2小时24分12秒
播放量：90.1万
所属合集：独立视频（覆盖全栈系列全部知识）

视频概要

全栈系列的终极综合实战。2小时24分钟，从零开始完成一个完整的全栈待办事项(Todo)应用：HTML/CSS → JavaScript → Vue → Axios对接 → Node.js后端 → MongoDB数据库 → 部署上线。所有停顿和口误都已剪掉，信息密度极高。提供百度网盘完整源码。

视频内容章节划分

时间段内容对应单集
0:00 - ~5:00系列介绍、AI工具(Deepseek)介绍00-系列导论
~5:00 - ~30:00HTML + CSS 基础01-HTML+CSS
~30:00 - ~45:00JavaScript 基础02-JavaScript
~45:00 - ~55:00CSS与HTML关系深入讲解01-HTML+CSS补充
~55:00 - ~65:00对象、类概念02-JS补充
~65:00 - ~90:00Vue框架使用03/04-Vue
~90:00 - ~110:00GitHub使用、项目管理附加工具
~110:00 - ~120:00Axios前后端对接05-Axios
~120:00 - ~135:00Node.js后端开发06-Node.js
~135:00 - ~144:00MongoDB数据库06-MongoDB
~144:00+总结与展望收尾

核心知识点汇总（全栈项目完整流程）

阶段一：页面结构 (HTML+CSS)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>待办事项</title>
    <style>
        body {
            background: linear-gradient(90deg, rgb(113, 65, 168), rgb(44, 114, 251));
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            border-radius: 10px;
            padding: 30px;
            width: 400px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
        }
        .form { display: flex; gap: 10px; margin-bottom: 20px; }
        .form input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
        .form button { padding: 10px 20px; background: #7141a8; color: white; border: none; border-radius: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>待办事项</h1>
        <div class="form">
            <input type="text" id="todoInput" placeholder="添加新任务...">
            <button onclick="addTodo()">添加</button>
        </div>
        <ul id="todoList"></ul>
    </div>
</body>
</html>

阶段二：交互逻辑 (JavaScript + Vue)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <div class="container">
        <h1>待办事项</h1>
        <div class="form">
            <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务...">
            <button @click="addTodo">添加</button>
        </div>
        <ul>
            <li v-for="todo in todos" :key="todo._id">
                <span :class="{ done: todo.completed }" @click="toggleTodo(todo)">
                    {{ todo.name }}
                </span>
                <button @click="deleteTodo(todo)">删除</button>
            </li>
        </ul>
    </div>
</div>

阶段三：前后端对接 (Axios)

import axios from 'axios';

// 获取列表
const fetchTodos = async () => {
    const res = await axios.get('https://api.example.com/get_list');
    todos.value = res.data;
};

// 添加
const addTodo = async () => {
    await axios.post('https://api.example.com/add', { name: newTodo.value });
    newTodo.value = "";
    fetchTodos();
};

// 删除
const deleteTodo = async (todo) => {
    await axios.post('https://api.example.com/del_todo', { id: todo._id });
    fetchTodos();
};

阶段四：后端API (Node.js + Express + MongoDB)

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

app.use(express.json());
app.use(cors());

mongoose.connect('mongodb://localhost:27017/todo-app');

const Todo = mongoose.model('Todo', {
    name: String,
    completed: Boolean
});

app.get('/get_list', async (req, res) => {
    const todos = await Todo.find();
    res.json(todos);
});

app.post('/add', async (req, res) => {
    await new Todo({ name: req.body.name, completed: false }).save();
    res.json({ message: 'ok' });
});

app.post('/del_todo', async (req, res) => {
    await Todo.findByIdAndDelete(req.body.id);
    res.json({ message: 'ok' });
});

app.listen(3000);

全栈技术栈总结

┌─────────────────────────────────────────┐
│               用户浏览器                  │
│  ┌────────────────────────────────────┐  │
│  │  HTML + CSS + JavaScript + Vue     │  │
│  │  (页面结构 + 样式 + 交互 + 框架)    │  │
│  └───────────────┬────────────────────┘  │
│                  │ Axios (HTTP)          │
├──────────────────┼───────────────────────┤
│                  ↓                       │
│  ┌────────────────────────────────────┐  │
│  │  Node.js + Express                 │  │
│  │  (后端服务器 + API路由)             │  │
│  └───────────────┬────────────────────┘  │
│                  │ Mongoose (ODM)        │
├──────────────────┼───────────────────────┤
│                  ↓                       │
│  ┌────────────────────────────────────┐  │
│  │  MongoDB                           │  │
│  │  (数据库存储)                       │  │
│  └────────────────────────────────────┘  │
└─────────────────────────────────────────┘

常见问题

问题解答
2小时真的能学会全栈吗？能理解核心思路，但真正掌握需要反复练习，建议分段观看并动手
需要什么基础？有电脑、会打字就行，所有代码从零开始讲解
如何正确学习？打开电脑跟着写，看是看不会的，每一行都搞懂什么意思
会不会导致基础不好？这个系列讲的是编程思维和学习方法，不是背语法。学会用AI辅助比死记硬背更高效
源码在哪里？视频简介中有百度网盘链接，提取码在简介中
axios章节接口不能用？说明后端教程已更新，可以跟着教程自己写后端接口
npm i 要在哪运行？在my-vue-app子目录中运行，不是在根目录

前置知识检查

  • 无硬性前置要求，本视频从零开始
  • 如果之前看过单集视频，理解会更深入

学习建议

  • 2.5小时的视频建议分段观看，配合动手练习
  • 务必跟着写代码，看是看不会的
  • 遇到不理解的地方暂停回看，不要急于求成
  • 百度网盘提供完整源码，建议先自己写，遇到问题再参考
  • 学完这个视频，你已经具备独立开发简单全栈应用的能力
  • 后续可以学习uniapp(第09集)扩展到小程序/APP端
返回首页