Vue3 vite脚手架搭建系统及可视化大屏

Vue3+vite后台管理系统

项目概述：

通过Vue3+vite脚手架搭建项目，结合Element-Plus、Echarts、Axios、Mock、Vuex完善各功能模块，进行后台管理系统的开发。

实训中注重对图表的应用，数据的引入，数据可以mock生成也可以写静态数据

各官网地址：

Element-Plus

Echarts

Axios

Mock

Vuex

Vite

1. 项目准备
   1. Node.js安装

进入node.js官网选择版本安装，选择较低版本，比较稳定。

同时按WIN+R输入cmd打开命令提示符窗口，输入node -v查看安装的版本，出现版本号即安装成功。注意vite需要Node.js版本>=12.0.0 。

1. 1. 项目搭建
2. 确定好项目存放的位置，在存放路径下输入cmd进入控制台，输入代码:

npm create vite@latest  ,完成项目名称填写，框架选择vue，语言选择javascript。

 

1. cd到已经创建的项目中，使用npm i  安装依赖,安装成功后使用工具打

开整个项目文件夹，进入终端利用cnpm run dev  运行项目。

1. 后台管理系统准备工作
   1. Element Plus
      1. 安装

打开工具终端，输入npm install element-plus --save 进行安装（如果太慢，可以到文件管理器该项目目录下输入cmd进入终端，输入cnpm install element-plus --save ，后续安装操作都可以这样）

1. 1. 1. 引入

这边采用局部（按需）引入，vue3的局部引用与全局引用相比不会复杂多少，但最后项目打包体积会减小很多。可以加快运行速度。

1、安装插件：

1. npm install -D unplugin-vue-components unplugin-auto-import  

2、进入vite.config.js文件，将以下代码复制进文件

1. import AutoImport from 'unplugin-auto-import/vite'  
2. import Components from 'unplugin-vue-components/vite'  
3. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' 

plugins中代码如下：

1. plugins: [  
2.     vue(),  
3.     AutoImport({  
4.       resolvers: [ElementPlusResolver()],  
5.     }),  
6.     Components({  
7.       resolvers: [ElementPlusResolver()],  
8.     }),  
9.   ],  

1. 1. Router
      1. 安装

打开终端输入：

1. npm install vue-router -S  

1. 1. 1. 引入
2. 在src文件夹下新建router文件夹，router文件夹下新建一个index.js文件。
3. 打开index.js文件输入以下代码引入路由

import { createRouter,createWebHashHistory } from "vue-router";

1. 在src下新建views文件夹，并在views文件夹下新建Main.vue文件。
2. 在src下新建home文件夹，并在home文件夹下新建Home.vue文件。
3. 打开router文件夹下的index.js文件，进行基本的路由配置如下

