当前位置：首页 > wzjs >正文

服务器网站搭建教程外链代发免费

wzjs 2025/8/9 10:57:34

服务器网站搭建教程,外链代发免费,全国疫情最新通报,在哪个网站开发国外客户文章目录前言一、HTML1、< th >、< tr > 和 < td >标签：2、< button > 标签：3、< input type"text" >：4、< br >： 二、CSS1、选择器2、声明块3、常用属性及值三、JS1、Vue 实例对…

文章目录

前言
一、HTML
- 1、< th >、< tr > 和 < td >标签：
- 2、< button > 标签：
- 3、< input type="text" >：
- 4、< br >：
二、CSS
- 1、选择器
- 2、声明块
- 3、常用属性及值
三、JS
- 1、Vue 实例对象：
- 2、@click 指令：
- 3、v-for 指令：
- 4、:key 绑定：
- 5、v-model 指令：
- 6、axios.请求（）.then（以axios.get为例）：
- 7、data的理解：
- 8、箭头函数：
- 9、prompt、alert和confirm的区别
四、完整代码展示
结语

前言

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.删除方法，请求后端删除的apideleteDept(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>