• 第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 你有空可以了解 不看影响也不大。不会就问师傅。多敲多走,多看师傅敲到哪里,多问。礼貌。

  • 相关阅读:
    ARTS第十一周
    ARTS第十周
    ARTS第九周
    一.Java技术现象
    ARTS第八周
    2019书单
    10.枚举的使用
    9.文件输入与输出
    软件模块化设计
    8.String API
  • 原文地址:https://www.cnblogs.com/effortandluck/p/16416222.html
Copyright © 2020-2023  润新知