Web 前端的一些基础知识和相关工具的使用

Java Web

文档查询网站:https://www.w3school.com.cn/index.html

Web前端

网页

本质是前端代码经过浏览器的解析和渲染而成的
浏览器内核进行代码的解析和渲染

web标准

HTML：负责网页的结构（页面元素和内容）
CSS：负责网页的表现（页面元素的外观，位置，颜色，大小等）
JavaScript：负责网页的行为（交互效果）
高级技术
- Vue.js
- ElementUI
- Ajax
- Axios
- …

HTML（HyperText Markup Language）

超文本标记语言（超越普通文本语言，由标签构成的语言）
标签是预定好的，
HTML代码直接在浏览器中运行，HTML标签由浏览器解析

特点

不区分大小写
属性可以使用单引号或者双引号
语法松散

常用标签

<img>
- src:指定图像的url（相对或绝对）
- width
- height
标题标签:<h1> - <h6>
水平线标签:<hr>
超链接<a>
- href指定访问资源的url
- target指定在何处打开资源(_self,_blank)
<video>视频
- controls显示播放控件
- src
- width
<audio>音频
- controls
- src
- width
<b>/<strong>加粗
<p>分段落
表格标签
- <table>定义表格整体
  - border:规定边框宽度
  - width:规定表格的宽度
  - cellspacing:规定单元格之间的空隙大小
- <tr>:表格的行
- <td>:表格单元格，（表头使用<th>）

<table border="1px" cellspacing="0" width="600px">
   <tr>
      <th>角色名称</th>
       <th>图片</th>
      <th>元素</th>
      <th>国度</th>
   </tr>
  
   <tr>
      <td>那维莱特</td>
      <td><img src="https://picx.zhimg.com/70/v2-5623d0ee6d0a7f7a63ffce7830fdbc7a_1440w.avis?source=172ae18b&biz_tag=Post" width="100px"></td>
      <td>水</td>
      <td>枫丹</td>
   </tr>
    
   <tr>
      <td>提纳里</td>
      <td><img src="https://patchwiki.biligame.com/images/ys/2/2b/hcwuh3cbgc5dyfcx4qlqp95qlzbp619.png" width="100px"></td>
      <td>草</td>
      <td>须弥</td>
   </tr>
  
</table>

表单标签
- 负责采集数据，如登录，注册等信息
- <form>
  - <input>:定义表单项，通过type属性控制输入形式
  - <select>:定义下拉列表
    - <option>定义列表项
  - <textarea>:定义文本域

<form action="" method="post">
    姓名:<input type="text" name="name"> <br><br>
    密码:<input type="password" name="password"> <br><br>
    性别:<label><input type="radio" name="gender" value="1">男</label>
    	<label><input type="radio" name="gender" value="2">女</label><br><br>
    爱好:<label><input type="checkbox" name="hobby" value="java">java</label>
        <label><input type="checkbox" name="hobby" value="genshin">genshin</label>
        <label><input type="checkbox" name="hobby" value="sleep">sleep</label> <br><br>
    图像:<input type="file" name="image"> <br><br>
    生日:<input type="date" name="birthday"> <br><br>
    时间:<input type="time" name="time"> <br><br>
    日期时间:<input type="datetime-local" name="datetime"> <br><br>
    邮箱:<input type="email" name="email"> <br><br>
    年龄:<input type="number" name="age"> <br><br>
    学历:<select name="degree">
    		 <option value="">-----------请选择---------</option>
   			 <option value="1">大专</option>
   			 <option value="2">本科</option>
   			 <option value="3">硕士</option>
   			 <option value="4">博士</option>
    	</select> <br><br>
    描述:<textarea name="description" cols="30" rows="10"></textarea>
    <input type="hidden" name="id" value="1">
    
    <!-- 表单常见按钮 -->
    <input type="button" value="按钮">
    <input type="reset"  value="重置">
    <input type="submit" value="提交">
</form>

属性
- action:规定提交表单时向何处发送表单数据，URL(如果不指定默认提交到当前页面)
- method:规定用于发送表单数据的方式。GET，POST
  - get在url后面拼接表单数据
  - post在消息体（请求体）中传递，参数长度无限制

CSS（Cascading Style Sheet）

层叠样式表，控制网页的表现

CSS选择器

元素选择器h1{}
id选择器#hid{}(在style中) <h1 id="hid">不能重复
类选择器.cls{}(在style中) <h1 class="cls">

常用标签

<span>无语义的布局标签，一行可显示多个
<div>

属性

color
font-size：字体大小（加px）
text-decoration:规定文本的修饰，none表示定义标准的文本
text-align：控制对齐方式
text-indent:首行缩进
line-height：行高
空格占位符：&nbsp

盒子模型

<div>无语义的布局标签，一行只占一个
组成：内容区域(content)，内边距区域(padding)，边框区域(border)，外边距区域(margin)

