(自用笔记)每天一点vue3——vue3+elementPlus+express获取excel数据并渲染到页面上

news2024/12/23 11:07:44

我是想做一个vue3+echarts的账单数据展示项目,因为有vue2的基础,打算直接在这个项目上熟悉掌握vue3的新特性。这系列笔记就按照遇见问题解决问题的思路更新,不按照官方快速上手的章节,特此说明。

目标:利用nodejs搭建后端服务,获取excel里的数据,并用elementui的表格样式展示到页面上

搭建express服务

在目标文件夹中初始化项目

npm init -y

安装模块

npm i express --s
npm i body-parser --s
npm i nodemon --s

修改package.json

加上nodemon热启动的命令

  "scripts": {
	...
    "serve": "nodemon index.js"
  },

创建index.js文件

const express = require('express');
const app = express();
//  针对post请求
const bodyParser= require('body-parser')
//  配置插件
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

//  配置静态资源目录   创建一个静态资源文件夹 public(自定义)   访问静态资源文件,访问路径不需要添加public 
//  配置多个静态资源目录
app.use(express.static('public'))

//  处理相关的页面逻辑  处理get请求
app.get('/url', (req, res) => {
    // 处理用户的请求  如果是get请求, 通过 req.query 获取用户传递的数据
    //  todo 数据响应data
    res.send(data)
})
//   处理post请求
app.post('/url', (req, res) => {
    // 处理用户的请求  如果是post请求, 通过 req.body 获取用户传递的数据 , 需要配置插件  body-parser 
    //  todo 数据响应data
    res.send(data)
})
//  处理动态路由  /:id 就是动态路由, 比如 /user/:id   可以匹配 /user/xxx 任意一个地址
//  动态路由的参数获取 : 通过 req.params 获取动态路由的参数 
app.get('/url/:id', (req, res) => {
    //  处理逻辑
    //  todo 数据响应data
    res.send(data);
})

app.listen(3000, () => {
    console.log('server ....')
})

启动server

项目package.json所在目录下打开 控制台 npm run serve
如图,成功启动
在这里插入图片描述

express服务端获取excel数据

安装node-xlsx模块

npm i node-xlsx --s

获取excel数据

在index.js中(后续可以根据业务逻辑封装放在其他文件中)

//引入
let xlsx = require('node-xlsx');
//读取
let sheets = xlsx.parse('E:\\workplace\\testSheets.xlsx');//获取到所有sheets,替换成目标文件地址
//接下来打印出sheets,会在编译器控制台输出。处理结果达到自己的要求即可。
//需要注意的是这里只能输出两层数据,自己截取一下。

准备接口

上文提供的index.js文件已经列出了一些基础接口配置。根据自己需要更改即可。我这里先选取get('/url')这个做示例。

let xlsx = require('node-xlsx');
app.get('/url', (req, res) => {
	let sheets = xlsx.parse('E:\\workplace\\testSheets.xlsx');
    let list = sheets[0].data
    res.send(list)
})

前端搭配elementplus

安装

elementui搭配vue3——elementPlus
npm i element-plus --s
在原有main.js的基础上增加

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css
...
app.use(ElementPlus)
...

使用table组件

在目标页面直接用官网代码。注意页面路由要加上这个页面。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="Date" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" />
    <el-table-column prop="zip" label="Zip" width="120" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ElTable } from 'element-plus'
const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]
</script>

请求数据

安装axios

npm i axios --s

页面请求数据

...
function getList(val) {
  axios.get('/api/url',).then(res => {
    console.log('表格数据', res.data.data)
    excelData = res.data.data
    //excelData即为接口返回的表格数据。根据自己的需求处理Table和数据即可
  })
}
...

处理跨域

前端默认启动的是8080端口,服务端是3000.一定会跨域的。
vue.config.js配置

module.exports = {
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000', // 目标跨域服务器地址
                changeOrigin: true, // 改变源地址,让服务器相信请求来自于本地
                pathRewrite: {
                    '^/api': '' // 重写请求路径
                }
            }
        }
    }
}

