黑马程序员2023新版JavaWeb企业开发全流程学习笔记（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）

news2024/11/23 15:32:03

目录

  • 零、Web开发
  • 一、HTML-CSS
    • 初识Web前端
      • Web前端课程安排
      • 小结
    • HTML、CSS介绍
    • HTML快速入门
    • HTML小结
    • VS Code开发工具
    • 基础标签 & 样式-合集（拟新浪微博为例）
      • 标题
        • 排版
        • 样式
        • 超链接
      • 正文
        • 排版
        • 布局
    • 表格、表单标签
      • 表格标签
      • 表单标签
        • 表单项
  • 二、JavaScript
    • JS基本介绍
    • JS引入方式
    • JS基础语法
      • 书写语法
      • 变量
      • 数据类型、运算符、流程控制语句
        • 数据类型
      • 运算符
      • 流程控制
    • JS函数
    • JS对象
      • Array
      • String
      • JSON
        • JS自定义对象
        • JSON-介绍
        • JSON-基础语法
      • BOM
        • Window
        • Location
      • DOM
    • JS事件监听
      • 事件绑定
      • 常见事件
  • 三、Vue
    • Vue常用指令
    • Vue生命周期
  • 四、Element
  • 五、Maven
  • 六、数据库-MySQL
  • 七、Mybatis
  • 八、SpringBootWeb
  • 九、Maven高级

零、Web开发

  • Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站
  • Web 网站的开发模式
    ① 前后端分离开发在这里插入图片描述浏览器请求访问前端服务器，前端服务器接受到请求后会将对应的前端代码返回给浏览器（也就是图中的响应请求）。而我们知道浏览器也是一个程序，在浏览器里面内置了解析前端代码的解析引擎。那在浏览器接收到前端代码以后会自动解析前端的代码，从而展现出对应的页面样式。而现在浏览器解析的前端代码会呈现出基本的网页结构，但并没有数据。所以接下来就会去获取数据，而在前端代码中都会指定去哪里获取数据，如下图红色部分就是获取数据的请求路径。将来浏览器解析到前端代码当中的这个数据获取路径以后，浏览器就会拿着这个路径去访问部署在后端服务器当中的后端Java程序。那后端程序呢继续访问数据库，数据获取之后，后端服务器会将数据再返回给浏览器。那此时前端代码和数据就都有了，浏览器就会将数据填充在刚才的空架子的前端页面当中，从而形成了一个完整的页面呈现给用户。这就是 Web 网站前后端分离开发的整体工作流程。在这里插入图片描述

② 混合开发在这里插入图片描述
📝市场调研结果在这里插入图片描述结果显示，混合开发的项目占比仅为26.56%；而前后端分离开发的项目占比已经高达73.44%，且这个比重仍在增加。

  • Web开发课程安排
    在这里插入图片描述

一、HTML-CSS

初识Web前端

提示：不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异.

    那么为了使不同浏览器解析同一段前端代码解析出来的效果是一样的，因此就需要定一套标准。即有了这套标准后，只需让所有浏览器厂商都来参照这个标准来进行开发就可以了。而这个标准其实早就已经制定好了，就是Web标准，如下图。在这里插入图片描述

① W3C这个联盟的主要职责就是来指定Web标准的
② 前端网页开发的三剑客：HTML、CSS、JS
③ 前端网页开发除了这三项基础的核心技术以外，现在还有非常流行的一些高级的技术。如：前端开发现在非常流行的基于JS封装的高级框架Vue，还有像基于Vue封装的桌面端组件库Element UI以及异步交互技术Ajax和Axios等技术

Web前端课程安排

在这里插入图片描述

小结

在这里插入图片描述

HTML、CSS介绍

在这里插入图片描述

补充：像我们平时基于Windows当中的记事本这一类工具所编写的这一类文本都称为普通文本，即只能记录文字信息
回顾：XML也是一种标记语言，即由标签构成的语言。XML是可扩展的标记语言，即在XML当中我们可以自定义一堆的标签，将来在解析时，只需要按照我们自己定义的规则去解析这些标签当中的内容就可以了。但HTML当中的标签都是预先定义好的，因为HTML的代码最终是不需要我们来解析，而是要在浏览器当中来运行，由浏览器来负责解析HTML代码的。那么当浏览器在解析时，一旦见到某一个标签，就会知道这一块的内容我该如何展示。如：一看到

