vue3+node.js+mysql+ant design实现表格的查询功能

今日主要分享如何运用vue、nodejs、mysql及ant design构建表格数据查询功能,这也是众多项目开发者关注的问题。最关键在于前端与后端的协作,后端数据则通过nodejs编写。尽管涉及多项技术,看似复杂,但实际操作却并非困难。当然,首要条件是熟悉并掌握各项技术。以下为详细步骤:

一、vue3+ant design画前端页面

利用vue3和ant design来实现表格,在使用ant design组件之前首先要安装此组件,具体的安装步骤请详见我的博客中的《Vue3+Ant Design表格排序》这篇文章,这里就不再过多详述。

(1)<template>部分

<template><div class="user-tab"><!-- 查询、重置 --><a-row justify="end" style="padding-top: 10px; padding-right: 15px"><a-col :span="1.5"><p class="user-admin">用户账号</p></a-col><a-col :span="4"><a-input v-model:value="submitForm.adminNick" placeholder="请输入账号" style="width: 200px" /></a-col><a-col :span="1"></a-col><a-col :span="1.5"><a-button type="primary" style="margin-right: 10px" size="middle" @click="search">查询</a-button></a-col><a-col :span="1.5"><a-button type="primary" size="middle" @click="resetSearch">重置</a-button></a-col></a-row><!-- 表格 --><div class="tab-body"><a-table:columns="columns"bordered:data-source="dataSource":pagination="pagination":loading="tableLoading"rowKey="id":scroll="{ y: 'calc(100vh - 380px - 10px)', x: 200 }"><template #index="{ index }">{{ index + 1 }}</template><template #picture="{ record }"><img style="width: 100px; heigth: 100px" :src="record.picture" /></template></a-table></div></div>
</template>

(2)<script>部分,注意:目前是还未进行获取数据的方式,后续有数据的详见下文

const submitForm = ref({adminNick: '',
})
//表格头部
const columns = [{title: '序号',dataIndex: 'index',key: 'id',width: 200,// ellipsis: true,slots: {customRender: 'index'},fixed: 'left',align: 'center'},{title: '用户账号',width: 200,dataIndex: 'adminName',key: 'name',align: 'center',fixed: 'left'},{title: '密码',width: 200,dataIndex: 'adminPwd',key: 'pwd',align: 'center'// fixed: 'left',},{title: '昵称',width: 200,dataIndex: 'adminNick',key: 'nick',align: 'center'},{title: '头像',width: 200,dataIndex: 'picture',key: 'pic',align: 'center',slots: { customRender: 'picture' }},{title: '手机号',width: 200,dataIndex: 'phoneNumber',key: 'number',align: 'center'}
]
const dataSource = ref([])
//表格分页情况
const pagination = {total: 0,current: 1,pageSize: 10, //每页中显示10条数据showSizeChanger: true,pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
}
//查询
const search = () => {}
//重置
const resetSearch = () => {}

二、利用数据库新建表

在数据库中新建一个名为user_list的表,并在其中插入几条数据。

三、nodejs写查询数据

对于nodejs如何使用、如何在项目中安装这里也不再多说,之前文章也都有详细的介绍,有不懂的可以查看我之前写过的文章。

(1)安装数据库

在项目中打开server文件夹,使用npm安装mysql

npm i mysql

(2)连接数据库

在server文件夹下新建一个名为db的文件夹,在其下新建一个名为sql.js的文件,然后写下面内容,

var mysql= require('mysql');
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '',//自己mysql的密码database : ''//自己在mysql建的数据库名
});
module.exports=connection;

接着在需要用到数据库的地方引入该文件即可。

(3)查询数据书写

操作完以上内容后,就可以在routes文件夹下的文件中写查询数据了

var express = require('express');
var router = express.Router();
//连接数据库
var connection=require('../db/sql.js');
//条件查找
router.get('/api/user/searchUserList/', (req, res) => {const name = req.query.name;// console.log(req.query,'shuju ')// console.log(name,'name')const sqlStr = "select * from user_list where nickName=?";connection.query(sqlStr, name,(err, results) => {if (err){console.log(err,'错误信息提示:')return res.json({code: 404,message: '数据不存在',affextedRows: 0});}res.json({code: 200,message: results,affextedRows: results.affextedRows});})
})

(4)获取数据

