JavaWab学习笔记

KaNoha33

已于 2023-08-22 22:48:41 修改

阅读量139

点赞数

分类专栏：学习笔记文章标签：学习笔记

于 2023-07-31 11:53:06 首次发布

本文链接：https://blog.csdn.net/Mr_yzd233/article/details/132016565

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Day01-01. web开发-介绍_哔哩哔哩_bilibili

vscode安装：

Day01-04. HTML-VSCode安装_哔哩哔哩_bilibili

二、JavaScript

1、网页组成部分：

HTML：网页基本结构（网页元素和内容）

CSS：网页表现效果（页面元素外观、位置等页面样式）

JavaScript：负责网页的行为（交互效果）

2、JavaScript的引入方式

1）内部脚本：

将JS代码定义在HTML页面中

    <script>
       alert("helloJS");
    </script>

注意：

js代码必须放在<script></script>标签中，
HTML文档中可以防止任意数量的<script></script>标签，可以放在任意地方，
一般放置在<body>元素底部可以改善显示速度

2）外部脚本：

将JS代码定义在外部JS文件中然后引入到HTML页面

通过 src 指定引入的外部文件；
外部文件中不包含<>标签，只包含JS代码
<标签不能自闭合：

3、JS语法

区分大小写：与JAVA一样，变量名、函数名以及其他一切东西都区分大小写；
每行结尾分号 ; 可有可无
注释：单行：// 快捷键：ctrl+/；多行：/* */ 快捷键：ctrl+shift+/；
用{}表示代码块；

常用输出语句：

windows.alert('' 输出语句''); //浏览器弹出警告框

document.write(" 输出语句"); //写入HTML，在浏览器页面直接展示

console.log("输出语句"); //在浏览器控制台显示 (F12--Console) ，快捷键：log

console.log("输出语句", 变量名);

   <script>
       window.alert("helloJS");
       document.write("helloJS");
       console.log("helloJS");
       console.log("this.varNum",this.varNum);
    </script>

4、JS变量

js是弱类型语言，变量可以存放不同类型的值

1）var关键字声明变量

var定义的变量是全局变量，作用域较大，
var定义的变量名可以重复声明，会把之前声明的变量覆盖
初始化未赋值的为 underfined

2）let关键字声明变量

let x = 1;

var和let相同的不能重复声明；

类似于var，但是所声明的变量只在let关键字所在代码块内有效，且不允许重复声明；

3）const关键字声明常量

const x =1;

声明一个只读的常量，一旦声明常量的值就不能改变；

var和let和const相同的不能重复声明；

4）变量名命名规则：

区分大小写

组成字符可以是任意字母、数字、下划线或美元符号$，数字不能开头，使用驼峰命名法；

    var varNum = 20;
    varNum = "123";
    var abc_123$ = 1;//数字不能开头

    //var和let相同的不能重复声明
    let letNum = 21;
    letNum = 291;
    alert(letNum);

    //var和let和const相同的不能重复声明
    //不能重复声明
    const constNum = 22;
    alert(constNum);

5、 JS数据类型

js中分原始类型和引用类型

1）原始类型

number：数字(整数、小数)

string：字符串(单双引皆可)

boolean：布尔 true/false

null：对象为空

undefined：声明的变量未初始化时，该变量的默认值是undefined

获取数据类型：typeof运算符

2）运算符

==等号运算符和===全等运算符比较：

比较时 == 会进行类型转换，
=== 不会进行类型转换，必须类型相同时相等

类型转换：

字符串类型转换为数字 prseInt ：

将字符串字面值转为数字，如果字面值不为数字则转为NaN

其他类型转为boolean:

用于 if 判断：