1. const routes =[  
2.     {  
3.         path: '/',  
4.         component:()=> import('../views/Main.vue'),  
5.         redirect: '/home',  
6.         children: [  
7.             {  
8.                 path:'/home',  
9.                 name:'home',  
10.                 component: () => import('../views/home/Home.vue')  
11.             },  
12. const router = createRouter({  
13.     history: createWebHashHistory(),  
14.     routes  
15. })  
16.   
17. export default router   //暴露

redirect：‘/home‘表示运行项目后首先进入home页面，后续有了登录页可以改成rediect：’/login(登录页名)‘

6、进入main.js文件引入router

1. import router from './router'  

再使用router

1. app.use(router)  

7、进入App组件在<template>闭合标签中放入router-view表示位置

8、Main.vue中写入首页布局代码，以及变化路由

1. <template>  
2.     <div>左侧菜单</div>  
3.     <div>头部</div>  
4.     <div>这个部分是变化的  
5.          <router-view />  
6.     </div>  
7. </template>

9、进入Home.vue填入以下代码来做路由测试

1. <template>  
2. <div>我是home组件</div>  
3. </template> 

1. 可视化大屏创建
   1. 组件

在src下创建views文件夹，在views文件夹下，创建Screen.vue文件，作为可视化大屏

1. 1. 样式
2. 导入tailwindcss，（用于样式）利用以下代码安装。

npm install -D tailwindcss  

npx tailwindcss init 此行代码会产生一个tailwind.config.js文件，打开它进行修改配置。

将文件中的content修改为： content: ["./src/**/*.{html,js}"]

1. 找到src下的style.css文件添加以下代码：

@tailwind base;  

@tailwind components; 

@tailwind utilities;

1. 1. 可视化大屏布局

布局效果：

大致可以分为三列，八个图表，具体布局和图表数量可以自行修改。

1. <template>  
2.     <div class="bg-[url('assets/imgs/bgpic.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden >  
3.       <!-- 左 -->  
4.       <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col"></div>  
5.       <!-- 中 -->  
6.       <div class="w-1/2 mr-5 flex flex-col"> </div>  
7.        <!-- 右 -->  
8.       <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col"> </div>  
9.       </div>  
10.   </template>  
11.   <script setup>  
12.   </script>  
13.   <style lang="scss" scoped>  
14.   .h-96{  
15.     height: 500px;  
16.   }  
17.   </style> 

1. 1. 可视化大屏组件

1、在src下，component文件夹中创建需要用到的图表组件，以饼图（遗失物品类）为例。

创建Pie.vue组件。并进行基本代码填充，分别为<template>、<script>、<style>，依格式将其余需要的图表组件创建完毕。

1. <template>  
2.     <div>  
3.    <div>【遗失物品类】</div>  
4.     </div>  
5. </template>  
6. <script>  
7. </script>  
8. <style>  
9. </style> 

1. 将创建好的组件依次导入Screen.vue，以饼图（遗失物品类）为例。

1. <template>  
2.     <div class="bg-[url('assets/imgs/bgpic.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden bg-opacity-30"  
3.     v-if="data">  
4.       <!-- 左 -->  
5.       <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">  
6.       </div>  
7.       <!-- 中 -->  
8.       <div class="w-1/2 mr-5 flex flex-col">  
9.       </div>  
10.       <!-- 右 -->  
11.       <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">  
12.       <Pie class=" h-96 box-border p-4 mt-2"/>  
13.       </div>  
14.     </div>  
15.   </template>  
16.   
17.   <script setup>  
18.   import Pie from '../components/Pie.vue';  
19.   </script>  
20.   
21.   <style lang="scss" scoped>  
22.   </style>  

1. 后台管理页面创建
   1. 首页布局

打开Element Plus 组件内容，Container块寻找适合的布局。

这里选择红圈这个布局，有侧边栏Aside，头部Header，主体Main。点击小圈的<>图标即可查看代码，将相应代码复制进Main.vue。并将el-main中的内容替换回router-view

1. 1. Header模块

Header效果图

在components文件夹下，新建CommonHeader.vue组件完成template基本填充（基本填充意为在空vue文件中写好template、script、style）

1. <template>  
2.     <div>我是...</div>  
3.   </template>  
4.     
5.   <script>  
6.     
7.   </script>  
8.     
9.   <style>  
10.     
11.   </style> 

进入Main.vue在script闭合标签中引入CommonHeader组件如下：

1. import { defineComponent } from 'vue';  
2. import CommonHeader from '../components/CommonHeader.vue';  
3.   
4. export default defineComponent({  
5.   components: {  
6.      CommonHeader,       
7.     },      
8. }); 

并将原本布局中的

换为

添加进去。

因为header涉及到图标展示，我们需要使用到element plus中的icon组件

首先打开终端输入以下代码进行icon的全局安装：

1. npm i @element-plus/icons-vue -S  

安装好以后，进入main.js文件进行图标注册，

而后即可通过以下形式来使用icon

1. <el-icon :size="20">  
2.                    <Menu />  
3.                </el-icon>  

icon名称可以进入element Plus找到icon组件进行查看

由上方效果图我们可以得知，header主要由icon菜单图标、可视化大屏跳转按钮、logo状下拉菜单组成。

Template：

1. <template>  
2.     <el-header>  
3.         <div class="l-content">  
4.             <!-- 图标展示 -->  
5.             <el-button size="small" plain @click="handleCollapse">  
6.                 <el-icon :size="20">  
7.                     <Menu />  
8.                 </el-icon>  
9.             </el-button>  
10.   
11.             <!-- 面包屑 -->  
12.               
13.             <el-breadcrumb separator="/" class="bread">  
14.                 <!-- 首页一定存在，因此写死 -->  
15.     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>  
16.     <el-breadcrumb-item :to="current.path " v-if="current">{{current.label}}</el-breadcrumb-item>  
17.             </el-breadcrumb>  
18.              
19.         </div>  
20.   
21.         <div class="ScreenButton">  
22.             <el-button type="primary" @click="GetScreen">水寻可视化</el-button>  
23.         </div>  
24.   
25.         <div class="r-content">  
26.             <el-dropdown>  
27.     <span class="el-dropdown-link">  
28.         <img class="logo" :src="getImgSrc('logo')" alt="">  
29.     </span>  
30.     <template #dropdown>  
31.       <el-dropdown-menu>  
32.         <el-dropdown-item>管理员中心</el-dropdown-item>  
33.         <el-dropdown-item>个人中心</el-dropdown-item>  
34.         <el-dropdown-item @click="handleLoginOut">退出</el-dropdown-item>  
35.       </el-dropdown-menu>  
36.     </template>  
37.   </el-dropdown>  
38.         </div>  
39.     </el-header>  
40. </template> 

代码1-10行为按钮菜单

代码11-17行为静态面包屑--首页

代码21-23行为可视化大屏跳转按钮

代码25-35行为logo状下拉菜单

下拉菜单组件我们可以打开Element Plus找到Dropdown组件查看代码，然后根据需求删减action选项。

Script：

1. <script>  
2. import { computed } from 'vue';  
3. import {useStore} from 'vuex';  
4. import { useRouter } from 'vue-router';  
5.   
6. export default {  
7.     setup(){  
8.         let store = useStore()  
9.         let getImgSrc = (logo) =>{  
10.             return new URL(`../assets/imgs/${logo}.png`, import.meta.url).href;  
11.         };  
12.         let handleCollapse = () =>{  
13.             //调用vuex中的mutations  
14.             store.commit('updateIsCollapse');     
15.         };  
16.         //计算属性  
17.         const current = computed(()=>{  
18.             return store.state.currentMenu;  
19.         });  
20.         const router =useRouter();  
21.         const handleLoginOut =()=>{  
22.             store.commit("cleanMenu");  
23.             router.push({  
24.                 name:"login",  
25.             })  
26.         };  
27.         const GetScreen =()=>{  
28.             router.push({  
29.                 name:'screen',  
30.             })  
31.         }  
32.         return{  
33.             getImgSrc,  
34.             handleCollapse,  
35.             current,  
36.             handleLoginOut,  
37.             GetScreen,  
38.         };  
39.           
40.     },  
41. };  
42. </script>

代码2-4行分别引入所需的元素

代码7-11行用于动态引入下拉菜单的图片，图片可自行寻找，一般存放在src/assets/imgs路径下。

代码12-19行用于实现左侧菜单按钮的伸展和收缩，利用了vuex的状态管理，因此需要引入vuex。

代码20-26行用于使用下拉菜单中的退出按钮，执行从首页退出至登录页

代码27-31行用于从首页跳转到可视化页面

代码32-38行返回上面各函数，函数不反回无法调用。

CSS样式

1. <style lang="less" scoped>  
2. header{  
3.     display: flex;  
4.     justify-content: space-between;  
5.     align-items: center;  
6.     width: 100%;  
7.     background: RGB(36,77,106);  
8. }  
9. .r-content{  
10.     .logo{  
11.         width: 50px;  
12.         height: 50px;  
13.         border-radius: 10;  
14.     }  
15. }  
16. .l-content{  
17.     display: flex;  
18.     align-items: center;  
19.     .el-button{  
20.         margin-right: 20px;  
21.     }  
22.     h3{  
23.         color: #fff;  
24.     }  
25. }  
26. }  
27. :deep(.bread span) {  
28.     color: #fff !important;  
29.     cursor: pointer;  
30. }  
31. .ScreenButton{  
32.     margin-right: -1100px;  
33.     box-shadow: #000;  
34. }  
35. </style> 

具体样式可根据实际情况调整。

当运行以后发现显示有问题，可以通过在浏览器页面打开控制台，快捷键ctrl+shift+i，点击element来审查元素。

下方styles可以查看当前的样式代码，也可以在控制台编写样式代码来预览效果，效果合适以后再回到工具中进行具体修改。

1. 1. Aside模块

Aside效果图

侧边栏

Template

1. <template>  
2.     <el-aside :width="$store.state.isCollapse ? '180px':'64px'">  
3.         <el-menu class="el-menu-vertical-demo"   
4.         background-color="#479AD3"   
5.         text-color="#fff"  
6.         :collapse="!$store.state.isCollapse"  
7.         :collapse-transition="false"  
8.         >  
9.   
10.         <h3 v-show="$store.state.isCollapse">水寻管理</h3>  
11.         <h3 v-show="!$store.state.isCollapse">水寻</h3>  
12.   
13.       <el-menu-item   
14.       :index="item.path"   
15.       v-for="item in noChildren()"   
16.       :key="item.path"  
17.       @click="clickMenu(item)"  
18.       >  
19.             
20.           <!-- 动态引入icon -->  
21.           <component class="icons" :is="item.icon"></component>  
22.   
23.           <span>{{ item.label }}</span>  
24.   
25.         </el-menu-item>  
26.   
27.         <el-sub-menu   
28.         :index="item.label"   
29.         v-for="item in hasChildren()"   
30.         :key="item.path"  
31.         >  
32.           <template #title>  
33.             <component class="icons" :is="item.icon"></component>  
34.             <span>{{ item.label }}</span>  
35.           </template>  
36.           <el-menu-item-group >  
37.             <el-menu-item   
38.             :index="subItem.path"   
39.             v-for="(subItem,subIndex) in item.children"   
40.             :key="subIndex"  
41.             @click="clickMenu(subItem)"  
42.             >  
43.             <component class="icons" :is="subItem.icon"></component>  
44.           <span>{{ subItem.label }}</span>  
45.         </el-menu-item>  
46.             
47.           </el-menu-item-group>  
48.         </el-sub-menu>  
49.        
50.      
51.       </el-menu>  
52.     </el-aside>  
53.         
54. </template> 

代码2-8行设定侧边栏宽高与颜色，可自行根据需求修改。

代码10-11行配合header中的菜单按钮实现侧边栏的缩放和展开

代码13-25行判断是否有子菜单，并动态引入icon图标

代码27-48行用于子菜单的显示

Script：

1. <script>  
2. import {useRouter} from 'vue-router'   
3. import { useStore } from 'vuex';  
4. export default {  
5.     setup() {  
6.         const store = useStore()  
7.         const router = useRouter();  
8.         const noChildren= () =>{  
9.             return asyncList.filter((item) => !item.children);  
10.         };  
11.         const hasChildren = () =>{  
12.             return asyncList.filter((item) => item.children);  
13.         };  
14.         const asyncList = store.state.menu;  
15.         const clickMenu = (item) => {  
16.             router.push({  
17.                 name: item.name,  
18.             });  
19.             //vuex 来管理  
20.             store.commit('selectMenu',item);  
21.         };  
22.         return {  
23.             noChildren,  
24.             hasChildren,  
25.             clickMenu,  
26.         }  
27.     },  
28. }  
29. </script> 

Css样式

1. <style lang="less" scoped>  
2. .icons{  
3.     width: 18px;  
4.     height: 18px;  
5. }  
6. .el-menu{  
7.     border-right: none;  
8.     h3{  
9.         line-height: 48px;  
10.         color: #fff;  
11.         text-align: center;  
12.         font-size: 20px;  
13.           
14.     }  
15. }  
16. </style>

1. 1. Home模块

效果图

依图可知我们的home页面主要由一个el-card，一个el-card嵌套el-table，一个el-card组和一个海报走马灯组成。

Template

1. <template>  
2.   <el-row class="home" :gutter="20">  
3.     <el-col :span="8" style="margin-top: 20px">  
4.       <el-card shadow="hover">  
5.         <div class="poster">  
6.           <img src="../../assets/imgs/poster.jpg" alt="" />  
7.           <div class="postinfo">   
8.             <p class="name"></p>  
9.             <p class="role"></p>  
10.           </div>  
11.         </div>  
12.         <div class="login-info">  
13.           <p>上次登录时间:<span>2024.01.05</span></p>  
14.           <p>上次登录地点:<span>浙江水利水电学院</span></p>  
15.         </div>  
16.       </el-card >  
17.       <!-- 失物招领信息数据 -->  
18.       <el-card shadow="hover" style="margin-top: 20px" height="450px">  
19.        <el-table :data="tableData">  
20.           <el-table-column   
21.           v-for="(val,key) in tableLabel"   
22.           :key="key"   
23.           :prop="key"  
24.           :label="val">  
25.           </el-table-column>  
26.        </el-table>  
27.       </el-card>  
28.     </el-col>  
29.     <el-col :span="16" style="margin-top: 20px;">  
30.       <div class="name">  
31.       <el-card :body-style="{display:'flex',padding:0}" v-for="item in lostData" :key="item.name"  
32.       >  
33.       <component class="icons" :is="item.icon" :style="{background: item.color}"></component>   
34.       <div class="detail">  
35.         <p class="number">{{item.value}}件</p>  
36.         <p class="txt">{{item.name}}</p>  
37.       </div>  
38.       </el-card>  
39.     </div>  
40.     <div class="block text-center">  
41.     <span class="demonstration"  
42.       ></span  
43.     >  
44.     <el-carousel height="463px">  
45.       <el-carousel-item v-for="(item,index) in carouseData" :key="index">  
46.         <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->  
47.         <img :src="item.src" class="Pic" alt="" />  
48.       </el-carousel-item>  
49.     </el-carousel>  
50.   </div>  
51.     </el-col>  
52.   </el-row>  
53. </template> 

代码4-16行用于表现海报卡片

代码18-27行用于表现失物数据卡片

代码代码31-38行用于表现失物卡片组

代码44-49行用于表现海报走马灯

Script

1. <script>  
2. import { defineComponent,onMounted,ref,getCurrentInstance, reactive } from "vue";  
3. export default defineComponent({  
4.   setup() {  
5.     const {proxy} = getCurrentInstance();  
6.     let tableData =ref([]);  
7.     let lostData = ref([]);  
8.   
9.     const tableLabel={  
10.       getTime:'捡到时间',  
11.       picker:'拾取者',  
12.       goods:'物品',  
13.       position:'拾取位置'  
14.     };  
15.     const getTableList = async ()=>{  
16.       let res = await proxy.$api.getTableData();  
17.       tableData.value=res  
18.     };  
19.     //获取失物招领数据  
20.     const getLostData =async () =>{  
21.       let res=await proxy.$api.getLostData();  
22.       lostData.value = res;  
23.     };  
24.       
25.     const getImageUrl =(name)=>{  
26.       // return new URL(name,import.meta.url).href;  
27.       return new URL(`../../assets/imgs/${name}.png`, import.meta.url).href  
28.     }  
29.     const carouseData = reactive([  
30.         {src: getImageUrl('pic1')},  
31.         {src: getImageUrl('pic2')},  
32.         {src: getImageUrl('pic3')},  
33.         {src: getImageUrl('pic4')},  
34.     ]);  
35.     onMounted(()=>{  
36.       getTableList();  
37.       getLostData();  
38.     })  
39.     return {  
40.       tableData,  
41.       tableLabel,  
42.       lostData,  
43.       carouseData,  
44.       getImageUrl,  
45.     };  
46.   },  
47. })  
48. </script> 

在home页面中我们会在第二章失物招领数据卡片上用到数据的引用，这涉及到axios数据请求以及mock模拟数据。上方准备工作已经完成了安装。现在我们来配置我们的mock数据。

1. 在src下新建一个api文件夹。在api文件夹下新建api.js文件，mock.js文件,request.js文件。
2. 打开request.js文件，输入以下代码进行数据拦截请求，这里会用到axios。

1. import axios from 'axios'  
2. import config from '../config'  
3. import{ElMessage} from 'element-plus'  
4.   
5. const NETWORK_ERROR='网络请求异常，请稍后重试......'  
6. //创建一个axios实例对象  
7. const service = axios.create({  
8.     baseURL: config.baseApi  
9. })  
10. //在请求之前  
11.   
12. service.interceptors.request.use((req)=>{  
13.     //可以自定义header  
14.     //jwt-token认证的时候  
15.     return req  
16. })  
17. //在请求之后  
18.   
19. service.interceptors.response.use((res)=>{  
20.     // console.log(res);  
21.     const {code,data,msg}=res.data  
22.     //根据后端 视情况而定  
23.     if(code==200){  
24.         return data  
25.     }else{  
26.         //网络请求错误  
27.         ElMessage.error(msg || NETWORK_ERROR)  
28.         return Promise.reject(msg || NETWORK_ERROR)  
29.     }  
30. })  
31. //封装核心函数  
32. function request(options) {  
33.     //{}  
34.     options.method = options.method || 'get'  
35.     if(options.method.toLowerCase() == 'get'){  
36.         options.params =options.data  
37.     }  
38.   
39.     //对mock的处理  
40.     let isMOCK = config.ismock  //总体的mock  
41.     if(typeof options.mock !=='undefined'){  
42.         isMOCK = options.mock  
43.     }  
44.   
45.     //对线上环境做处理  
46.     if(config.env == 'prod'){  
47.         //不给用mock的机会  
48.         service.defaults.baseURL = config.baseApi  
49.     }else{  
50.         service.defaults.baseURL = isMOCK ? config.mockApi : config.baseApi   
51.     }  
52.   
53.     return service(options)  
54. }  
55.   
56. export default request  

1. 打开mock.js进行获取数据的配置

1. import Mock from 'mockjs'  
2. import homeApi from './mockData/home'  
3. import userApi from './mockData/user'  
4. import lostApi from './mockData/lost'  
5. import permissionApi from './mockData/permission'  
6. //本地拦截请求  
7. Mock.mock('/home/getData',homeApi.getHomeData)  
8.   
9. //本地获取user的数据  
10. Mock.mock(/user\/getUser/,'get',userApi.getUserList)  
11. Mock.mock(/user\/add/,'post',userApi.createUser)  
12. Mock.mock(/user\/edit/,'post',userApi.updateUser)  
13. Mock.mock(/user\/delete/,'get',userApi.deleteUser)  
14. Mock.mock(/permission\/getMenu/,'post',permissionApi.getMenu)  
15.   
16. //本地获取lost数据  
17. Mock.mock(/lost\/getLost/,'get',lostApi.getLostList)  
18. Mock.mock(/lost\/add/,'post',lostApi.createUser)  
19. Mock.mock(/lost\/edit/,'post',lostApi.updateUser)  
20. Mock.mock(/lost\/delete/,'get',lostApi.deleteUser) 

这里的获取数据代码包括了整个项目中的数据，目前步骤仅到getHomeData，这里我们采用了两种方法，一种是本地mock生成数据，另一种则是线上mock生成数据。第二种更为重要。

方法如下：

1. 我们打开fastmock快速mock网站，微信扫码登录账号，写我们自己的接口。

1. 点击加号创建接口，其中需要设计接口根地址。创建完成后，点击新增接口。

我们就可以看到如图所示页面，随后填入我们的自定义接口名，返回类型，url地址，以及右侧我们的mock数据即可创建接口。Code 200的含义可以理解拦截数据时的验证码，相同在则拦截成功。

1. 随后我们在src下创建config文件夹，并在下面创建index.js文件。在其中配置我们的环境配置文件如下：

1. // 环境配置文件  
2. // 企业级项目中，有三个环境：  
3. //开发环境、测试环境、线上环境  
4.   
5. //用env取得当前环境，如果取不到，则为线上环境  
6. const env = import.meta.env.MODE || 'prod'  
7.   
8. const EnvConfig = {  
9.     development: {  
10.         daseApi:'/api',  
11.         mockApi:'https://www.fastmock.site/mock/e98d3ea2f4ce5e0e5f85c638ab745984/lost-mockData',  
12.     },  
13.     test: {  
14.         daseApi:'/test.api',  
15.         mockApi:'https://www.fastmock.site/mock/e98d3ea2f4ce5e0e5f85c638ab745984/lost-mockData',  
16.   
17.     },  
18.     pro: {  
19.         daseApi:'//pro.api',  
20.         mockApi:'https://www.fastmock.site/mock/e98d3ea2f4ce5e0e5f85c638ab745984/lost-mockData',  
21.   
22.     },  
23.   
24. }  
25.   
26. export default{  
27.     env,  
28.     //mock总开关  
29.     mock:true,  
30.     //解构导出api  
31.     ...EnvConfig[env]  
32. } 

其中的mock api即为我们fastmock上所创建的根接口地址。

4、随后我们进入api.js文件进行数据获取，通过创建函数来传送数据。

1. // 对整个项目api的管理  
2.   
3.   
4.   
5. import request from "./request"  
6.   
7. export default{  
8.     //home组件 首页失物招领卡片数据获取  
9.     getTableData(params){  
10.         return request({  
11.             url:'/home/getTableData',  
12.             method: 'get',  
13.             data: params,  
14.             mock: true  
15.         })  
16.     },  
17.     getLostData(){  
18.         return request({  
19.             url:'/home/getLostData',  
20.             method: 'get',  
21.             mock: true  
22.         })  
23.     },  
24.     getUserData(params){  
25.         return request({  
26.             url:'/user/getUser',  
27.             method: 'get',  
28.             mock:false,  //该mock置为true则会采用线上的api地址  
29.             data:params,  
30.             //data:{total: 0,page: 1,}  
31.         })  
32.       
33.     },  
34.     gettheLostData(params){  
35.         return request({  
36.             url:'/lost/getLost',  
37.             method: 'get',  
38.             mock:false,  //该mock置为true则会采用线上的api地址  
39.             data:params,  
40.             //data:{total: 0,page: 1,}  
41.         })  
42.     },  
43.     addUser(params){  
44.         return request({  
45.             url:'user/add',  
46.             method:'post',  
47.             mock: false,  
48.             data: params,  
49.         })  
50.     },  
51.     addLost(params){  
52.         return request({  
53.             url:'lost/add',  
54.             method:'post',  
55.             mock: false,  
56.             data: params,  
57.         })  
58.     },  
59.     editUser(params){  
60.         return request({  
61.             url:'/user/edit',  
62.             method: 'post',  
63.             mock:false,  //该mock置为true则会采用线上的api地址  
64.             data:params,  
65.               
66.         })  
67.     },  
68.     editLost(params){  
69.         return request({  
70.             url:'/lost/edit',  
71.             method: 'post',  
72.             mock:false,  //该mock置为true则会采用线上的api地址  
73.             data:params,  
74.               
75.         })  
76.     },  
77.     deleteUser(params){  
78.         return request({  
79.             url:'/user/delete',  
80.             method: 'get',  
81.             mock:false,  //该mock置为true则会采用线上的api地址  
82.             data:params,  
83.               
84.         })  
85.     },  
86.     deleteLost(params){  
87.         return request({  
88.             url:'/lost/delete',  
89.             method: 'get',  
90.             mock:false,  //该mock置为true则会采用线上的api地址  
91.             data:params,  
92.               
93.         })  
94.     },  
95.     //根据用户的用户名不同，返回不一样的菜单列表  
96.     getMenu(params){  
97.         return request({  
98.             url:'/permission/getMenu',  
99.             method:'post',  
100.             mock:false,  
101.             data:params  
102.         })  
103.     },  
104.     getPicData(){  
105.         return request({  
106.             url:'/home/getPicData',  
107.             method: 'get',  
108.             mock: true  
109.         })  
110.     },  
111.     getChartData(){  
112.         return request({  
113.             url:'home/getChartData',  
114.             method: 'get',  
115.             mock: true  
116.         })  
117.     }  
118.       
119. }  

这里同样为整个项目的所有数据获取代码，当前仅看getTableData即可。

Css样式

1. <style lang="less" scoped>  
2. .home{  
3.   // background: #;  
4.   .poster{  
5.     display: flex;  
6.     align-items: center;  
7.     padding-bottom: 20px;  
8.     border-bottom: 1px solid #ccc;  
9.     margin-bottom: 20px;  
10.     img{  
11.       width:600px ;  
12.       height:200px ;  
13.       border-radius:5%;  
14.       margin-right: 10px;  
15.     }  
16.   }  
17.   .login-info{  
18.     p{  
19.       line-height: 30px;  
20.       font-size: 14px;  
21.       color: #999;  
22.       span{  
23.         color: #666;  
24.         margin-left: 60px;  
25.       }  
26.     }  
27.   }  
28.   .name{  
29.     display: flex;  
30.     flex-wrap: wrap;  
31.     justify-content: space-between;  
32.     .el-card{  
33.       width: 32%;  
34.       margin-bottom: 20px;  
35.     }  
36.     .icons{  
37.       width: 80px;  
38.       height: 80px;  
39.       font-size: 30px;  
40.       text-align: center;  
41.       line-height: 80px;  
42.       color: #fff;  
43.     }  
44.     .detail{  
45.       margin-left: 15px;  
46.       display: flex;  
47.       flex-direction: column;  
48.       justify-content: center;  
49.       .number{  
50.         font-size: 30px;  
51.         margin-bottom: 10px;  
52.       }  
53.       .txt{  
54.         font-size: 14px;  
55.         text-align: center;  
56.         color: #999;  
57.       }  
58.     }  
59.   }  
60.   .demonstration {  
61.   color: var(--el-text-color-secondary);  
62. }  
63.   
64. .el-carousel__item h3 {  
65.   color: #475669;  
66.   opacity: 0.75;  
67.   line-height: 150px;  
68.   margin: 0;  
69.   text-align: center;  
70. }  
71.   
72. .el-carousel__item:nth-child(2n) {  
73.   background-color: #99a9bf;  
74. }  
75.   
76. .el-carousel__item:nth-child(2n + 1) {  
77.   background-color: #d3dce6;  
78. }  
79. .Pic{  
80.   height: 463px;  
81.   width: 100%;  
82. }  
83. }  
84. </style> 

1.