devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-06-07 06:00:37

赞

踩

node查询mysql表格并展示

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

一、vue3+ant design画前端页面

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

（1）<template>部分

  1. <template>
  2.   <div class="user-tab">
  3.     <!-- 查询、重置 -->
  4.     <a-row justify="end" style="padding-top: 10px; padding-right: 15px">
  5.       <a-col :span="1.5">
  6.         <p class="user-admin">用户账号</p>
  7.       </a-col>
  8.       <a-col :span="4">
  9.         <a-input v-model:value="submitForm.adminNick" placeholder="请输入账号" style="width: 200px" />
  10.       </a-col>
  11.       <a-col :span="1"></a-col>
  12.       <a-col :span="1.5">
  13.         <a-button type="primary" style="margin-right: 10px" size="middle" @click="search">查询</a-button>
  14.       </a-col>
  15.       <a-col :span="1.5">
  16.         <a-button type="primary" size="middle" @click="resetSearch">重置</a-button>
  17.       </a-col>
  18.     </a-row>
  19.     <!-- 表格 -->
  20.     <div class="tab-body">
  21.       <a-table
  22.         :columns="columns"
  23.         bordered
  24.         :data-source="dataSource"
  25.         :pagination="pagination"
  26.         :loading="tableLoading"
  27.         rowKey="id"
  28.         :scroll="{ y: 'calc(100vh - 380px - 10px)', x: 200 }"
  29.       >
  30.         <template #index="{ index }">
  31.             {{ index + 1 }}
  32.         </template>
  33.         <template #picture="{ record }">
  34.           <img style="width: 100px; heigth: 100px" :src="record.picture" />
  35.         </template>
  36.       </a-table>
  37.     </div>
  38.   </div>
  39. </template>

（2）<script>部分，注意：目前是还未进行获取数据的方式，后续有数据的详见下文

  1. const submitForm = ref({
  2.   adminNick: '',
  3. })
  4. //表格头部
  5. const columns = [
  6.   {
  7.     title: '序号',
  8.     dataIndex: 'index',
  9.     key: 'id',
  10.     width: 200,
  11.     // ellipsis: true,
  12.     slots: {
  13.       customRender: 'index'
  14.     },
  15.     fixed: 'left',
  16.     align: 'center'
  17.   },
  18.   {
  19.     title: '用户账号',
  20.     width: 200,
  21.     dataIndex: 'adminName',
  22.     key: 'name',
  23.     align: 'center',
  24.     fixed: 'left'
  25.   },
  26.   {
  27.     title: '密码',
  28.     width: 200,
  29.     dataIndex: 'adminPwd',
  30.     key: 'pwd',
  31.     align: 'center'
  32.     // fixed: 'left',
  33.   },
  34.   {
  35.     title: '昵称',
  36.     width: 200,
  37.     dataIndex: 'adminNick',
  38.     key: 'nick',
  39.     align: 'center'
  40.   },
  41.   {
  42.     title: '头像',
  43.     width: 200,
  44.     dataIndex: 'picture',
  45.     key: 'pic',
  46.     align: 'center',
  47.     slots: { customRender: 'picture' }
  48.   },
  49.   {
  50.     title: '手机号',
  51.     width: 200,
  52.     dataIndex: 'phoneNumber',
  53.     key: 'number',
  54.     align: 'center'
  55.   }
  56. ]
  57. const dataSource = ref([])
  58. //表格分页情况
  59. const pagination = {
  60.   total: 0,
  61.   current: 1,
  62.   pageSize: 10, //每页中显示10条数据
  63.   showSizeChanger: true,
  64.   pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
  65.   showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
  66. }
  67. //查询
  68. const search = () => {}
  69. //重置
  70. const resetSearch = () => {}

二、利用数据库新建表

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

三、nodejs写查询数据

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

（1）安装数据库

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

npm i mysql

（2）连接数据库

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

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

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

