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

vite.config.ts

server: {cors: true, // 默认启用并允许任何源host: '0.0.0.0', // 这个用于启动port: 5110, // 指定启动端口open: true, //启动后是否自动打开浏览器  proxy: {'/api': {target: 'http://localhost:8081/',  //实际请求地址,数据库的rest APIschangeOrigin: 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}`);}
}export default new UserinfoDataService();

调用:

<!--
** _______________#########_______________________ * ______________############_____________________ * ______________#############____________________ * _____________##__###########___________________ * ____________###__######_#####__________________ * ____________###_#######___####_________________ * ___________###__##########_####________________ * __________####__###########_####_______________ * ________#####___###########__#####_____________ * _______######___###_########___#####___________ * _______#####___###___########___######_________ * ______######___###__###########___######_______ * _____######___####_##############__######______ * ____#######__#####################_#######_____ * ____#######__##############################____ * ___#######__######_#################_#######___ * ___#######__######_######_#########___######___ * ___#######____##__######___######_____######___ * ___#######________######____#####_____#####____ * ____######________#####_____#####_____####_____ * _____#####________####______#####_____###______ * ______#####______;###________###______#________ * ________##_______####________####______________ * * @Author: geovindu* @Date: 2024-08-26 17:55:02* @LastEditors: geovindu* @LastEditTime: 2024-08-28 12:44:48* @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="日期">                    <ElDatePickerv-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.htmlimport 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-pickerconst 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:0,userName:"",userReal:"",userPassword:"",userIsOk:false,userMail:"",userMobile:"",createdAt:""})//全局保存编辑的行号const globalIndex = ref(-1)const name = ref('')//新增数据 设置新的空的绑值对象 打开弹窗const handleAdd = () => {//生成最大的IDform.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 tableData.value.splice(globalIndex.value, 1, form); //更新当前数据//还原回去globalIndex.value = -1UserinfoDataService.update(form.id,form); //修改成功 (密码需要加密一下)       router.push('tablebind')} else {//新增tableData.value.push(form)tableData.value.splice(globalIndex.value, 1, 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.rhkb.cn/news/410825.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven Wrapper深入实战

概述 官网&#xff0c;GitHub。 Maven Wrapper&#xff0c;缩写为mvnw&#xff0c;是一个受Gradle Wrapper和Takari Wrapper启发而产生的Maven子项目&#xff0c;主要有以下三个用途&#xff1a; 让开发者电脑上无需安装Maven&#xff0c;也不用配置环境变量&#xff0c;即可…

【案例63】SSL RC4 加密套件支持检测 (Bar Mitzvah)修复方案

漏洞详情信息 漏洞名称 SSL RC4 加密套件支持检测 (Bar Mitzvah) 漏洞等级 高 漏洞描述 远程主机支持在一个或多个密码组中使用 RC4。 RC4 密码在伪随机字节流的生成中存在缺陷&#xff0c;导致引入了各种各样的小偏差&#xff0c;降低了其随机 性。 如果反复加密明文&am…

Linux下qt程序缺少中文字库,中文显示为框框

现象 Linux下qt5.9编译程序&#xff0c;运行时候界面上的中文显示一个一个的框框。 如图 原因 开发板里缺少中文字库或者qt字库环境未正常配置导致的。 解决方法一&#xff1a; 如果系统中存在中文字库&#xff0c;一般是在/usr/share/下有一个fonts文件夹 配置qt中文字库路…

【雷电防护】同为科技为国科大构建雷电防护系统

中国科学院大学&#xff08;University of Chinese Academy of Sciences&#xff09;&#xff0c;以下简称“国科大”&#xff0c;主校区位于北京市&#xff0c;是一所以科教融合为办学模式、研究生教育为办学主体的创新型大学&#xff0c;是国家“双一流”建设高校&#xff0c…

go+gin+vue入门

后端框架 1、安装go、goland 2、创建空项目 3、下载要用的包&#xff1a;命令行输入go get -u github.com/xxxx 4、安装mysql数据库&#xff0c;使用navicat创建数据库。 5、按照项目框架搭建目录、文件、代码&#xff1a;如router、model… 6、运行测试&#xff0c;go run ma…

openshift node NotReady kubelet http: TLS handshake error

文章目录 问题现象解决方法 问题现象 openshift 集群 node 节点 notready $ oc get node NAME STATUS ROLES AGE VERSION master1.ocp4.demo.com Ready control-plane,master 4d14h v1.29.76abe8a1 master2.ocp4…

什么是响应式?

表达式: 用于表达式进行插值,渲染到页面之中 语法: {{ 表达式 }} 案例 <template><h1>{{ arr[2] }}</h1><h1>{{ 9 5 }}</h1><h1>{{ "神奇" }}</h1> </template><script setup> import { ref } from vue; …

C++ | Leetcode C++题解之第375题猜数字大小II

题目&#xff1a; 题解&#xff1a; class Solution { public:int getMoneyAmount(int n) {vector<vector<int>> f(n1,vector<int>(n1));for (int i n - 1; i > 1; i--) {for (int j i 1; j < n; j) {f[i][j] j f[i][j - 1];for (int k i; k &l…

