4.Vue3-后台数据：Axios&Mock&APIFox&HTTP

4.Vue3-后台数据：Axios&Mock&APIFox&HTTP

那只是一种体验而已，就像打个球吃个饭一样正常，之所以需要注意不瞎搞是为了安全和健康着想，除此之外的其他意义都是社会固有意识强行赋予的。不是说谁干了这事就脏了不值钱了啥的，大家是人。

一个不爱自己的人不被别人爱也是正常的

袁农平解决了肚子里的饿，却解决不了性的饿。网络上看似离谱的人，本质都是因为饿了。

峰哥的教诲就像是站在饿鬼旁边痛骂，有的人突然惊醒，看到了自己魔怔的丑态，有的人气急败坏，痛骂。

但本质上都没有解决性压抑的饥渴。言语是无法充饥的，不论采取什么方式，健身也好，赚钱也罢，

当b友们吃上肉的时候，真正的饿鬼就消失了，正常人就恢复了。

那天 重瞳女将我带到上界并救活了我 她看着我啧啧称奇并摇头 说:“资质很好 只可惜路走歪了 。”
我没想到 我会输 我不甘 真的不甘 重瞳自古不败 我怎么会败给那个年少被我挖骨的弟弟。
大意也好，轻敌也罢 但就是输了 我不服 重瞳的最高奥义还没施展 。
“我当世无敌，怎能有败绩！重瞳自古不败！”我不甘的怒吼。
“如果重瞳自古不败，那败的是谁？”重瞳女突然意味深长的看着我。
我愣住了，重瞳当世无敌，那败的不就是我吗…是我石毅？
“我自出生无敌手，在下界力压八域英杰，上界当如此！”我不承认，怎么可能败的是我？
“那败的就是重瞳了？所以你输在了重瞳上？”重瞳女又反问。
“这…”我语塞。
“那既然败的不是重瞳，也不是你，那败的是谁？”重瞳女又问。
我回答不上来。
“换句话说，你要是没有了重瞳，就没有那无敌心，无法力压天下天骄了？”重瞳女再次询问。
“所以无敌的是你，还是重瞳？”重瞳女连续的发问，引我深思。
最后，她又说了一句:“重瞳本是无敌路，何须再借他人骨？还是你对你的重瞳不自信，需要用至尊骨再去弥补自身？”
“我不同意。如果有一个高的起点，为什么要舍弃呢，有更好的条件，自然能成为更强的至尊！”我反驳。
“当你太依赖一种术，或是外物时，其实是你对你自身的不自信，不否认有重瞳或者是至尊骨会让你走的更远，但这也是你对自身实力的一种不自信。无敌的信念来自内心，从内向外。”
而同一时间，下界。
七神之战后快死的石昊与秦昊也在讨论这个问题。
秦昊道：“如果有一个高起点，为什么要舍弃呢，我相信，拥有两块骨的人会更强，会成为第一至尊。”
石昊:“无敌的是人，而不是术。”
石昊很严肃，道：“我觉得，有几块骨不重要，那并不是世间第一人的路。如果有一天，你有自信，觉得可以舍弃身上的至尊骨，一块也不要，那时你才算真正开始踏上了无敌之路。”（详情见613章）

初读这句话时还是在很年轻的时候，再到后来我接触了所谓的吸引力法则。所谓的信念治好疾病，后来的唯心主义。其实他们讲的本来都是一件事，就是指就是信念。自信，它是一种动力，像是汽车的一种燃料。这种燃料，会完整完全的改变你的自身，无论你相信与不相信，他确实就是内在的一种强大动力。

说回我自身，我在刚学习编程的时候，总想找到所谓的道啊，对所谓的术不屑一顾。我害怕闭门造车，于是我总是对自己不满意，到处看别人的。这本身是一种看似是一件好事，实则是对自己的一种不自信，总是战战兢兢。总是对自己的成果惘故。

后来我发现了你要成为制定者，你要成为规则的制定者，你要有这种信念。汽车需要燃料，人需要信念。

