首页手记前端全栈进阶：从零开始的全栈之路

前端全栈进阶：从零开始的全栈之路

标签：

前端工具 React.JS Vue.js

本文详细介绍了前端开发的基础知识，包括HTML、CSS和JavaScript的使用，以及Vue.js框架的入门内容。此外，文章还涵盖了Node.js服务器端开发和前后端交互的基础知识，为读者提供了一条清晰的前端全栈进阶路径。

HTML与CSS基础回顾

HTML标签与语义化

HTML是构建网页的基础，它定义了网页的内容结构。语义化的HTML不仅有助于提升网页的可读性，还能提高搜索引擎的爬取效率。下面是一些常用的HTML标签及其语义化应用。

常用HTML标签

<header>：文档头部，通常包含网站的标志、导航等。
<main>：网页的主要内容区域。
<article>：独立的、可独立存在的内容，如博客文章。
<section>：文档中的一段内容或主题。
<footer>：文档尾部，通常包含版权信息、联系方式等。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化HTML示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的内容。</p>
        </article>
        <section>
            <h2>章节标题</h2>
            <p>这是章节的内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

CSS选择器与布局

CSS（层叠样式表）用于控制网页的样式和布局。通过CSS，你可以改变字体、颜色、边距、填充等样式，以及实现各种布局效果。

常用CSS选择器

类选择器（.class）：选择指定类名的所有元素。
ID选择器（#id）：选择指定ID的所有元素。
元素选择器（element）：选择特定元素的所有实例。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器与布局示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            display: inline;
            margin-right: 10px;
        }
        nav a {
            color: white;
            text-decoration: none;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的内容。</p>
        </article>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

响应式网页设计基础

响应式网页设计是一种适应不同设备（如桌面、平板、手机）的网页设计方式。通过媒体查询，可以灵活地调整网页布局。

媒体查询

媒体查询允许根据设备的特性（如屏幕宽度）来应用不同的样式规则。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式网页设计示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            display: inline;
            margin-right: 10px;
        }
        nav a {
            color: white;
            text-decoration: none;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }

        /* 响应式布局 */
        @media screen and (max-width: 768px) {
            nav li {
                display: block;
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的内容。</p>
        </article>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

JavaScript入门与进阶

JavaScript基础语法

JavaScript是一种流行的脚本语言，用于实现网页的动态效果。下面是一些JavaScript的基本语法和概念。

变量与类型

变量用于存储数据，JavaScript支持多种数据类型，包括字符串、数字、布尔值、数组、对象等。

示例代码

let name = "张三"; // 字符串
let age = 25;      // 数字
let isStudent = true; // 布尔值
let hobbies = ["读书", "跑步", "编程"]; // 数组
let person = {
    name: "李四",
    age: 30,
    hobbies: ["画画", "跳舞"]
}; // 对象

DOM操作与事件处理

DOM（文档对象模型）是HTML文档的编程接口，通过JavaScript可以操作DOM元素，实现网页的动态效果。

基本DOM操作

获取元素：document.getElementById()、document.querySelector()。
修改元素内容：innerHTML、textContent。
添加事件监听器：addEventListener()。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM操作与事件处理示例</title>
</head>
<body>
    <h1 id="title">欢迎来到我的网站</h1>
    <button id="changeText">点击更改标题</button>
    <script>
        // 获取元素
        let title = document.getElementById("title");
        let button = document.getElementById("changeText");

        // 添加事件监听器
        button.addEventListener("click", function() {
            // 修改元素内容
            title.innerHTML = "您已经点击了按钮";
        });
    </script>
</body>
</html>

常见JavaScript框架初识（如jQuery）

jQuery是一个流行的JavaScript框架，简化了DOM操作、事件处理和AJAX等功能。

jQuery事件绑定示例

$(document).ready(function() {
    $('#changeText').click(function() {
        $('#title').html('您已经点击了按钮');
    });
});

jQuery DOM操作示例

$(document).ready(function() {
    $('#changeText').click(function() {
        $('#title').html('您已经点击了按钮');
    });
});

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="title">欢迎来到我的网站</h1>
    <button id="changeText">点击更改标题</button>
    <script>
        $(document).ready(function() {
            // 点击按钮更改标题
            $("#changeText").click(function() {
                $("#title").html("您已经点击了按钮");
            });
        });
    </script>
</body>
</html>

Vue.js框架入门

Vue.js基本概念与安装

Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它具有易于上手的特点，且性能出色。

安装Vue.js

可以通过CDN引入Vue.js，或使用npm进行本地安装。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue.js基本示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            }
        });
    </script>
