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

一定要找对文档！！！ElementPlus vue3.x文档一开始一直出错，后来才发现自己看的是vue2.x的版本安装Element Plusnpm install element-plus --save在main.js中引入Element Plusimport { createApp } from 'vue'import App from './App.vue'import router fro

努力码代码的小林

3067人浏览 · 2022-04-27 20:16:28

努力码代码的小林 · 2022-04-27 20:16:28 发布

实验示例

在这里插入图片描述

实验要求

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:\www\php'

注：
如果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服务器，输入网址 http://localhost/authorData.php （端口80可以省略）
运行结果如下图：

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

安装 axios

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

跨域配置

在vue.config.js内

module.exports = {
  publicPath:'/',
  devServer:{
    proxy:{
      '/api':{
        target:'http://localhost:80/',   要访问到的服务器域名
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    }
  }
}

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

import {reactive,toRefs,onBeforeMount} from 'vue'
import axios from 'axios'   引入axios
export default {
    setup(){
      const state=reactive({
         authorData:[]
      })
      在组件渲染到页面之前执行该函数（使用onMounted应该也可行）
      onBeforeMount(()=>{
        axios.get('/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>