javaSE学习（前端基础知识）

前言

HTML、CSS 和 JavaScript 是网页开发的三大核心技术，它们之间存在着紧密的关系，各自有着不同的职责和用途。HTML 负责构建网页的基本结构和内容框架，CSS 用于设定网页的样式和布局以美化页面外观，JavaScript 为网页添加动态效果和交互行为使其更加灵活和生动。

一、HTML

1、< th >、< tr > 和 < td >标签：

在 HTML 里，< th >、< tr > 和 < td >都是用于构建表格的标签：

< tr > 是 “table row” 的缩写，代表表格的行。一个 < tr > 标签就对应表格中的一行数据。在 < table > 标签内部使用 < tr > 标签来创建表格的行结构；
< th > 是 “table header” 的缩写，用于定义表格的表头单元格。在 < tr > 标签内部使用 < th > 标签来创建表头单元格；
< td > 是 “table data” 的缩写，用来定义表格中的单元格，也就是表格里实际显示数据的地方。通常要放在 < tr > 标签内部，每一个 < td > 标签对应表格中的一个单元格。

2、< button > 标签：

< button > 是 HTML 中的标准标签，用于创建一个按钮元素。

3、< input type=“text” >：

< input > 是 HTML 里用于创建表单输入元素的标签。

type=“text” 明确了输入框的类型为文本输入框，用户能够在其中输入任意文本内容。
text写成password就会以掩码形式（星星或圆点）出现。

4、< br >：

换行标签。

二、CSS

CSS可以通过三种方式引入到 HTML 页面中：

1、内联样式，直接在 HTML 元素的 style 属性中编写 CSS 样式；
2、内部样式表，在 HTML 页面的 < head > 标签内使用 < style > 标签定义 CSS 样式；
3、外部样式表，将 CSS 代码写在独立的 .css 文件中，然后在 HTML 页面的 < head > 标签内使用 < link > 标签引入该文件。

CSS常用语法如下：

1、选择器

选择器用于指定 CSS 样式要应用到的 HTML 元素，以下是几种常见选择器：

• 元素选择器：通过元素名称选择 HTML 元素。

p {
    color: blue;
}//将所有 <p> 标签内的文本颜色设置为蓝色。

• 类选择器：使用 . 开头

.highlight {
    background-color: yellow;
}//HTML 中使用 class="highlight" 的元素背景颜色会变为黄色。

• ID 选择器：使用 # 开头

#header {
    font-size: 24px;
}//id="header" 的元素字体大小会被设为 24px。

• 属性选择器：根据元素的属性及其值来选择元素。

input[type="text"] {
    border: 1px solid gray;
}//给所有 type 属性为 text 的 <input> 元素添加灰色边框。

2、声明块

由一对花括号 { } 包裹，包含一个或多个声明，每个声明由属性和值组成，用冒号 : 分隔，声明之间用分号 ; 分隔。

p {
    color: red;
    font-size: 16px;
}

3、常用属性及值

• 文本相关
  color：设置文本颜色。
  font-size：设置字体大小。常用单位:像素px
• 盒模型相关
  width 和 height：设置元素的宽度和高度。
  margin：设置元素的外边距，即元素与其他元素之间的距离。
  padding：设置元素的内边距，即元素内容与边框之间的距离。
  border：设置元素的边框
• 背景相关
  background-color：设置元素的背景颜色。
  background-image：设置元素的背景图像。

div {
    background-image: url('image.jpg');
}

三、JS

1、Vue 实例对象：

Vue 实例对象本质上是 JavaScript 对象，Vue.js 基于JavaScript 编写的一个前端框架。new Vue() 会创建一个新的 Vue 实例，传入配置对象：el、data、methods 等属性。

el： 用于指定 Vue 实例的挂载点；
data： 用于定义实例的数据，初始化数据；
methods： 用于定义实例的方法。
mounted： 生命周期钩子

格式示例如下：

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!',
        count: 0
    },
    mounted：{
    },//生命周期钩子
    methods: {
        greet() {
            alert(this.message);
        },
        increment() {
            this.count++;
        }
    }
});

2、@click 指令：

@click 是 Vue.js 中的事件绑定指令，它是 v-on:click 的缩写形式。v-on 指令用于监听 DOM 事件，而 @click 则专门用于监听鼠标点击事件。当用户点击这个按钮时，就会执行 @click 后面指定的表达式或方法。

3、v-for 指令：

v-for 是 Vue.js 提供的一个用于循环渲染的指令，可以动态生成表格行；

语法格式： item in items；
items： 是一个数组或对象（通常是Vue 实例 data 选项中的一个数组，通过 axios 从后端获取数据后赋值给 depts）：
item： 是当前循环到的数组元素或对象属性。

4、:key 绑定：

:key 是一个特殊的属性，用于给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。保证了渲染效率和准确性。

5、v-model 指令：

v-model 是 Vue.js 提供的一个非常实用的指令，它实现了表单输入元素和 Vue 实例数据之间的双向绑定。

<div id="user">
    <input type="text" v-model="newDept.name"><br>
    <button @click="addDept">添加</button>
</div>

v-model=“newDept.name” 表明输入框的内容和 newDept.name 属性绑定。newDept 是 Vue 实例 data 选项里定义的一个对象，name 是该对象的一个属性。