刚开始学习软件编程,如何克服编程学习中的挫折感?

编程学习之路往往充满挑战&#xff0c;即便是最优秀的程序员也会遇到挫折。克服挫折感的关键在于心态、方法和持续的学习。以下是一些通俗易懂的建议和案例&#xff0c;展示了如何在遇到编程难题时保持积极态度。 1. 接受挫折是成长的一部分 编程是一个不断学习和成长的过程。…

【Java设计模式】Bridge模式:在Java中解耦抽象与实现

文章目录 【Java设计模式】Bridge模式&#xff1a;在Java中解耦抽象与实现一、概述二、Bridge设计模式的别名三、Bridge设计模式的意图四、Bridge模式的详细解释及实际示例五、Java中Bridge模式的编程示例六、Bridge模式类图七、Java中何时使用Bridge模式八、Java中Bridge模式的…

【日记】今天实在太累了(436 字)

正文 今天的工作强度跟之前完全不是一个级别。能不能不要给我找这么多事做&#xff0c;我只想摸鱼摆烂。以后到下一个单位就说自己啥都不会好了&#xff0c;省得一天天全来找我。 忙碌程度上升了一个数量级&#xff0c;一天结束之后完全不想说话。 好想睡觉。 昨晚尝试完成年度…

【Python】Python 函数综合指南——从基础到高阶

文章目录 Python 函数综合指南1. 函数介绍1.1 什么是函数&#xff1f;1.2 定义函数示例&#xff1a;1.3 调用函数1.4 函数参数1.4.1 必需参数1.4.2 默认参数1.4.3 关键字参数1.4.4 可变长度参数 2. Python 内置函数2.1 字符串处理函数示例&#xff1a; 2.2 数学函数示例&#x…

大数据之数据湖Apache Hudi

一、Hudi框架概述 Apahe Hudi (Hadoop Upserts delete and Incrementals) 是Uber主导开发的开源数据湖框架&#xff0c;为了解决大数据生态系统中需要插入更新及增量消费原语的摄取管道和ETL管道的低效问题&#xff0c;该项目在2016年开始开发&#xff0c;并于2017年开源&#…

Memcached:单节点、集群案例;概念、工作原理

目录 案例前置知识点 Memcached 概念 部署场景 Memcached常用架构 流程 Memcached Memcached API 数据存储方式 数据过期方式 LRU Lazy Expiration Memcached缓存机制 Memcached路由算法 求余数hash算法 一致性hash算法 Memcached分布式 案例 单节点Memcach…

mysql数据库--表的操作

目录 1.创建表 2.查看表 3.修改表 对于表的重命名 更改某一列的属性 直接删除某一列 修改某一列的名称&#xff1a; 增加某一列 4.删除表 1.创建表 按照上次的那个创建表的操作&#xff0c;我们创建完成之后首先就是去把这个use一下&#xff0c;即进入到这个表里面去…

1+X 职业技能等级证书面向哪些人群介绍

日前&#xff0c;“大数据应用开发&#xff08;Python&#xff09;”职业技能等级证书已开放面向社会人员招生。 什么是1X职业技能等级证书&#xff1f; “1” 学历证书&#xff0c;代表专业&#xff0c;即学历、毕业 “X” 若干职业技能等级证书&#xff0c;是根据…

Linux远程管理—SSH协议

SSH协议是远程连接的安全性协议&#xff0c;该协议可以有效防止远程管理过程中的信息泄漏&#xff0c;是西安传输数据加密&#xff0c;能够防止DNS和IP欺骗&#xff0c;传输数据压缩&#xff0c;加快传输速度。 安全验证方法有口令验证和密钥验证两种实现手段&#xff0c;该协…

微信H5下载文件、微信浏览器无法下载文件解决方案

手机端的微信访问网页的时候&#xff0c;是禁止直接下载文件的 但是IOS端可以预览.txt/.doc/.docx/.xls/xlsx/.pdf等格式的文件&#xff0c;Android端在下载这些格式的文件时&#xff0c;可以唤起 ‘即将离开微信&#xff0c;在浏览器打开’ 提示 所以&#xff0c;根据手机微…

redis面试(二十四)Semaphore锁实现

Semaphore也是redis分布式锁支持的一种&#xff0c;同步组件 之前给大家的讲解的锁&#xff0c;基本上都是同时间只能一个客户端获取这个锁&#xff0c;然后做一些事情&#xff0c;处理完了以后释放锁 Semaphore&#xff0c;信号量&#xff0c;他作为一个锁机制&#xff0c;可以…

java-Mybatis框架02

1.#{} 和${}区别 #{} 是占位符&#xff0c;是采用编译方式向sql中传值&#xff0c;可以防止sql注入&#xff0c;如果往sql中传值&#xff0c;使用#{}${} 是将内容直接拼接到sql语句中&#xff0c;一般不用于向sql中传值&#xff0c;一般用于向sql中动态传递列名。区别&#xff…