Javaweb

HTML、CSS
- CSS引入方式
- < span >标签
- CSS选择器：
页面布局
- 表格
- 表单标签
- 表单项
JavaScript
- JavaScript引入方式
- JS语法
- 变量
- 数据类型
- 运算符
- 函数(Java中方法)
JS对象
- Array
- String
- JSON(对象标记法)
- BOM
- - Window 浏览窗口对象
  - Location：地址栏对象
- DOM
JS事件监听
- 事件绑定
- 常见事件
Vue
- vue生命周期
Axios
前后端分离开发
- [YApi]( )
前端工程化
- Vue项目-创建
Vue的组件库Element
- 常见组件(CV工程师)
- Axio异步加载数据
- Vue路由
打包部署
- Nginx

HTML、CSS

HTML：
HTML (HyperText Markup Language)： 超文本标记语言
超文本： 超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言： 由标签构成的语言
HTML标签都是预定义好的
例如：使用< a >展示超链接，使用< ima >展示图片，< video >展示视频
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS(Cascading Style Sheet)： 层叠样式表，用于控制页面的样式(表现)
参考HTML API

基础标签格式： ! 回车 只有在VS CODE 能用
注释快捷键： ctrl + shift + /

<html>
<head><title>第一条HTML语句</title> <!-- 控制的是浏览器最上方的网页标题 -->
</head>
<body>  
<h1>Hello HTML</h1>  <!-- 一级标题 -->
<img src = "xx.jpg"/> <!-- 给一个图片路径 -->
<img src = "xx.jpg"> </img> <!-- 也可以这么写 但是没必要 -->
</body>
</html>

特点：
在这里插入图片描述
图片

CSS引入方式

行内样式： 写在标签的style属性中(不推荐)
行内样式仅针对这一条语句有效！所以不推荐

<h1 style = "xxx: xxx; xxx: xxx;"> 中国新闻网 </h1>
<!--前面XXX为属性名 后面XXX为属性值-->

内嵌样式： 写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

<style>
h1{ <!-- 这当中的CSS样式对所有h1标签都有效果-->xxx: xxx; xxx: xxx;
}
</style>

外联样式： 写在一个单独的.css文件中(需要通过 ink 标签在网页中引入)

h1{ <!-- 单独定义在CSS文件当中-->xxx: xxx; xxx: xxx;
}
link标签演示： <link rel = "stylesheet" href = "css/news.css">

颜色
在这里插入图片描述

< span >标签

< span > 是一个在开发网页时大量会用到的没有语义的布局标签
特点： 一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

<head><style>
span{color: red;
}</style>
</head>
<body><span> Chinese </span>
</body>

CSS选择器：

用来选取需要设置样式的元素(标签)
css记得在头标签内使用 < sytle > 包裹
在这里插入图片描述
字体大小： font-size : 10px; 调整文字大小

优先级： id选择器优先级第一类选择器第二元素选择器第三

属性：
color： 设置文本的颜色
font-size： 字体大小(记得加px)

超链接：

<a href="..." target="...">央视网</a>

属性：
href： 指定资源访问的url
target： 指定在何处打开资源链接
_self： 默认值，在当前页面打开
_blank： 在空白页面打开
超链接默认有下划线、使用： text-decoration: none; 取消文本效果

视频：< video >
src： 规定视频的url
controls： 显示播放控件
width： 播放器的宽度
height： 播放器的高度

<video src = "video/1.mp4" controls = "controls"></video>
<!--如果controls = "controls"这种属性名 = 属性值、可以直接省略属性值-->
直接写作controls

音频：< audio >
src： 规定音频的url
controls： 显示播放控件

段落：< p >
换行： < br >
文本加粗： < b > / < strong > 后者是有强调意义的、不过也能加粗

文本对齐方式：

h1{text-align: center/ left / right;} 分别是居中、靠左、靠右

line-height: 设置行高
text-indent: 定义第一个内容的缩进

