AI+JavaWeb Web前端基础：Vue Ajax

Vue

Vue是一款用于构建用户界面的渐进式JavaScript框架。官方网站
构建用户界面：基于数据渲染出用户看到的界面。
渐进式：可以根据项目需要，选择和改造Vue中的模块。

Vue快速入门

引入Vue，参考快速开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</title>
</head>
<body>
    <!--3.定义元素div，交给Vue控制-->
    <div id="app">
        <h1>{{message}}</h1> <!--5.此处用插值表达式进行渲染-->
        <h2>{{count}}</h2>
    </div>

    <!--1.引入Vue模块-->
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //2.创建Vue的应用实例
        createApp({
            data(){ //4.准备数据
                return{
                    message:"Hello,Vue!",
                    count: 100
                }
            }
        }).mount('#app') //表示当前Vue需要接管的区域
        
    </script>
</body>
</html>

安装插件

给vscode安装Vetur和Vue 3 snippet插件
给浏览器安装扩展程序Vue.js devtools并设置允许访问文件 URL

常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
例如：

<p v-xxx="...">...</p>

v-for 列表渲染，遍历容器的元素或对象的属性

注意：遍历的数组，必须定义在data中；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令

示例：员工列表数据渲染展示

<!-- 表格主体内容 -->
<tbody>
	<tr v-for="(e, index) in empList" :key="e.id">
		<td>{{index + 1}}</td>
		<td>{{e.name}}</td>
		<td>{{e.gender == 1?'男':'女'}}</td>
		<td><img class="avatar" src={{e.image}} alt={{e.name}}></td> <!--插值表达式不能出现在标签内部，应使用v-bind-->
		<td>{{e.job}}</td>
		<td>{{e.entrydate}}</td>
		<td>{{e.updatetime}}</td>
		<td class="action-buttons">
			<button type="button">编辑</button>
			<button type="button">删除</button>
		</td>
	</tr>

</tbody>

v-bind 动态为HTML标签绑定属性值，如设置href,src,style样式等

标签内部不能使用插值表达式，得使用v-bind指令动态的为标签的属性绑定值。且绑定的数据，必须在data中定义。
语法：v-bind:属性名="属性值"
简化形式：:属性名="属性值"

<td><img class="avatar" v-bind:src="e.image" alt="e.name"></td>

v-if和v-show控制元素的显示与隐藏

v-if

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
语法：v-if="表达式"，表达式值为true则显示，否则隐藏
场景：不频繁切换的场景

v-show

原理：基于CSS样式display来控制显示与隐藏
语法：v-show="表达式"，表达式值为true则显示，否则隐藏
创建：频繁切换显示/隐藏的场景

案例：员工列表数据渲染展示中职位渲染

<td>
	<!-- <span v-if="e.job == 1">班主任</span>
	<span v-else-if="e.job == 2">讲师</span>
	<span v-else-if="e.job == 3">学工主管</span>
	<span v-else-if="e.job == 4">教研主管</span>
	<span v-else-if="e.job == 5">咨询师</span>
	<span v-else>咨询师</span> -->

	<span v-show="e.job == 1">班主任</span>
	<span v-show="e.job == 2">讲师</span>
	<span v-show="e.job == 3">学工主管</span>
	<span v-show="e.job == 4">教研主管</span>
	<span v-show="e.job == 5">咨询师</span>
</td>

v-model 双向数据绑定

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"

v-model中绑定的变量，必须在data中定义。

示例：搜索栏中搜索表单数据的绑定

{{searchForm}}
<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
	<label for="name">姓名：</label>
	<input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name">

	<label for="gender">性别：</label>
	<select id="gender" name="gender" v-model="searchForm.gender">
		<option value=""></option>
		<option value="1">男</option>
		<option value="2">女</option>
	</select>

	<label for="position">职位：</label>
	<select id="position" name="position" v-model="searchForm.position">
		<option value=""></option>
		<option value="1">班主任</option>
		<option value="2">讲师</option>
		<option value="3">学工主管</option>
		<option value="4">教研主管</option>
		<option value="5">咨询师</option>
	</select>

	<button type="submit">查询</button>
	<button type="reset">清空</button>
</form>

v-on 为html标签绑定事件（添加事件监听）

语法：v-on:事件名="方法名"，简写为@事件名="..."
注意：方法名需要在createApp中和data并列声明，方法中使用this.变量名访问data中的变量

示例：实现搜索栏旁边的查询和清空按钮的功能

