vue-day04-vue前端交互

文章目录

      • 接口调用方式
      • 异步
      • promise
      • 基于Promise发送Ajax请求
      • Promise 基本API
        • 实例方法
          • .then()
          • .catch()
          • .finally()
        • 静态方法
          • .all()
          • .race()
      • fetch
        • 概览
        • fetch请求参数（图片记录）
        • fetch API 中的 HTTP 请求
        • fetchAPI 中 响应格式
      • axios
        • axios基础用法
        • axios的响应结果
        • axios 全局配置
        • axios 拦截器
      • async 和 await
      • 图书列表案例
        • 1. 基于接口案例-获取图书列表
        • 2 添加图书
        • 3 验证图书名称是否存在
        • 4. 编辑图书
        • 5 删除图书
        • 案例
        • 参考接口文档
  • 图书管理后台接口文档
    • 获取图书列表数据
    • 添加图书-提交图书信息
    • 编辑图书-根据ID查询图书信息
    • 编辑图书-提交图书信息
    • 删除图书信息
    • 验证图书名称是否存在

image-20200808122329009

image-20200808122511676

image-20200808122945153

image-20200808124321601

image-20200808124711353

接口调用方式

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

异步

image-20200808140614385

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

promise

image-20200808140528422

image-20200808142211558

  • 主要解决异步深层嵌套的问题
  • 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>

image-20200808143716091

image-20200808145210624

基于Promise发送Ajax请求

image-20200808173130221

 <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

实例方法

image-20200808175805212

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

静态方法

image-20200808182653380

.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

概览

image-20200808200742662

  • 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请求参数（图片记录）

image-20200808201607862

image-20200808201704222

image-20200808202340785

image-20200808202631765

image-20200808203038874

image-20200808204006387

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 中 响应格式

image-20200808205123686

  • 用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

image-20200808205418134

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

axios基础用法

image-20200809120147267

image-20200809120612548

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

image-20200809121106717

image-20200809121544387

  • 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的响应结果

image-20200809121746428

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 拦截器

image-20200809122614116

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

image-20200809123016906

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

image-20200809123617936

image-20200809140953268

  • 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)})

图书列表案例

image-20200809141108655

image-20200809141121361

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表示不存在)
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/482642.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用数学范畴定义生命的尝试

用数学范畴定义生命的尝试

来源&#xff1a;CreateAMind介绍一篇关于生命构建的论文Polynomial Life: the Structure of Adaptive Systems Toby St. Clere Smithe Topos Institute tobytopos.institute关键词&#xff1a;精确地形式化概念&#xff1b;是什么赋予了物理系统生命&#xff1b;贝叶斯、 信念…
阅读更多...
git-从入门到熟悉

git-从入门到熟悉

文章目录Git历史Git与svn对比SvnGitgit工作流程Git的安装软件下载软件安装安装git for windows安装TortoiseGit安装中文语言包使用git管理文件版本创建版本库使用GitBash使用TortoiseGit添加文件添加文件过程工作区和暂存区修改文件提交修改查看修改历史差异比较还原修改删除文…
阅读更多...
王飞跃谈正来临的第五次工业革命：“未来一定有多个平行的你”

王飞跃谈正来临的第五次工业革命：“未来一定有多个平行的你”

来源&#xff1a;来源&#xff1a;南方周末王飞跃&#xff0c;中国自动化学会副理事长兼秘书长&#xff0c;中科院复杂系统管理与控制国家重点实验室主任。其主要研究领域为智能科学、社会计算、平行系统、知识自动化和复杂系统的建模、分析与管理&#xff0c;是智能控制方面的…
阅读更多...
著名的假设“缸中之脑”，我们怎么确定自己不是活在电脑程序中？

著名的假设“缸中之脑”，我们怎么确定自己不是活在电脑程序中？

来源&#xff1a;科学的乐园看过电影《黑客帝国》吗&#xff0c;或者玩过游戏《恶灵附身》吗&#xff1f;黑客帝国剧照在电影《黑客帝国》中&#xff0c;主角发现自己所在的“现实世界”实际上是由一个计算机人工智能系统控制。也就是说他的世界实际上是一个由程序编码的虚拟世…
阅读更多...
01_MySQL基础课堂笔记

