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

AI+JavaWeb Vue Ajax

news 2026/5/11 20:51:59

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" 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>

查看全文

http://www.jsqmd.com/news/444455/