<form class="search-form" action="/search" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name">

            <label for="gender">性别：</label>
            <select id="gender" name="gender" v-model="searchForm.gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label for="position">职位：</label>
            <select id="position" name="position" v-model="searchForm.position">
                <option value=""></option>
                <option value="1">班主任</option>
                <option value="2">讲师</option>
                <option value="3">学工主管</option>
                <option value="4">教研主管</option>
                <option value="5">咨询师</option>
            </select>

            <button type="button" v-on:click="search">查询</button>
            <button type="button" @click="clear">清空</button>
        </form>

<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

createApp({
	data(){
		return{
			searchForm:{
				name: '',
				gender:'',
				job:'',
			},
			empList: [...]
	},
	methods: {
		search(){
			console.log(this.searchForm);
		},
		clear(){
			this.searchForm = {
				name: '',
				gender:'',
				job:'',
			}
		}
	},
	...
}).mount('#container')
</script>

生命周期钩子方法

注意：重点掌握mounted周期，一般用于Vue加载完成后请求页面数据，如每次打开页面后自动刷新员工列表

createApp({
	data(){
		return{
			searchForm:{
				name: '',
				gender:'',
				job:'',
			},
			empList: []
		}
	},
	methods: {
		async search(){
			console.log(this.searchForm);
			let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
			this.empList = result.data.data;
			console.log(result.data);
		},
		clear(){
			this.searchForm = {
				name: '',
				gender:'',
				job:'',
			}
			this.search()
		}
	},
	mounted() {
		console.log('Vue挂载完成');
		this.search();
	},
        }).mount('#container')

Ajax：Asynchronous JavaScript And XML

Ajax：Asynchronous JavaScript And XML，异步的JavaScript和XML（Extensible Markup Language，可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构）。

作用

数据交换：通过Ajax可以给服务器发送请求，并获取服务器返回的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、对输入字段（用户名、密码等）是否可用的校验等等。

Axios：对原生的Ajax进行了封装，简化书写，快速开发

官网：https://axios-http.com/zh/
步骤：

引入Axios的js文件，参考官网
使用Axios发送请求，并获取响应结果

示例代码

<body>
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script><!--引入Axios的js文件-->
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {
            //axios发起异步请求
            //方式一：简洁，推荐
            axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result)=>{
                console.log(result.data);
            })
            
            //方式二：完整写法
            axios({
                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
                method: 'GET'
            }).then((result) => { //成功回调函数
                console.log(result.data);
            }).catch((err) => { //失败回调函数
                console.log(err);
            })
        })
        
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
            //axios发起异步请求
            //方式一：简洁，推荐
            axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result)=>{
                console.log(result.data);
            })
            
            //方式二：完整写法
            axios({
                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
                method: 'POST',
                data: 'id=1' //POST请求方式 , 请求体
            }).then((result) => { //成功回调函数
                console.log(result.data);
            }).catch((err) => { //失败回调函数
                console.log(err);
            })
        })
    </script>
</body>

async & await 异步操作变同步

可以通过async、await让异步变为同步操作，async用于声明一个异步方法，await用于等待异步任务的执行。

async search(){
	console.log(this.searchForm);
	let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
	this.empList = result.data.data;
	console.log(result.data);
 }

