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

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

news 2025/6/26 4:34:47

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

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/6/20 17:50:34

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/6/21 3:53:39

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/6/20 1:44:47

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/6/22 1:36:54

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/6/22 5:30:27

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/6/22 13:18:34

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/6/20 13:18:19

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/6/24 6:00:00