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>
转载：https://blog.csdn.net/Parker_cpp/article/details/128706758
查看评论