这个标签就知道这一块的文本是要加大加粗展示的，一旦看到标签就知道要展示出某个对应的图片

HTML快速入门

在这里插入图片描述

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 下面两个meta开头的都是设置浏览器兼容性的 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    
</body>
</html>

HTML小结

在这里插入图片描述

VS Code开发工具

在这里插入图片描述
在这里插入图片描述

基础标签 & 样式-合集（拟新浪微博为例）

标题

排版

在这里插入图片描述

样式

在这里插入图片描述在这里插入图片描述

超链接

在这里插入图片描述

正文

排版

在这里插入图片描述

布局

在这里插入图片描述在这里插入图片描述我们想要基于盒子模型来完成页面布局，还需要借助HTML中两个比较常见的布局标签来完成，分别是：div和span标签
在这里插入图片描述

这里是引用想要实现如上图版心居中需要利用div标签进行CSS盒子模型的样式设计，如下图代码所示：
在这里插入图片描述

在这里插入图片描述

表格、表单标签

表格标签

在这里插入图片描述

表单标签

在这里插入图片描述

表单项

在这里插入图片描述

二、JavaScript

JS基本介绍

在这里插入图片描述

补充：JavaScript是一门脚本语言，即，将来JavaScript编写出来的代码是不需要经过编译的，直接经过浏览器的解释就可以运行了。那么像Java语言还需要经过编译，将编写好的源代码.java文件要编译成字节码.class文件，然后再由虚拟机去运行。而像JavaScript这种语言是不需要的，这样就简化了整个的开发过程，因为不需要编译。

JS引入方式

在这里插入图片描述

补充：自闭合标签 指的是没有内容【没有内容的意思是不需要用一对儿标签去包裹文字之类的】并且不需要使用闭合标签的元素。以下是一些常见的HTML自闭合标签及其代码示例：
1.<br>标签：用于在文本中插入换行符。
在这里插入图片描述2.<hr>标签：用于在文档中插入水平线。
在这里插入图片描述
3.<img>标签：用于插入图像。在这里插入图片描述
4.<input>标签：用于创建输入字段。
在这里插入图片描述
5.<link>标签：用于引入外部CSS样式或者网页图标。
在这里插入图片描述
6.<meta>标签：用于描述HTML文档的元数据。
在这里插入图片描述
7.<area>标签：用于定义图像映射中的可点击区域。
在这里插入图片描述
这些是一些常见的HTML自闭合标签，它们用于插入单个元素或者定义文档的元数据。一般情况下，这些标签不需要闭合标签，因为它们被设计成直接自闭合的。

JS基础语法

书写语法

在这里插入图片描述在这里插入图片描述

变量

在这里插入图片描述

数据类型、运算符、流程控制语句

数据类型

在这里插入图片描述

关于null：

在这里插入图片描述
在这里插入图片描述

运算符

在这里插入图片描述

流程控制

在这里插入图片描述

JS函数

在这里插入图片描述在这里插入图片描述

JS对象

Array

在这里插入图片描述在这里插入图片描述

String

在这里插入图片描述

JSON

JS自定义对象

在这里插入图片描述

JSON-介绍

    Json的数据格式与上面自定义对象的形式基本一致，只不过在Json的数据格式当中，要求所有的Key必须要使用双引号将其引起来。
    需要注意的是Json本身是一个文本，所以Json格式的数据本质就是一个字符串。
    Json用途：相比于XML这个数据载体来说，Json格式的数据更简洁明了（XML在传递数据的时候会非常的臃肿，数据是没多少但标签一大堆，所以在现在的前后端交互过程中一般使用Json数据格式）。
在这里插入图片描述

JSON-基础语法

在这里插入图片描述

BOM

在这里插入图片描述

Window

在这里插入图片描述

Location

在这里插入图片描述

DOM

