Element-UI介绍
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
Element-UI官方站点：
https://element.eleme.cn/#/zh-CN
Element-UI使用
1 命令行方式安装
- 1. 创建 一个新的项目
- 2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令
npm i element-ui -S
- 3. 打开 main.js , 导入Element-UI 相关资源.
- main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。
//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);
- 4. 复制Element 按钮样式 到app.vue文件的 template下
<template>
<div id="app">
<!-- 测试elementUI -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<div id="nav">
<router-link to="/">Home</router-link>|
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>4. 启动项目 npm run serve, 查看页面
2 Vue-CLI工程改造
- 1. 删除components 目录下的 HelloWord.vue组件
- 2. 删除App.vue中的部分内容,只保留如下部分
<template>
<div id="app"></div>
</template>
<style>
</style>
- 3. 删除router文件下的路由文件 index.js部分内容,只保留如下部分
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
routes
})
export default router- 4. 删除views目录下的 About.vue 与 Home.vue
3 安装axios
- 1. npm安装：使用npm下载axios包
npm i axios- 2. 在main.js文件中导入axios 相关资源
//引入axios
import axios from 'axios'
//Vue对象使用axios
Vue.prototype.axios = axios;下面为Element-UI使用案例
用户登录界面制作案例
1 Dialog对话框组件
我们可以用Dialog制作一个登陆弹窗,选择自定义内容
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>2 创建login.vue 组件
- 1. 在components 下创建login.vue
- 2. 将Diglog组件的内容,拷贝到login.vue,进行修改:
<template>
<el-dialog :show-close="false" title="用户登录" :visible.sync="dialogFormVisible">
<el-form>
<el-form-item label="用户名称" :label-width="formLabelWidth">
<el-input v-model="user.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="用户密码" :label-width="formLabelWidth">
<el-input v-model="user.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="login">登 录</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: true,
formLabelWidth: '120px',
user:{username:"",password:""}
};
},
methods: {
login(){
// 定义常量保存url
const url = "https://89c4e6ef-4527-44f1-9904-a4deeecc711f.mock.pstmn.io/login";
// 发送请求
this.axios(url,{
// 携带的参数
params:{
username:this.user.username,
password:this.user.password
}
}).then((resp)=>{
console.log(resp);
alert("登录成功");
// 成功 关闭对话框
this.dialogFormVisible=false;
// 进行页面跳转，跳转到首页，在前端进行页面跳转 必须使用路由
this.$router.push('index');
}).catch((error)=>{
// 登录失败 提供消息提示
this.$message.error('登录失败！');
});
}
}
}
</script>
<style scoped>
</style>
3 配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入Login.vue组件
import Login from "@/components/Login"
Vue.use(VueRouter)
const routes = [
// 访问 / .也跳转到login、
{
path:"/",
redirect:"login" // 重定向到login
},
// 登录路由
{
path:"/login",
name:"login",
component:Login
}
]
const router = new VueRouter({
routes
})
export default router
4 修改App.vue
<template>
<div id="app">
<!-- 根据访问路径，渲染路径匹配到的组件 -->
<router-view></router-view>
</div>
</template>
<style>
</style>
5 编写登录功能
- 1. 去掉关闭按钮, 添加一个属性 :show-close="false"
<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible">- 2. 修改登陆触发事件
<el-button type="primary" @click="login">登录</el-button>- 3. 双向数据绑定
- data 中定义数据
data() {
return {
dialogFormVisible: true,// 是否关闭对话框
formLabelWidth: '120px',// 宽度
user:{username:"",password:""}// 登录数据
};
},- 使用 v-model, 将视图与模型进行绑定
<el-form>
<el-form-item label="用户名称" :label-width="formLabelWidth">
<el-input v-model="user.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="用户密码" :label-width="formLabelWidth">
<el-input v-model="user.password" autocomplete="off"></el-input>
</el-form-item>
</el-form>- 4. 编写login方法
methods: {
login(){
// 定义常量保存url
const url = "https://89c4e6ef-4527-44f1-9904-a4deeecc711f.mock.pstmn.io/login";
// 发送请求
this.axios(url,{
// 携带的参数
params:{
username:this.user.username,
password:this.user.password
}
}).then((resp)=>{
console.log(resp);
alert("登录成功");
// 成功 关闭对话框
this.dialogFormVisible=false;
// 进行页面跳转，跳转到首页，在前端进行页面跳转 必须使用路由
this.$router.push('index');
}).catch((error)=>{
// 登录失败 提供消息提示
this.$message.error('登录失败！');
});
}
}6 Postman搭建mock server
- Mock server就是模拟一个服务器，我们使用Mock server可以模拟后台接口,对请求进行响应.
- 在前后端分离的开发中 前端利用mockeserver模拟出对应接口，拿到返回数据来调试，无需等后端开发人员完成工作。
postman模拟出一个server 步骤:
- 1. 使用postman模拟出一个server
- 2. 打开如下窗体，创建一个伪服务
第一步
第二步
第三步 修改请求的URL
const url = "复制上面生成的地址/login";7 登录成功后跳转
- 在js中设置跳转，常用的一种方法是 this.$router.push
methods: {
login(){
// 定义常量保存url
const url = "https://89c4e6ef-4527-44f1-9904-a4deeecc711f.mock.pstmn.io/login";
// 发送请求
this.axios(url,{
// 携带的参数
params:{
username:this.user.username,
password:this.user.password
}
}).then((resp)=>{
console.log(resp);
alert("登录成功");
// 成功 关闭对话框
this.dialogFormVisible=false;
// 进行页面跳转，跳转到首页，在前端进行页面跳转 必须使用路由
this.$router.push('index');
}).catch((error)=>{
// 登录失败 提供消息提示
this.$message.error('登录失败！');
});
}
}首页布局页面制作
1 创建 index.vue
<template>
<div>
<el-button type="danger">布局页面</el-button>
</div>
</template>
<script>
export default { }
</script>
<style scoped>
</style>2 配置路由
- router目录下 的index.js 路由文件
//导入布局组件
import Index from "@/components/Index.vue"
//布局路由
{
path:'/index',
name:'index',
component: Index
}3 布局容器
Container 布局容器 ,是用于布局的容器组件，方便快速搭建页面的基本结构：
- 1. 在官方文档中找到布局的容器代码, 复制到 Index.vue
- 2. 拷贝布局容器中的导航菜单代码, 进行修改,代码如下
<template>
<div>
<el-container>
<el-header>后台管理</el-header>
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#d3dce6"
router
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航菜单</span>
</template>
<el-menu-item-group>
<el-menu-item index="/course">
<i class="el-icon-menu"></i>
课程管理
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<!-- 主要区域 -->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.el-container {
height: 900px;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: normal;
}
</style>
课程列表组件制作
当点击导航菜单中的课程管理时,要显示课程信息
1 编写 Course.vue
<template>
<el-button type="danger">课程信息</el-button>
</template>
<script> export default {}; </script>
<style scoped></style>2 配置路由
- 1.在index.js路由文件中, 为布局路由添加children 属性表示 子路由
// 导入Course.vue组件
import Course from "@/components/Course"
const routes = [
// 访问 / .也跳转到login、
{
path:"/",
redirect:"login" // 重定向到login
},
// 登录路由
{
path:"/login",
name:"login",
component:Login
},
// 主页布局路由
{
path:"/index",
name:"index",
component:Index,
// 添加子路由 使用children属性类表示子路由
children:[
// 课程信息子路由
{
path:"/course",
name:"course",
component:Course
}
]
},
]- 2. 修改 Index.vue组件中的 导航菜单属性
router 表示是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
<el-menu default-active="2" class="el-menu-vertical-demo" background- color="#d3dce6" router >3. 为index属性指定 路由
<el-menu-item-group>
<!-- 修改 index的路由地址 -->
<el-menu-item index="/course">
<i class="el-icon-menu"></i>
课程管理
</el-menu-item>
</el-menu-item-group>- 4. 设置路由的出口,将课程信息展示再 main
<!-- 主要区域 -->
<el-main>
<router-view></router-view>
</el-main>Table表格组件
通过table组件来实现一个课程页面展示的功能，通过查看Element-UI库，需要Table 表格.
进入Element-UI官方，找到Table组件，拷贝源代码到vue页面中，如下
1 添加表格组件
复制表格组件相关的代码到 Course.vue中
<template>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>2 表格组件说明 ：
查看一下,ElementUI的表格的代码,分析一下表格数据是如何显示
//视图部分 进行页面展示
<template>
//el-table组件 绑定了tableData数据
<el-table :data="tableData" style="width: 100%">
//el-table-column 表示表格的每列,prop属性与模型数据中的key对应 ,label 列名
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template> <script>
//export default 相当于提供一个接口给外界，让其他文件通过 import 来引入使用。
export default {
//data() 函数
data() {
return {
//数据部分
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
}
]
};
}
};
</script>课程内容展示
1 修改Course.vue
- 1.编写 template, 复制ElementUI的示例代码,进行改动
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<el-input v-model="filter.course_name" placeholder="课程名称" prefix-icon="el-icon-search" clearable></el-input>
</el-col>
<el-col :span="1">
<el-button type="primary" @click="search">点击查询</el-button>
</el-col>
</el-row>
<el-table
v-loading="loading"
element-loading-text="拼命加载中"
:data="courseList"
stripe
style="width: 100%"
>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="course_name" label="课程名称"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column prop="sort_num" label="排序"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
courseList: [],
loading: true,
filter:{course_name:""}
};
},
// 钩子函数 created，在DOM页面生成之前执行
created() {
// 在页面生成之前，调用loadCourse()
this.loadCourse();
},
methods: {
// 获取课程信息
loadCourse() {
// 发送请求获取课程数据
const url = "http://localhost/lagou_edu_home_war/course";
return this.axios
.get(url, {
params: {
methodName: "findCourseList"
}
})
.then(res => {
this.courseList = res.data;
this.loading = false;
})
.catch(error => {
this.$message.error("获取数据失败！");
});
},
// 根据课程名查询
search(){
// 开启加载提示
this.loading = true;
// 发送请求
const url = "http://localhost/lagou_edu_home_war/course";
return this.axios.get(url,{
params:{
methodName:"findByCourseNameAndStatus",
course_name:this.filter.course_name
}
}).then((res) => {
console.log(res.data)
this.courseList = res.data;
this.loading = false;
}).catch((error) => {
this.$message.error("获取数据失败！");
})
}
}
};
</script>
<style scoped>
</style>
2 跨域问题解决
2.1 出现跨域问题
当我在前端项目中,向后端发送请求的获取课程数据的时候,出现了跨域问题:
- 已被CORS策略阻止：请求的资源上没有' Access-Control-Allow-Origin'标头（跨域请求失败）
Access to XMLHttpRequest at 'http://localhost:8080/lagou_edu_home/course? methodName=findCourseList' from origin 'http://localhost:8088' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.2.2 什么是跨域
- 跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。
- 跨域的几种常见情
2.3 解决跨域问题
跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-Allow-Origin 及相关一系列参数，提供跨域访问的允许策略
- 设置响应头中的参数来允许跨域域请求:
- Access-Control-Allow-Credentials
- Access-Control-Allow-Origin 标识允许跨域的请求有哪些
在java项目下：
1. 在pom.xml文件中引入依赖
<!-- 解决跨域问题所需依赖 -->
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId> <
version>2.5</version>
</dependency>2. 在web.xml中 配置跨域 filter
<!--配置跨域过滤器-->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>2.4 再次查询
解决跨域问题之后,页面显示数据
条件查询
1 ElementUI输入框组件
- Input 输入框通过鼠标或键盘输入字符
<el-input placeholder="请输入内容" v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>Course.vue 添加输入框并使用layout布局
<el-row :gutter="20">
<el-col :span="6">
<el-input v-model="filter.course_name" placeholder="课程名称" prefix-icon="el-icon-search" clearable></el-input>
</el-col>
<el-col :span="1">
<el-button type="primary" @click="search">点击查询</el-button>
</el-col>
</el-row>3 完成根据课程名查询
- 1. 双向数据绑定
Model 模型
data() {
return {
courseList: [],// //是否弹出加载提示
loading: true,// 定义集合,保存从接口获取的参数
filter:{course_name:""}// 查询条件
};
},View 视图
<el-input v-model="filter.course_name" placeholder="课程名称" prefix-icon="el-icon-search" clearable></el-input>- 2. 设置点击事件
<el-button type="primary" @click="search">点击查询</el-button>- 3. methods中添加方法
// 根据课程名查询
search(){
// 开启加载提示
this.loading = true;
// 发送请求
const url = "http://localhost/lagou_edu_home_war/course";
return this.axios.get(url,{
params:{
methodName:"findByCourseNameAndStatus",
course_name:this.filter.course_name
}
}).then((res) => {
console.log(res.data)
this.courseList = res.data;
this.loading = false;
}).catch((error) => {
this.$message.error("获取数据失败！");
})
}再次学习，须到官网查看相应文档继续加深
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
