第9课数据交互【晓舟报告】从零开始学前端-Vue基础教程
为学患无疑，疑则有进。宋 陆九渊。
代码本质和物理思维一样，我能学好。为什么要设计这个？怎么来的？怎么做出来的。学习最重要。只问学习工作，比我学习工作优秀的人都是我的老师。
有些人是1年工作经验，重复10年。有些人是工作5年，每年学不同的知识。差别非常的大。
数据库管理员非常难做。性能调优。没个几年，你搞不定。而且要经历大量的实践。
后端就是设计数据库，写接口，还是后端简单，在学校主要讲的语言都是写后端，数据库也学过，。后端逻辑清晰比前端学起来明朗？。。各有难处，后端也有后端的难处。
普通的测试很简单。牛逼的测试，就厉害了。深入理解产品。
我说前端开发的顺序，你得弄明白了。先开发页面，用假数据渲染。然后再调用接口用真数据。你把页面先搞出来。
穷 没钱就去学习工作。然后呢。就可以了。只管努力。
学点算点 工作 须臾所学我有啥 努力。
js现代手册
我的学习任务还没完成。
<template>
<div id="app">
<form @submit.prevent="postData" action="">
<input type="text" v-model="fruit">
<button>添加</button>
<ul v-for="(item,index) of fruitList" :key="index">{{item}}
<li><button>删除</button></li>
</ul>
</form>
</div>
</template>
<script>
// 不问会不会，先敲代码.多敲几遍，先一个单词一个单词敲。
import axios from "axios";
export default {
data(){
return{
fruit:"",
// 水果数组。写空的数组，从后台总获取数据。
fruitList:[]
}
},
methods:{
// 创建一个方法 获取数据
getFruitList(){
// axios请求，then获取数据. request是请求。response是响应式返回的数据。。
// res是ajax返回的数据，你也可以叫a叫b叫c
// 你可以看看promise相关知识点,这个很重要,项目中每次请求接口都会用到它.
// 直接问多好。当面指出更好。跟着项目敲比较好。
// 看看基础 无所谓 不懂的就看一下怎么用的 以前的js代码多数是需要回调的 代码难看 后来出现了promise 链式调用 代码好看了点 仅此而已 无所谓。
// 一般一个功能只写一个方法
axios.get("http://127.0.0.1:3000/fruits").then(res=>{
// console.log(res.data);
// 返回的数据赋值给fruitList数组
this.fruitList=res.data;
})
},
// 添加数据
postData(){
// axios请求。then返回数据。
axios.post("http://127.0.0.1:3000/fruits",{
// 声明字段，将返回的数据给字段。
fruit:this.fruit
}).then(res=>{
// 调用函数 刷新数据。
this.getFruitList();
})
}
},
// 删除数据 后面写的是索引。
del(index){
// 写的是接口地址
axios.delete('http://127.0.0.1:3000/fruits/${index}')
.then(res=>{
// 更新数据
this.getFruitList();
})
},
created(){
// 初始化数据
this.getFruitList();
// 初始化程序
}
}
</script>
<style></style>
第2遍
<template>
<div id="app">
<!-- form表单 -->
<form @submit.prevent="postData">
<input type="text" v-model="fruit">
<button>添加</button>
<ul v-for="(item,index) of fruitList" :key="index">
{{item}}
<li><button>删除</button></li>
</ul>
</form>
</div>
</template>
<script>
import axios from "axiois";
export default {
data(){
// 返回数据
return{
fruit:"",
fruitList:[]
}
},
// 写方法的
methods:{
// 获取数据
getFruitList(){
// aioxs请求 then获取数据 res就是返回数据。这是怎么来的？为什么这么写？ axios请求接口url，then获取数据。
axios.get("http://127.0.0.1:3000/fruits").then(res=>{
this.fruitList=res.data;
})
},
// 添加数据
postData(){
axios.post("http://127.0.0.1:3000/fruits",{fruit:this.fruit})
.then(res=>{this.getFruitList;})
},
// 删除数据
del(index){axios.delete("http://127.0.0.：3000")
.then((res=>{
this.getFruitList();
}))}
},
// 初始化程序
created(){
// 初始化数据。
this.getFruitList();
}
}
</script>
<style>
</style>
第3遍
正常项目里没这个 你现在这个应该是为了模拟后端接口用的。一般前端模拟后台接口 会用mock 你有空可以了解 不看影响也不大。不会就问师傅。多敲多走，多看师傅敲到哪里，多问。礼貌。