在这里插入图片描述在这里插入图片描述

1.Core DOM是针对于任何标记语言的标准模型，无论是HTML还是XML都包含这些标准的DOM对象
2.XML DOM是Core DOM的子集，定义了操作XML文档的标准模型
3.HTML DOM是在Core DOM的基础上 进行了扩充 ，其实在HTML DOM当中，它是将所有的HTML标签都封装成了一个单独的元素对象。如它封装成了Image这么一个对象；而（input标签所定义的button按钮）也封装成了一个对象：Button对象

在这里插入图片描述

JS事件监听

在这里插入图片描述

事件绑定

事件绑定：
在这里插入图片描述使用事件监听绑定事件（两种方式）：addEventListener() 和 attachEvent()

<button id="btn">点我~</button>
<script>
    btn.addEventListener("click",function(){
        alert("我是被监听的btn~");
    },false);
	
	btn.attachEvent("onclick",function(){
    	alert("我是被监听的btn2~");
    })
</script>

事件绑定与事件监听的区别：

事件绑定只能为一个元素的相同事件绑定一个响应函数，后面绑定的响应函数会覆盖之前绑定的响应函数。

事件监听可以为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数将会按照函数的绑定顺序执行。

事件监听有两种方式：addEventListener() 和 attachEvent()
addEventListener() 和 attachEvent() 区别：
(1) 兼容性
attachEvent：兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener 兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8及以下
(2) 执行顺序
addEventListener( ) ：当事件被触发时，响应函数将会按照函数的绑定顺序执行
attachEvent( )： 当事件被触发时，响应函数将会按照与函数绑定顺序相反的顺序执行（与addEventListener相反）

事件监听的优点：
1、可以绑定多个事件
2、可以解除相应绑定

解除绑定
addEventListener( ) 事件：

<button id="btn">点我~</button>
<script>
 	function tag(){
        alert("tag2");
    }
    btn.addEventListener("click",function(){
    	alert("tag1");
    },false);
    btn.addEventListener("click",tag2,false);
    btn.addEventListener("click",function(){
    	alert("tag3");
    },false);	
    btn.removeEventListener("click",tag2,false);// here here~~
</script>

执行结果：
tag1 
tag3

attachEvent( )事件：

<button id="btn">点我~</button>
<script>
    function tag(){
    alert("tag2");
    }
    btn.attachEvent("onclick",function(){
        alert("tag1");
    })
    btn.attachEvent("onclick",tag)
    btn.attachEvent("onclick",function(){
        alert("tag3");
    })
    btn.detachEvent("onclick",tag);// here here~~
</script>

执行结果:
tag3
tag1

常见事件

在这里插入图片描述

三、Vue

在这里插入图片描述
在这里插入图片描述

Vue常用指令

在这里插入图片描述在这里插入图片描述

可以放空字符串①，但是不可以只声明变量不传值②或只声明变量和冒号③（后者属于语法错误了），如下图：
①
在这里插入图片描述在这里插入图片描述②
在这里插入图片描述在这里插入图片描述③
在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述

Vue生命周期

在这里插入图片描述

那生命周期的这八个阶段分别代表的是什么意思呢？又在什么时候要来执行生命周期的八个钩子方法呢？下面来看一下官方给的这幅图：在这里插入图片描述

作为Java程序员，我们主要掌握一个钩子方法即可，即：mounted 挂载完成。因为将来我们需要在 mounted 这个钩子方法当中来发送请求到服务端来获取数据。
在这里插入图片描述

四、Element

五、Maven

六、数据库-MySQL

七、Mybatis

八、SpringBootWeb

九、Maven高级

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1038305.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

车载软件架构 —— AUTOSAR Vector SIP包（三）

车载软件架构 —— AUTOSAR Vector SIP包（三）

车载软件架构 —— AUTOSAR Vector SIP包（三） 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 没有人关注你。也无需有人关注你。你必须承认自己的价值，你不能站在他人的角度来反对自己。人生在…
阅读更多...
【计算机网络笔记四】应用层（一）DNS域名解析

【计算机网络笔记四】应用层（一）DNS域名解析

