Vue3.0 使用ElementPlus和axios获取服务端数据

Vue3.0 使用ElementPlus和axios获取服务端数据

实验示例

实验要求

1.搭建php格式的服务器。
2.使用axios从服务器端获取数据；
3.使用Element Plus提供的组件完成导航，表格，按钮，字符图标。

步骤

一.搭建php格式的服务器

Apache+PHP环境搭建 参考链接

注意点：Apache是2.4.x版本，php是 7.4.x版本
所以在文章的最后内容改为php7（文章版本是php5）

LoadModule php7_module 'D:/php/php7apache2_4.dll'  (详细路径参考安装路径)
AddType application/x-httpd-php .php .html .htm
PHPIniDir 'D:wwwphp'  

注：
如果apache服务开启失败，检查两个原因：

1.端口80是否被占用？
2.conf/httpd内部语法错误。cmd在apache/bin目录下，使用httpd -t命令找到错误的代码行进行修改。

编写php代码，可以在VScode编译器内编写

<?php$authors=array(array('date'=>'2021-05-02','name'=>'刘兵1','province'=>'湖北','city'=>'武汉市','address'=>'武汉解放大道717号','zip'=>420104),array('date'=>'2021-08-13','name'=>'汪琼1','province'=>'湖北','city'=>'荆州市','address'=>'荆州市武德路世纪佳园520号','zip'=>430000),array('date'=>'2021-05-02','name'=>'刘兵2','province'=>'湖北','city'=>'武汉市','address'=>'武汉解放大道717号','zip'=>420104),array('date'=>'2021-08-13','name'=>'汪琼2','province'=>'湖北','city'=>'荆州市','address'=>'荆州市武德路世纪佳园520号','zip'=>430000),array('date'=>'2021-05-02','name'=>'刘兵3','province'=>'湖北','city'=>'武汉市','address'=>'武汉解放大道717号','zip'=>420104),array('date'=>'2021-08-13','name'=>'汪琼3','province'=>'湖北','city'=>'荆州市','address'=>'荆州市武德路世纪佳园520号','zip'=>430000));echo json_encode($authors)
?>

命名为authorData,放到DocumentRoot（定义这个服务器对外发布的超文本文档存放的路径），即自己建立的目录里，我是在D:WWWEB

重启apache服务器，输入网址 localhost/authorData.php （端口80可以省略）
运行结果如下图：

二.使用axios从服务器端获取数据

安装 axios

安装命令 npm install axios@0.21 --save

跨域配置

在fig.js内

使用get方法获取服务端数据

import {reactive,toRefs,onBeforeMount} from 'vue'
import axios from 'axios'   引入axios
export default {setup(){const state=reactive({authorData:[]})在组件渲染到页面之前执行该函数（使用onMounted应该也可行）onBeforeMount(()=>{('/api/authorData.php').then(res=>{state.authorData=res.data;   把获取的服务端数据的值传递给authorData})})return{...toRefs(state)}
}

三.使用Element Plus提供的组件完成导航，表格，按钮，字符图标

注意：
一定要找对文档！！！ElementPlus vue3.x文档
一开始一直出错，后来才发现自己看的是vue2.x的版本

安装Element Plus

安装命令 npm install element-plus --save
使用全局配置：在main.js中引入Element Plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'app.use(ElementPlus).use(router).mount('#app')

布局 （导航和表格部分）

Element Plus会随着屏幕尺寸的增加，自动地把浏览器窗口划分为最多24栏，所以这里默认为24栏（分为了5+19）

<div class="body"><el-row :gutter="40">   el-row的gutter属性指定每栏之间的间隔（默认为0）<el-col :span="5">侧边导航栏</el-col><el-col :span="19">表格</el-col></el-row>
</div>

使用icon图标

安装图标 npm install @element-plus/icons-vue
使用： 图标名看 官方文档

1.引入图标名（menu为例外，使用时要重命名）
import { HomeFilled,Calendar,Menu as IconMenu,Document } from "@element-plus/icons-vue";

2.在template内使用，可以直接使用图标名，如<document/>。使用el-icon标签可以设置size和color
<el-icon :size="20"><document/></el-icon>

侧边导航栏

总共有三级目录，文档是一级目录，文字图片是二级目录，png,jpg是三级目录


注意点：

1.el-menu是最外层的菜单标签，表示这是一个菜单。 属性：mode 默认为vertical，即垂直方向的菜单。绑定两个方法：open和close来实现子菜单的展开和隐藏
2.如果该菜单选项下级无菜单，使用el-menu-item标签（可以在el-menu下，也可以在el-sub-menu下）
3.如果该菜单选项下级有其他菜单选项，使用el-sub-menu标签，el-sub-menu可以嵌套el-sub-menu使用，只要它的下级还有菜单。当前的菜单选项使用  <template v-slot:title>比如某二级菜单2</template>其下面的子菜单（如果没有下级菜单了），使用 <el-menu-item index="2-2-1">三级菜单1</el-menu-item>
4.el-sub-menu的css样式中height的设置，设置为height: fit-content;

实现代码

<el-col :span="5"><el-menu default-active="1"   @open="handleOpne" @close="handleClose"><el-menu-item index="1"><el-icon :size="20"><home-filled/></el-icon>首页</el-menu-item><el-sub-menu index="2" class="menu2"><template v-slot:title><el-icon :size="20"><document/></el-icon><span>文档</span></template><el-menu-item index="2-3">文字</el-menu-item><el-sub-menu index="2-4" class="menu2-2"><template v-slot:title>图片</template><el-menu-item index="2-4-1">png</el-menu-item><el-menu-item index="2-4-2">jpg</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="3"><el-icon :size="20"><icon-menu/></el-icon>选项</el-menu-item><el-menu-item index="4"><el-icon :size="20"><calendar/></el-icon>日期</el-menu-item></el-menu> </el-col>

绑定的两个函数
const handleOpen=(key, keyPath)=>{   展开菜单console.log(key, keyPath);
}
const handleClose=(key, keyPath)=>{   合上菜单console.log(key, keyPath);
}

针对两个el-sub-menu，设置高度适应内容的大小，这样才不会出现子菜单被下层的父菜单覆盖
.menu2{height: fit-content;
}
.menu2-2{height: fit-content;
}

表格

注意点：

1.el-table表示表格标签。:data绑定数据名称；stripe="true" 设置表格为斑马格属性
2.el-table-column表格每列的属性。label是标签名；prop是对应的data内的属性名，比如这里prop="date"对应的是authorData.date

<el-col :span="19"><el-table stripe="true" :data="authorData" style="width: 100%;"><el-table-column label="日期" prop="date" width="120"></el-table-column><el-table-column label="姓名" prop="name" width="85"></el-table-column><el-table-column label="省份" prop="province" width="85"></el-table-column><el-table-column label="市区" prop="city" width="85"></el-table-column><el-table-column label="地址" prop="address" width="180"></el-table-column><el-table-column label="邮编" prop="zip"></el-table-column><el-table-column label="操作" width="200"><el-button>编辑</el-button><el-button type="success">删除</el-button></el-table-column></el-table></el-col>