Ja基础及开发教程 6

用户管理前端实现项目6目录01jQuery调用接口02vue调用接口6.1JavaWeb应用开发项目教程(SpringBoot+Mybatis)jQuery调用接口方法一$(function(){ //代码功能});方法二$(document).ready(function(){ //代码功能});方法三$().ready(function(){ //代码功能});任务6.1

jQuery调用接口-页面加载完成后执行方法$(document).ready()的三种简写，表示当DOM（文档对象模型）

已经加载，并且页面（包括图像）已经完全呈现时，会执行ready()事件。$.ajax({url:"/data",//接口URLtype:"GET",//请求类型，可以是GET、POST等dataType:"JSON",//期望从服务器返回的数据类型success:function(response){//请求成功时的回调函数console.log("Response:",response);//这里处理返回的数据},error:function(xhr,status,error){//请求失败时的回调函数console.error("Error:",error);//这里处理错误情况}});任务6.1

jQuery调用接口-$.ajax()调用获取数据接口成功时，可以在success回调函数中处理返回的数据；失败时，可以在error回调函数中处理错误信息url为API接口地址type为HTTP方法（POST、GET、DELETE、PUT等）dataType为返回的数据类型（TEXT、HTML、JSON、XML等）$.ajax({ url:"/data", type:"POST", data:JSON.stringify({ key:"value" }),//发送到服务器的数据 dataType:"JSON", contentType:"application/json;charset=utf-8", success:function(response){ //处理响应 }, error:function(xhr,status,error){ //处理错误 }});任务6.1

jQuery调用接口-$.ajax()调用添加和修改数据接口JSON.stringify()方法将JavaScript对象序列化为JSON字符串表示请求体中的数据是JSON格式，并且使用UTF-8编码。当设置为向服务器请求数据type:"GET"的时候，一般不设置contentType属性如果接口为修改数据，则是将type:"POST"修改为type:"PUT"$.ajax({ url:"/data", type:"DELETE", success:function(response){ //处理响应 }, error:function(xhr,status,error){ //处理错误 }});任务6.1

jQuery调用接口$.ajax()调用删除数据接口给ID值为#btnID的元素绑定click()单击事件$("#btnID").click(function(){ //代码功能});@RestController@CrossOrigin(origins="*")publicclassHelloController{……}任务6.1

jQuery调用接口-后端实现跨域common.js文件实现对网络请求进行封装。varhostName=":8082/api";//接口公共的ip或者域名//path里定义了所有的接口varpath={ 'userList':hostName+'/users/list',//获取所有用户数据 'userPage':hostName+'/users/page',//获取分页用户数据 'userCount':hostName+'/users/count',//获取用户记录总数 'userRead':hostName+'/users/',//获取一个用户数据 'userInsert':hostName+'/user',//添加用户 'userUpdate':hostName+'/user',//修改用户 'userDelete':hostName+'/user',//删除用户 'userLogin':hostName+'/login',//用户登录 'userNews':hostName+'/news/userId',//获取一个用户所有新闻};任务6.1

jQuery调用接口-项目结构1.$.each()方法用于遍历数组或jQuery对象。2.append()方法在被选元素的结尾（仍然在内部）插入指定内容。3.window.location.href方法用于获取或设置当前页面URL的属性。newURLSearchParams方法用于处理URL的查询字符串。举例：URL=:8848/jQuery/index.html?id1=123&id2=456●window.location.href=URL=":8848/jQuery/index.html?id1=123&id2=456"●url.search="?id1=123&id2=456"●params.size=2（id1和id2两个查询字符串参数）●params.get("id2")="456"（获取键为id2的键值对的值）任务6.1

jQuery调用接口-常用方法4.substring()方法用于从字符串中提取指定长度的子字符串，共有两个参数，起始位置和子字符串的长度。例如str.substring(6,11)可以从字符串"HelloWorld"中提取"World"这个子字符串。5.设置ID为myTextbox的文本框的值为"Hello,World!"的方法：$("#myTextbox").val("Hello,World!")。6.获取ID为myTextbox的文本框的值的方法：$("#myTextbox").val()。任务6.1

jQuery调用接口-常用方法6.2JavaWeb应用开发项目教程(SpringBoot+Mybatis)Vue调用接口1.下载安装Node.js。通过Node.js官方网站下载Node.js，并完成安装；2.配置环境变量。右击“此电脑”，从弹出的快捷菜单中选择“属性”，在“设置”窗口中依次选择“高级系统设置”→“高级”→“环境变量”→“系统变量”→“Path”→“编辑”→“新建”，输入Node.js的安装路径；3.查看node版本。打开CMD命令提示符→node-v命令查看Node.js版本→npm-v命令查看npm版本。任务6.2Vue调用接口-环境配置1.项目新建。HBuilderX→新建→项目→普通项目→vue3-cli默认项目→选择路径→输入项目名称。2.项目运行(1)安装终端插件。HBuilderX→视图→显示终端，安装终端插件。(2)安装路由router。终端中输入命令npminstallvue-router@4安装路由。(3)项目运行。打开项目中的index.html文件，终端中输入命令npmrundev，项目运行成功后，打开浏览器访问http://localhost:3000/。3.axios基础。终端中输入命令npminstallaxios或者yarnaddaxios来安装axios。任务6.2Vue调用接口-新建项目任务6.2Vue调用接口-项目结构1.node_modules：存放当前项目所需依赖，一般不可以移植给其他电脑环境。2.src：Vue项目的核心部分，包含了项目的源代码。以下是常见的子文件夹：(1)assets：存放静态资源文件，如图片、字体、样式文件等；(2)components：存放可复用的Vue组件。开发者可以创建自定义的组件，并将其在应用程序的其他地方进行引用和复用；(3)router：需要用户创建，用来组织和配置应用的路由；(4)views：需要用户创建，用来组织和管理应用的各个视图或页面组件；(5)App.vue：应用程序的根组件，所有页面组件的容器；(6)main.js：应用程序的入口文件，用于初始化Vue实例和加载其他依赖模块。axios.get('/users').then(response=>{console.log(response.data);}).catch(error=>{console.error('Errorfetchingdata:',error);});任务6.2Vue调用接口-GET请求、POST请求constuserData={name:'JohnDoe',email:'john@'};

axios.post('/users',userData).then(response=>{console.log('Usercreated:',response.data);}).catch(error=>{console.error('Errorcreatinguser:',error);});routes数组在VueRouter中的作用是定义和管理多个路由规则。constrouter=createRouter({ routes:[{ path:'/', component:Home, }, { path:'/login', component:()=>import('../views/Login.vue') }, ], history:createWebHistory()})createRouter()函数用于创建一个路由实例，routes数组用于定义路径与组件的映射关系。每个路由规则都是一个对象，包含path、name、component等属性，用于指定URL路径、路由名称和对应的组件。component可以使用组件名引入，也可以使用动态的import()进行懒加载。任务6.2Vue调用接口-配置路由1.首先created是最先执行的，它是一个生命周期，也叫钩子函数，用于页面还没加载完毕时发送请求，初始化data里的值。2.data一般用来存放Vue中的变量，通过return将数据返回到created中。3.methods用来写相关模块的函数以及功能的实现，格式为“async+方法名”，通常通过发送请求请求到后台数据。4.computed是界于created和mounted之间发生的，用来计算属性和优化性能。5.mounted是加载完DOM操作后才会触发，它和created一样只会执行一次，此时页面已经渲染完成，通常用于存放需要渲染的内容。任务6.2Vue调用接口-基本结构v-for指令为循环语句，采用siteinsites形式的特殊语法，sites表示数据源数组，site表示数组元素迭代的别名。v-for可以绑定数据到数组来渲染一个列表，代码如下。<divid