01_MySQL基础课堂笔记

文章目录数据库的基本概念MySQL数据库软件SQLDDL:操作数据库、表DML&#xff1a;增删改表中数据DQL&#xff1a;查询表中的记录1.概览2. 基础查询3. 条件查询数据库的基本概念 MySQL数据库软件 安装卸载配置 SQL 数据库的基本概念 1. 数据库的英文单词&#xff1a; DataBa…
阅读更多...
从“诺奖级”成果到“非主观造假”，时隔6年，韩春雨带着原一作，再发高分文章！...

从“诺奖级”成果到“非主观造假”，时隔6年，韩春雨带着原一作，再发高分文章！...

来源&#xff1a;募格课堂、科学网2022年1月21日&#xff0c;河北科技大学韩春雨团队在Nucleic Acids Research&#xff08;IF17&#xff09;在线发表题为“A Cas6-based RNA tracking platform functioning in a fluorescence-activation mode ”的研究论文。在这篇新论文中&a…
阅读更多...
02_MySQL约束课堂笔记

02_MySQL约束课堂笔记

文章目录DQL:查询语句排序插叙概览聚合函数分页查询约束非空约束唯一约束主键约束外键约束数据库的设计一对多/多对多/一对一范式数据库的备份和还原数据库的备份和还原1. DQL:查询语句1. 排序查询2. 聚合函数3. 分组查询4. 分页查询2. 约束 3. 多表之间的关系 4. 范式 5. 数据…
阅读更多...
科技热点思考：元宇宙发展及其风险挑战

科技热点思考：元宇宙发展及其风险挑战

来源&#xff1a;创新研究2021年10月&#xff0c;坐拥30亿用户的全球社交巨头脸书&#xff08;Facebook&#xff09;更名“Meta”引爆元宇宙概念&#xff0c;2021年成为当之无愧的“元宇宙元年”。企业抢占高地、资本利益冲动、媒体舆论炒作、个体对虚拟世界的向往等多种因素促…
阅读更多...
从《黑客帝国》说起，我们如何证明这个世界不是一个系统？

从《黑客帝国》说起，我们如何证明这个世界不是一个系统？

大数据文摘出品来源&#xff1a;nautil尽管《黑客帝国》第四部带给我们的震撼已不如前作&#xff0c;但我们仍能回想起20多年前看第一部时的激动。以及那样的一部作品带给我们的思考。正如在电影开头&#xff0c;尼奥的身体和大脑封锁在一个非模拟世界的吊舱里&#xff0c;与另…
阅读更多...
day05_vue路由

day05_vue路由

文章目录1.路由的概念2.前端路由的初体验3.Vue Router简介4.Vue Router的使用步骤(★★★)5.嵌套路由&#xff0c;动态路由的实现方式A.嵌套路由的概念(★★★)B.动态路由匹配(★★★)7.命名路由以及编程式导航A.命名路由&#xff1a;给路由取别名B.编程式导航(★★★)8.实现后…
阅读更多...
Meta旨在打造世界上最快的人工智能超级计算机

Meta旨在打造世界上最快的人工智能超级计算机

来源&#xff1a;ScienceAI编辑&#xff1a;萝卜皮Facebook 的母公司 Meta 表示&#xff0c;它已经建造了一台世界上最快的研究超级计算机。Meta 研究人员 Kevin Lee 和 Shubho Sengupta 在今天的博客文章中写道&#xff0c;到今年年中&#xff0c;系统的扩展完成后&#xff0c…
阅读更多...
day07-vue项目-搭建项目到登录功能

day07-vue项目-搭建项目到登录功能

文章目录1.电商业务概述2.项目初始化3.码云相关操作B.安装gitD.在本地创建公钥&#xff1a;在终端运行&#xff1a;ssh-keygen -t rsa -C "xxxxxx.com"4.配置后台项目A.安装phpStudy并导入mysql数据库数据B.安装nodeJS&#xff0c;配置后台项目,从终端打开后台项目vu…
阅读更多...
SSE,MSE,RMSE,R-square指标讲解

