项目黑马面面-学科列表-增删改查

news2025/11/1 1:30:24

查

1.布局

2.定义api

3.导入api

4.进入页面就调用api

5.获取数据

6.存储并渲染

7.与分页建立关联
	a.请求参数值要与分页组件绑定
	b.total值存储并绑定到分页组件
	c.页码改变与页容量改变都要请求api

1.布局

<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
        <el-form-item label="学科编号">
            <el-input v-model="form.rid" ></el-input>
          </el-form-item>
      </el-form>
    </el-card>
    <el-card>
         // :data="list"作为绑定数据使用
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template v-slot="{ row }">
            <!-- 接口传入过来，row当前数据 -->
            <el-button type="text" @click="editEvent(row)">编辑</el-button>
            <el-button type="text">启用</el-button>
            <el-button type="text" @click="deleteEvent(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <Add ref="add" @getData="getData" />
  </div>
</template>

定义接口参数
在这里插入图片描述

  data () {
    return {
      // list: [{}],写死
      list: [],
      
      form: {
        id: '',
        rid: '',
        name: '',
        short_name: '',
        username: '',
        create_time: '',
        intro: ''
      }
    }
  },

补充

<el-form  :inline="true" :model="form" :rules=rules ref="form" >
    <el-formitem prop="rid">
    <input v-model="form.remark"/> 
/*
   :inline="true"为封装的表单样式
   
   prop="xxx" 渲染数据使用
   
   ref="form" 操作组件时使用 $refs.form
   
   :model="form" 对应 input里的v-model="form.xxx" xxx名称必须与接口数据名称对应
   例：
   :rules= rules 为表单验证，
   在data里写规则
   data(){return{
   rules{name:[{required:true,message:'必填'}]}
   }
    
   */

2.定义api

// 查
export const subjectList = (params) => {
  return request({
    url: '/subject/list',
    params
  })
}
//接口关系很大，有时候一些效果，怎么都没有反应，往往就是接口出问题了

3.导入api

import { subjectList, subjectRemove } from '@/api/subject'

4.进入页面就调用api

  async created () {
    await this.getData()
  },
  methods:{
   // 查
    async getData () {
      const res = await subjectList(this.form)
      //打印数据，看是否调用成功
      console.log('学科列表',res)
    }
  }

5.获取数据

在这里插入图片描述

6.存储并渲染

 //通过prop渲染
 <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="rid" label="学科编号"></el-table-column>
        <el-table-column prop="name" label="学科名称"></el-table-column>
        <el-table-column prop="short_name" label="学科简称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="create_time" label="创建日期"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>
 
 methods:{
   // 查
    async getData () {
      const res = await subjectList(this.form)
       this.list = res.data.items
    }
  }

7.与分页建立关联

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :current-page.sync="form.page"
          :page-sizes="[1, 10, 20, 50, 100, 200, 300]"
          :page-size.sync="form.limit"
          layout="total,sizes,prev,pager,next,jumper"
          //total 总条目数            
          :total="total"
          @size-change="getData"
          @current-change="getData"
          />

      </div>

    // 查
    async getData () {
      const res = await subjectList(this.form)
      ...
      // 存储分页total
      this.total = res.data.pagination.total
      // 打印数据
      console.log('学科列表', res)
      //打印分页数据
      // console.log('分页total', this.total)
      
    
    },

改

在这里插入图片描述

1.点击修改打开弹框

 // 改
 	<index>
    async editEvent (row) {
      // row-->接收数据
      // 打开弹框
      this.$refs.add.isShow = true
      // 打印看是否有数据
      console.log('row', row)
    },

2.回显数据-（用持久化方法）

