首页 > 其他分享 >家庭记账本6

家庭记账本6

时间:2024-02-27 09:33:06浏览次数:26  
标签:axios http res 家庭 记账 items getData data

完成主页

 

<template>
  <div class="home">
    <el-button type="primary" @click="$router.push('/noteAdd')"
      >新增信息</el-button
    >
    <el-table :data="items" style="width: 100%">
      <el-table-column prop="money" label="账目"> </el-table-column>
      <el-table-column prop="msg" label="备注"> </el-table-column>
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="text"
              @click="$router.push(`/noteUpdate?id=${scope.row.id}`)"
              >编辑</el-button
            >
            <el-button type="text" @click="delById(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
   
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HomeView",
  data() {
    return {
      items: [],
    };
  },

  methods: {
    async getData() {
      var res = await axios.get("http://localhost:9090/note");
      this.items = res.data.data;
      console.log(res.data.data);
      console.log(this.items.map(item => item.msg));
      
    },
    async delById(id) {
      await axios.delete("http://localhost:9090/note/" + id);
      this.getData();
    },
    
  },
  created() {
    this.getData();
  },
 
};
</script>

 

标签:axios,http,res,家庭,记账,items,getData,data
From: https://www.cnblogs.com/daniel350-wang/p/18036186

相关文章

  • 家庭记账本3
    完成Note类后端的增删改查的操作NoteController.java/***(Note)表控制ceng*/@RestController@RequestMapping("/note")publicclassNoteController{@AutowiredNoteServiceservice;@GetMappingpublicResultlist(){returnResult.succ......
  • 家庭记账本开发1
    把学到的vue2知识用来实战一下先确定路由导航和目录结构目录结构 导航路由index.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importHomeViewfrom'../views/HomeView.vue'importAboutViewfrom'@/views/AboutView'importNoteUpdatefr......
  • 家庭记账本2
    后端使用springboot+mybatisPlus+mysql建立数据库并建表 确定项目结构 解决跨域访问问题CorsConfig.java@ConfigurationpublicclassCorsConfig{//当前跨域请求最大有效时长。这里默认1天privatestaticfinallongMAX_AGE=24*60*60;@Bean......
  • 家庭小账本开发(7)登录校验功能
    在登陆时,前端与后端的交互过程如下①前端vue中将输入框中的username和password传给后端springboot②后端对传过来的(username和password)与后端数据库内容进行对比,如果用户存在--------利用jwt令牌生成token传给前端③vue前端将后端传过来的token值储存起来(一般储存到localStorag......
  • 家庭记账本开发(4)
    接昨天的已经完成后端数据表的增删改查,并且接口已经测试完成,无误。今天开始前端先分析前端需要的界面:①登录界面②管理员界面③用户界面同时管理员界面和用户界面中又包含多个界面:收入具体界面和支出具体界面和首页显示总账等信息  今天先将前端界面配置好,创建vue项目......
  • 家庭记账本开发(3)
    接着昨天的在idea中按照controller--service--mapper的顺序进行数据库表的增删改查,对每个表都进行一次   完成对应的接口后,在ApiPost7中进行后端接口的测试,对增删改查的每一项逐个进行测试 部分结果展示:      ......
  • 家庭记账本开发(2)
    接着昨天的计划,采用springboot和vue开发采用前后端分离的模式,先从后端开始:①创建springboot项目,并导入相关依赖,配置相关设置包括mybatis驱动,Lombok驱动(实现bean类的快速生成),sql数据库驱动springweb驱动 ②配置相关数据库的信息,如下 ③使用codeGenerator工具快速生成......
  • 安卓家庭记账本开发笔记8(补2月4日,2月5日,2月7日,2月8日)
    完成收支记录界面的按钮的监听以及点击事件的逻辑编写在后端模块创建一个名为frag_record的软件包,在其中创建三个java类,其中两个分别对应支出和收入,因为两者基本逻辑相同,所以将两者相同的部分提取出来写一个通用java类。然后支出和收入的java类继承于通用类,然后相应的不同功能在......
  • Android家庭记账本开发第八天:修改和删除功能的设计
    之前两篇我们讲了增加和查询功能,但是这两个功能都是通过设置点击函数实现跳转逻辑的,现在我们要实现修改和删除功能就需要获取到当前的数据项,那么又该怎么做呢在讲解之前的适配器设置的时候已经为每个列表项设置了监听器,并且在主页面逻辑当中为点击函数进行了重写,现在我们来看修改......
  • 安卓家庭记账本开发笔记7(补2月3日)
    完成收支记录界面的逻辑编写代码如下:packagecom.example.myapplication1;importandroid.os.Bundle;importandroid.view.View;importandroidx.appcompat.app.AppCompatActivity;importandroidx.fragment.app.Fragment;importandroidx.viewpager2.widget.ViewPager2;import......