记得重启服务。

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

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

相关文章

GPT提示词分享 —— 中医

&#x1f449; 中医诊断涉及因素较多&#xff0c;治疗方案仅供参考&#xff0c;具体的方子需由医生提供。AI建议不能替代专业医疗意见&#xff0c;如果症状严重或持续&#xff0c;建议咨询专业医生。 我希望你能扮演一位既是老中医同时又是一个营养学专家&#xff0c;我讲描述…

gitlab、jenkins安装及使用文档一

gitlab-jenkins安装文档 IP地址操作系统服务版本192.168.75.137Rocky9.2jenkins 2.450-1.1 jdk 11.0.22 git 2.39.3192.168.75.138Rocky9.2gitlab-ce 16.10.0 gitlab安装 前期准备: 关闭防火墙及 SELinuxsystemctl disable --now firewalld sed -i s/^SELINUXenforcing$…

TCP 重传、滑动窗口、流量控制、拥塞控制(计算机网络)

重传机制 TCP 针对数据包丢失的情况&#xff0c;会用重传机制解决。 接下来说说常见的重传机制&#xff1a; 超时重传快速重传SACKD-SACK 超时重传 重传机制的其中一个方式&#xff0c;就是在发送数据时&#xff0c;设定一个定时器&#xff0c;当超过指定的时间后&#xff0c…

ComfyUI本地部署

一、部署准备 1. Comfyui下载 git clone https://github.com/comfyanonymous/ComfyUI.git2. 插件下载 辣椒酱的界面汉化&#xff1a; https://github.com/AIGODLIKE/AIGODLIKE-COMFYUI-TRANSLATION 提示词风格样式&#xff1a; https://github.com/twri/sdxl_prompt_styler …

RabbitMQ进阶——死信队列

RabbitMQ进阶——死信队列 什么是死信队列&#xff1f; 在消息队列中&#xff0c;执行异步任务时&#xff0c;通常是将消息生产者发布的消息存储在队列中&#xff0c;由消费者从队列中获取并处理这些消息。但是&#xff0c;在某些情况下&#xff0c;消息可能无法正常地被处理…

360加固脱壳实战

下载[]打开app使用frida -U -f com.xxx.xxx.xxx -l dupDex.js --no-pause<br> 命令 或者使用frida-hexdump -U -f com.inmo.inmolife命令在com.xxx.xxx.xxx 中寻找dex文件 或者在输出的日志中有输出路径使用dex2jar工具把dex文件转为jar文件 d2j-dex2jar.sh *.dex -d --…

为什么电脑越用越慢!

电脑随着时间推移逐渐变慢是一个常见的现象,其背后涉及多种原因。以下是导致电脑运行速度变慢的几个主要因素: 系统资源消耗增加 软件更新与新增应用:随着软件版本的更新和新应用程序的安装,它们往往对硬件资源的需求更高,尤其是对处理器、内存和硬盘的要求。这些新软件可…

深入理解Linux veth虚拟网络设备:原理、应用与在容器化架构中的重要性

在Linux网络虚拟化领域&#xff0c;虚拟以太网设备&#xff08;veth&#xff09;扮演着至关重要的角色&#x1f310;。veth是一种特殊类型的网络设备&#xff0c;它在Linux内核中以成对的形式存在&#xff0c;允许两个网络命名空间之间的通信&#x1f517;。这篇文章将从多个维…

N1922A是德科技N1922A功率传感器

181/2461/8938产品概述&#xff1a; N192XA 传感器是首款通过将直流参考源和开关电路集成到功率传感器中来提供内部调零和校准的传感器。此功能消除了与使用外部校准源相关的多个连接&#xff0c;从而最大限度地减少了连接器磨损、测试时间和测量不确定性。 连接到 DUT 时进行…

ORA-00600: internal error code, arguments: [krbcbp_9]

解决方案 control_file_record_keep_time 修改 恢复时间窗口 RMAN (Recovery Manager) 是 Oracle 数据库的备份和恢复工具。在 RMAN 中&#xff0c;可以使用“恢复窗口”的概念来指定数据库可以恢复到的时间点。这个时间点是基于最近的完整备份或增量备份。 要设置恢复窗口的…