（3）查询数据书写

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

  1. var express = require('express');
  2. var router = express.Router();
  3. //连接数据库
  4. var connection=require('../db/sql.js');
  5. //条件查找
  6. router.get('/api/user/searchUserList/', (req, res) => {
  7.   const name = req.query.name;
  8.   // console.log(req.query,'shuju ')
  9.   // console.log(name,'name')
  10.   const sqlStr = "select * from user_list where nickName=?";
  11.   connection.query(sqlStr, name,(err, results) => {
  12.       if (err){
  13.         console.log(err,'错误信息提示：')
  14.         return res.json({
  15.           code: 404,
  16.           message: '数据不存在',
  17.           affextedRows: 0
  18.         });
  19.       }
  20.       res.json({
  21.           code: 200,
  22.           message: results,
  23.           affextedRows: results.affextedRows
  24.       });
  25.   })
  26. })

（4）获取数据

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

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

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

  1. <script setup>
  2. import { searchUserList} from '@/api/userManage.js'
  3. //查询
  4. const search = () => {
  5.   const reqparams = { name: submitForm.value.adminNick }
  6.   searchUserData(reqparams)
  7. }
  8. //重置
  9. const resetSearch = () => {
  10.   submitForm.value.adminNick = ''
  11.   getUserData()
  12. }
  13. //查询用户信息
  14. const searchUserData = params => {
  15.   return new Promise((resolve, reject) => {
  16.     searchUserList(params)
  17.       .then(res => {
  18.         if (res.code === 200 && res.message) {
  19.           console.log(res, 'shuju')
  20.           dataSource.value = []
  21.           const tablist = res.message
  22.           // console.log(tablist,'messss')
  23.           tablist.map((item, index) => {
  24.             // console.log(item,'数据')
  25.             dataSource.value.push({
  26.               index: index + 1,
  27.               adminName: item.userName,
  28.               adminPwd: item.userPwd,
  29.               adminNick: item.nickName,
  30.               picture: item.imgUrl,
  31.               phoneNumber: item.phone
  32.             })
  33.           })
  34.         }
  35.         resolve(res.message)
  36.       })
  37.       .catch(error => {
  38.         reject(error)
  39.       })
  40.   })
  41. }
  42. </script>

四、详细代码

