当前位置：首页 > news >正文

vue-element-admin前端搭建学习笔记

news 来源：原创 2024/11/17 5:44:02

vue-element-admin学习笔记

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。官方网站为 https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

1.搭建前端环境

第一步，下载并解压vue-element-admin-master到项目工作区。

第二步，根据 package.json 下载所需依赖，使用指令 npm install 下载安装。

在npm install时报错误代码201，大神解决办法
https://www.cnblogs.com/lijinwei/p/16564298.html 输入后再npm
install，真的nb，亲测解决

第三步，启动搭建好的前端环境。

npm run dev

目录结构如下

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

2.前端框架开发流程

第一步，添加路由。在router文件夹下的 index.js中添加代码：

    /* 医院设置信息 */
  {
    path: '/hospitalSet',
    component: Layout,
    redirect: '/hospitalSet/list',  //重定向到views下的路由
    name: 'hospitalSet',
    meta: { title: '医院设置信息管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'list',
        name: 'List',
        component: () => import('@/views/hospitalSet/list'),  //重定向到views下的路由
        meta: { title: '医院设置列表', icon: 'table' }
      },
      {
        path: 'add',
        name: 'Add',
        component: () => import('@/views/hospitalSet/add'),  //重定向到views下的路由
        meta: { title: '医院设置添加', icon: 'tree' }
      }
    ]
  },

第二步，设置跳转页面路径。在 views 文件下新建 hospitalSet 子文件夹，新建 list.vue 和 add.vue 。

<template>
  <div class="app-container">
    医院设置列表
  </div>
</template>

第三步，定义路径接口。在api文件夹中创建 js 文件 hospitalSet.js 。

import request from '@/utils/request'

export default{
  getHospitalSetList(current,size,searchObject){
    return request({
      url: `/admin/hosp/hospitalSet/findPageHospitalSet/${current}/${size}`, //写idea后端中@RequestMapping中的完整url （包括类上的@RequestMapping，拼接方法上的@RequestMapping）
      method: 'post',
      data:searchObject  //不用params，改用data，data中的对象传输时是json形式
    })
  }
}

记得修改后端接口 url 和端口号，全局搜索 VUE_APP_BASE_API 来进行修改。

VUE_APP_BASE_API = 'http://localhost:8201/'

第四步，在视图页面中引入 js 文件，使用axios进行接口调用，把接口返回数据在页面显示。

<script>
//引入接口定义的js文件
import hospitalSet from '@/api/hospitalSet'

export default{
  //定义变量和初始值
  data(){ 
    return{
      current:1, //当前页
      size:5, //每页记录数
      searchObj:{}, //条件封装对象
      list:[], //每页数据集合
      total:0, //总页数
    }
  },
  //在页面渲染之前执行，一般调用methods定义的方法，以得到后端传来的数据
  created () {
    this.getList()
  },
  //定义方法，进行请求后端接口
  methods: {
    //获取医院设置列表
    getList() {
      hospitalSet.getHospitalSetList(this.current,this.size,this.searchObj)
      .then(response =>{ //response封装后端接口返回的数据
         console.log(response)
      })//请求成功
      .catch(error =>{
        console.log(error)
      })//请求失败
    }
    
  }
}
</script>

第五步，用 element-ui 渲染列表到页面上。 element-ui 官方网站为 https://element.eleme.cn/#/zh-CN/component/table 。

<template>
  <div class="app-container">
    <template>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        type="index"
        width="100">
      </el-table-column>
      <el-table-column
        prop="hosname"
        label="医院名称">
      </el-table-column>
      <el-table-column
        prop="hoscode"
        label="医院编号">
      </el-table-column>
      <el-table-column
        prop="apiUrl"
        label="api基础路径">
      </el-table-column>
      <el-table-column
        prop="contactsName"
        label="联系人姓名">
      </el-table-column>
      <el-table-column
        prop="contactsPhone"
        label="联系人手机">
      </el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '可用' : '已禁用' }} <!-- 三个等号代表 数据类型 + 值 都要相等 -->
        </template>
      </el-table-column>
      
    </el-table>     
  </template>
  </div>
</template>

3.前端框架开发进阶-分页插件