<index>
// 改
    async editEvent (row) {
        // row-->接收数据
   		
       // 打印看是否有数据
      // console.log('row', row)
    
      //简单数据回显 -->拿到子组件里的form数据
      // this.$refs.add.form = row
    
      // 深拷贝方法数据回显 -->让其于子类的数据切断关联  -->也可用插件完成
      this.$refs.add.form = JSON.parse(JSON.stringify(row))

3.在新增弹框组件中定义一个mode值用于区分场景

4.新增与编辑弹框都要修改mode值

<add>
 data () {
    return {
      // 区分场景 是新增还是编辑 add:新增 edit:编辑，
      mode: '',
    }
  },
<inde>
    // 增
    addEveent () {
      this.$refs.add.mode = 'add'
    },
    // 改
    
    async editEvent (row) {
      this.$refs.add.mode = 'edit'
      }

5.调用标题

<Add>
<el-dialog  :title="{add:'新增部门',edit:'编辑部门'}[mode]" >

6.表单验证调整

<Add>
async submit(){
// 先进行表单验证
      this.$refs.form.validate()
}

7.定义修改api

// 改
export const subjectEdit = (params) => {
  return request({
    url: '/subject/edit',
    method: 'put',
    params
  })
}

8.导入修改api

import { ..., subjectRemove } from '@/api/subject'

9.确定点击事件中分场景调用api

10.调用成功（关闭弹框，清空表单数据与验证，提示，刷新父级数据）

 <Add>
 methods: {
    async submit () {
      // 先进行表单验证
      this.$refs.form.validate()
      // 分场景调用api
      if (this.mode === 'add') {
      	...
        }
      } else if (this.mode === 'edit') {
       //调用‘改’接口
        await subjectEdit(this.form)
        //传递给父的数据
        this.$emit('getData', this.form)
        
        //调用成功提示
        this.$message.success('编辑成功', '提示')
      }
        //关闭弹框
        this.isShow = false
        //刷新父级数据
        this.$parent.getData()
    }
  }

11.补充

问题：点击‘编辑’后再点新增，表单的数据仍然存在
在这里插入图片描述

解决

 <Add>
 <el-dialog
    ...
    @close="closeEvent"
    
    // 关闭事件
    closeEvent () {
    	//重置表单
      this.$refs.form.resetFields()
      //初始化
      this.form = {
        id: '',
        rid: '',
        name: '',
        short_name: '',
        username: '',
        create_time: '',
        intro: ''
      }
    }

接口

后端相关接口： 规范

增:post,删：delete 改：全量put,部分：patch 查：get

删

在这里插入图片描述

1.点击删除弹窗确定框

// 删
    async deleteEvent () {
      await this.$confirm('确认删除吗？')
    },

2，定义删除api

// 删
export const subjectRemove = (data) => {
  return request({
    url: `/subject/remove/${data.id}`,
    method: 'post',
    data
  })
}

3.导入删除api

import {..,subjectRemove } from '@/api/subject'

4,点击确定框,确定调用删除api

5.调用成功（提示，刷新列表数据）

 <template v-slot="{ row }">
         <el-button type="text" @click="deleteEvent(row)">删除</el-button>
 </template>
 
 
   async deleteEvent (row) {
      await this.$confirm('确认删除吗？')
      await subjectRemove({ id: row.id })
      //提示
      this.$message.success('删除成功')
      // 刷新数据
      await this.getData()
    },

补充：接口与定义的方法代码，具体看后端给的接口要求

增

 增：
   1：创建新增弹框组件
   2：在父组件导入注册使用
   3：点击新增打开弹框
   4：完成弹框布局
   5：完成弹框内的表单验证
   6：定义新增api
   7:导入新增api
   8:点击确定在表单验证通过后调用api
   9:调用成功：
      a:关闭弹框
      b:清空表单内容
      c:提示
      d:刷新父级列表数据

1：创建新增弹框组件

在这里插入图片描述

<template>
  <div>
    >
    <el-dialog
	//点击弹框操作
    :visible.sync="isShow"
    //弹框大小
    label-width="600px"
    //新增-编辑-的区分值
    :title="{add:'新增部门',edit:'编辑部门'}[mode]"
	//关闭弹框时的方法
    @close="closeEvent"
    >
   <el-form :inline="true" :model="form" class="demo-form-inline" ref="form"  :rules=rules>
      <el-form-item label="备注" prop="rid">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    
	//按钮最好包裹在div里，方便改样式
    <div style="text-align:center">
      <el-button @click="isShow=false">取消</el-button>
      <el-button type="success"  @click="submit">确定</el-button>
    </div>

  </el-dialog>
  </div>
</template>

补充

<el-form  :inline="true" :model="form" :rules=rules ref="form" >
    <el-formitem prop="rid">
    <input v-model="form.remark"/> 