信念是人成功的燃料——凉城

制造数据&请求&检查请求&检查数据

1.JSON-server  制造数据
2.axios		   请求数据
3.api-fox       检查数据——接口是否正常
4.http/调试工具  检查请求

REST API 是什么

npm | Home (npmjs.com) json-server

1.JSON-server

npm i json-server    安装
json-server --watch db.json   监听启动
AI:给我写一个json-server能用的db.json文件，内容为xxx   数据内容

db.json

{
  "users": [
    {"id": 1, "name": "Alice", "age": 30},
    {"id": 2, "name": "Bob", "age": 25}
  ],
  "products": [
    {"id": 1, "title": "Product 1", "price": 100},
    {"id": 2, "title": "Product 2", "price": 200}
  ]
}

2.Axios

起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

axios.get(url[, config]) [,config] 代表该参数可选

RESTful API(表述性状态转移应用编程接口)   
1. npm install axios
2. 发请求
	1.原生axios发请求  axios({options}).then(request result)
		options：url，methods，params/data
    2.封装配置自己的axios
3.请求相关
	请求方法
    	1.get   get 1 or more
        2.post  create  a new data
		3.put(放)  change one data
        4.delete   略
		5.patch  局部更新
        
        获取所有文章：GET /articles
		获取特定文章：GET /articles/123
		创建新文章：POST /articles
		更新特定文章：PUT /articles/123
		删除特定文章：DELETE /articles/123
	请求参数
    	get 通常用params参数携带数据   量小 data:{data} (data属性可以省略)
		post put 通常用请求体携带数据  量大 params:{data}
    
	
4.请求的几种写法
	1.链式写法  	  axios({options}).then(response)  ————axios.get(url,data) 
					通常只拿其中几个配置项method,url,data
    2.同步写法（推荐） [async]  const  response =await axios({options})
    				官网提示：注意: 由于async/await 是ECMAScript 2017中的一部分，
                    而且在IE和一些旧的浏览器中不支持，所以使用时务必要小心。
 
5.请求错误排查
	看响应报文和请求报文
    	响应状态码

demo1：在vue组件中请求数据

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const url = ref('http://localhost:3000/users')

const res = ref('')
const getData = async () => {
  res.value = await axios.get(url.value)
  console.log(res.value)
}
</script>

<template>
  <h1>Axios Demo</h1>
  <button @click="getData">Get Data</button>
  {{ res }}
</template>

demo2:以user为例发起各种请求并携带参数

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const url = ref('http://localhost:3000/users')
const response = ref()

// 1.get获取一条或多条数据
const getData = async () => {
  const res = await axios({ method: 'get', url: url.value, params: { name: "Alice", limit: 10 } })
  response.value = res.data
}

// 2.post添加一条数据
const postData = async () => {
  const res = await axios({ method: 'post', url: url.value, data: { name: "JiangYue222", age: 20 }})
  response.value = res.data
  console.log(res.status);
  if (res.status === 201) {
    alert('Data added successfully')
  } else {
    alert('Failed to add data')
  }
}

// 3.put更新一条数据
const putData = async () => {
  const res = await axios({ method: 'put', url: `${url.value}/1`, data: { name: "Alice222", age: 22 }})
  response.value = res.data
  console.log(res.status);
  if (res.status === 200) {
    alert('Data updated successfully')
  } else {
    alert('Failed to update data')
  }
}

// 4.delete删除一条数据
const deleteData = async () => {
  const res = await axios({ method: 'delete', url: `${url.value}/1` })
  response.value = res.data
  console.log(res.status);
  if (res.status === 200) {
    alert('Data deleted successfully')
  } else {
    alert('Failed to delete data')
  }
}

</script>

<template>
  <h1>Axios Demo</h1>
  <button @click="getData">Get Data</button>
  <button @click="postData">Post Data</button>
  <button @click="putData">Put Data</button>
  <button @click="deleteData">Delete Data</button>
  {{ response }}
</template>

<style lang="scss" scoped></style>