获取数据前,因为对axios进行了二次封装,所以需要在api文件夹中先获取数据地址,如下:

import { get, post} from "@/utils/http.js";
//查询用户信息数据
export const searchUserList = (params) => get('/api/user/searchUserList/',params);

接下来就可以在使用的组件中来获取了

<script setup>
import { searchUserList} from '@/api/userManage.js'
//查询
const search = () => {const reqparams = { name: submitForm.value.adminNick }searchUserData(reqparams)
}
//重置
const resetSearch = () => {submitForm.value.adminNick = ''getUserData()
}
//查询用户信息
const searchUserData = params => {return new Promise((resolve, reject) => {searchUserList(params).then(res => {if (res.code === 200 && res.message) {console.log(res, 'shuju')dataSource.value = []const tablist = res.message// console.log(tablist,'messss')tablist.map((item, index) => {// console.log(item,'数据')dataSource.value.push({index: index + 1,adminName: item.userName,adminPwd: item.userPwd,adminNick: item.nickName,picture: item.imgUrl,phoneNumber: item.phone})})}resolve(res.message)}).catch(error => {reject(error)})})
}
</script>

四、详细代码

最后附上详细代码

<template><div class="user-tab"><!-- 查询、重置 --><a-row justify="end" style="padding-top: 10px; padding-right: 15px"><a-col :span="1.5"><p class="user-admin">用户账号</p></a-col><a-col :span="4"><a-input v-model:value="submitForm.adminNick" placeholder="请输入账号" style="width: 200px" /></a-col><a-col :span="1"></a-col><a-col :span="1.5"><a-button type="primary" style="margin-right: 10px" size="middle" @click="search">查询</a-button></a-col><a-col :span="1.5"><a-button type="primary" size="middle" @click="resetSearch">重置</a-button></a-col></a-row><!-- 表格 --><div class="tab-body"><a-table:columns="columns"bordered:data-source="dataSource":pagination="pagination":loading="tableLoading"rowKey="id":scroll="{ y: 'calc(100vh - 380px - 10px)', x: 200 }"><template #index="{ index }">{{ index + 1 }}</template><template #picture="{ record }"><img style="width: 100px; heigth: 100px" :src="record.picture" /></template></a-table></div></div>
</template>
<script setup>
import { searchUserList} from '@/api/userManage.js'
const submitForm = ref({adminNick: '',
})
//查询
const search = () => {const reqparams = { name: submitForm.value.adminNick }searchUserData(reqparams)
}
//重置
const resetSearch = () => {submitForm.value.adminNick = ''getUserData()
}
//表格头部
const columns = [{title: '序号',dataIndex: 'index',key: 'id',width: 200,// ellipsis: true,slots: {customRender: 'index'},fixed: 'left',align: 'center'},{title: '用户账号',width: 200,dataIndex: 'adminName',key: 'name',align: 'center',fixed: 'left'},{title: '密码',width: 200,dataIndex: 'adminPwd',key: 'pwd',align: 'center'// fixed: 'left',},{title: '昵称',width: 200,dataIndex: 'adminNick',key: 'nick',align: 'center'},{title: '头像',width: 200,dataIndex: 'picture',key: 'pic',align: 'center',slots: { customRender: 'picture' }},{title: '手机号',width: 200,dataIndex: 'phoneNumber',key: 'number',align: 'center'}
]
const dataSource = ref([])
//表格分页情况
const pagination = {total: 0,current: 1,pageSize: 10, //每页中显示10条数据showSizeChanger: true,pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
}
//查询用户信息
const searchUserData = params => {return new Promise((resolve, reject) => {searchUserList(params).then(res => {if (res.code === 200 && res.message) {console.log(res, 'shuju')dataSource.value = []const tablist = res.message// console.log(tablist,'messss')tablist.map((item, index) => {// console.log(item,'数据')dataSource.value.push({index: index + 1,adminName: item.userName,adminPwd: item.userPwd,adminNick: item.nickName,picture: item.imgUrl,phoneNumber: item.phone})})}resolve(res.message)}).catch(error => {reject(error)})})
}
</script>
<style lang="less" scoped>
.user-tab {.user-admin {padding-right: 1vw;padding-top: 0.5vw;}::v-deep .ant-row {align-items: center;}::v-deep .ant-btn {line-height: 1vw;}.tab-body {// height: 300px; /* 设置表格的高度 */// height: calc(100% - );::v-deep(.ant-table-tbody tr:nth-child(2n+1)) {background: #deeafb;}::v-deep .ant-table-wrapper {height: calc(100% - 70px);}::v-deep .ant-table {font-size: 16px !important;line-height: 2.6vw;}::v-deep .ant-table-cell {vertical-align: middle;}::v-deep .ant-table-thead > tr > th {background: #deeafb;font-size: 18px;color: #383838;font-weight: 600;}::v-deep .ant-pagination.mini .ant-pagination-total-text {flex: 1;}}.tab-modal {.icon-jiahao {font-size: 30px;text-align: center;}.footButton {margin-top: 20px;display: flex;justify-content: center;justify-content: end;align-items: center;/* padding: px 0; */text-align: center;}}
}
::v-deep .ant-btn {line-height: 1vw;
}
</style>

五、结果展示

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

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

相关文章

企业如何建立网络事件应急响应团队?

企业如何建立网络事件应急响应团队&#xff1f; 一、应急响应中每一秒都很重要二、选择外包服务还是建立自己的网络安全应急响应团队&#xff1f;三、您的应急响应团队需要谁&#xff1f;1. 应急响应小组2. 技术支持和监控团队 四、应急响应小组1. 安全分析工程师 – 具有网络、…

Selenium 使用指南

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Selenium是网页应用中最流行的自动化测试工具&#xff0c;可以用…

LM324的输出VOL与IOL你注意过吗?

电路图 途中LMC6084 更改为LM324 故障现象 这个电路的输入输出表达式为 R30 两端电压等于0V 当J16 的4脚与2脚相等&#xff0c;等于5V&#xff08;或者4脚略大于2脚时&#xff09;7脚输出 约 500mV&#xff1b; 实际应该为0V左右才对.见下图 故障原因 上图运放输出低电平…

【ENSP】VRRP配置方法

VRRP配置步骤 1.配置虚拟ip地址作为网关&#xff0c;进行切换路由器 2.配置vrrp优先级&#xff0c;越大越优先 3.配置延迟抢占时间 4.配置备份组监视接口 AR1路由器配置 u t m #关闭提示 sys …

java POI解析Excel大文件,获取表头

目录 前言依赖代码StreamingReader的openWorkbookFactory的createCSV解析首行 前言 poi解析大文件可能出现oom&#xff0c;通样大小文件&#xff0c;xlsx会oom&#xff0c;xls不会&#xff0c;所以使用流式的方式改造解析xlsx文件的代码。 我的需求是提取每一页的表头&#xf…

创建Maven项目的时候让选择maven模板

创建Maven项目的时候让选择maven模板 心得 工欲利其事 必先利其器。如果你想要干成一件事 那么必须先要精通对应的工具使用。之前我不太注重工具 我觉得只要代码写的好就可以了 但是当我们了解了产品经理的一些思想之后&#xff0c;我才明白一个好的产品是可以给用户提供多大…

wasm 系列之 WebAssembly 和 emscripten 暴力上手

wasm 是什么&#xff1f; wasm 是 WebAssembly 的缩写。wasm 不是传统意义上的汇编语言&#xff0c;而是一种编译的中间字节码&#xff0c;可以在浏览器和其他 wasm runtime 上运行非 JavaScript 类型的语言&#xff0c;只要能被编译成 wasm&#xff0c;譬如 kotlin/wasm、Rus…

IOS恢复

1、实验目的 通过本实验可以掌握&#xff1a; copy方式恢复IOS的步骤。TFTPDNLD方式恢复IOS的步骤。Xmodem方式恢复IOS的步骤。 2、实验拓扑 路由器IOS恢复的实验拓扑如下图所示。 3、实验步骤 如果工作中不慎误删除路由器IOS&#xff0c;或者升级了错误版本的IOS&#xff…

Https协议原理剖析【计算机网络】【三种加密方法 | CA证书 】

目录 一&#xff0c;fidler工具 前提知识 二&#xff0c;Https原理解析 1. 中间人攻击 2. 常见的加密方式 1&#xff09;. 对称加密 2&#xff09;. 非对称加密 对称加密 4&#xff09;. CA证书 1. 数据摘要 3. 数字签名 CA证书 理解数据签名 存在的安全疑问&am…

js基础知识(2)

一、事件的含义 JavaScript事件是指在文档或者浏览器中发生的一些特定交互瞬间&#xff0c;比如打开某一个网页&#xff0c;浏览器加载完成后会触发load事件&#xff0c;当鼠标悬浮于某一个元素上时会触发hover事件&#xff0c;当鼠标点击某一个元素时会触发click事件等等。 三…

力扣练习4.25

92. 反转链表 II 要求在指定的区间内反转。 解题思路&#xff1a; 将整个链表拆成三部分&#xff0c;第一部分是头节点到left的前一个节点&#xff0c;第二部分是left到right的待反转区间&#xff0c;第三部分是right的下一个节点为头结点到尾部。 首先根据反转链表的方法遍历…

在PostgreSQL中如何处理跨表的级联删除和更新?

文章目录 解决方案1. 使用外键约束和级联操作创建外键约束并指定级联删除创建外键约束并指定级联更新 2. 使用触发器&#xff08;Triggers&#xff09;创建触发器实现级联删除 示例代码示例1&#xff1a;使用外键约束和级联删除示例2&#xff1a;使用触发器实现级联删除 在Post…

Golang | Leetcode Golang题解之第44题通配符匹配

题目&#xff1a; 题解&#xff1a; func isMatch(s string, p string) bool {for len(s) > 0 && len(p) > 0 && p[len(p)-1] ! * {if charMatch(s[len(s)-1], p[len(p)-1]) {s s[:len(s)-1]p p[:len(p)-1]} else {return false}}if len(p) 0 {retur…

Python基础:【习题系列】面向对象

在Python中,用于定义类的关键字是什么?( B ) A.classs B.class C.Class D.type 答案:B 难易程度:易 答案解析:在Python中,定义类需要使用关键字class。 知识点:类定义;Python关键字 在Python中,以下哪个关键字用于在类中引用同一类的其他方法或属性?( C ) A.…

C#使用ftp进行文件上传和下载功能(二)

上一篇主要讲解FTP服务器的搭建&#xff0c;本节话不多说直接撸码&#xff1a; 1.首先ftp需要有ip和port&#xff0c;以及登录用户等信息&#xff0c;因此创建三个属性&#xff1b; /// <summary> /// FTP的服务器地址&#xff0c;格式为ftp://192.168.1.234:80…

输入influx但是无法进入influxdb

问题描述&#xff1a; 博主想通过DockerJmeterInfluxDBGrafana搭建性能测试可视化平台&#xff0c;但是按照别的教程输入influx却无法进入inluxdb&#xff0c;输入输出如下&#xff1a; NAME:influx - Influx ClientUSAGE:influx [command]HINT: If you are looking for the I…

Linux下的进程管理:创建、终止、切换与等待

文章目录 一、引言二、进程创建1、进程创建的概念与场景2、进程创建的方式a、fork() 系统调用b、fork() 后的执行流程 3、进程创建的过程a、进程创建过程b、子进程创建过程 4、父子进程关系与属性继承 三、进程终止1、进程终止的原因2、进程的错误码和退出码a、错误码b、退出码…

LeetCode:51. N 皇后

leetCode51.N皇后 题解分析 代码 class Solution { public:int n;vector<vector<string>> ans;vector<string> path;vector<bool> col, dg,udg;vector<vector<string>> solveNQueens(int _n) {n _n;col vector<bool> (n);dg …

《QT实用小工具·四十二》圆形发光图像

1、概述 源码放在文章末尾 该项目实现了图像的发光效果&#xff0c;特别适合做头像&#xff0c;项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; import QtQuick 2.7 import QtGraphicalEffects 1.12Item {id: rootwidth: 80height: 80property int ra…

浓眉大眼的Apple开源OpenELM模型;IDM-VTON试衣抱抱脸免费使用;先进的语音技术,能够轻松克隆任何人的声音

✨ 1: openelm OpenELM是苹果机器学习研究团队发布的高效开源语言模型家族 OpenELM是苹果机器学习研究团队开发的一种高效的语言模型&#xff0c;旨在推动开放研究、确保结果的可信赖性、允许对数据和模型偏见以及潜在风险进行调查。其特色在于采用了一种分层缩放策略&#x…