注: 在HTML中无论输入多少个空格，只会显示一个。
可以使用空格占位符达到输出多个空格的效果： `

页面布局

盒子： 页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成： 内容区域 (content) 、内边距区域 (padding) 、边框区域 (border) 、外边距区域(margin)

布局标签： 实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签： < div > < span >
特点：
div标签：
一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高 (width、height)
span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高 (width、height)
在这里插入图片描述

表格

在这里插入图片描述

表单标签

在这里插入图片描述

<body><form action="" method="get">用户名：<input type = "text" name = "username">年龄： <input type = "text" name = "age"><input type = "submit" value="提交"></form>
</body>

form表单属性：
action： 表单提交的ur1，往何处提交数据 . 如果不指定，默认提交到当前页面
method： 表单的提交方式
get： 在url后面拼接表单数据，比如: ?username=Tom&age=12 ，url长度有限制，get是method属性的默认值、不写method默认就是get
post： 在消息体(请求体) 中传递的，参数大小无限制的。

表单项必须有name属性才可以提交

表单项

在这里插入图片描述

JavaScript

JavaScript引入方式

内部脚本： 将S代码定义在HTML页面中
JavaScript代码必须位于< script >< /script >标签之间
在HTML文档中，可以在任意地方，放置任意数量的< script >
一般会把脚本置于< body >元素的底部，可改善显示速度
外部脚本： 将JS代码定义在外部JS文件中，然后引入到 HTML页面中
外部JS文件中，只包含JS代码，不包含< script >标签
< script >标签不能自闭合
在< head >标签中声明
引入方式: < script src=“js/demo.js” > < /script >

JS语法

在这里插入图片描述

变量

JavaScript 中用var关键字 (variable 的缩写)来声明变量。
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
组成字符可以是任何字母、数字、下划线()或美元符号 (S)
数字不能开头
建议使用驼峰命名

特点：
作用域较大、全局变量、而且可以重复定义
注：
ECMAScript 6 新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。等于局部变量
ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。等于是Java中 final

数据类型

JavaScript中分为： 原始类型和引用类型。原始等于Java中基本类型
number： 数字(整数、小数、NaN(Not a Number))
string： 字符串，单双引皆可
boolean： 布尔。true，false
null： 对象为空
undefined： 当声明的变量未初始化时，该变量的默认值是undefined

typeof运算符能够获取数据类型

运算符

在这里插入图片描述

== 和 ===的区别

== ：会进行类型转换在比较

===：不会进行类型转换、直接比较数据类型是否相同

数据类型的转换：
在这里插入图片描述

parseInt("12"); 跟Java一样
parseInt("12A45")// 12 遇到A不是同一个数据类型后面就不看了
parseInt("A45")//NaN

函数(Java中方法)

介绍： 函数(方法)是被设计为执行特定任务的代码块
定义： JavaScript 函数通过 function 关键字进行定义，语法为

function functionName(参数1,参数2){
//代码块}

注意：
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用： 函数名称(实际参数列表)
我们通常定义一个变量来接收函数返回的内容
var result = add(2,4);
alert(result)
或者：

var result = function functionName(a ,b){
return a + b;}

JS中、函数调用可以传递任意个数的参数！

JS对象

Array

JS中Array对象用于定义数组：
在这里插入图片描述
console.log(arr[0]);//输出到控制台

JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据
在这里插入图片描述
for循环也可以遍历的、没有值也给你遍历了

arr.forEach((e)=>{
console.log(e);})

有点类似于lambda表达式、一个是-> 一个是 =>

String

在这里插入图片描述

<script>var a1 = "  HELLO JS  ";console.log(a1.length);console.log(a1.indexOf("E"));var a2 = a1.trim();console.log(a2);console.log(a2.substring(0,5));</script>

JS自定义对象
在这里插入图片描述
在定义函数的时候、可以直接省略function

JSON(对象标记法)

百度JSON格式化，能够检查你的语法格式
key : value；都要用双引号包裹
在这里插入图片描述
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

在这里插入图片描述

BOM

概念： Browser Obiect Model 浏览器对象模型，允许avacript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

Window 浏览窗口对象

在这里插入图片描述
confirm()；是有返回值的、点击确认返回true；点击取消返回false；

<script>window.alert("HELLO BOM");alert("HELLO BOM WINDOW");confirm("确认删除该记录吗");//取消或确定对话框var i = 0;setInterval(function(){i++;console.log("定时器执行了"+i+"次");},2000); //每隔两秒就会执行一次函数;不断重复！setTimeout(function(){alert("JS");},3000);//三秒之后弹出JS对话框</script>

Location：地址栏对象

在这里插入图片描述

alert(location.href);
location.href = "https://www.baidu.com";

有些网站打开就跳转广告就这么写的

DOM

在这里插入图片描述

JS事件监听

事件绑定

在这里插入图片描述

常见事件

在这里插入图片描述

Vue

框架： 是一个半成品软件、是一套可重用的、通用、软件基础代码模型。基于框架进行开发，更加快捷、更加高效

这里的Vue.js要去官方文档里面下载
在这里插入图片描述

通过 v-bind 或 v-model绑定的变量，必须在数据模型中声明

    <script src="js/vue.js"></script>
</head>
<body>
<div id="app"><a v-bind:href="url">百度一下，你就知道</a> <br><hr><a :href="url">百度一下，你就知道</a><br><hr><input type="text" v-model="url">{{url}}
</div>
</body>
<script>new Vue({ //定义一个Vue对象el:"#app",data: {url: "https://www.baidu.com"}})</script>//=====================================<body>
<div id="app"><input type="button" value="按钮" v-on:click="handle()"><input type="button" value="按钮" @click="handle()">
</div>
</body>
<script>new Vue({ //定义一个Vue对象el:"#app",data: {url: "https://www.baidu.com"},methods: {handle: function(){alert('点击！');
}}  }) </script>

在这里插入图片描述

vue生命周期

生命周期： 指一个对象从创建到销毁的整个过程
在这里插入图片描述

我们每次执行Vue方法都一定会触发道mounted这个状态、我们主要就用它来发送请求到服务端、加载数据

也称之为钩子函数

Axios

对原生的Ajax进行封装、简化书写、快速开发
在这里插入图片描述
更渐变的方式

前后端分离开发

根据接口文档让前后端开发、可以无缝衔接
接口文档可以在线、离线两种模式。由项目经理写出原型+需求

开发流程：
在这里插入图片描述

YApi

前端工程化

模块化： JS、CSS
组件化： UI结构、样式、行为
规范化： 目录结果、编码、接口
自动化： 构建、部署、测试

前端工程化： 是指在企业级的前端项目开发中，把前端开发所需的工具技术、流程、经验等进行规范化、标准化。

vue-cli： 是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

Vue-cli提供了如下功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境： NodeJS

Vue项目-创建

命令行： vue create vue-project01
图形化界面： vue ui

在这里插入图片描述

Vue项目启动的两种方式：
方式一： 图形化界面 NPM脚本第一个小扳手
方式二： 命令行npm run serve

Vue端口修改：
在这里插入图片描述
默认主页的界面

Vue的组件文件以.vue结尾，每个组件由三个部分组成: < templat >、< script >、< style >

Vue的组件库Element

初次安装:
在项目中打开cmd命令窗口，输入命令---- npm i element-ui -S命令

安装之后在main.js中写入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

在App.vue里面写上导入Element

<template><div><element-view></element-view></div>
</template><script>
import ElementView from './views/element/ElementView.vue'export default{   components: { ElementView },data() {return {message: "Hello Vue!"}},methods: {}
}
</script>

main.js一般都是连着 App.vue。你就可以在App.vue里面去导入不同的vue文件、主要就是修改< div >里面改成你要导入的vue <vue文件名 - vue>。然后在< script >里面导入路径。在方法里面 components: { vue名字 }

Element

常见组件(CV工程师)

Pagination 分页：
Dialog 对话框：
From 表单： 能够跟Dialog嵌套

Axio异步加载数据

在这里插入图片描述
导入是在你当前需要传输数据的 VUE文件 < script >的第一句导入
再使用Axios章节的方法、获取URL的数据

在这里插入图片描述

Vue路由

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

在这里插入图片描述

如果你在创建vue项目的时候没有选择路由
在这里插入图片描述

之后打开项目src下的router中index.js去配置你的路由

在这里插入图片描述
需要在这个位置再定义一个 path: '/'。因为你打开项目的时候默认是没有后面的路径。所以你需要一个根路径。
记得检查一下main.js中是否配置好

到你需要实现跳转的vue文件位置去配置一下路由link
在这里插入图片描述

最后到 App.js当中去设置路由展示组件
在这里插入图片描述

打包部署

在这里插入图片描述

Nginx

在这里插入图片描述
将你打包好的文件里面的内容复制到 html 文件夹下
启动nginx就行。如果没有反应可以到log文件夹下面看看有没有error
很有可能是端口被占用、cmd
netstat -ano | findStr 80 看看80端口被谁占用，每一行最末尾是一个PID进程编号
你可以到任务管理器查看PID