Number转为boolean：0和NaN为false，其他均转为true
String：空字符串('''')不含空格，转为false，其他的均转为true
Null 和undefined 均转为false

6、JS函数

js通过function关键字进行定义

//格式一
function functionName(参数1,参数2,...){
  //需要执行的的代码
}
//格式二
var function functionName(参数1,参数2,...){
  //需要执行的的代码
}

形参不需要类型，返回值也不需要定义类型，可以直接在函数内部使用return返回
在函数调用时可以传递任意个参数，但实际执行和接受的只有定义时的参数个数，

7、 JS对象

1）Array对象定义数组

JS数组存储的元素类型可变，长度可变，未赋值的数组元素默认初始化为undefined

定义：

//方式一：var 变量名 = new Array(元素列表);
var array = new Array(1,2,3,4);
//方式二：var 变量名 = [元素列表];
var arr = [1,2,3,4,"hello"];

访问：

//访问：数组名[索引]=值;
arr[6] = 5;
//数组名.length
let le = arr.length;

属性：length 返回数组中元素的数量 数组名.length

方法：

froEach()：遍历数组中的每个有值的元素，如果值为undefined则不会返回，并调用一次传入的函数；
push()：将新元素添加到数组末尾并返回新的长度，可添加多个元素
splice()：从数组删除元素，可定义位置和删除个数
箭头函数：简化书写，代替function() 为 ()=> 有返回值写 (e)

      //froEach：遍历数组中有值的元素
      arr.forEach(function (e){
        console.log(e);
      })
      //箭头函数：代替function() 为 ()=> 有返回值写(e)
      arr.forEach((e)=>{
        console.log(e);
      })
      //push：添加元素到数组末尾,可添加多个值
      arr.push("helloJS",7,8,9);
      //splice：删除元素
      arr.splice(2,2);//(开始索引，删除元素个数)

2）String字符串

单引号或双引号都可以创建

//定义
var str = new String("hello");
var strr = "hello";
var strrr = 'hello';

属性：length 字符串长度 变量名.length

方法：

charAt()：返回指定下标位置的字符，字符串下标从0开始，超出长度不显示
trim()：去除字符串两边的空格，仅去除两侧空格，中间空格不去除，返回新的不含空格的字符串
indexOf()：检索字符串，返回检索到的第一个元素的索引
substring(start,end) ：截取/提取两个指定位置之间的子字符串，含头不含尾

//定义字符串
var str = new String("hello");
var strr = "hello";
var strrr = 'hello';
//length
str.length;
//charAt
str.charAt(1);//(指定索引位置)
//indexOf
str.indexOf("lo");
//trim
var newstr = str.trim();
//substring(start,end) 含头不含尾
str.substring(0,5);

3）JSON对象

JS自定义对象定义格式：

调用格式：


    //对象
    var user = {
        name: "tom",
        age: 20,
        gander: "male",
        eat: function(){
            alert("吃饭");
        },
    };
    //调用
    alert(user.name);
    user.eat();

JSON：

通过JS标记法书写的文本，即为字符串，用做数据载体

键值对形式，必须使用大括号{}包裹，
key需要用双引号“”包裹，
vaule为字符串需要用双引号包裹，若为数字可以直接写不用双引号包裹

JSON对象定义：

  //JSON对象定义
    var userStr = {
        "name": "str",         //字符串
        "age": 20,             //数字
        "addr":[1,2,3,"杭州"],  //数组
    };

JSON字符串和JS对象相互转换：

JSON字符串转换为JS对象： JSON.parse(变量名);

JS对象转换为JSON字符串：JSON.stringify(变量名);

4）BOM对象

浏览器对象模型，js将浏览器各个组成部分封装为对象

组成：

Windows：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

1）Window：浏览器窗口对象

直接使用window获取，window可以省略

//方式一
window.alert("警告弹窗1" + this.user);
//方式二
alert("警告弹窗2");

属性：

history：对History对象的只读引用
location：用于窗口或框架的Location对象
navigator：对 Navigator对象的只读引用

方法：

alert()：显示一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框，存在返回值，点击确定返回 true，点击取消返回false
setInterval()：按照指定的周期(毫秒计)来调用函数或计算表达式
setTimeout()：在指定的毫秒数后调用函数或计算表达式，只执行一次

//confirm对话框 --确认：true  取消：false
      let flag = confirm("确认对话框");
      if(flag){
        alert("确定")
      }
      else {
        alert("取消")
      }
//setInterval定时器 周期性的执行某一函数
      let i = 0;
      setInterval(function (){
        i++;
        console.log("定时器执行了"+i+"次");
      },2000);
//setTimeout定时器 延迟指定时间执行一次
      setTimeout(function (){
        alert("JS")
      },3000);
//setTimeout定时器 可使用箭头函数
      setTimeout(() =>{
        alert("JS")
      },3000);

2)Location：地址栏对象

使用window.location获取，window可省略

//获取
window.location.属性;
location.属性;

属性：

href：设置或返回完整的URL，使用后自动跳转指定的新的url地址

//获取当前网址
alert(location.href);
//跳转新网址
location.href = "https://www.baidu.com";

5）DOM对象：文档对象模型

Document：整个对象文档

DOM定义了访问HTML和XML文档的标准，分为3个不同部分

获取 Element 对象：

DOM案例：

8、JS事件监听：

事件：HTML事件是发生在HTML元素上的事情，比如按钮被点击......

事件监听：JS侦测到事件发生时执行指定代码

1）事件绑定：

方式一：通过HTML标签的事件属性进行绑定，JS代码和HTML代码耦合到一起
方式二：通过获取DOM元素的事件属性绑定

2）常见事件

三、Vue

四、Ajax：异步的JS和XML

XML存储数据的标记语言

数据交互：通过Ajax给服务器发送请求并获得服务器响应的数据

异步交互：在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术

1、原生Ajax请求

准备数据地址地址：
创建XMLHtttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

------

2、Axios

对原生的Ajax进行封装，简化书写快速开发

1）引入 Axios 的js文件

2）使用 Axios 发送请求 get / post 并获得响应结果:

3）请求方式别名: get / post

35：重点案例

3、前端工程化

1）前后端混合开发：

沟通成本高，分工不明确，不便于管理、后期维护和扩展

2）前后端分离开发：

接口文档介绍：

描述响应方式、相应参数、返回结果等信息的API文档

开发方式：

开发流程：

3）接口文档管理平台：YAPI

4）vue项目创建：38

项目启动：NPM-->serve

修改端口号：vue.config.js中增加devServer

ctrl+c-->Y：停止当前服务

vue项目结构介绍：39

如果属性名和属性一致可以直接简写为 属性,

render函数：创建虚拟的DOM元素

vue组件文件：

以 .vue结尾，每个组件以三个部分<template><script><style>组成

五、Element

基于vue2.0的桌面端组件库

组件：组成网页的部件

1、Element安装和引入

1）安装ElementUI组件库：

（在当前工程的目录下），在命令行执行指令

2）页面引入Element组件库

3）在根组件引入：

<br>换行标签

2、Element常用组件的使用

table表格：41

pagination分页：42

Dialog弹出对话框：43

Form表单组件：44

重看45、46、47

47、Axios数据异步加载

在vue项目中使用Axios：

快捷键thenc

<template>插槽标签

4、VUE路由

前端路由：URL中的 hash(#号) 与组件之间的对应关系

Vue Router：Vue官方路由

1）组成：

2）路由使用方式

安装：

定义路由：src-->router-->index.js

path：网址路径

name：路由名字

component：组件路径

redirect：重定向，为当前路径时重定向到指定路径

引入：在main.js引入和指定

import router

router,

路由链接标签：<router-link>转换成超链接

路由标签：<router-view></router-view>

在根Vue页面添加标签

5、打包部署：

1）打包

NPM-->build

2）部署

Nginx：

轻量级的Web服务器、反向代理服务器及电子邮件(IMAP/POP3)代理服务器，特点是占有内存少，并发能力强。

官网：http://ngix.org/

Nginx安装：49(4:00)

Day03-16. 打包部署_哔哩哔哩_bilibili

修改Nginx端口号：conf-->ngnix.conf-->server-->listen 90;

在任务管理器查看ngnix是否启动

浏览器网址输入-->localhost:90/#/

3）启动

六、Maven

apache旗下的一个开源项目，是一款用于管理和构建java项目的工具

1、maven作用：

1）管理依赖：

管理项目依赖的资源(jar包)，在pom.xml文件中直接导入，避免版本冲突；

2）统一项目结构：

提供标准项目结构，方便在不同开发工具中切换；

3）标准的自动化项目构建流程

maven的编译：

maven-->lifecycle-->compile
存放位置：target-->class

maven的打包：

maven-->lifecycle-->package
存放位置：target

2、概述

1）介绍：

官网：http://maven.apache.org/

maven模型：

maven的坐标：

当前maven工程的组织
当前maven工程的模块名称
当前maven工程的版本

在<dependency>标签下指定依赖的坐标：

存储文件夹结构：ch-->qos-->logback-->logback-clsaaic-->版本

仓库：

用于存储资源，管理各种jar包

2）maven安装

Day04-02. maven-概述-介绍&安装_哔哩哔哩_bilibili

2.1）解压apache-maven-3.6.1-bin.zip

maven文件夹的结构：

bin存放可执行文件、运行指令；
conf存放maven配置文件：配置XML文件配置私服；
lib存放maven所依赖的jar包资源；

2.2）配置本地仓库

打开conf 文件夹下--> settings.xml 文件内容-->修改<localRespository>为指定文件夹

2.3）配置阿里云私服

打开conf 文件夹下--> settings.xml 文件内容-->修改<mirros>标签下添加子标签<mirror>

2.4）配置环境变量

MAVEN_HOME 为 maven 的解压目录，并将 bin 目录加入PATH环境变量

2. 5）测试

WIN+R --> 在 cmd 输入

显示版本号即成功安装

3、在 idea 中集成 maven

Day04-03. maven-idea集成-配置及创建maven项目_哔哩哔哩_bilibili

1）配置单个项目的maven环境

1.1）选择 IDEA 中 File --> Setting --> Build --> Build tools --> Maven

1.2）设置IDEA 使用本地安装的Maven，并修改配置文件及本地仓库路径

maven安装目录：
maven配置文件地址：
maven本地仓库位置：

1.3）调整 jre版本

1.4）调整字节码版本

2）配置全局的maven环境

2.1）关闭项目

2.2）调整 jre版本和字节码

3）创建maven项目

3.1）创建模块，选择Maven，点击Next

3.2）填写模块名称，坐标信息，点击finish完成

58 七、Web

1、spring

底层框架：Spring FrameWork

SpringBoot：Spring子框架，简化配置，快速开发

2、SpringBootWeb入门

1）创建springboot项目：

59： Day04-10. Web入门-SpringBootWeb-快速入门_哔哩哔哩_bilibili

1.1.1）新建模块-->选择spring项目-->修改配置

1.2）选择springBoot版本-->添加依赖-->创建

2）注解

@SprngBootApplication：表示为启动类
@RestController：表示当前类为请求处理类
@RequesttMapping：表示指定请求路径

3、HTTP

1）HTTP协议

概念：超文本传输协议，规定了浏览器和服务器之间数据传输的规则和格式

查看协议：F12

特点：

2）HTTP请求协议

HTTP 请求格式：

post和get请求的区别：

post放在F12

3）HTTP响应协议

HTTP响应格式：

响应状态码：

常见响应状态码：

常见响应头：

4）HTTP协议解析 63重看

Day04-14. Web入门-HTTP协议-协议解析_哔哩哔哩_bilibili

4、Tomcat

1）介绍

2）基本使用重看

65 Day04-16. Web入门-Tomcat-基本使用_哔哩哔哩_bilibili

KaNoha33

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWab学习笔记

HTML文档中可以防止任意数量的标签，可以放在任意地方，一般放置在元素底部可以改善显示速度。注释：单行：// 快捷键：ctrl+/；多行：/* */ 快捷键：ctrl+shift+/；类似于var，但是所声明的变量旨在let关键字所在代码块内有效，且不允许重复声明；1)var关键字声明变量，js是弱类型语言，变量可以存放不同类型的值。2）外部脚本：将JS代码定义在外部JS文件中然后引入到HTML页面。**alert(' 引入JS') 显示弹窗的方法；
复制链接

扫一扫