因特网的域名空间是一棵倒着生长的树&#xff0c;各级域名由其上一级域名管理机构管理。 这种按等级管理的命名方法便于维护名字的唯一性&#xff0c;并且容易设计出一种高效的域名查询机制。 注意&#xff1a;域名只是个逻辑概念&#xff0c;并不代表计算机所在的物理地点 域…
阅读更多...
10.mysql系统配置与启动选项

10.mysql系统配置与启动选项

title: “mysql系统配置与启动选项” createTime: 2022-03-06T15:52:4108:00 updateTime: 2022-03-06T15:52:4108:00 draft: false author: “ggball” tags: [“mysql”] categories: [“db”] description: “” 启动选项与系统变量 启动选项 长格式与短格式 在执行启动脚…
阅读更多...
el-tree实现表格方式菜单

el-tree实现表格方式菜单

<template><div class"table"><!-- default-expand-all 默认展开全部数据 --><!-- expand-on-click-node 只有点击箭头才会收缩节点 --><!-- check-on-click-node 点击文本选中 --><!-- show-checkbox 复选框 --><div class&…
阅读更多...
Mybatis-分页插件

Mybatis-分页插件

Mybatis-分页插件 前言一、分页插件的使用步骤1.添加依赖2.配置分页插件3. 分页插件的使用 前言 可以通过分页插件在实现以下前端样式时更加方便&#xff1a; 首页 上一页 2 3 4 5 6 下一页 末页 limit index,pageSize pageSize&#xff1a;每页显示的条数 pageNum&#xff…
阅读更多...
TVP 专家谈腾讯云 Cloud Studio：开启云端开发新篇章

TVP 专家谈腾讯云 Cloud Studio：开启云端开发新篇章

点击链接了解详情 导语 | 近日&#xff0c;由腾讯云 TVP 团队倾力打造的TVP 吐槽大会第六期「腾讯云 Cloud Studio专场圆满落幕&#xff0c;6 位资深的 TVP 专家深度体验腾讯云 Cloud Studio 产品&#xff0c;提出了直击痛点的意见与建议&#xff0c;同时也充分肯定了腾讯云 Cl…
阅读更多...
虚拟机桥接模式下没有无线网卡选项

虚拟机桥接模式下没有无线网卡选项

我以为是雷电模拟器占用了网卡的缘故&#xff0c;但想起之前可能修改了无线网卡的某些内容&#xff0c;于是到网络属性里面查看。 如下所示&#xff0c;原来是之前我不小心把这个红箭头指向的项目取消勾选了。
阅读更多...
【数据结构】B树、B+树的知识点学习总结

【数据结构】B树、B+树的知识点学习总结

目录 1、B树 1.1 定义 1.2 特性 1.3 查找操作 1.4 插入操作 1.5 删除操作 2、B树 2.1 定义 2.2 特性 3、B树与B树的对比 1、B树 1.1 定义 B树是一种平衡树数据结构&#xff0c;用于存储和访问大量数据。B树的每个节点可以存储多个键值&#xff0c;节点中的键值按照…
阅读更多...
虚幻4学习笔记（15）读档 和存档 的实现

虚幻4学习笔记（15）读档 和存档 的实现

虚幻4学习笔记 读档存档 B站UP谌嘉诚课程&#xff1a;https://www.bilibili.com/video/BV164411Y732 读档 添加UI蓝图 SaveGame_UMG 添加Scroll Box 修改Scrollbar Thickness滚动条厚度 15 15 勾选 is variable 添加text 读档界面 添加背景模糊 添加UI蓝图 SaveGame_Slot …
阅读更多...
Linux初识+环境部署

Linux初识+环境部署

文章目录 版权声明Linux初识Linux的诞生Linux内核Linux发行版 环境部署vmcentosWSL-Ubuntu 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明&#xff0c;所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用&…
阅读更多...
100天精通Python（可视化篇）——第102天：Pyecharts绘制多种炫酷关系网图参数说明+代码实战

100天精通Python（可视化篇）——第102天：Pyecharts绘制多种炫酷关系网图参数说明+代码实战

