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

我是想做一个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': '' // 重写请求路径
                }
            }
        }
    }
}

记得重启服务。