6、axios.请求（）.then（以axios.get为例）：

loadDepts(){
        axios.get('http://localhost:8080/selectAll').then(
           response=>{
           this.depts=response.data.data;//Javascript不加;也是可以的
                    }
        )
}

axios.get 方法： 返回一个 Promise 对象,是用于处理异步操作的对象，它有三种状态：进行中pending、已成功fulfilled和已失败rejected
then ： 是 Promise 对象的一个方法，用于处理 Promise 成功的情况，它接受一个回调函数作为参数。

7、data的理解：

服务器返回的data字段： 在使用 axios 发送请求并获取服务器响应时，服务器返回的数据通常会包含在响应对象response的 data 字段中。
Vue实例中的data： 在 Vue 中，data 是一个选项，用于定义 Vue 实例的数据对象。
response.data.data中： 第一个 data 是 axios 响应对象的属性，用于获取服务器返回的整体数据；第二个 data 是服务器返回数据中的一个字段，用于获取具体需要的数据。

8、箭头函数：

response => { 
    this.depts = response.data.data; 
}

语法形式：(参数列表) => { 函数体 }；
使用时机: 当 axios.get 发起的请求成功完成，服务器返回响应后，Promise 对象的状态会从 pending 变为 fulfilled。此时，then 方法中传入的回调函数就会被调用；
优点: 语法简洁。

传统函数定义方式：

function(response) {
    this.depts = response.data.data;//将服务器返回的数据中的data字段赋值给this.depts
}

9、prompt、alert和confirm的区别

他们都是 window 对象的方法：

alert: 警告框。没有返回值，仅用于展示信息；
confirm: 对话框。返回一个布尔值，点击 “确定” 返回 true，点击 “取消” 返回 false。
prompt: 输入框。两个参数：提示信息和默认值。点击 “确定”，函数返回输入的文本；点击 “取消”，返回 null。

补充一个小点：
let具有块级作用域，即变量只在声明它的代码块内有效。

四、完整代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门信息列表</title>
<!--    vue的核心库vue2.0 渲染数据-->
<!--    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>-->
    <script src="js/vue2.js"></script>     <!--保存到本地加载比较快-->
<!--    axios库-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="js/axios.js"></script>
    <style>
        #app table{//这是一个组合选择器，它表示选择 id 为 app 的元素内部的所有 <table> 元素
            border:solid 1px red;
            margin:0 auto;
            width:700px;
            font-size:20px;
            border-collapse:collapse;
        }
        tr,td{
            border:solid 1px red;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="user">
        <input type="text" v-model="newDept.name"><br>
<!--        br换行-->
        <button @click="addDept">添加</button>
    </div>
    <table>
        <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="dept in depts":key="dept.id">
            <td>{{dept.id}}</td>
            <td>{{dept.name}}</td>
            <td>{{dept.createTime}}</td>
            <td>{{dept.updateTime}}</td>
            <td>
                <button @click="deleteDept(dept.id)">删除</button>
                <button @click="updateDept(dept.id)">更新</button>
            </td>
<!--            td是单元格-->
        </tr>
    </table>
</div>
<!--上面是css，下面是js-->
<script>
    new Vue({
        el:"#app",//这里的 '#app' 是一个 ID 选择器，表示 Vue 实例会挂载到 HTML 文档中 id 为 app 的元素上。
        data:{
            newDept:{name:""},
            depts:[]//渲染的数据
        },
        mounted(){//生命周期钩子，当前页面完整加载之后执行
           this.loadDepts();
        },
        methods:{
            //1.加载部门列表
            loadDepts(){
                axios.get('http://localhost:8080/selectAll').then(
                    response=>{
                        this.depts=response.data.data;//Javascript不加分号也是可以的
                    }
                )
            },
            //2.删除方法，请求后端删除的api
            deleteDept(id){
                if(confirm("确认删除该条记录吗?")){
                    axios.delete(`http://localhost:8080/dept/${id}`).then(
                        ()=>this.loadDepts()//重新加载
                    )
                }
            },
            //3.请求后端的添加数据接口
            addDept()
            {
                if(this.newDept.name==''){
                    alert("未添加数据");
                    return;
                }
                axios.post("http://localhost:8080/insertInfo",this.newDept).then(
                    //箭头函数、回调函数
                    ()=>{
                        this.newDept.name="";
                        this.loadDepts();
                    }
                )
            },
            //4.修改数据接口
            updateDept(id){
                axios.get(`http://localhost:8080/getOne/${id}`).then(
                    response=>{
                        let a=response.data.data;
                        console.log(a);//把数据打印到浏览器控制台
                       let newName=prompt("请输入部门新名称",a.name);//输入框

                        //构造新的对象
                        let updateDept={
                            id:a.id,
                            name:newName,
                            createTime:a.createTime,
                            updateTime:new Date().toISOString()//前端获取时间的方式
                        }
                        //发送请求
                        axios.put("http://localhost:8080/updateDept",updateDept).then(
                            ()=>{
                                this.loadDepts();//刷新页面
                            }
                        )
                    }
                )
            }
        }
    })
</script>
</body>
</html>

结语

通过对 HTML、CSS、JS 相关知识的梳理，从标签到指令，希望能帮大家了解前端基础。前端技术发展迅速，学习之路漫漫，如果有错误之处期待与大家在评论区交流，一起进步！