<style>
    h1{
       color:rgb(102, 97, 97);
     }
   //类选择器
    .time{
      color:rgb(241, 3, 3);
    }
    //标签选择器
    a{
        color:black;
        text-decoration: none;
    }
    //id选择器
   #wangmc{
        text-align: right;
        font-size: 28px;
        color:chocolate;
    }
    
    /*<div id="center">*/
   #center{
        width:80%;
        box-sizing: border-box;/*指定width为盒子宽度*/
        background-color: rgb(219, 235, 235);

        padding: 20px; /*内边距 上右下左*/
        border: 1px solid red;/*边框宽度 线条类型 颜色*/
        margin:auto;/*外边距 */
    }
</style>

JavaScript（简称：js）

跨平台，面向对象的脚本语言，使网页可以交互

js引入方式

内部脚本（定义在HTML页面）
- js代码必须位于<script></script>之间
- 可以放在任意地方，放置任意数量
- 一般位于<body>元素的底部，改善显示速度
外部脚本（js代码定义在外部角色文件中，然后引入到HTML中）
- 外部js文件中只包含js代码，不含有<script>标签
- <script>标签不能自闭合

基础语法

书写语法
- 区分大小写
- 每条语句结束可以不写分号
输出语句
- window.alert() 写入警告框
- document.write() 写入HTML输出
- console.log() 写入浏览器控制台

变量

利用var，let，const关键字来声明变量
因为js是弱类型的语言，所以变量可以存放不同类型的值
利用var定义出来的是全局变量，可以重复定义
利用let定义出来的是局部变量，只在代码块中有效，不可重复定义

数据类型

原始类型
- number，string，boolean，null，undefined
引用类型
- js中的对象
利用typeof来获取数据类型

运算符

==：会进行类型转换
===：不会进行类型转换

js函数

通过function关键字进行定义
不需要定义形参和返回值的类型

js对象

Array
- var 变量名 = [元素列表]
- var 变量名 = new Array（元素列表）
- 属性：length，返回数组中的元素数量
- 方法
  - forEach()：遍历数组中每一个有值的元素，并调用一次传入的函数
    - 箭头函数:arry.forEach(item=>{console.log(item);})
  - push()：将新元素添加到数组末尾，并返回新的长度
  - splice(start,number)：从数组中删除元素
String
- 属性：length
- 方法
  - charAt()：返回指定位置的字符
  - indexOf()：检索字符串所在的位置
  - trim()：去除字符串两边的空格
  - substring(start,end):提取字符串中两个指定的索引号之间的字符(左闭右开)
JSON(JavaScript Object Notation)
- 通过JavaScript对象标记法写的文本
- 多作为数据载体，进行数据传输
- 自定义对象
- 格式与自定义对象类似，但变量名要加双引号
- 定义
  - var 变量名 = '{"key1": value1,"key2":value2}'
  - var userStr = '{"name":"Jerry","age":18,"addr":["原神","星铁","绝区零"]}'
  - 该对象是文本，整体要加单引号
- 方法
  - JSON.parse() 将 JSON 字符串解析为 JavaScript 对象
  - JSON.stringify()