</body>
</html>

组件化开发与状态管理

Vue.js支持组件化开发，可以将复杂的界面拆分为可重用的组件。状态管理（如Vuex）用于管理组件间的状态。

组件示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue.js组件示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template: '<div>{{ message }}</div>',
            data: function() {
                return {
                    message: '这是一个自定义组件'
                }
            }
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

Vue.js与Vuex状态管理示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue.js与Vuex示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        {{ state.message }}
    </div>
    <script>
        const store = new Vuex.Store({
            state: {
                message: 'Hello, Vuex!'
            }
        });

        new Vue({
            el: '#app',
            store
        });
    </script>
</body>
</html>

Vue路由与Vuex的使用

Vue路由用于管理不同的视图，而Vuex用于全局状态管理。

路由示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue路由示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>
    <script>
        Vue.use(VueRouter);

        const Home = {
            template: '<div>这是首页</div>'
        };
        const About = {
            template: '<div>这是关于页面</div>'
        };

        const routes = [
            { path: '/', component: Home },
            { path: '/about', component: About }
        ];

        const router = new VueRouter({
            routes
        });

        new Vue({
            el: '#app',
            router
        });
    </script>
</body>
</html>

前后端交互基础

RESTful API理解

RESTful API是一种设计良好的API，遵循REST（Representational State Transfer）架构风格。它定义了资源的URI、HTTP方法（GET、POST、PUT、DELETE）等。

示例代码

// 获取用户信息
fetch('/api/users/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// 创建用户
fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: '张三',
        age: 25
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 更新用户信息
fetch('/api/users/1', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: '李四',
        age: 30
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 删除用户
fetch('/api/users/1', {
    method: 'DELETE'
})
.then(response => console.log('用户已删除'))
.catch(error => console.error(error));

AJAX与Fetch API

AJAX（Asynchronous JavaScript and XML）是一种异步加载数据的技术。Fetch API是现代浏览器提供的一个异步加载数据的方法。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AJAX与Fetch API示例</title>
    <script>
        // AJAX示例
        function ajaxExample() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '/api/users');
            xhr.onload = function() {
                if (xhr.status == 200) {
                    console.log(JSON.parse(xhr.responseText));
                } else {
                    console.error('请求失败');
                }
            };
            xhr.send();
        }

        // Fetch API示例
        function fetchExample() {
            fetch('/api/users')
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(error => console.error(error));
        }
    </script>
</head>
<body>
    <button onclick="ajaxExample()">AJAX请求</button>
    <button onclick="fetchExample()">Fetch请求</button>
</body>
</html>

JSON数据处理

JSON（JavaScript Object Notation）是一种轻量的数据交换格式，易于阅读和编写。JavaScript可以很方便地处理JSON数据。

示例代码

// JSON数据示例
const users = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 }
];

// JSON转换为字符串
const usersJson = JSON.stringify(users);
console.log(usersJson);

// 字符串转换为JSON
const usersArray = JSON.parse(usersJson);
console.log(usersArray);

Node.js与服务器端开发

Node.js环境搭建与基本语法

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以在服务器端执行JavaScript代码。

安装Node.js

可以通过官网下载安装包，或使用nvm（Node Version Manager）进行安装。

示例代码

// 输出"Hello, World!"
console.log('Hello, World!');

Express框架入门

Express是Node.js的一个快速、灵活的Web应用框架。它提供了路由、中间件等特性，使得开发Web应用更加方便。

示例代码

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

app.get('/', (req, res) => {
    res.send('Hello, World!');
});

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

文件系统与数据库操作

Node.js提供了内置的文件系统模块（fs）和数据库驱动（如mongoose），用于文件操作和数据库连接。

文件系统示例代码

const fs = require('fs');

// 创建文件
fs.writeFile('test.txt', 'Hello, Node.js!', (err) => {
    if (err) throw err;
    console.log('文件创建成功');
});

// 读取文件
fs.readFile('test.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

// 删除文件
fs.unlink('test.txt', (err) => {
    if (err) throw err;
    console.log('文件删除成功');
});

数据库操作示例代码

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true });