/*
   :inline="true"为封装的表单样式
   
   prop="xxx" 渲染数据使用
   
   ref="form" 操作组件时使用 $refs.form
   
   :model="form" 对应 input里的v-model="form.xxx" xxx名称必须与接口数据名称对应
   例：
   :rules= rules 为表单验证，
   在data里写规则
   data(){return{
   rules{name:[{required:true,message:'必填'}]}
   }
    
   
   */

2：在父组件（index）导入注册使用

<Add ref="add" @getData="getData" />

3：点击新增打开弹框

<el-button type="success" @click="addEveent">新增学科</el-button>
    
    // 增
    addEveent () {
      this.$refs.add.isShow = true
    },

4：完成弹框布局

5：完成弹框内的表单验证

    form: {
        id: '',
        rid: '',
        name: '',
        short_name: '',
        username: '',
        create_time: '',
        intro: ''
      }, 
rules: {
        rid: [{ required: true, message: '请输入学科编号', trigger: '必填' }],
        name: [{ required: true, message: '请输入学科名称', trigger: '必填' }]
      }

6：定义新增api

// 增
export const subjectAdd = (data) => {
  return request({
    url: 'subject/add',
    method: 'post',
    data
  })
}

7:导入新增api

import { subjectAdd} from '@/api/subject'

8:点击确定在表单验证通过后调用api

9:调用成功：

​ a:关闭弹框
​ b:清空表单内容
​ c:提示
​ d:刷新父级列表数据

<Add>
<div style="text-align:center">
      <el-button @click="isShow=false">取消</el-button>
      <el-button type="success" @click="submit">确定</el-button>
</div>
    
async submit(){
  // 先进行表单验证
    this.$refs.form.validate()
    //调用接口
    await subjectAdd(this.form)
    // 提示
    this.$message.success('新增成功', '提示')
    // 传递给父组件，对父组件进行修改
      this.$emit('getData', this.form)
    // 调用父组件方法-进行列表重新渲染
     this.$parent.getData()
}

其它操作

搜索

在这里插入图片描述

// 调用'查'的接口即可
async serachEvent () {
      await this.getData()
    },

清除

在这里插入图片描述

 // 清除
 //让值初始化即可。
    clearEvent () {
      this.form = {
        id: '',
        rid: '',
        name: '',
        short_name: '',
        username: '',
        create_time: '',
        intro: ''
      }
    }

状态

1.拉取枚举文件constant，放到api里
在这里插入图片描述

2.导入index

import employeesData from '@/api/constant/employees'

//data里定义数据
employeesData: '' // 无法直接使用，需要再定义一次

3.利用element-ui选择器进行for循环

<el-select  placeholder="请选择">
          <el-option>

          </el-option>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/392887.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言例程：猜数字游戏

C语言例程：猜数字游戏

猜数字游戏 实现一个简单的猜数字游戏&#xff0c;学习 while 循环语句的用法。 实例解析 while 循环语句 while 语句的一般形式为&#xff1a; while(表达式)语句; 其中表达式是循环条件&#xff0c;语句为循环体。 while 语句的语义是&#xff1a;计算表达式的值&#xf…
阅读更多...
Vue使用ElemenUI对table的指定列进行合算

Vue使用ElemenUI对table的指定列进行合算

前言 最近有一个想法&#xff0c;就是记录自己花销的时候&#xff0c;table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。 然后我就顺着elemetui的table组件寻找相关的demo&#xff0c;还真发现了一个这样的demo。 对于这个demo&#xff0c;官方…
阅读更多...
嵌入式 Linux进程之间的通信

嵌入式 Linux进程之间的通信

目录 1、Linux进程间的通信继承 2、Linux进程之间的通信种类 3、管道 3.1 管道概述 3.2 管道文件 3.3 管道特点 3.4 通信框架 3.5 对管道文件进行操作 4、标准流管道 5、无名管道 PIPE 5.1 无名管道特点 5.2 创建管道函数 6、有名管道&#xff08;FIFO&#x…
阅读更多...
FPGA lattice 深力科LCMXO3LF-2100C-5BG324I拥有很强的灵活性和适应性可编程内核的FPGA 值得期待

