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默认就是getpost： 在消息体(请求体) 中传递的，参数大小无限制的。
表单项必须有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名字 }
常见组件(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
打开conf 里面的 nginx.conf，记事本里面36行修改端口
如果看到任务管理器 nginx正在运行，就可以打开localhost:端口号
