接口调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

异步

• JavaScript的执行环境是「单线程」
• 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
• 异步模式可以一起执行多个任务
• JS中常见的异步调用
  • 定时任何
  • ajax
  • 事件函数

promise

• 主要解决异步深层嵌套的问题
• promise 提供了简洁的API 使得异步操作更加容易

 <script type="text/javascript">/*1. Promise基本使用我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：         resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数*/var p = new Promise(function(resolve, reject){//2. 这里用于实现异步任务  setTimeoutsetTimeout(function(){var flag = false;if(flag) {//3. 正常情况resolve('hello');}else{//4. 异常情况reject('出错了');}}, 100);});//  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  p.then(function(data){console.log(data)},function(info){console.log(info)});</script>

基于Promise发送Ajax请求

 <script type="text/javascript">/*基于Promise发送Ajax请求*/function queryData(url) {#   1.1 创建一个Promise实例var p = new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) return;if(xhr.readyState == 4 && xhr.status == 200) {# 1.2 处理正常的情况resolve(xhr.responseText);}else{# 1.3 处理异常情况reject('服务器错误');}};xhr.open('get', url);xhr.send(null);});return p;}# 注意：  这里需要开启一个服务 # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了queryData('http://localhost:3000/data').then(function(data){console.log(data)#  1.4 想要继续链式编程下去 需要 return  return queryData('http://localhost:3000/data1');}).then(function(data){console.log(data);return queryData('http://localhost:3000/data2');}).then(function(data){console.log(data)});</script>

Promise 基本API

实例方法

.then()

• 得到异步任务正确的结果

.catch()

• 获取异常信息

.finally()

• 成功与否都会执行（不是正式标准）

  <script type="text/javascript">/*Promise常用API-实例方法*/// console.dir(Promise);function foo() {return new Promise(function(resolve, reject){setTimeout(function(){// resolve(123);reject('error');}, 100);})}// foo()//   .then(function(data){//     console.log(data)//   })//   .catch(function(data){//     console.log(data)//   })//   .finally(function(){//     console.log('finished')//   });// --------------------------// 两种写法是等效的foo().then(function(data){# 得到异步任务正确的结果console.log(data)},function(data){# 获取异常信息console.log(data)})# 成功与否都会执行（不是正式标准） .finally(function(){console.log('finished')});</script>

静态方法

.all()

• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

.race()

• Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

​

  <script type="text/javascript">/*Promise常用API-对象方法*/// console.dir(Promise)function queryData(url) {return new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) return;if(xhr.readyState == 4 && xhr.status == 200) {// 处理正常的情况resolve(xhr.responseText);}else{// 处理异常情况reject('服务器错误');}};xhr.open('get', url);xhr.send(null);});}var p1 = queryData('http://localhost:3000/a1');var p2 = queryData('http://localhost:3000/a2');var p3 = queryData('http://localhost:3000/a3');Promise.all([p1,p2,p3]).then(function(result){//   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]})Promise.race([p1,p2,p3]).then(function(result){// 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。console.log(result) // "HELLO TOM"})</script>

fetch

概览

• Fetch API是新的ajax解决方案 Fetch会返回Promise
• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
• fetch(url, options).then(）

  <script type="text/javascript">/*Fetch API 基本用法fetch(url).then()第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 */fetch('http://localhost:3000/fdata').then(function(data){// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据return data.text();}).then(function(data){//   在这个then里面我们能拿到最终的数据  console.log(data);})</script>

fetch请求参数（图片记录）

fetch API 中的 HTTP 请求

• fetch(url, options).then(）
• HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
  • 默认的是 GET 请求
  • 需要在 options 对象中 指定对应的 method method:请求使用的方法
  • post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body

   <script type="text/javascript">/*Fetch API 调用接口传递参数*/#1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 fetch('http://localhost:3000/books?id=123', {# get 请求可以省略不写 默认的是GET method: 'get'}).then(function(data) {# 它返回一个Promise实例对象，用于获取后台返回的数据return data.text();}).then(function(data) {# 在这个then里面我们能拿到最终的数据  console.log(data)});#1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   fetch('http://localhost:3000/books/456', {# get 请求可以省略不写 默认的是GET method: 'get'}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});#2.1  DELETE请求方式参数传递      删除id  是  id=789fetch('http://localhost:3000/books/789', {method: 'delete'}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});#3 POST请求传参fetch('http://localhost:3000/books', {method: 'post',# 3.1  传递数据 body: 'uname=lisi&pwd=123',#  3.2  设置请求头 headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});# POST请求传参fetch('http://localhost:3000/books', {method: 'post',body: JSON.stringify({uname: '张三',pwd: '456'}),headers: {'Content-Type': 'application/json'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});# PUT请求传参     修改id 是 123 的 fetch('http://localhost:3000/books/123', {method: 'put',body: JSON.stringify({uname: '张三',pwd: '789'}),headers: {'Content-Type': 'application/json'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});</script>

fetchAPI 中 响应格式

• 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

/*Fetch响应结果的数据格式*/fetch('http://localhost:3000/json').then(function(data){// return data.json();   //  将获取到的数据使用 json 转换对象return data.text(); //  //  将获取到的数据 转换成字符串 }).then(function(data){// console.log(data.uname)// console.log(typeof data)var obj = JSON.parse(data);console.log(obj.uname,obj.age,obj.gender)})

axios

• 基于promise用于浏览器和node.js的http客户端
• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据
• 能转换请求和响应数据

axios基础用法

• get和 delete请求传递参数
  • 通过传统的url 以 ? 的形式传递参数
  • restful 形式传递参数
  • 通过params 形式传递参数

• post 和 put 请求传递参数
  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数

    # 1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(ret){ #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面// 注意data属性是固定的用法，用于获取后台的实际数据// console.log(ret.data)console.log(ret)})# 2.  get 请求传递参数# 2.1  通过传统的url  以 ? 的形式传递参数axios.get('http://localhost:3000/axios?id=123').then(function(ret){console.log(ret.data)})# 2.2  restful 形式传递参数 axios.get('http://localhost:3000/axios/123').then(function(ret){console.log(ret.data)})# 2.3  通过params  形式传递参数 axios.get('http://localhost:3000/axios', {params: {id: 789}}).then(function(ret){console.log(ret.data)})#3 axios delete 请求传参     传参的形式和 get 请求一样axios.delete('http://localhost:3000/axios', {params: {id: 111}}).then(function(ret){console.log(ret.data)})# 4  axios 的 post 请求# 4.1  通过选项传递参数axios.post('http://localhost:3000/axios', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})# 4.2  通过 URLSearchParams  传递参数 var params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '111');axios.post('http://localhost:3000/axios', params).then(function(ret){console.log(ret.data)})#5  axios put 请求传参   和 post 请求一样 axios.put('http://localhost:3000/axios/123', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})

axios的响应结果

axios 全局配置

#  配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios 拦截器

• 请求拦截器
  • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

• 响应拦截器
  • 响应拦截器的作用是在接收到响应后进行一些操作
    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

 # 1. 请求拦截器 axios.interceptors.request.use(function(config) {console.log(config.url)# 1.1  任何请求都会经过这一步   在发送请求之前做些什么   config.headers.mytoken = 'nihao';# 1.2  这里一定要return   否则配置不成功  return config;}, function(err){#1.3 对请求错误做点什么    console.log(err)})#2. 响应拦截器 axios.interceptors.response.use(function(res) {#2.1  在接收响应做些什么  var data = res.data;return data;}, function(err){#2.2 对响应错误做点什么  console.log(err)})

async 和 await

async 和await的结合promise用法

• async作为一个关键字放到函数前面
  • 任何一个async函数都会隐式返回一个promise
• await关键字只能在使用async定义的函数中使用
  • ​ await后面可以直接跟一个 Promise实例对象
  • ​ await函数不能单独使用
• async/await 让异步代码看起来、表现起来更像同步代码

     # 1.  async 基础用法# 1.1 async作为一个关键字放到函数前面async function queryData() {# 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象var ret = await new Promise(function(resolve, reject){setTimeout(function(){resolve('nihao')},1000);})// console.log(ret.data)return ret;}# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程queryData().then(function(data){console.log(data)})#2.  async    函数处理多个异步函数axios.defaults.baseURL = 'http://localhost:3000';async function queryData() {# 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   var info = await axios.get('async1');#2.2  让异步代码看起来、表现起来更像同步代码var ret = await axios.get('async2?info=' + info.data);return ret.data;}queryData().then(function(data){console.log(data)})

图书列表案例

1. 基于接口案例-获取图书列表

• 导入axios 用来发送ajax
• 把获取到的数据渲染到页面上

  <div id="app"><div class="grid"><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><!-- 5.  把books  中的数据渲染到页面上   --><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date }}</td><td><a href="">修改</a><span>|</span><a href="">删除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script>1.  导入axios   <script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*图书管理-添加图书*/# 2   配置公共的url地址  简化后面的调用方式axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res) {return res.data;}, function(error) {console.log(error)});var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {# 3 定义一个方法 用来发送 ajax # 3.1  使用 async  来 让异步的代码  以同步的形式书写 queryData: async function() {// 调用后台接口获取图书列表数据// var ret = await axios.get('books');// this.books = ret.data;# 3.2  发送ajax请求  把拿到的数据放在books 里面   this.books = await axios.get('books');}},mounted: function() {#  4 mounted  里面 DOM已经加载完毕  在这里调用函数  this.queryData();}});</script>

2 添加图书

• 获取用户输入的数据 发送到后台
• 渲染最新的数据到页面上

 methods: {handle: async function(){if(this.flag) {// 编辑图书// 就是根据当前的ID去更新数组中对应的数据this.books.some((item) => {if(item.id == this.id) {item.name = this.name;// 完成更新操作之后，需要终止循环return true;}});this.flag = false;}else{# 1.1  在前面封装好的 handle 方法中  发送ajax请求  # 1.2  使用async  和 await 简化操作 需要在 function 前面添加 async   var ret = await axios.post('books', {name: this.name})# 1.3  根据后台返回的状态码判断是否加载数据 if(ret.status == 200) {# 1.4  调用 queryData 这个方法  渲染最新的数据 this.queryData();}}// 清空表单this.id = '';this.name = '';},        }

3 验证图书名称是否存在

• 添加图书之前发送请求验证图示是否已经存在
• 如果不存在 往后台里面添加图书名称
  • 图书存在与否只需要修改submitFlag的值即可

 watch: {name: async function(val) {// 验证图书名称是否已经存在// var flag = this.books.some(function(item){//   return item.name == val;// });var ret = await axios.get('/books/book/' + this.name);if(ret.status == 1) {// 图书名称存在this.submitFlag = true;}else{// 图书名称不存在this.submitFlag = false;}}
},

4. 编辑图书

• 根据当前书的id 查询需要编辑的书籍
• 需要根据状态位判断是添加还是编辑

 methods: {handle: async function(){if(this.flag) {#4.3 编辑图书   把用户输入的信息提交到后台var ret = await axios.put('books/' + this.id, {name: this.name});if(ret.status == 200){#4.4  完成添加后 重新加载列表数据this.queryData();}this.flag = false;}else{// 添加图书var ret = await axios.post('books', {name: this.name})if(ret.status == 200) {// 重新加载列表数据this.queryData();}}// 清空表单this.id = '';this.name = '';},toEdit: async function(id){#4.1  flag状态位用于区分编辑和添加操作this.flag = true;#4.2  根据id查询出对应的图书信息  页面中可以加载出来最新的信息# 调用接口发送ajax 请求  var ret = await axios.get('books/' + id);this.id = ret.id;this.name = ret.name;},

5 删除图书

• 把需要删除的id书籍 通过参数的形式传递到后台

   deleteBook: async function(id){// 删除图书var ret = await axios.delete('books/' + id);if(ret.status == 200) {// 重新加载列表数据this.queryData();}}

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body><div id="app"><div class="grid"><div><h1>图书管理</h1><div class="book"><div><label for="id">编号：</label><input type="text" id="id" v-model='id' disabled="false" v-focus><label for="name">名称：</label><input type="text" id="name" v-model='name'><button @click='handle' :disabled="submitFlag">提交</button></div></div></div><div class="total"><span>图书总数：</span><span>{{total}}</span></div><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent='deleteBook(item.id)'>删除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*图书管理-添加图书*/axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res){return res.data;}, function(error){console.log(error)});Vue.directive('focus', {inserted: function (el) {el.focus();}});Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);})var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {handle: async function(){if(this.flag) {// 编辑图书var ret = await axios.put('books/' + this.id, {name: this.name});if(ret.status == 200){// 重新加载列表数据this.queryData();}this.flag = false;}else{// 添加图书var ret = await axios.post('books', {name: this.name})if(ret.status == 200) {// 重新加载列表数据this.queryData();}}// 清空表单this.id = '';this.name = '';},toEdit: async function(id){// flag状态位用于区分编辑和添加操作this.flag = true;// 根据id查询出对应的图书信息var ret = await axios.get('books/' + id);this.id = ret.id;this.name = ret.name;},deleteBook: async function(id){// 删除图书var ret = await axios.delete('books/' + id);if(ret.status == 200) {// 重新加载列表数据this.queryData();}},queryData: async function(){// 调用后台接口获取图书列表数据// var ret = await axios.get('books');// this.books = ret.data;this.books = await axios.get('books');}},computed: {total: function(){// 计算图书的总数return this.books.length;}},watch: {name: async function(val) {// 验证图书名称是否已经存在// var flag = this.books.some(function(item){//   return item.name == val;// });var ret = await axios.get('/books/book/' + this.name);if(ret.status == 1) {// 图书名称存在this.submitFlag = true;}else{// 图书名称不存在this.submitFlag = false;}}},mounted: function(){// var that = this;// axios.get('books').then(function(data){//   console.log(data.data)//   that.books = data.data;// })// axios.get('books').then((data)=>{//   console.log(data.data)//   this.books = data.data;// })this.queryData();}});</script>
</body>
</html>

参考接口文档

图书管理后台接口文档

基准路径： http://localhost:3000/

获取图书列表数据

• 路径：books
• 请求参数：无
• 响应结果

[{"id": "4","name": "红楼梦","date": 2525609975000
}, {"name": "三国演义","date": 2525609975000,"id": 5
}, {"name": "水浒传","date": 2525609975000,"id": 6
}, {"name": "西游记","date": 2525609975000,"id": 7
}]

添加图书-提交图书信息

• 路径：books
• 请求参数
  • name : 图书名称
• 响应结果

{"status": 200  // (200表示成功；500表示失败)
}

编辑图书-根据ID查询图书信息

• 路径：books/:id
• 请求参数：无
• 响应结果

{"name":"西游记","date":2525609975000,"id":7
}

编辑图书-提交图书信息

• 路径：books/:id
• 请求参数
  • name : 图书名称
• 响应结果

{"status": 200  // (200表示成功；500表示失败)
}

删除图书信息

• 路径：books/:id
• 请求参数: 无
• 响应结果

{"status": 200  // (200表示成功；500表示失败)
}

验证图书名称是否存在

• 路径：books/book/:name
• 请求参数:无
• 响应结果

{"status": 1  // (1表示存在；2表示不存在)
}

vue-day04-vue前端交互相关推荐

1. [vue] 你有使用做过vue与原生app交互吗？说说vue与ap交互的方法

   [vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法 我的做法就是让app在webview把app的 ...

2. vue简易微前端项目搭建（一）：项目背景及简介

   github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...

3. Vue，js前端实现语音实时转换文字，前端实现浏览器语音实时转换为文字，vue阿里云语音转文字

   Vue,js前端实现浏览器语音实时转换文字功能详解 1.首先总结一下,前端使用实时语音需要使用到HZRecorder.js这个JS文件来实现获取浏览器麦克风话筒权限 大注意:HZRecorder.js ...

4. Vue.js高效前端开发 • 【初识Vue.js】

   全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

5. spring boot与VUE的前后端交互

   一.准备 默认认为会了简单的spring boot知识和vue知识 1.前端 先安装好vue cli,没有的点这里 2.后端 后端IDEA安装vue.js插件就OK了 二.创建前端VUE项目 就进入C ...

6. 尤雨溪携手字节前端专家，畅聊 Vue 3.0 前端技术新趋势

   前端这个技术领域,在应用化以后,涵盖的内容越来越广--纯表现层.应用实现层.应用架构层.基础设施层到改进开发范式的理念层,都有太多可以去钻研的技术点,衍生出了无数前端开发的发展路线."别更新 ...

7. Vue+ElementUI纯前端技术实现对表格数据的增删改查

   Vue+ElementUI纯前端技术实现对表格数据的增删改查 页面展示效果 一.页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...

8. SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片

   场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...

9. html vue分页,Vue.js bootstrap前端实现分页和排序

   写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足 ...

10. vue脚手架vue数据交互_学习Vue：3分钟的交互式Vue JS教程

    vue脚手架vue数据交互 Vue.js is a JavaScript library for building user interfaces. Last year, it started to ...

最新文章

1. AI一分钟 | ​被大家吐槽的网红机器人索菲亚开微博了；阿里人工智能团队iDST获得道路场景分割三项第一
2. Jerry本地安装SAP Kyma的一些失败尝试
3. 计算机专业英语的理解,计算机专业英语之理解网络地址
4. sql中替换逗号为换行符_使用T-SQL将逗号或其他定界符转换为SQL Server中的表或列表
5. html5 css练习 定位布局
6. MODIS数据的简介和下载（二）——MODIS数据下载方式（FTP）
7. airflow问题系列2 —— task保持running假死状态
8. 电话号码的字母组合---2022/01/23
9. Github-Client（ANDROID）开源之旅（四) ------ 简介Roboguice
10. Android Studio分析工具ApkAnalyzer基本使用
11. 形象标识 新松机器人_新松机器人自动化股份有限公司
12. 史上首次！苹果谷歌高调合作，打通iOS和安卓，蓝牙匿名追踪新冠接触者，5月上线
13. devC++代码格式化对齐的快捷键
14. 小米手机风筝守护显示服务器异常,风筝守护只能小米用吗
15. 利用python进行png图像的读写操作
16. 如何打造爆款付费文章
17. 2021年度中国科学之十大进展
18. 阿里云 mysql 收费_阿里云MySQL云数据库价格表（收费标准） - 新手站长网
19. SpringBoot整合Shiro实现一键登录和免密码登录功能
20. AbsoluteLayout

热门文章

1. LeetCode 506. 相对名次（map）
2. LeetCode 1282. 用户分组（桶排序思想）
3. vant toast 指定挂载到指定位置_docker卷挂载技术
4. python谱聚类算法_谱聚类Spectral clustering(SC)
5. 微信小程序最常用的布局——Flex布局
6. delphi64位 char数组转换string中文乱码_使用位运算、值交换等方式反转java字符串-共四种方法...
7. android发展的外文文献综述,android文献综述总结.docx
8. spark调用python_在MRS集群中使用Python3.7运行PySpark程序，调用RDD的take函数报错处理...
9. ACL'21 | 弱标签的垃圾数据，也能变废为宝！
10. 惊呆！不用一张图片，却训出个图像识别SOTA？