const User = mongoose.model('User', {
    name: String,
    age: Number
});

// 创建用户
const user = new User({ name: '张三', age: 25 });
user.save()
    .then(() => console.log('用户创建成功'))
    .catch(error => console.error(error));

// 查询用户
User.find({}, (err, users) => {
    if (err) throw err;
    console.log(users);
});

// 更新用户
User.updateOne({ name: '张三' }, { age: 30 })
    .then(() => console.log('用户更新成功'))
    .catch(error => console.error(error));

// 删除用户
User.deleteOne({ name: '张三' })
    .then(() => console.log('用户删除成功'))
    .catch(error => console.error(error));

实战项目演练

项目需求分析与规划

项目需求分析是指明确项目的目标和需求，制定项目计划。规划包括功能设计、技术选型、开发流程等。

示例需求分析

假设我们要开发一个简易的博客系统，包括以下功能：

用户注册与登录。
发布与查看文章。
评论与回复。
用户管理与权限控制。

技术选型与搭建开发环境

技术选型是根据项目需求选择合适的技术栈。搭建开发环境包括设置开发工具、安装依赖等。

示例技术选型

前端：Vue.js
后端：Node.js + Express
数据库：MongoDB
部署：Docker

搭建开发环境

安装Node.js与npm：可以通过官网下载安装包，或使用nvm进行安装。
安装Vue.js与Vue CLI：npm install -g @vue/cli
创建Vue项目：vue create my-blog
安装Express与MongoDB驱动：npm install express mongoose

项目开发与调试

项目开发与调试是指实现功能，并进行测试以确保代码的正确性。

后端Node.js与Express代码示例

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;

mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true });

const UserSchema = new mongoose.Schema({
    name: String,
    age: Number
});
const User = mongoose.model('User', UserSchema);

app.get('/users', (req, res) => {
    User.find({}, (err, users) => {
        if (err) throw err;
        res.json(users);
    });
});

app.post('/users', (req, res) => {
    const user = new User(req.body);
    user.save()
        .then(() => res.json('用户创建成功'))
        .catch(error => res.json('用户创建失败'));
});

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

前端Vue.js代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>博客系统示例</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: '',
                age: '',
                users: []
            },
            methods: {
                fetchUsers() {
                    fetch('/users')
                        .then(response => response.json())
                        .then(data => this.users = data)
                        .catch(error => console.error(error));
                },
                createUser() {
                    const user = {
                        name: this.name,
                        age: this.age
                    };
                    fetch('/users', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(user)
                    })
                        .then(() => this.fetchUsers())
                        .catch(error => console.error(error));
                }
            },
            mounted() {
                this.fetchUsers();
            }
        });
    </script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="姓名">
        <input type="number" v-model="age" placeholder="年龄">
        <button @click="createUser">创建用户</button>
        <ul>
            <li v-for="user in users">{{ user.name }} - {{ user.age }}</li>
        </ul>
    </div>
</body>
</html>

通过以上步骤，可以构建一个简易的博客系统，包括用户注册、文章发布等功能。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

蝴蝶刀刀

手记
篇

粉丝

37

获赞与收藏

183

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30948 346

网络编程入门教程

20个小节 12735 240

Pandas 入门教程

25个小节 18632 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

前端全栈进阶：从零开始的全栈之路

HTML标签与语义化

常用HTML标签

示例代码

CSS选择器与布局

常用CSS选择器

示例代码

响应式网页设计基础

媒体查询

示例代码

JavaScript基础语法

变量与类型

示例代码

DOM操作与事件处理

基本DOM操作

示例代码

常见JavaScript框架初识（如jQuery）

jQuery事件绑定示例

jQuery DOM操作示例

示例代码

Vue.js基本概念与安装

安装Vue.js

示例代码

组件化开发与状态管理

组件示例代码

Vue.js与Vuex状态管理示例

Vue路由与Vuex的使用

路由示例代码

RESTful API理解

示例代码

AJAX与Fetch API

示例代码

JSON数据处理

示例代码

Node.js环境搭建与基本语法

安装Node.js

示例代码

Express框架入门

示例代码

文件系统与数据库操作

文件系统示例代码

数据库操作示例代码

项目需求分析与规划

示例需求分析

技术选型与搭建开发环境

示例技术选型

搭建开发环境

项目开发与调试

后端Node.js与Express代码示例

前端Vue.js代码示例

阅读免费教程