SSE,MSE,RMSE,R-square指标讲解

SSE(和方差、误差平方和)&#xff1a;The sum of squares due to errorMSE(均方差、方差)&#xff1a;Mean squared errorRMSE(均方根、标准差)&#xff1a;Root mean squared errorR-square(确定系数)&#xff1a;Coefficient of determinationAdjusted R-square&#xff1a;D…
阅读更多...
互联互通下的超级App价值重构

互联互通下的超级App价值重构

来源&#xff1a;虎嗅APP题图&#xff1a;视觉中国站在岁末回看&#xff0c;这过去的一年&#xff0c;发生了无数影响深远的事件&#xff1a;反垄断政策落地、用户存量争夺愈演愈烈、商业创新乏力……互联网人突然发现&#xff0c;以往基于流量的增长打法逐渐失灵。与此同时&am…
阅读更多...
WCF进阶:将编码后的字节流压缩传输

WCF进阶:将编码后的字节流压缩传输

在前面两篇文章WCF进阶&#xff1a;将消息正文Base64编码和WCF进阶:为每个操作附加身份信息中讲述了如何通过拦截消息的方式来记录或者修改消息&#xff0c;这种方式在特定条件下可以改变消息编码格式&#xff0c;但实现方式并不规范&#xff0c;而且使用范围也有限制。 WCF缺省…
阅读更多...
物理学四大神兽，除了“薛定谔的猫”, 你还知道哪几个？

物理学四大神兽，除了“薛定谔的猫”, 你还知道哪几个？

来源 &#xff1a; 逗逼的500T硬盘物理学是一门研究物质运动最一般规律和物质基本结构的学科。分为纯物理学和多学科物理学&#xff0c;其中的纯物理学又分为&#xff1a;1.经典力学&#xff1b;2.热力学和统计力学&#xff1b;3.电磁学&#xff1b;4.相对论&#xff1b;5.量子…
阅读更多...
JDBC-01-快速入门

JDBC-01-快速入门

文章目录01 JDBC快速入门02 JDBC各个类详解03 JDBC之CRUD练习04 ResultSet类详解05 JDBC登录案例练习抽取JDBC工具类 &#xff1a; JDBCUtils练习06 PreparedStatement类详解07 JDBC事务管理目标 1. JDBC基本概念 2. 快速入门 3. 对JDBC中各个接口和类详解 01 JDBC快速入门 1…
阅读更多...
研究速递：预测学习——神经元高效运作的最佳策略

研究速递：预测学习——神经元高效运作的最佳策略

来源&#xff1a;集智俱乐部作者&#xff1a;袁郭玲、梁金编辑&#xff1a;邓一雪摘要了解大脑如何学习有助于制造具有与人类类似智力水平的机器。之前有理论提出&#xff0c;大脑可能是根据预测编码的原理运行。然而&#xff0c;对于预测系统如何在大脑中实现还没有很好的解释…
阅读更多...
破解人工智能系统的四种攻击方法！

破解人工智能系统的四种攻击方法！

来源&#xff1a;未来科技前沿没有人喜欢早上起床&#xff0c;但现在人工智能驱动的算法可以设置我们的闹钟、管理我们家中的温度设置以及选择适合我们心情的播放列表&#xff0c;贪睡按钮的使用越来越少。人工智能安全辅助系统使我们的车辆更安全&#xff0c;人工智能算法优化…
阅读更多...
PowerDesigner-快速入门（极简教程）

PowerDesigner-快速入门（极简教程）

文章目录3. PowerDesigner3.1 PowerDesigner介绍3.2 PowerDesigner使用3.2.1 创建物理数据模型3.2.2 从PDM导出SQL脚本3.2.3 逆向工程3.2.4 生成数据库报表文件3. PowerDesigner 3.1 PowerDesigner介绍 PowerDesigner是Sybase公司的一款软件&#xff0c;使用它可以方便地对系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023