vue.js3+element-plus+typescript add,edit,del,search

news2024/12/23 22:14:29

vite.config.ts

server: {
  cors: true, // 默认启用并允许任何源
  host: '0.0.0.0', // 这个用于启动
  port: 5110, // 指定启动端口
  open: true, //启动后是否自动打开浏览器  
  proxy: {
      '/api': {
        target: 'http://localhost:8081/',  //实际请求地址,数据库的rest APIs
        changeOrigin: true      
      },
 }

数据来源于前面文章的介绍的方式


import axios from "axios";

/* eslint-disable class UserinfoDataService*/
/**
 * Userinfo Rest API
 * 和前文章的各数据操作,可以用其一任一种
 */
class UserinfoDataService
{


  /**
   * 查看所有记录    getAll():Promise<any> {
   * @returns 
   */ 
  getAllData(){
    
    axios.get('/api/userinfos')
    .then(response=>{
        console.log(response.data);
        return response.data;
    })
    .catch(error=>{
        console.log(error);
        return null
    });
    //console.log(axios.get("/tutorials"));
   // return axios.get("/api/tutorials");// http.get("/tutorials");//



  }

/**
 * 2 查询所有记录
 */
getAll(): Promise<any>{

  return axios.get("/api/userinfos");// http.get("/tutorials");//
}

/**
 * 登录
 * @param userName 
 * @param userPassword 
 * @returns 
 */
userlogin(userName:any,userPassword:any):Promise<any> 
{
  return axios.get(`/api/userinfos/?userName=${userName}&userPassword=${userPassword}`);
}

  /**
   * 查询一条记录
   * @param id 
   * @returns 
   */
  get(id: any): Promise<any> {
    console.log(id);
    
    return axios.get(`/api/userinfos/${id}`);//http.get(`/api/tutorials/${id}`);
  }
  /**
   * 添加
   * @param data 
   * @returns 
   */
  create(data: any): Promise<any> {



    return axios.post("/api/userinfos", data);
  }
  /**
   * 更新
   * @param id 
   * @param data 
   * @returns 
   */
  update(id: any, data: any): Promise<any> {
    return axios.put(`/api/userinfos/${id}`, data);
  }


  /**
   * 删除
   * @param id 
   * @returns 
   */
  delete(id: any): Promise<any> {
    return axios.delete(`/api/userinfos/${id}`);
  }

  /**
   *删除所有
   * @returns 
   */
  deleteAll(): Promise<any> {
    return axios.delete(`/api/api/userinfos`);
  }
  /**
   * 查找
   * @param username 
   * @returns 
   */
  findByTitle(username: string): Promise<any> {
    return axios.get(`/api/userinfos?username=${username}`);
  }
}
// new TutorialDataService()
export default new UserinfoDataService();

调用:

<!--
*
 * _______________#########_______________________ 
 * ______________############_____________________ 
 * ______________#############____________________ 
 * _____________##__###########___________________ 
 * ____________###__######_#####__________________ 
 * ____________###_#######___####_________________ 
 * ___________###__##########_####________________ 
 * __________####__###########_####_______________ 
 * ________#####___###########__#####_____________ 
 * _______######___###_########___#####___________ 
 * _______#####___###___########___######_________ 
 * ______######___###__###########___######_______ 
 * _____######___####_##############__######______ 
 * ____#######__#####################_#######_____ 
 * ____#######__##############################____ 
 * ___#######__######_#################_#######___ 
 * ___#######__######_######_#########___######___ 
 * ___#######____##__######___######_____######___ 
 * ___#######________######____#####_____#####____ 
 * ____######________#####_____#####_____####_____ 
 * _____#####________####______#####_____###______ 
 * ______#####______;###________###______#________ 
 * ________##_______####________####______________ 
 * 
 * @Author: geovindu
 * @Date: 2024-08-26 19:55:02
 * @LastEditors: geovindu
 * @LastEditTime: 2024-08-27 20:24:32
 * @FilePath: \vue\vuetest\src\components\tablebind.vue
 * @Description: geovindu
 * @lib,packpage: 
 * 
 * @IDE: vscode
 * @jslib: node 20 vue.js 3.0
 * @OS: windows10
 * @database: mysql 8.0  sql server 2019 postgreSQL 16
 * Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved. 
 -->
 
 <template>
    <div style="padding: 10px"> 
        <ElConfigProvider :locale="zhCn">
        <ElInput style="width: 300px" placeholder="请输入名称..." v-model="name" clearable></ElInput>
        <ElButton type="primary" @click="search" style="margin-left: 5px">查询数据</ElButton>
 
        <ElButton type="primary" @click="handleAdd">新增数据</ElButton>
 
        <div style="margin: 10px 0">
            <ElTable :data="paginatedData" border style="width: 100%">  
                <ElTableColumn prop="id" label="ID" width="20"/>     
                <ElTableColumn prop="userName" label="用户名" width="80"/>        
                <ElTableColumn prop="userReal" label="姓名" width="80"/>
                <ElTableColumn prop="userPassword" label="密码"/>
                <ElTableColumn prop="userIsOk" label="否可用"/>
                <ElTableColumn prop="userMail" label="邮件"/>
                <ElTableColumn prop="userMobile" label="手机号码"/>
                <ElTableColumn prop="createdAt" label="日期" width="80"/>
                <ElTableColumn label="操作">
                    <template #default="scope">
                        <ElButton type="text" size="small" @click="handleEdit(scope.row, scope.$index)">编辑</ElButton>  
                        <ElButton type="danger" size="small" @click.prevent="remove(scope.$index)">删除</ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
            <div class="pagination-block">  
        <ElPagination  
          background  
          layout="prev, pager, next, jumper, total, sizes"  
          :current-page="state.page"  
          :page-size="state.limit"  
          :page-sizes="[10, 20, 30, 40]"  
          :total="total"  
          @current-change="handleCurrentChange"  
          @size-change="handleSizeChange"  
        />  
      </div>  
        </div>
 
        <!--弹窗-->
        <ElDialog v-model="dialogFormVisible" title="信息" width="40%">
            <ElForm :model="form" label-width="100px" style="padding-right:30px ">
                <ElFormItem label="ID">
                    <ElInput v-model="form.id" autocomplete="off"/>
                </ElFormItem>                
                <ElFormItem label="用户名">
                    <ElInput v-model="form.userName" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="姓名">
                    <ElInput v-model="form.userReal" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="密码">
                    <ElInput v-model="form.userPassword" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="邮件">
                    <ElInput v-model="form.userMail" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="手机号码">
                    <ElInput v-model="form.userMobile" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="是否可用">
                    <ElCheckbox v-model="form.userIsOk"/>
                </ElFormItem>
                <ElFormItem label="日期">                    
                    <ElDatePicker
        v-model="form.createdAt"
        type="date"
        placeholder="Pick a day"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"        
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
      />     
      </ElFormItem>

            </ElForm>
            <template #footer>
      <span class="dialog-footer">
        <ElButton @click="dialogFormVisible = false">取消</ElButton>
        <ElButton type="primary" @click="save">确认</ElButton>
      </span>
            </template>
        </ElDialog>
    </ElConfigProvider>
    </div>
</template>
<script lang="ts" setup>
  import { ElMessageBox,ElTable,ElButton,ElTableColumn,ElDialog,ElForm,ElFormItem,ElInput,ElDatePicker,ElConfigProvider,ElCheckbox } from "element-plus";
 //https://element-plus.org/zh-CN/guide/i18n.html
  import zhCn from 'element-plus/es/locale/lang/zh-cn'//中文
  import {reactive, ref,computed} from "vue";
  import  UserinfoDataService from "../services/UserinfoDataService";
  import router from "@/router"; //路由配置文件
  import Crypoto from "../common/Cryptographer"; //;加密

    const total=ref(0);
  
     //
  const state = reactive({  
    page: 1,  
    limit: 10,  
  });  


  // 计算属性用于分页  
  const paginatedData = computed(() => {  
  const start = (state.page - 1) * state.limit;  
  const end = start + state.limit;  
  total.value=tableData.value.length;
    return tableData.value.slice(start, end);  
  });  
    
  // 改变页码  
  const handleCurrentChange = (e: number) => {  
    state.page = e;  
  };      
  // 改变页数限制  
  const handleSizeChange = (e: number) => {  
    state.limit = e;  
  };  

    //https://element-plus.org/zh-CN/component/date-picker
    const size = ref<'default' | 'large' | 'small'>('default');
    const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

    //
    const tableData = ref([{}]);
    //读数据
    UserinfoDataService.getAll().then(response=>{     
                  console.log("class处理成功情况2");
                  console.log(response.data);
                  tableData.value=response.data;

              })
              .catch(error=>{
                  console.log(error);
              });
     
    const dialogFormVisible = ref(false)
    const form = reactive({
        id:total,
        userName:"",
        userReal:"",
        userPassword:"",
        userIsOk:false,
        userMail:"",
        userMobile:"",
        createdAt:""

    })
    //全局保存编辑的行号
    const globalIndex = ref(-1)
    const name = ref('')
 
    //新增数据 设置新的空的绑值对象 打开弹窗
    const handleAdd = () => {
        //生成最大的ID
        form.id=tableData.value.length+1;
        form.userName = '';  
        form.userReal="";
        form.userPassword = '';  
        form.userIsOk = false;
        form.userMail="";
        form.userMobile="";
        form.createdAt="";
        dialogFormVisible.value = true;
    }
 
    //保存数据,把数据插入到tableData中,并刷新页面,弹窗关闭
    const save = () => {
        if (globalIndex.value >= 0) {
            //表示编辑
            tableData.value[globalIndex.value,20] = form    
            //还原回去
            globalIndex.value = -1

            UserinfoDataService.update(form.id,form); //修改成功 (密码需要加密一下)
            
            router.push('tablebind')

        } else {

            //新增
            tableData.value.push(form)
            UserinfoDataService.create(form); //添加成功!(密码需要加密一下)
            router.push('tablebind')
        }
 
        dialogFormVisible.value = false
    }
 
    //编辑数据 先赋值到表单再弹窗
    const handleEdit = (row: {id:number, userName: string; userReal:string,userPassword: string; userIsOk:boolean,userMail:string,userMobile:string,createdAt:string}, index: number) => {
        const newObj = Object.assign({}, row)
        form.id=newObj.id;
        form.userName =newObj.userName;
        form.userReal=newObj.userReal;
        form.userPassword=newObj.userPassword;
        form.userIsOk=newObj.userIsOk;
        form.userMail=newObj.userMail; //.toLocaleDateString()
        form.userMobile=newObj.userMobile;
        form.createdAt=newObj.createdAt;
        console.log(form);
        // reactive(newObj)
        //把当前编辑的行号赋值给全局保存的行号
        globalIndex.value = index;
        console.log(globalIndex.value);
        dialogFormVisible.value = true;
        
    }
 
    //删除数据 从index位置开始,删除一行即可 删除前有一个提示为好
    const remove = (index:any) => {
        tableData.value.splice(index, 1)

       // UserinfoDataService.delete(form.id) //删除

    }
    
    //查询数据有问题,需要修改
    const search = () =>{

        tableData.value = tableData.value.filter(v =>v.userName.includes(form.userName)) //userName.value

       // UserinfoDataService.getAll(form.userName)
    }
</script>

还有BUG,待完善

输出:

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

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

相关文章

esp32 控制 st7735s 显示屏(spi)

Lcd初始化后全屏为花屏&#xff0c;必须再把整个屏幕转成全底白色消除花屏后再显示图片&#xff0c;字符。 我理解为什么是花屏&#xff0c;因为只是初始化各个参数&#xff0c;显示内存现在还是为空&#xff0c;还没有执行0x2c命令。 图片 #include "driver/spi_master…

统一 transformer 与 diffusion !Meta 融合新方法剑指下一代多模态王者

本文引入了 Transfusion&#xff0c;这是一种可以在离散和连续数据上训练多模态模型的方法。 来源丨机器之心 一般来说&#xff0c;多模态生成模型需要能够感知、处理和生成离散元素&#xff08;如文本或代码&#xff09;和连续元素&#xff08;如图像、音频和视频数据&#xf…

软件测试-Selenium+python自动化测试

目录 一、元素定位 1.1一个简单的模板 1.2单选框radio定位实战 1.3下拉操作 1.4弹窗 1.5文件上传 1.6 iframe(类似于页中页,嵌套进去了) 二、元素定位实战 会用到谷歌浏览器Chrome测试,需要下载一个Chromedriver(Chrome for Testing availability)对应自己的浏览…

力扣面试经典算法150题:除自身以外数组的乘积

除自身以外数组的乘积算法详解 今天的题目是力扣面试经典150题中的数组的中等难度题&#xff1a;除自身以外数组的乘积。 题目链接&#xff1a;https://leetcode.cn/problems/product-of-array-except-self/description/?envTypestudy-plan-v2&envIdtop-interview-150 …

docker基础到进阶

基础 文章目录 基础1.Docker简介2.Docker基础概念3.Docker安装4.Docker命令4.1 镜像命令4.2 容器命令 5. 数据卷5.1具名挂载5.2 匿名挂载 进阶1. 镜像5.2 Dockerfile5.3 网络1.网络模式2.网络操作 DockerCompose1.基本语法 总结 这篇文章记录了以下的内容&#xff1a; 1️⃣ 利…

达梦数据库的系统视图v$object_usage

达梦数据库的系统视图v$object_usage 在达梦数据库&#xff08;DM Database&#xff09;中&#xff0c;V$OBJECT_USAGE 视图提供了关于数据库对象的使用情况和统计信息。这些对象可以包括表、索引、视图、存储过程等。通过 V$OBJECT_USAGE 视图&#xff0c;数据库管理员可以监…

如何使用Hive构建网络电视剧收视率分析系统:大数据实战教程

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

什么?入网小助手无法卸载?我来手把手教你

简介 之前装了 XXXXX 公司的入网小助手&#xff0c;卸载的时候发现要验证码&#xff0c;我这小脾气就上来了&#xff0c;对待流氓软件是可忍熟不可忍&#xff01;&#xff01;&#xff01; 这里介绍的只是一种方式&#xff0c;嫌麻烦的可以进入安全模式直接删除安装目录内容&…

操作系统----锁

锁 锁就是一个变量 为什么需要锁&#xff1f;&#xff1a;&#xff1a;需要原子性的执行一系列的操作指令&#xff0c;程序员在源代码中加锁&#xff0c;放在临界区周围&#xff0c;保证临界区能够像单条原子指令一样执行。 举例说明 锁&#xff08;通常是一个互斥量mutex&…

大数据5v特性、集群、分布式

目录 数据分析六部曲 大数据的特点 &#xff08;5v特征&#xff09; 分布式与集群的区别 常用的分布式方案 数据分析六部曲 明确分析目的和思路&#xff1a;确保分析框架的体系化和逻辑性&#xff0c;简单来说就是先分析什么&#xff0c;后分析什么&#xff0c;使得各个分析…

K-means算法原理及应用场景

1. 算法原理 K-means是一种广泛使用的聚类算法&#xff0c;其目标是将数据点划分为K个簇&#xff0c;使得簇内的点尽可能地接近簇中心&#xff08;质心&#xff09;&#xff0c;而簇间的点则尽可能地远离。算法的核心思想是最小化簇内的平方误差。 过程&#xff1a; 初始化&a…

命题的相关知识

一、推论 推论由前提和结论两部分构成。前提和结论部分都是命题。 命题是推论的基本单位 命题特点&#xff1a;1、是陈述句 2、有确定的值&#xff08;不是对就是错&#xff09; 知不知道真假不重要&#xff0c;有真假就行 连接词和简单命题组成了复合命题。 二、…

前端:html+css:伪类画箭头(实心)

一、效果图 二、代码 html <div class"rectangle">AC/DC</div> css /* 图形 */ .rectangle {position: relative;width: 50px;height: 20px;background-color: #3498db;color: white; } .rectangle:before {content: ;position: absolute;top: 0;l…

Python-进阶-Excel基本操作

文章目录 Excel 基本操作1. 概述2. 写入2.1 使用 xlwt2.2 使用 XlsxWriter 3. 读取4. 修改 Excel 基本操作 1. 概述 在数据处理方面&#xff0c;Python 一直扮演着重要的角色&#xff0c;对于 Excel 操作&#xff0c;它有着完整且成熟的第三方库&#xff0c;使用也较为简单。…

用IP代理网速过慢:原因分析与解决方案

使用IP代理时网速过慢的原因及解决方案 在现代互联网环境中&#xff0c;使用IP代理已成为保护隐私的常见手段。然而&#xff0c;许多用户在使用代理时常常会遇到网速过慢的问题&#xff0c;这不仅影响了使用体验&#xff0c;还可能导致工作效率下降。本文将探讨导致IP代理网速…

Cornerstone3D Tools对影像进行交互(上篇)-基础交互工具及同步器

⛳️ 前言 在我们日常需求中&#xff0c;除了需要对影像进行可视化展示外&#xff0c;大多数场景下还需要对影像进行调整、注释、分割等操作。Cornerstone3DTools库则支持大多数需要的交互功能。CornerstoneTools支持的工具类型主要分为以下4类&#xff1a; 基础交互类工具&am…

VS2022 Cmake项目构建 Qt

一.创建文件和配置CMakeLists 1.创建头文件MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>namespace Ui {class MainWindow; }class MainWindow : public QMainWindow {Q_OBJECTpublic:explicit MainWindow(QWidget* parent nullptr)…

使用Dockerfile创建应用镜像及私有仓库

目录 1.Dockerfile介绍 2.Dockerfile应用 1.创建目录 2.跳转目录 3.编辑启动脚本 4.编辑index.html文件 5.编辑 Dockerfile 6.创建镜像 7.查看镜像 8.创建容器测试 9.挂载其他项目测试 3.私有仓库 1.安装仓库镜像---仓库注册器 2.创建目录 3.启动容器、映射端口、…

读书学习笔记 # Datawhale X 李宏毅苹果书 AI夏令营

文章目录 &#x1f6a9;学习目标&#x1f6a9;学习内容&#x1f6a9; Task1.1&#x1f3af;为什么优化会失败&#x1f4cc;因非信息梯度导致的失败 &#x1f3af;局部极小值与鞍点&#x1f3af;临界点及其种类&#x1f3af;如何判断临界值种类&#x1f4cc;更简便的方法来判断 …

ubuntu环境下部署LNMP集成环境超详细图文教程

ubuntu系统下安装LNMP集成环境 一、Nginx安装 二、安装及配置MySQL数据库 修改密码 三、安装PHP 四、配置Nginx服务 ​编辑五、配置PHP 本文使用的Ubuntu版本为20.04。 php开发中集成环境的安装是必不可少的技能。 而LNMP代表的是&#xff1a;Linux系统下NginxMySQLPHP…