管理系统-学科列表-增删改查

news2025/7/18 19:01:16

查

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/395669.html

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

相关文章

【Leetcode】反转链表 合并链表 相交链表 链表的回文结构

【Leetcode】反转链表 合并链表 相交链表 链表的回文结构

目录 一.【Leetcode206】反转链表 1.链接 2.题目再现 3.解法A&#xff1a;三指针法 二.【Leetcode21】合并两个有序链表 1.链接 2.题目再现 3.三指针尾插法 三.【Leetcode160】相交链表 1.链接 2.题目再现 3.解法 四.链表的回文结构 1.链接 2.题目再现 3.解法 一.…
阅读更多...
【python爬虫】获取cookie和uid的方式

【python爬虫】获取cookie和uid的方式

本文以微博网站为例。 一、获取cookie &#xff08;1&#xff09;在浏览器中输入“weibo.cn” &#xff08;2&#xff09;登录自己的账号。 &#xff08;3&#xff09;登录后&#xff0c;右键空白处点击【检查】 &#xff08;4&#xff09;点击【网络】或者【Network】 浏…
阅读更多...
Sql执行流程与Redo log、 Undo log、 Bin log日志文件

Sql执行流程与Redo log、 Undo log、 Bin log日志文件

文章目录Sql执行流程与日志文件Sql的执行流程Redo LogBin logUndo logSql执行流程与日志文件 Sql的执行流程 mysql的内部组件结构如下图所示 连接器 与客户端建立连接&#xff0c;检验登录密码&#xff0c;分配相应权限 查询缓存 执行sql语句时会先从这里找一下&#xff0c;…
阅读更多...
雷电模拟器运行非常卡顿有效解决方法分享

雷电模拟器运行非常卡顿有效解决方法分享

雷电模拟器运行非常卡顿有效解决方法分享。有用户在电脑上开启雷电模拟器来使用的时候&#xff0c;遇到了软件使用非常卡顿的情况。那么这样的软件卡顿问题要怎么去进行处理呢&#xff1f;接下来我们一起来看看以下的解决方法教学吧。 雷电模拟器卡顿的解决方法 一、关闭360核晶…
阅读更多...
华大（小华）HC32L130工程创建

华大（小华）HC32L130工程创建

一、我们先来认识一下华大驱动库包下的文件功能。注意&#xff0c;华大提供的包是没有M0内核标准文件的&#xff0c;&#xff08;HC32L130 是M0&#xff09;ST提供的驱动库包是有的&#xff0c;就是CORE文件夹。第一步&#xff1a;创建文件夹目录具体这个创建文件夹目录的含义可…
阅读更多...
matlab基础到实战(1)

matlab基础到实战(1)

目录概述sin函数例子四则运算实数复数逻辑运算复数运算模幅角共轭向量二维向量定义序列生成向量向量索引方式加减乘除向量间运算加减乘法除法概述 MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理…
阅读更多...
基于阿里云物联网平台设计的实时图传系统_采用MQTT协议传输图像

基于阿里云物联网平台设计的实时图传系统_采用MQTT协议传输图像

一、项目功能介绍 当前基于MQTT协议设计了一个实时图传系统，通过这个项目来演示，两个MQTT设备如何互相订阅，进行消息流转。 在阿里云服务器上创建2个设备，分为为设备A和设备B；设备A负责采集本地摄像头画面上传，设备B负责接收设备A上传的数据然后解析显示出来。在阿里云服…
阅读更多...
0106广度优先搜索和最短路径-无向图-数据结构和算法(Java)

0106广度优先搜索和最短路径-无向图-数据结构和算法(Java)

1 单点最短路径 单点最短路径。 给定一幅图和一个起点s&#xff0c;回答“从s到给定目的顶点v是否存在一条路径&#xff1f;如果有&#xff0c;找出其中最短的那条&#xff08;所含边数最少&#xff09;。“等类似问题。 深度优先搜索在这个问题上没有什么作为&#xff0c;因为…
阅读更多...
个人创业做什么好？哪些互联网创业项目可长期收益？

个人创业做什么好？哪些互联网创业项目可长期收益？

打工没前途&#xff0c;这是现在年轻人看透了的一个事情&#xff0c;日复一日地工作&#xff0c;不如自己创业挣钱&#xff0c;那么个人创业做什么好呢&#xff1f;哪些项目可以长期稳定收益呢&#xff1f; 一、高体力项目不要做&#xff1b; 创业项目有很多&#xff0c;尤其是…
阅读更多...
RK3588平台开发系列讲解（同步与互斥篇）自旋锁介绍

