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