BOM(Browser Object Model)
- 浏览器对象模型，允许js与浏览器对话，js将浏览器各个组成部分封装为对象
- 组成
  - Window:浏览器窗口对象
    - 方法
      - alert()显示带有一段消息和一个确认按钮的警告框
      - confirm()显示带有一段消息以及一个确认和取消按钮的对话框
      - setInterval()按照指定的周期来调用函数
      - setTimeout()在指定的毫秒数后调用函数
  - Navigator:浏览器对象
  - Screen
  - History
  - Location:地址栏对象
    - 属性：href
    - location.href = "https://www.xxxx.cn"`
DOM(Document Object Model)
- 将标记语言的各个组成部分封装为对应的对象
  - Document:整个文档对象
  - Element:元素对象
  - Attribute:属性对象
  - Text:文本对象
  - Comment:注释对象

js事件监听

指发生在HTML元素上的事情，如按钮被点击，按下鼠标快捷键,执行相应代码
事件绑定
常见事件

Vue

前端框架，免除js中的DOM操作，基于MVVM思想，实现数据双向绑定

插值表达式:

常用属性

el指示vue编译器从什么地方开始解析 vue的语法
data存储变量
methods存放函数
template设置模板
watch
computed
render创建真正的Virtual Dom

常用指令

v-model在表单元素上创建双向数据绑定
v-bind为HTML标签绑定属性值，如href，css样式

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

    <div id="yuanshen">
        <a v-bind:href="url" target="_blank">原神</a>
        <input type="text" v-model="url">
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data:{
            message:"hello vue"
        }
    })

    new Vue({
        el:"#yuanshen",
        data:{
            url:"https://www.yuanshen.com/#/"
        }
    })
</script>

v-on为HTML标签绑定事件
v-if, v-else-if, v-else条件性的渲染某元素
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器中的元素或者对象的属性
- <div v-for="变量名 in 遍历对象">{{变量名}}</div>

<div v-for="addr in addrs"{{addr}}</div>
<div v-for="(addr,index) in addrs"{{index+1}}:{{addr}}</div>

data:{
	...
	addrs:['beijing','shanghai','hongkong','nanjing']
},

案例

<div id="app">
        <table border="1px" cellspacing="0" width="60%">
            <tr>
                <th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th>
            </tr>
            <tr align="center" v-for="(arr,index) in users"> //遍历users数组中的元素，并赋值给arr
                <td>{{index+1}}</td>
                <td>{{arr.name}}</td>
                <td>{{arr.age}}</td>
                <td>
                    <span v-if="arr.gender==1">boy</span>
                    <span v-else-if="arr.gender==0">girl</span>
                </td>
                <td>{{arr.score}}</td>
                <td>
                    <span v-if="arr.score>=90">优秀</span>
                    <span v-else-if="arr.score>=60">及格</span>
                    <span v-else="arr.score 60" style="color:red ">不及格</span>
                </td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                users:[{name:"纳西妲",age:"500",gender:0,score:100},
                {name:"芙宁娜",age:"530",gender:0,score:80},
                {name:"荒泷一斗",age:"101",gender:1,score:55},
                {name:"旅行者",age:"666",gender:1,score:90},
                {name:"派蒙",age:"320",gender:0,score:66},
                {name:"七七",age:"432",gender:0,score:77},
                {name:"天理",age:"999",gender:0,score:150}]
            },
        })
    </script>

生命周期

每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
八个阶段
- beforeCreate
- created
- beforeMount
- mounted挂载完成
- beforeUpdate
- updated
- beforeDestroy
- destroyed

Vue路由(Vue Router)

Vue router 路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>请求链接组件，会被浏览器解析为<a>
<router-view>动态视图组件，用来渲染展示与路由路径对应的组件

Ajax(Asynchronous Javascript Anderson XML)

异步的Javascript和XML

作用

数据交换：通过它可以向服务器发送请求，并获取服务器响应的数据
异步交互：不刷新整个页面的同时，进行局部刷新

Axios

对原生的Ajax进行了封装，简化书写，快速开发
入门程序

<input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
    <script>
        function get(){
            axios({
                method:"get",
                url:"http://yuanshen.com"
            }).then(result=>{
                console.log(result.data);
            })
-------------------------------------------------------------------------------------------------
            axios.get("http://yuanshen.com").then(result=>{console.log(result.data)}) //简化模式
        }
    </script>

结合Vue中的mounted生命周期事件

<script>
	new Vue({
    	el:"#app",
    	data:{
            emps:[]
        },
    	mounted(){
            axios.get("http://www.xxxx.xxx.com").then(result=>{
                this.emps = result.data.data;
            })
        }
});   
</script>

YApi

高效，易用，功能强大的api管理平台
用于模拟前端所需要的数据

前端工程化

定义

指把前端开发所需的工具，技术，流程，经验等进行规范化，标准化

vue脚手架的环境准备

安装node.js
配置npm的全局安装路径 npm config set prefix "node.js的安装路径"
切换npm的镜像 npm config set registry 镜像地址
- 腾讯镜像: https://mirrors.cloud.tencent.com/npm/
- 华为镜像: https://mirrors.huaweicloud.com/repository/npm/
- 阿里镜像：https://npm.aliyun.com
安装vue-cli npm install -g @vue/cli
确认是否安装成功 vue --version

Vue项目

创建

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

目录结构

node_modules 整个项目的依赖包
public 存放项目的静态文件
src 存放项目的源代码
- assets静态资源
- components可重用的组件
- router路由配置
- views视图组件（页面）
- App.vue入口页面（根组件）
- main.js入口js文件
package.json 模板基本信息，项目开发所需要的模块，版本信息
vue.config.js 保存vue配置的文件，如：代理，端口的配置

更改端口号

进入vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
 //添加以下内容，将端口号改为7000
  devServer:{
    port:7000
  }
})

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

<template>
<div>
<h1>{{message}}</h1>
</div>

</template>  //模板部分，生成HTML代码

<script>
export default {
  data:function(){
    return{
      message:"hello vue"
    }
  },
  methods: {
    
  },
}
</script>  //控制模板的数据来源和行为

<style>

</style>  //css样式部分

Element(Vue组件库)

组件：组成网页的部件，如超链接，按钮，图片，表格，表单，分页条等

url：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

如何使用

在创建好的Vue项目中安装ElementUI组件库 npm install element-plus --save

引入ElementUI组件库

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

访问官网，复制组件代码，调整

打包部署

先打包npm run build 再部署
将打包好的dist目录下的文件，复制到nginx安装目录下的html目录
启动：双击nginx.exe文件，nginx服务器默认占用本机80端口号
- 如果80端口号被占用，可以在nginx.conf中修改端口号
- 查看端口被谁占用netstat -ano | findStr 80
访问：浏览器输入 localhost:端口号

Nginx

一款轻量级的web服务器，反向代理服务器，电子邮件代理服务器