RK3588平台开发系列讲解（同步与互斥篇）自旋锁介绍

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、自旋锁介绍二、自旋锁相关的函数1、普通场景2、进程上下文和下半部3、中断相关三、相关结构体四、函数实现1、初始化2、获取自旋锁沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇介绍自旋锁的使用和基…
阅读更多...
Clickhouse数据去重

Clickhouse数据去重

1. Hive去重 先以两个简单的sql启发我们的话题 select count(distinct id)from order_combine;select count(id) from (select id from order_combine group by id ) t;从执行日志当中我们可以看到二者的差异&#xff08;只摘取关键部分&#xff09; # distinctStage-Stage…
阅读更多...
kube-scheduler

kube-scheduler

kube-scheduler&#xff0c;它是 k8s 的默认调度器&#xff0c;负责为新创建出来的 pod寻找一个最合适的节点&#xff0c;这里的“最合适”指两种最优解&#xff1a;从集群中的所有节点中找出的全局最优解&#xff0c;和从集群中的部分节点中找出的局部最优解。它们分别可以解决…
阅读更多...
电气系统中防雷接地保护的综合解决方案

电气系统中防雷接地保护的综合解决方案

防雷接地保护是通过导体和接地&#xff0c;可靠地连接一种保护性接线方法&#xff0c;在该保护性接线方法中&#xff0c;可能会在绝缘材料损坏后或在其他情况下对电器的金属部分&#xff08;即与带电部分绝缘的金属结构部分&#xff09;进行绝缘。接地保护系统仅具有相线和零线…
阅读更多...
VSCode使用技巧，代码编写效率提升2倍以上！

VSCode使用技巧，代码编写效率提升2倍以上！

VSCode是一款开源免费的跨平台文本编辑器&#xff0c;它的可扩展性和丰富的功能使得它成为了许多程序员的首选编辑器。在本文中&#xff0c;我将分享一些VSCode的使用技巧&#xff0c;帮助您更高效地使用它。 1. 插件 VSCode具有非常丰富的插件生态系统&#xff0c;通过安装插…
阅读更多...
大数据分析案例-基于逻辑回归算法构建微博评论情感分类模型

大数据分析案例-基于逻辑回归算法构建微博评论情感分类模型

🤵‍♂️ 个人主页：@艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 喜欢大数据分析项目的小伙伴，希望可以多多支持该系列的其他文章 大数据分析案例合集…
阅读更多...
【WEB前端进阶之路】 HTML 全路线学习知识点梳理（下）

【WEB前端进阶之路】 HTML 全路线学习知识点梳理（下）

前言 本文是HTML零基础小白学习系列的第三篇文章&#xff0c;点此阅读 上一篇文章 文章目录前言十五.HTML布局1.使用div元素添加网页布局2.使用table元素添加网页布局十六.HTML表单和输入1.文本域2.密码字段3.单选按钮4.复选框5.提交按钮十七.HTML框架1.iframe语法2.iframe设置…
阅读更多...
java中如何判断map是否为空

java中如何判断map是否为空

java中判断map是否为空的方法是&#xff1a;利用isEmpty()函数来判断。函数介绍&#xff1a;isEmpty()是Java中用于判断某种容器是否有元素的系统库函数。如用来判断ArrayList&#xff0c;HashSet&#xff0c;HashMap是否有元素等。在Java中&#xff0c;可以用isEmpty();判断一…
阅读更多...
燃料电池聚合物电解质膜高低温退化性能测试中的TEC半导体制冷温控解决方案

燃料电池聚合物电解质膜高低温退化性能测试中的TEC半导体制冷温控解决方案

摘要&#xff1a;针对燃料电池质子交换膜高低温退化机理表征&#xff0c;基于德国慕尼黑工业大学团队提出的替代环境试验箱的TEC半导体制冷温控方案及其功能指标&#xff0c;本文给出此方案具体实施内容的补充&#xff0c;详细介绍了用于TEC半导体制冷温控系统的PID调节器和大功…
阅读更多...
Springboot项目连接neo4j数据库

Springboot项目连接neo4j数据库

首先创建一个springboot项目&#xff0c;这里不再介绍。1 导入依赖包连接neo4j数据库的依赖包<dependency><groupId>org.neo4j</groupId><artifactId>neo4j-ogm-http-driver</artifactId><version>2.1.5</version> </dependency&…
阅读更多...
人工智能算法几个重要指标

人工智能算法几个重要指标

一、几个前置概念 TP&#xff08;True Positive&#xff09;&#xff1a;正确的正例&#xff0c;正类被判定成正类 FN&#xff08;False Negative&#xff09;&#xff1a;错误的反例&#xff0c;漏报&#xff0c;正类被判定为假类 FP&#xff08;False Positive&#xff09…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023