FPGA lattice 深力科LCMXO3LF-2100C-5BG324I拥有很强的灵活性和适应性可编程内核的FPGA 值得期待

FPGA lattice 深力科LCMXO3LF-2100C-5BG324I MachXO3系列 拥有很强的灵活性和适应性可编程内核的FPGA 值得期待 &#xff0c;FPGA 现场可编程逻辑器件,小尺寸&#xff0c;高性能&#xff01;在工业领域&#xff0c;它可以用于网络控制器&#xff0c;PLC,网络边缘计算&#xff0…
阅读更多...
kubernetes--分析容器系统调用：Sysdig

kubernetes--分析容器系统调用：Sysdig

目录 Sysdig介绍&#xff1a; sysdig工作流程 安装Sysdig sysdig常用参数&#xff1a; sysdig过滤&#xff1a; sysdig之Chisels&#xff08;工具箱&#xff09;&#xff1a; 其他常用命令 Sysdig介绍&#xff1a; Sysdig是一个非常强大的系统监控分析和故障排查工具。汇…
阅读更多...
MOEA/D: A Multiobjective Evolutionary Algorithm Based on Decomposition

MOEA/D: A Multiobjective Evolutionary Algorithm Based on Decomposition

目录1 问题定义2 算法步骤3 代码4 效果1 问题定义 本博客以最小化问题为例 f1x2f2(x−2)2min⁡f(f1(x),f2(x))\begin{aligned} f_1 & x ^2 \\ f_2 & (x - 2) ^2 \\ \min f & (f_1(x), f_2(x)) \end{aligned} f1​f2​minf​x2(x−2)2(f1​(x),f2​(x))​ 代码…
阅读更多...
二十、常用调优工具概述与Jprofiler演示

二十、常用调优工具概述与Jprofiler演示

常用调优工具 1.JDK命令行 2.Eclipse:Memory Analyzer Tool 3.Jconsole 4.VisualVM 5.Jprofiler 6.Java Flight Recorder 7.GCViewer 8.GC Easy jprofiler 简介&#xff1a; 他把CPU、执行引擎和内存的剖析组合在一个强大的应用中。JProfiler可提供许多IDE整合和应用服务器整合…
阅读更多...
集成学习boosting、bagging、stacking

集成学习boosting、bagging、stacking

目录 一、介绍 二、三种架构学习 &#xff08;1&#xff09;boosting &#xff08;2&#xff09;bagging &#xff08;3&#xff09;stacking 一、介绍&#xff1a; 对于单个模型来说很难拟合复杂的数&#xff0c;模型的抗干扰能力较低&#xff0c;所以我们希望可以集成多…
阅读更多...
ElasticSearch 8 学习笔记总结(五)

ElasticSearch 8 学习笔记总结(五)

文章目录一、ElasticSearch 8 版本二、ES8 集群 环境安装1. 生成安全证书2. 生成http证书3. 配置第一个节点4. 配置其他节点三、ES集群 关联问题解决四、 Kibana 安装和使用五、kibana 基础操作1. 索引操作2. 文档操作3. 文档搜索4. 索引模板六、分词器七、文档评分机制1. 什么…
阅读更多...
上拉电阻与下拉电阻总结

上拉电阻与下拉电阻总结

文章目录相关概念介绍IO引脚的三态输出之高阻态---将逻辑门与系统其他部分隔离&#xff0c;电平外部控制IO引脚输出模型 推挽电路 与 开漏电路---单独开漏无高电平驱动能力原理介绍什么是上下拉电阻&#xff1f;---把IO口用电阻拉到正压VCC&#xff08;上拉&#xff09; 或 接地…
阅读更多...
如何使用Docker容器部署O2OA(翱途)开发平台与OnlyOffice的集成版本？

如何使用Docker容器部署O2OA(翱途)开发平台与OnlyOffice的集成版本？

O2OA(翱途)开发平台[下称O2OA平台或者O2OA]默认可以和OnlyOffice进行集成来实现在线文档编辑以及流程集成。开发者可以直接安装O2OA官网的OnlyOfficeO2Server的Docker版本用于体验。本文将详细介绍如何安装O2OA OnlyOffice的Docker版本。OnlyOffice Docs Sever可以单独安装,O2…
阅读更多...
aws apigateway 使用httpapi私有集成ecs服务