Flutter之TabBar篇

总结了一下项目中用到的几种TabBar&#xff0c;针对不同的样式&#xff0c;有采用系统提供的&#xff0c;也有三方插件提供的&#xff0c;也有自定义的&#xff0c;效果如下&#xff08;后续如果遇到新的样式&#xff0c;会不间断地记录更新&#xff0c;避免重复造轮子…&#…

嵌入式开发中常用的资源网站分享

1.综合网站 //B站是一个有很多好资料的网站 MOOC中国 - 慕课改变你&#xff0c;你改变世界 //这个就不用多说了&#xff0c;国内的同学应该都用过 2.基础学习&#xff08;C/C&#xff0c;QT上位机等&#xff09;★★★★★ C 标准库 - 参考手册 | 菜鸟教程 C语言中文网&…

TDengine too many open files

too many open files 是比较常见的报错&#xff0c;尤其使用TDengine 3.0 集群时&#xff0c;大概率会遇到。这个报错很简单&#xff0c;但要想顺利解决&#xff0c;却涉及到很多知识点。 目录 知识点&#xff1a;fs.nr_open知识点&#xff1a;file-max & fs.file-nr知识点…

LeetCode-322. 零钱兑换【广度优先搜索 数组 动态规划】

LeetCode-322. 零钱兑换【广度优先搜索 数组 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;Python动态规划五部曲&#xff1a;定推初遍举【先遍历物品 后遍历背包】解题思路二&#xff1a;Python动态规划五部曲&#xff1a;定推初遍举【先遍历背包 后遍历物品】解题思…

thinkphp5关联预载入with指定字段属性查询

一、thinkphp5.0 如果要指定属性查询&#xff0c;可以使用&#xff1a; $list User::field(id,name)->with([profile>function($query){$query->field(email,phone);}])->select([1,2,3]); foreach($list as $user){// 获取用户关联的profile模型数据dump($user…

二、显示图片、提取边缘特征并保存(C# + OpenCV)

实现功能&#xff1a; 1&#xff0c;打开照片&#xff0c;并显示 2&#xff0c;对选择的照片进行Canny边缘检测 3&#xff0c;保存边缘检测之后的结果 一、布局 打开在视图下打开工具箱 选择一个PictureBox&#xff0c;仨Button 对Button改个名字 仨Button&#xff0c;分别…

Word中图表题注样式自动编号

需求 在写论文的时候&#xff0c;希望图表题注是下面的样子&#xff0c;其中图号表示为&#xff1a;章的编号-本章中图的序号&#xff0c;而且都是小写数字。 网上找的方法大多是使用 “插入题注” 来插入&#xff0c;此时章的编号是大写的&#xff0c;如“图一-1”。然后再通…

Mac的终端配置

Mac的终端配置 参考教程包管理工具 - Homebrew出现的问题用虚拟环境解决方案&#xff1a;直接将解释器的路径放过去错误方法&#xff1a;用find查找到虚拟环境安装的路径&#xff0c;其链接的是brew安装的python路径 编辑器没有报错&#xff0c;但是运行过程中仍然找不到pandas…

软件供应链安全:寻找最薄弱的环节

在当今的数字时代&#xff0c;软件占据主导地位&#xff0c;成为全球组织业务和创新的支柱。它是差异化、项目效率、成本降低和竞争力背后的驱动力。软件决定了企业如何运营、管理与客户、员工和合作伙伴的关系&#xff0c;以及充分利用他们的数据。 挑战在于&#xff0c;当今…

[react优化] 避免组件或数据多次渲染/计算

代码如下 点击视图x➕1,导致视图更新, 视图更细导致a也重新大量计算!!这很浪费时间 function App() {const [x, setX] useState(3)const y x 2console.log(重新渲染, x, y);console.time(timer)let a 0for (let index 0; index < 1000000000; index) {a}console.timeE…