文章目录 专栏导读一、关系网图介绍1. 关系网图是什么&#xff1f;2. 关系网图的应用场景 二、关系网图类配置选项1. 导包2. add函数3. 关系网络图的节点4. 关系网络图的边5. 节点分类的类目 三、关系网图实战1. 普通关系网图2. 复杂关系网图3. 带边信息的关系网络图4. 微博转发…
阅读更多...
2023 年解锁物联网端点安全

2023 年解锁物联网端点安全

物联网 (IoT) 和端点安全的融合已成为小型企业的关键焦点。这些企业正在努力保护其数字环境。物联网的集成彻底改变了运营流程。通过这样做&#xff0c;它们为创新和增长提供了前所未有的机会。然而&#xff0c;它也带来了无数的安全挑战&#xff0c;需要采取强有力的保护措施。…
阅读更多...
（一）NIO 基础

（一）NIO 基础

&#xff08;一&#xff09;NIO 基础 non-blocking io&#xff1a;非阻塞 IO 1、三大组件 1.1、Channel & Buffer Java NIO系统的核心在于&#xff1a;通道&#xff08;Channel&#xff09;和缓冲&#xff08;Buffer&#xff09;。通道表示打开到 IO 设备&#xff08;例…
阅读更多...
开关电源-交流220V降压电路-电阻电容降压原理

开关电源-交流220V降压电路-电阻电容降压原理

阻容降压原理 电容电阻降压的原理其实比较简单。它的工作原理是电容在交流信号的情况下&#xff0c;产生容抗来限制最大的工作电流。说白了就是电容使用它自己的通交流阻直流的性能&#xff0c;在交流信号输入时电容产生容抗。我们通过他的这个特性&#xff0c;可以设计出&…
阅读更多...
Java基础（一）——Hello World，8种数据类型，键盘录入

Java基础（一）——Hello World，8种数据类型，键盘录入

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…
阅读更多...
腾讯mini项目-【指标监控服务重构-会议记录】2023-07-21

腾讯mini项目-【指标监控服务重构-会议记录】2023-07-21

2023-07-21 组长会议纪要 A组 文档学习差不多&#xff0c;还没掌握如何使用sdk进行上报venus启动服务的3个ToDo 添加什么错误处理 ErrHandler &#xff1a; fiber的错误处理&#xff0c;是运行过程Handler中的错误&#xff0c;在全局的ErrHandler&#xff0c;进行错误处理&am…
阅读更多...
APP备案公钥，指纹获取

APP备案公钥，指纹获取

APP备案公钥&#xff0c;指纹获取 下载已有的apk&#xff0c;文件后缀名改为zip 2&#xff0c;找到META-INF文件夹&#xff0c;然后再找到文件CERT.RSA 后缀改名为CERT.p7b 3&#xff0c;双击后&#xff1a; 4&#xff0c;双击右侧证书点开&#xff1a;显示颁发给。 5&#xf…
阅读更多...
Unity引擎更新收费模式：从收入分成转向游戏安装量，将会有哪些影响呢

Unity引擎更新收费模式：从收入分成转向游戏安装量，将会有哪些影响呢

一、前言 Unity 引擎宣布自 2024 年 1 月 1 日起&#xff0c;将根据游戏安装量对开发者进行收费。官网通知如下 收费模式如图 这张图的大致意思就是&#xff0c; 从2024年1月1日开始&#xff0c;Unity将对所有达标的用户&#xff08;开发者&#xff09;根据游戏安装量征收“安…
阅读更多...
游戏扫码登录+多功能工具箱 微信小程序源码

游戏扫码登录+多功能工具箱 微信小程序源码

一个集合了多种实用功能的微信小程序&#xff0c;这个微信小程序源码不仅具备美观的界面设计&#xff0c;还拥有许多实用的功能&#xff0c;而且最重要的是&#xff0c;它无需服务器和域名&#xff0c;所有功能都无需API接口&#xff0c;因此不用担心功能失效的问题。这意味着&…
阅读更多...
移除元素【快慢指针】

移除元素【快慢指针】

移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023