添加以下代码，修改 @current-change 方法调用 methods 中的方法。

    <!-- 分页插件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="current"
      :page-size="size"      
      :total="total"
      style="padding: 30px 0; text-align: center;"
      @current-change="getList">
    </el-pagination>

4.前端框架开发进阶-条件查询

添加以下代码，修改 @click 方法调用 methods 中的方法。v-model 为双向绑定。

    <!-- 条件查询 -->
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="医院名称">
        <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>

修改 script 。条件封装对象，无需定义和初试化，js会在 v-model=“searchObj.hosname” 时自动创建，故无需改动。添加当前页参数，加上 =1 代表默认为1，若有其他值也为其他值。

export default{
  //定义变量和初始值
  data(){ 
    return{
      current:1, //当前页
      size:5, //每页记录数
      searchObj:{}, //条件封装对象，无需定义和初试化，js会在 v-model="searchObj.hosname" 时自动创建
      list:[], //每页数据集合
      total:0, //总页数
    }
  },
  //在页面渲染之前执行，一般调用methods定义的方法，以得到后端传来的数据
  created () {
    this.getList()
  },
  //定义方法，进行请求后端接口
  methods: {
    //获取医院设置列表
    getList(page=1) {  //添加当前页参数，=1代表默认为1，若有其他值也为其他值
      this.current = page
      hospitalSet.getHospitalSetList(this.current,this.size,this.searchObj)
      .then(response =>{ //response封装后端接口返回的数据
         this.list = response.data.records
         this.total = response.data.total
      })//请求成功
      .catch(error =>{
        console.log(error)
      })//请求失败
    }
    
  }
}

5.跨域问题

三个地方，任何一个地方不相同则产生跨域：

① 访问协议：http、https

② 访问地址：192.168.1.1、172.11.1.1

③ 端口号：8201、9528

其中域名不同、二级域名不同等也属于跨域。

解决方法：在controller中添加注解，来允许跨域；或添加 WebConfig 配置类来允许请求跨域。

/**
 * 配置跨域
 **/
@SpringBootConfiguration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry){
        /**
         * 所有请求都允许跨域
         */
        corsRegistry.addMapping("/**")
                .allowCredentials(true)
                .allowedOrigins("http://localhost:8501")  //修改为自己项目的前端端口号
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }

}

6.Vue插槽

匿名插槽 基本使用方法：

在组件中使用slot标签写在需要被替代的部分。在组件的使用时，在内部添加需要替换的东西即可。

<!-- 定义 -->
 <div>
    A
    <slot></slot>
    B
</div>

<!-- 使用 -->
<template>
    <div> hello slot </div>
</template>

效果即在 A、B 之间插入内容 hello slot ，vue解析时若不知道 hello slot 放哪，则会直接扔到匿名插槽里。

同样的，也有具名插槽，加上 name 标签即可。

<!-- 定义 -->
 <myDiv>
    A
    <slot name='header'></slot>
    B
    <slot name='body'></slot>
    C
    <slot name='footer'></slot>
</myDiv>

<!-- 使用 -->
<template>
    <div>
        <div slot='body'> hello slot </div>
    </div>
</template>

此时只替换中间的插槽。

最后是 slot-scope 作用域插槽。这里与 element-ui的应用结合。通过 slot-scope 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。官方demo如下。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

回到自己项目，在上述的分页表格中也有用到 slot-scope ，其中 slot-scope =“scope”，后面的变量名可任取。从 list 中取到 data，现在就可以用该作用域插槽里的数据来显示相应的内容，有 row, column, $index 等属性。

<template>
  <div class="app-container">
    <template>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        type="index"
        width="100">
      </el-table-column>
      <el-table-column
        prop="hosname"
        label="医院名称">
      </el-table-column>
      <el-table-column
        prop="hoscode"
        label="医院编号">
      </el-table-column>
      <el-table-column
        prop="apiUrl"
        label="api基础路径">
      </el-table-column>
      <el-table-column
        prop="contactsName"
        label="联系人姓名">
      </el-table-column>
      <el-table-column
        prop="contactsPhone"
        label="联系人手机">
      </el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '可用' : '已禁用' }} <!-- scope.row.status 得到每个行（记录）中的 status 数据 -->
        </template>
      </el-table-column>
      
    </el-table>     
  </template>
  </div>
</template>