aws apigateway 使用httpapi私有集成ecs服务

参考资料 https://docs.aws.amazon.com/zh_cn/apigateway/latest/developerguide/http-api-private-integration.htmlhttps://docs.aws.amazon.com/zh_cn/apigateway/latest/developerguide/http-api-develop-integrations-private.html 在《aws apigateway 基础概念和入门示…
阅读更多...
Vue2.0开发之——购物车案例-Goods组件封装-把购买数量传给counter组件(52)

Vue2.0开发之——购物车案例-Goods组件封装-把购买数量传给counter组件(52)

一 概述 Goods组件中导入Counter组件设置Counter组件的数量 二 Goods组件中导入Counter组件 2.1 Goods组件中导入Counter组件 import Counter from "/components/Counter/Counter.vue";2.2 Goods组件中注册Counter组件 components:{Counter }2.3 Goods组件中使用…
阅读更多...
GDKOI2023游记+一周模拟赛题解

GDKOI2023游记+一周模拟赛题解

温馨提示&#xff1a; 1)有些链接需要在本校OJ上的博客里才能打开。2)没更新完。 Day -6&#xff08;3.4&#xff09; 晚上打了场AtCoder&#xff0c;rank1515rank 1515rank1515&#xff0c;切了5题&#xff0c;信心。 zswangziye的atcoder账号 打T5的时候心态不稳&#xff…
阅读更多...
2022年MathorCup数学建模A题大规模指纹图像检索的模型与实现解题全过程文档加程序

2022年MathorCup数学建模A题大规模指纹图像检索的模型与实现解题全过程文档加程序

2022年第十二届MathorCup高校数学建模 A题 大规模指纹图像检索的模型与实现 原题再现 在生物特征识别领域&#xff0c;指纹作为最具独特性与持久性的生物特征之一&#xff0c;被广泛应用于身份识别。   指纹识别过程分为特征提取和比对两个环节。其中特征提取环节会提取用于…
阅读更多...
matplotlib: 绘制柱状图

matplotlib: 绘制柱状图

通过matplotlib绘制柱形图 第一个例子 from matplotlib import pyplot as plty [10, 11, 12, 11, 9, 8, 13, 10] # 创建y轴坐标 x list(range(1,9)) # 创建x轴坐标# 创建x轴显示的参数&#xff08;此功能在与在图像中x轴仅显示能被10整除的刻度&#xff0c;避免刻度过多分…
阅读更多...
比亚迪：全球最大电动汽车制造商的坎坷成长之路

比亚迪：全球最大电动汽车制造商的坎坷成长之路

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 特斯拉&#xff08;TSLA&#xff09;首席执行官埃隆马斯克表示&#xff0c;特斯拉最接近的竞争对手可能是一家中国电动汽车公司。猛兽财经认为&#xff0c;沃伦•巴菲特支持的比亚迪&#xff08;0211&#xff09;可能是马斯…
阅读更多...
在ubuntu上部署与使用docker（python）

在ubuntu上部署与使用docker（python）

1.安装Docker首先&#xff0c;更新现有的包列表sudo apt update接下来安装一些允许童HTTPS才能使用的软件包&#xff1a;sudo apt install apt-transport-https ca-certificates curl software-properties-common然后将官方Docker存储库的GPG秘钥添加到您的系统curl -fsSL http…
阅读更多...
关于 C# 引用参数和值参数

关于 C# 引用参数和值参数

关于 C# 引用参数和值参数 C# 数据类型分为值类型和引用类型&#xff0c;两者的区别在于值类型的数据存储在栈中&#xff0c;而引用类型的数据存储在堆中&#xff0c;但是栈中会存放指向存储数据的堆的位置。 传递参数时&#xff0c;传递的是数据栈中的值&#xff0c;实参将数…
阅读更多...
高等数学——一元函数微分学

高等数学——一元函数微分学

文章目录导数与微分概念几何意义连续、可导、可微之间的关系求导法则基本初等函数的导数公式有理运算法则复合函数求导法奇偶性和周期性隐函数求导反函数求导参数方程求导对数求导法高阶导数概念常用的高阶导数公式微分中值定理和导数的应用微分中值定理导数的应用函数的单调性…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023