最后附上详细代码

  1. <template>
  2.   <div class="user-tab">
  3.     <!-- 查询、重置 -->
  4.     <a-row justify="end" style="padding-top: 10px; padding-right: 15px">
  5.       <a-col :span="1.5">
  6.         <p class="user-admin">用户账号</p>
  7.       </a-col>
  8.       <a-col :span="4">
  9.         <a-input v-model:value="submitForm.adminNick" placeholder="请输入账号" style="width: 200px" />
  10.       </a-col>
  11.       <a-col :span="1"></a-col>
  12.       <a-col :span="1.5">
  13.         <a-button type="primary" style="margin-right: 10px" size="middle" @click="search">查询</a-button>
  14.       </a-col>
  15.       <a-col :span="1.5">
  16.         <a-button type="primary" size="middle" @click="resetSearch">重置</a-button>
  17.       </a-col>
  18.     </a-row>
  19.     <!-- 表格 -->
  20.     <div class="tab-body">
  21.       <a-table
  22.         :columns="columns"
  23.         bordered
  24.         :data-source="dataSource"
  25.         :pagination="pagination"
  26.         :loading="tableLoading"
  27.         rowKey="id"
  28.         :scroll="{ y: 'calc(100vh - 380px - 10px)', x: 200 }"
  29.       >
  30.         <template #index="{ index }">
  31.             {{ index + 1 }}
  32.         </template>
  33.         <template #picture="{ record }">
  34.           <img style="width: 100px; heigth: 100px" :src="record.picture" />
  35.         </template>
  36.       </a-table>
  37.     </div>
  38.   </div>
  39. </template>
  40. <script setup>
  41. import { searchUserList} from '@/api/userManage.js'
  42. const submitForm = ref({
  43.   adminNick: '',
  44. })
  45. //查询
  46. const search = () => {
  47.   const reqparams = { name: submitForm.value.adminNick }
  48.   searchUserData(reqparams)
  49. }
  50. //重置
  51. const resetSearch = () => {
  52.   submitForm.value.adminNick = ''
  53.   getUserData()
  54. }
  55. //表格头部
  56. const columns = [
  57.   {
  58.     title: '序号',
  59.     dataIndex: 'index',
  60.     key: 'id',
  61.     width: 200,
  62.     // ellipsis: true,
  63.     slots: {
  64.       customRender: 'index'
  65.     },
  66.     fixed: 'left',
  67.     align: 'center'
  68.   },
  69.   {
  70.     title: '用户账号',
  71.     width: 200,
  72.     dataIndex: 'adminName',
  73.     key: 'name',
  74.     align: 'center',
  75.     fixed: 'left'
  76.   },
  77.   {
  78.     title: '密码',
  79.     width: 200,
  80.     dataIndex: 'adminPwd',
  81.     key: 'pwd',
  82.     align: 'center'
  83.     // fixed: 'left',
  84.   },
  85.   {
  86.     title: '昵称',
  87.     width: 200,
  88.     dataIndex: 'adminNick',
  89.     key: 'nick',
  90.     align: 'center'
  91.   },
  92.   {
  93.     title: '头像',
  94.     width: 200,
  95.     dataIndex: 'picture',
  96.     key: 'pic',
  97.     align: 'center',
  98.     slots: { customRender: 'picture' }
  99.   },
  100.   {
  101.     title: '手机号',
  102.     width: 200,
  103.     dataIndex: 'phoneNumber',
  104.     key: 'number',
  105.     align: 'center'
  106.   }
  107. ]
  108. const dataSource = ref([])
  109. //表格分页情况
  110. const pagination = {
  111.   total: 0,
  112.   current: 1,
  113.   pageSize: 10, //每页中显示10条数据
  114.   showSizeChanger: true,
  115.   pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
  116.   showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
  117. }
  118. //查询用户信息
  119. const searchUserData = params => {
  120.   return new Promise((resolve, reject) => {
  121.     searchUserList(params)
  122.       .then(res => {
  123.         if (res.code === 200 && res.message) {
  124.           console.log(res, 'shuju')
  125.           dataSource.value = []
  126.           const tablist = res.message
  127.           // console.log(tablist,'messss')
  128.           tablist.map((item, index) => {
  129.             // console.log(item,'数据')
  130.             dataSource.value.push({
  131.               index: index + 1,
  132.               adminName: item.userName,
  133.               adminPwd: item.userPwd,
  134.               adminNick: item.nickName,
  135.               picture: item.imgUrl,
  136.               phoneNumber: item.phone
  137.             })
  138.           })
  139.         }
  140.         resolve(res.message)
  141.       })
  142.       .catch(error => {
  143.         reject(error)
  144.       })
  145.   })
  146. }
  147. </script>
  148. <style lang="less" scoped>
  149. .user-tab {
  150.   .user-admin {
  151.     padding-right: 1vw;
  152.     padding-top: 0.5vw;
  153.   }
  154.   ::v-deep .ant-row {
  155.     align-items: center;
  156.   }
  157.   ::v-deep .ant-btn {
  158.     line-height: 1vw;
  159.   }
  160.   .tab-body {
  161.     // height: 300px; /* 设置表格的高度 */
  162.     // height: calc(100% - );
  163.     ::v-deep(.ant-table-tbody tr:nth-child(2n+1)) {
  164.        background: #deeafb;
  165.     }
  166.     ::v-deep .ant-table-wrapper {
  167.       height: calc(100% - 70px);
  168.     }
  169.     ::v-deep .ant-table {
  170.       font-size: 16px !important;
  171.       line-height: 2.6vw;
  172.     }
  173.     ::v-deep .ant-table-cell {
  174.       vertical-align: middle;
  175.     }
  176.     ::v-deep .ant-table-thead > tr > th {
  177.       background: #deeafb;
  178.       font-size: 18px;
  179.       color: #383838;
  180.       font-weight: 600;
  181.     }
  182.     ::v-deep .ant-pagination.mini .ant-pagination-total-text {
  183.       flex: 1;
  184.     }
  185.   }
  186.   .tab-modal {
  187.     .icon-jiahao {
  188.       font-size: 30px;
  189.       text-align: center;
  190.     }
  191.     .footButton {
  192.       margin-top: 20px;
  193.       display: flex;
  194.       justify-content: center;
  195.       justify-content: end;
  196.       align-items: center;
  197.       /* padding: px 0; */
  198.       text-align: center;
  199.     }
  200.   }
  201. }
  202. ::v-deep .ant-btn {
  203.   line-height: 1vw;
  204. }
  205. </style>

五、结果展示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/684225
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号