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>