当前位置： 首页 > news >正文

web开发初级工程师学习笔记

news 2025/11/22 23:44:41

web开发初级工程师学习笔记

  • 前端开发工具
    • 实验1 VS Code 初体验
      • 介绍

前端开发工具

实验1 VS Code 初体验

介绍

VS Code 环境提供的是一个可以在浏览器中使用原生 VS Code 编辑代码的程序。在该环境中，你可以使用到与本地安装近乎一致的 VS Code 程序来编辑代码文件，打开 Terminal 终端执行 Linux 命令，还可以在 Terminal 中运行 Web 服务获得临时域名并在浏览器进行预览调试。本次实验将介绍蓝桥云课使用的 VS Code 环境的一些功能和特点。

知识点

• VS Code 环境优势
• VS Code 环境使用


• 为什么要使用 VS Code

• Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统的免费代码编辑器，它内置了 Git 版本控制组件，同时也具有构建各种开发环境的功能，例如代码补全、代码片段和代码重构等。同时编辑器中内置了扩展程序安装和管理的功能，可以通过安装各种不同功能的插件实现一些大型 IDE 才有的功能。在 2019 年 Stack Overflow 组织的开发者调研中，VS Code 被认为是最受开发者欢迎的开发环境。
• 如果你之前是 VS Code 的用户，那么可以快速熟悉 VS Code 环境。当然，如果你之前对 VS Code 也不熟悉，那么接下来将带你入门 VS Code 的使用。


• VS Code 界面