Vue+Ajax完整案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3; /* 灰色背景 */
            
            display: flex; /* flex弹性布局 */
            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */
            align-items: center; /* 垂直居中 */
        }
        .navbar h1 {
            margin: 0; /* 移除默认的上下外边距 */
            font-weight: bold; /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }
        .navbar a {
            color: white; /* 链接颜色为白色 */
            text-decoration: none; /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px; /* 控件之间的间距 */
            margin: 20px 0;
        }
        .search-form input[type="text"], .search-form select {
            padding: 5px; /* 输入框内边距 */
            width: 260px; /* 宽度 */
        }
        .search-form button {
            padding: 5px 15px; /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd; /* 边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: center; /* 左对齐 */
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .avatar {
            width: 30px;
            height: 30px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #b5b3b3; /* 灰色背景 */
            color: white; /* 白色文字 */
            text-align: center; /* 居中文本 */
            padding: 10px 0; /* 上下内边距 */
            margin-top: 30px;
        }

        #container {
            width: 80%; /* 宽度为80% */
            margin: 0 auto; /* 水平居中 */
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <h1>Tlias智能学习辅助系统</h1>
            <a href="#">退出登录</a>
        </div>
        {{searchForm}}
        <!-- 搜索表单区域 -->
        <form class="search-form" action="/search" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name">

            <label for="gender">性别：</label>
            <select id="gender" name="gender" v-model="searchForm.gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label for="job">职位：</label>
            <select id="job" name="job" v-model="searchForm.job">
                <option value=""></option>
                <option value="1">班主任</option>
                <option value="2">讲师</option>
                <option value="3">学工主管</option>
                <option value="4">教研主管</option>
                <option value="5">咨询师</option>
            </select>

            <button type="button" v-on:click="search">查询</button>
            <button type="button" @click="clear">清空</button>
        </form>

        <!-- 表格展示区 -->
        <table>
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <!-- 表格主体内容 -->
            <tbody>
                <tr v-for="(e, index) in empList" :key="e.id">
                    <td>{{index + 1}}</td>
                    <td>{{e.name}}</td>
                    <td>{{e.gender == 1?'男':'女'}}</td>
                    <td><img class="avatar" v-bind:src="e.image" v-bind:alt="e.name"></td> <!--插值表达式不能出现在标签内部-->
                    <td>
                        <!-- <span v-if="e.job == 1">班主任</span>
                        <span v-else-if="e.job == 2">讲师</span>
                        <span v-else-if="e.job == 3">学工主管</span>
                        <span v-else-if="e.job == 4">教研主管</span>
                        <span v-else-if="e.job == 5">咨询师</span>
                        <span v-else>咨询师</span> -->

                        <span v-show="e.job == 1">班主任</span>
                        <span v-show="e.job == 2">讲师</span>
                        <span v-show="e.job == 3">学工主管</span>
                        <span v-show="e.job == 4">教研主管</span>
                        <span v-show="e.job == 5">咨询师</span>
                        
                    </td>
                    <td>{{e.entrydate}}</td>
                    <td>{{e.updatetime}}</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                
            </tbody>
        </table>

        <!-- 页脚版权区域 -->
        <footer class="footer">
            <p>江苏传智播客教育科技股份有限公司</p>
            <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
        </footer>
    </div>

    <script src="js/axios.js"></script><!--引入Axios的js文件-->

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        
        createApp({
            data(){
                return{
                    searchForm:{
                        name: '',
                        gender:'',
                        job:'',
                    },
                    empList: []
                }
            },
            methods: {
                async search(){
                    console.log(this.searchForm);
                    let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
                    this.empList = result.data.data;
                    console.log(result.data);
                },
                clear(){
                    this.searchForm = {
                        name: '',
                        gender:'',
                        job:'',
                    }
                    this.search()
                }
            },
            mounted() {
                console.log('Vue挂载完成');
                this.search();
            },
        }).mount('#container')
        
        
        //通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
        // 1. 获取所有的tr标签
        let trs = document.querySelectorAll('tr');

        // 2. 为每一个tr标签添加事件监听
        for(let i = 0; i < trs.length; i++){
            trs[i].addEventListener('mouseenter', function(){ // mouseenter 鼠标进入
                trs[i].style.backgroundColor = '#f2e2e2';
            });
            
            trs[i].addEventListener('mouseleave', function(){ // mouseleave 鼠标离开
                trs[i].style.backgroundColor = '#fff';
            })
        }
    </script>
</body>
</html>

posted @ 2026-03-06 21:21 安河桥北i 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

安河桥北i的博客

安河桥北i的博客

AI+JavaWeb Web前端基础：Vue Ajax

Vue

Vue快速入门

安装插件

常用指令

v-for 列表渲染，遍历容器的元素或对象的属性

v-bind 动态为HTML标签绑定属性值，如设置href,src,style样式等

v-if和v-show控制元素的显示与隐藏

v-if

v-show

案例：员工列表数据渲染展示中职位渲染

v-model 双向数据绑定

v-on 为html标签绑定事件（添加事件监听）

生命周期钩子方法

Ajax：Asynchronous JavaScript And XML

作用

Axios：对原生的Ajax进行了封装，简化书写，快速开发

async & await 异步操作变同步

Vue+Ajax完整案例

公告

安河桥北i的博客

安河桥北i的博客

AI+JavaWeb Web前端基础：Vue Ajax

Vue

Vue快速入门

安装插件

常用指令

v-for 列表渲染，遍历容器的元素或对象的属性

v-bind 动态为HTML标签绑定属性值，如设置href,src,style样式等

v-if和v-show控制元素的显示与隐藏

v-if

v-show

案例：员工列表数据渲染展示中职位渲染

v-model 双向数据绑定

v-on 为html标签绑定事件（添加事件监听）

生命周期 钩子方法

Ajax：Asynchronous JavaScript And XML

作用

Axios：对原生的Ajax进行了封装，简化书写，快速开发

async & await 异步操作变同步

Vue+Ajax完整案例

公告

生命周期钩子方法