【java爬虫】使用vue+element-plus编写一个简单的管理页面

前言

前面我们已经将某宝联盟的数据获取下来了，并且编写了一个接口将数据返回，现在我们需要使用vue+element-plus编写一个简单的管理页面进行数据展示，由于第一次使用vue编写前端项目，所以只是编写了一个非常简单的页面。

项目结构

先来简单介绍一下项目结构，本次项目非常简单，我只是使用了vue3+element-plus，只是一个demo样例，后续可以添加其他的新功能。

整体布局就是传统的管理系统的布局，一共由三个部分组成，分别是头部，侧边栏和主页面

头部可以填写一些信息，包括用户的登录登出操作，侧边栏就是一些按钮，用来切换主页面，主页面就是展示我们的具体信息。

本次的案例我们只有两个页面，一个是首页，一个就是详细的数据页面，在vue项目中分别对应了两个组件，其中首页我只是简单用文字描述了一下。

下面来看一下详细的项目结构

首先是main.js，这是vue项目的主函数，在这里将我们需要用到的三方库都引进来

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue'


const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');

接着是App.vue，这个页面就是我们的主页面，我们将大体的程序框架都写在这个文件中

最后就是我们引入的两个组件，一个是首页，这个组件我们只是用一个简单的占位符进行表示，后续还可以更新其他的内容

最后就是我们的详细的数据页面，我们使用element-plus的表格进行表示

在使用element-plus的表格的时候可能会报错，我们需要在vue.config.js中添加一个段内容

添加完这段内容后需要重启项目才能生效。

总结

本文只是简单介绍了一下使用vue+element-plus编写一个管理系统前端页面的基本项目结构，根据这个项目结构就可以不断完善功能，编写出自己想要的效果。

最后附上element-plus组件的使用文档

Button 按钮 | Element Plus (element-plus.org)