VS Code 不同于图形界面环境，对带宽要求较低，所以比较适用于一些需要大量代码编辑的场景，例如 C/C++，Java Web 开发和前端开发。在大多数情况下，我们更推荐你使用 VS Code 环境，而非 Linux VNC 桌面环境。
启动 VS Code 环境之后，你可以看到它的默认界面，大致分为 3 部分：
• 代码文件浏览区：左边的区域将用于组织项目的文件结构，你可以在此区域创建各种类型的代码文件和文件夹。
• 代码文件编辑区：当你双击打开相应的代码文件之后，将会呈现在编辑区域。你可以在此区域编辑代码，编辑后的代码会实时保存。
• Linux 终端：因为 VS Code 本身是运行在 Linux 容器环境中，所以下方的区域是一个 Linux 终端。你可以通过终端运行命令，执行编译、运行代码等操作。
在这里插入图片描述
菜单由顶栏固定显示的形式改为了点击按钮显示。点击左上角三条横线的图标可以显示完整的菜单栏。
在这里插入图片描述
如果你发现界面没有菜单按钮，可能是因为被意外隐藏了，此时可以在侧边工具栏点击右键，选择显示菜单，就可以正确显示菜单按钮。如果出现其他图标按钮消失的情况，处理方式也类似。
在这里插入图片描述
环境下方默认显示 Linux 终端，如果你的环境没有显示，可以点击菜单按钮，选择终端，新终端打开。或者按下键盘快捷键 ctrl + shift + ` （数字键 1 左侧的按键）也可以直接打开。
在这里插入图片描述


• 插件安装

我们已经在环境中预安装了部分常用的插件，包括简体中文插件，Java，Python 等语言相关的插件。
在这里插入图片描述
如果要安装你自己需要的插件，可以在搜索栏中输入名称或者 ID 搜索对应的插件，然后点击插件搜索里的安装或者详细信息的在 Remote 上安装按钮即可。
在这里插入图片描述
部分插件安装/卸载后可能需要重载环境才能生效，请留意右下角的提示信息。


• 环境使用须知

注意：因为 VS Code 的 使用协议 中不允许在非官方的 VS Code 程序里登录微软相关的账户，所以环境中无法使用登录账户同步配置功能。
其次，虽然 VS Code 是开源的程序，但是其提供的扩展商店以及商店中提供的一些扩展并非完全开源，且仅允许运行在官方的 VS Code 程序中。你可能会发现，一些在你本地的 VS Code 插件商店中可以被搜索安装的插件无法在线上环境中找到。
若需要使用，可以自行从商店下载安装文件到环境中手动安装。
另外，在线环境的 VS Code 运行在浏览器中，所以不支持部分需要本地程序支持的插件或者直接与其他软件进行集成。

复制粘贴问题

使用 Windows/Linux 等非 macOS 系统的 Chrome/Firefox 等浏览器打开环境，可能会出现在终端里无法使用快捷键复制粘贴命令的情况。这是浏览器安全机制和快捷键绑定机制导致的，我们暂时不能提供很好的解决方案。
如果出现此种情况，课程使用浏览器提供的复制粘贴工具，具体步骤如下：
• Chrome
在这里插入图片描述

• Firefox
在这里插入图片描述
如果你在安装或卸载某个插件后遇到环境崩溃，卡死，保存环境后无法启动等问题，可联系管理员提供你安装的插件的名称，版本等详细信息，我们将针对问题进行测试。
接下来，我们将通过多个示例项目，带你入门 VS Code 的使用。


• C/C++ 示例项目

以下示例项目看不懂代码没有关系，仅用于了解和学习 VS Code 的使用。

首先，我们从一个简单的 C/C++ 示例项目开始。
我们需要先在代码文件浏览区中通过右键 新建文件 创建一个名为 hello.c 的 C 语言文件。
在这里插入图片描述
然后，在编辑区域键入以下 C 代码，代码会自动保存。

#include<stdio.h>
int main()
{printf("Hello, World.");return 0;
}

在这里插入图片描述
如果想要执行上方的 C 语言代码，需要先编译代码。编译代码需要用到 Linux 终端，接下来在终端中输入以下命令。

gcc -o hello hello.c

注意参数是小写字母 o，不是数字 0。单击回车，这时目录下会生成了一个名为 hello 的文件，这是 C 语言程序编译后得到的可执行程序。
在这里插入图片描述
接下来，我们就可以在终端中执行文件，注意执行的是编译之后的文件：

./hello

执行完之后，就可以看到刚刚编写 C 语言文件的输出了。
在这里插入图片描述
终端输出 % 符号的原因可点击查看 。


• 前端示例项目

以下示例项目看不懂代码没有关系，仅用于了解和学习 VS Code 的使用。

由于 VS Code 是在浏览器中工作的 IDE，所以其非常适合于前端项目的开发和调试。接下来，我们以一个简单的前端项目为例，演示 VS Code 常用功能使用。
首先，在代码文件浏览区中通过右键 新建文件 创建一个名为 hello.html 的 HTML 文件，然后在编辑区域输入以下 HTML 代码：

在这里插入图片描述
然后，我们键入以下 HTML 内容：

<!DOCTYPE html>
<html><head><title>欢迎来到 HTML 的世界</title></head><body><p>VS Code 示例教学项目.</p></body>
</html>

在这里插入图片描述代码会自动保存。此时，如果希望预览刚刚编写的 HTML 页面效果，可以单击编辑器页面右上角的 预览图标 打开。
在这里插入图片描述
在这里插入图片描述
除了预览按钮，你还可以：选中代码文件 → 右键 → Open Preview，或者使用快捷键 Ctrl + Shift + V 打开预览：
在这里插入图片描述
你可以看到，右侧的 HTML 页面已经可以展示出来了。如果后续编辑和修改代码，预览页面也会动态更新。


• Java版HelloWorld

以下示例项目看不懂代码没有关系，仅用于了解和学习 VS Code 的使用。
除了前端开发， VS Code 也可以进行 Java /Java Web 开发。
首先，在代码文件浏览区中通过右键 新建文件 创建一个名为 Hello.java 的 java 文件，然后在编辑区域输入以下代码：

public class Hello {public static void main(String[] args) {System.out.println("Hello");}
}

代码会自动保存。
到 Linux 终端，编译并执行 Java 程序：

javac Hello.java
java Hello

就可以看到输出结果了。


•代码调试功能

VS Code 环境中预制了 Java 相关的插件，所以可以直接在环境里 Debug Java 代码。
其他语言需要自行安装对应的插件。
在代码文件浏览区中点击右键 新建文件 创建一个名为 HelloWorld.java 的 Java 文件，然后在编辑区域输入以下代码：

/*** HelloWorld*/
public class HelloWorld {public static void main(String[] args) {for (int a = 0; a < 10; a++) {System.out.println(a);}}
}

在这里插入图片描述
我们在 System.out.println(a); 处打上断点，以便查看 for 循环中变量 a 的值的变化。首先将鼠标放到代码对应的行号前，将出现的小红点点亮。

在这里插入图片描述
然后点击左侧运行图标，切换到调试的界面。可以点击上方的绿色运行标志，或者文件编辑栏里出现的 Debug 按钮开始调试。
在这里插入图片描述
开始调试后，终端会自动执行调试命令，左侧区域会显示变量和堆栈相关的信息，状态栏会变为橘黄色并且显示调试状态，顶部会显示一个调试工具栏。可以看到当前变量 a 的值为 0，点击上方的继续按钮执行一次调试。

在这里插入图片描述
程序会自动执行一次循环，a 的值变为 1。
在这里插入图片描述
如果要详细查看执行的每一个步骤，可以点击第二个单步跳过按钮，会高亮显示在变量 a 的值发生变化前执行过的代码。停止调试可以点击停止按钮，或者按下快捷键 Shift + F5。
如果不需要调试，也可以直接点击 Run 运行程序，同样会在下方终端里自动执行并输出结果。

在这里插入图片描述

相关文章：

web开发初级工程师学习笔记

web开发初级工程师学习笔记 前端开发工具实验1 VS Code 初体验介绍 前端开发工具 实验1 VS Code 初体验 介绍 VS Code 环境提供的是一个可以在浏览器中使用原生 VS Code 编辑代码的程序。在该环境中&#xff0c;你可以使用到与本地安装近乎一致的 VS Code 程序来编辑代码文件…...

编程日记 2023/10/22 20:39:43

Linux下Samba服务安装及启用全攻略

Linux下Samba服务安装及启用全攻略 前言一、安装SSH Server二、安装Samba Server1.安装net-tool2.建立账号的samba3.windows通过Samba与linux共享文件4.使用远程工具登录Linux 总结 前言 提示&#xff1a;本文详解了在Linux系统下如何安装和启用Samba服务&#xff0c;涵盖了从…...

编程日记 2023/10/22 20:38:41

【C++】引用’‘的深入解析

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

编程日记 2023/10/22 20:37:40

java链式编程对象序列化问题

在使用 openfeign 进行服务之间数据传输时发现了一个问题&#xff0c;数据在下游正常处理&#xff0c;响应到调用端数据也读取到了&#xff0c;但是就是 jackson 转对象序列化时出了问题&#xff0c;异常如下 Failed to complete request: feign.codec.DecodeException: Type d…...

编程日记 2023/10/22 20:36:39

关于Redis(Redisson)超时问题的分析

概述 生产环境中流量高峰期会出现短时间的redis异常&#xff0c;主要报错如下&#xff1a; Redis server response timeoutRedisTimeoutException: Command execution timeout for command: (PING)Command still hasn’t been written into connection! 根据redisson官方所述…...

编程日记 2023/10/22 20:35:38

Redis 主从复制，哨兵，集群——（2）哨兵篇

目录 1. Redis 哨兵是什么&#xff1f; 2. Redis 哨兵有什么用&#xff1f; 2.1 主动监控 2.2 消息通知 2.3 故障转移 2.4 配置中心 3. Redis 哨兵数量配备要求 4. 哨兵配置文件详解 5. quorum 投票数详解 5.1 quorum 的含义 5.2 网络抖动导致主观下线 5.3 quorum …...

编程日记 2023/10/22 20:34:37

C++入门笔记分享

有道云笔记...

编程日记 2023/10/22 20:33:34

使用conda install一直卡在solving environment的解决方法

使用国内镜像源&#xff0c;但install仍旧一直卡在solving environment&#xff0c;超过10分钟就不用等了&#xff1b; 检查C:\Users\UserName 路径下的.condarc文件 将这个defaults这一行删掉即可...

编程日记 2023/10/22 20:32:33

神经网络和AI的关系

神经网络&#xff08;Neural Networks&#xff09;和人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;之间存在紧密的关系&#xff0c;可以概括为以下几点&#xff1a; 神经网络是AI的子领域&#xff1a;神经网络是人工智能的一个子领域&#xff0c;它是…...

编程日记 2023/10/22 20:30:31

[牛客]计算机网络习题笔记_1020

1、物理层&#xff1a;以太网 调制解调器 电力线通信(PLC) SONET/SDH G.709 光导纤维 同轴电缆 双绞线等。 2、数据链路层&#xff08;网络接口层包括物理层和数据链路层&#xff09;&#xff1a;Wi-Fi(IEEE 802.11) WiMAX(IEEE 802.16) ATM DTM 令牌环 以太网 FDD…...

编程日记 2023/10/22 20:27:28

蓝牙音视频远程控制协议(AVRCP)介绍

零.声明 本专栏文章我们会以连载的方式持续更新&#xff0c;本专栏计划更新内容如下&#xff1a; 第一篇:蓝牙综合介绍 &#xff0c;主要介绍蓝牙的一些概念&#xff0c;产生背景&#xff0c;发展轨迹&#xff0c;市面蓝牙介绍&#xff0c;以及蓝牙开发板介绍。 第二篇:Trans…...

编程日记 2023/10/22 20:26:27

家庭WIFI路由器、无线网卡购买指南

一、参考资料 【Wi-Fi】802.11/802.11b/802.11g/802.11n/802.11a/802.11ac/802.11ax/802.11be 从带宽到路由&#xff0c;从有线到无线&#xff0c;从需求到选购&#xff0c;从布网到实测&#xff0c;全部说尽。基础篇&#xff08;1&#xff09; 【一文详解】802.11a/b/g/n/ac/…...

编程日记 2023/10/22 20:25:26

Matlab2022b软件如何切换中/英文界面？

在中文Windows操作系统中&#xff0c;MATLAB2015b之后版本安装默认为中文版&#xff0c;但有部分用户还是习惯使用英文界面下的MATLAB&#xff08;个人偏好&#xff09;&#xff0c;下面以R2022b版分享一下中/英文界面的切换方法&#xff0c;超简单。 一、中文切换为英文界面&…...

编程日记 2023/10/22 20:24:26

通过后端数据交互，实现【会议Oa小程序】首页数据渲染

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《微信小程序 》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;…...

编程日记 2023/10/22 20:23:24

I.MX6U开发板上的Qt串口编程

真正串口通讯所需的功能是比较多的&#xff0c;此处的上位机只实现发送和接收功能。因为Linux、windows和开发板上均有串口&#xff0c;所以所开发的上位机在其上都是可以运行的。 文章目录 1. 资源简介2. 应用实例2.1 项目简介&#xff1a;2.2 03_serialport.pro2.3 mainwind…...

编程日记 2023/10/22 20:22:24

深入理解多线程编程和 JVM 内存模型

文章目录 1. 理解进程和线程的概念进程&#xff08;Process&#xff09;线程&#xff08;Thread&#xff09; 2. 理解竞态条件和死锁竞态条件&#xff08;Race Condition&#xff09;死锁&#xff08;Deadlock&#xff09; 3. JVM 内存模型堆&#xff08;Heap&#xff09;栈&am…...

编程日记 2023/10/22 20:21:22

QML(25)——文本输入框组件的区别（TextField TextInput TextArea TextEdit）

目录 效果展示适用场景文本组件TextLabelText和Label的区别 单行文本输入框TextFieldTextInputTextField 和 TextInput的区别 多行文本输入框TextAreaTextArea 和 TextEdit 的区别 效果展示 适用场景 场景组件属性短文本Text长文本 末尾省略Textelide: Text.ElideRight文本设置…...

编程日记 2023/10/22 20:20:22

SpringBoot连接MySQL密码错误，报错：Access denied for user

记&#xff1a;一次连接MySQL报密码错误&#xff0c;Access denied for user 检查步骤&#xff1a; 核对用户和密码是否正确&#xff0c;用工具登陆试下。如果配置文件是yml格式&#xff0c;配置密码是123456这种纯数字&#xff0c;记得加上单/双引号。检查云上数据库配置&am…...

编程日记 2023/10/22 20:19:21

如何使用visual studio 2010构建SQLite3.lib文件

sqlite3官网只提供了dll&#xff0c;并没有lib文件。需要自己生成sqlite3.lib。因项目升级到x64&#xff0c;以前并没有生成64位的链接库&#xff0c;需要自己创建。本人电脑操作系统windows 10, 开发环境为visual studio 2010。下面是详细生成过程。 1. 从源下载源&#xff08…...

编程日记 2023/10/22 20:18:20

反转链表review

反转链表 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next; }* }*/ class …...

编程日记 2023/10/22 20:17:19

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/22 15:14:57

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/11/22 8:13:36

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/11/20 15:22:21

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/11/20 13:20:47

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/11/22 14:52:38

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/11/20 5:22:02

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/11/21 12:05:54

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/11/17 6:36:09

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01