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

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

news 2025/10/2 4:24:53

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

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/9/28 3:03:45

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/9/28 6:33:38

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/9/5 15:11:07

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/9/28 3:34:26

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2025/9/28 7:48:50

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/9/23 0:14:10

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/9/28 3:38:13