平顶山做网站优化,中山网站建设制作 .超凡科技,投资理财网站建设,成都科技网站建设咨询Element-UI介绍
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库#xff0c;方便程序员进行页面快速布局和构建
Element-UI官方站点#xff1a;
https://element.eleme.cn/#/zh-CN
Element-UI使用
1 命令行方式安装
1. 创建 一个新的项目2. 当前项目下打开终…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下
templatediv idapp!-- 测试elementUI --el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-rowdiv idnavrouter-link to/Home/router-link|router-link to/aboutAbout/router-link/divrouter-view//div
/template
4. 启动项目 npm run serve, 查看页面 2 Vue-CLI工程改造
1. 删除components 目录下的 HelloWord.vue组件2. 删除App.vue中的部分内容,只保留如下部分
templatediv idapp/div
/template
style
/style3. 删除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.syncdialogFormVisibleel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/div
/el-dialog
2 创建login.vue 组件
1. 在components 下创建login.vue2. 将Diglog组件的内容,拷贝到login.vue,进行修改:
templateel-dialog :show-closefalse title用户登录 :visible.syncdialogFormVisibleel-formel-form-item label用户名称 :label-widthformLabelWidthel-input v-modeluser.username autocompleteoff/el-input/el-form-itemel-form-item label用户密码 :label-widthformLabelWidthel-input v-modeluser.password autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button typeprimary clicklogin登 录/el-button/div/el-dialog
/template
script
export default {data() {return {dialogFormVisible: true,formLabelWidth: 120px,user:{username:,password:}};},methods: {login(){// 定义常量保存urlconst 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.dialogFormVisiblefalse;// 进行页面跳转跳转到首页在前端进行页面跳转 必须使用路由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/LoginVue.use(VueRouter)const routes [// 访问 / .也跳转到login、{path:/,redirect:login // 重定向到login},// 登录路由{path:/login,name:login,component:Login}]const router new VueRouter({routes
})export default router4 修改App.vue
templatediv idapp!-- 根据访问路径渲染路径匹配到的组件 --router-view/router-view/div
/templatestyle/style5 编写登录功能
1. 去掉关闭按钮, 添加一个属性 :show-closefalse
el-dialog title登录 :show-closefalse :visible.syncdialogFormVisible
2. 修改登陆触发事件
el-button typeprimary clicklogin登录/el-button
3. 双向数据绑定 data 中定义数据 data() {return {dialogFormVisible: true,// 是否关闭对话框formLabelWidth: 120px,// 宽度user:{username:,password:}// 登录数据};},
使用 v-model, 将视图与模型进行绑定 el-formel-form-item label用户名称 :label-widthformLabelWidthel-input v-modeluser.username autocompleteoff/el-input/el-form-itemel-form-item label用户密码 :label-widthformLabelWidthel-input v-modeluser.password autocompleteoff/el-input/el-form-item/el-form
4. 编写login方法 methods: {login(){// 定义常量保存urlconst 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.dialogFormVisiblefalse;// 进行页面跳转跳转到首页在前端进行页面跳转 必须使用路由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(){// 定义常量保存urlconst 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.dialogFormVisiblefalse;// 进行页面跳转跳转到首页在前端进行页面跳转 必须使用路由this.$router.push(index);}).catch((error){// 登录失败 提供消息提示this.$message.error(登录失败);});}}
首页布局页面制作
1 创建 index.vue
template div el-button typedanger布局页面/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.vue2. 拷贝布局容器中的导航菜单代码, 进行修改,代码如下
templatedivel-containerel-header后台管理/el-headerel-container!-- 侧边栏 --el-aside width200pxel-menu default-active2 classel-menu-vertical-demo background-color#d3dce6routerel-submenu index1template slottitlei classel-icon-location/ispan导航菜单/span/templateel-menu-item-groupel-menu-item index/coursei classel-icon-menu/i课程管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-aside!-- 主要区域 --el-mainrouter-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 typedanger课程信息/el-button
/template
script export default {}; /script
style scoped/style
2 配置路由
1.在index.js路由文件中, 为布局路由添加children 属性表示 子路由
// 导入Course.vue组件
import Course from /components/Courseconst 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-active2 classel-menu-vertical-demo background- color#d3dce6 router
3. 为index属性指定 路由
el-menu-item-group!-- 修改 index的路由地址 --el-menu-item index/coursei classel-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中
templateel-table:datatableDatastripestylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatescriptexport 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 :datatableData stylewidth: 100%//el-table-column 表示表格的每列,prop属性与模型数据中的key对应 ,label 列名el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress 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的示例代码,进行改动
templatedivel-row :gutter20el-col :span6el-input v-modelfilter.course_name placeholder课程名称 prefix-iconel-icon-search clearable/el-input/el-colel-col :span1el-button typeprimary clicksearch点击查询/el-button/el-col/el-rowel-tablev-loadingloadingelement-loading-text拼命加载中:datacourseListstripestylewidth: 100%el-table-column propid labelID/el-table-columnel-table-column propcourse_name label课程名称/el-table-columnel-table-column propprice label价格/el-table-columnel-table-column propsort_num label排序/el-table-columnel-table-column propstatus 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
/style2 跨域问题解决
2.1 出现跨域问题
当我在前端项目中,向后端发送请求的获取课程数据的时候,出现了跨域问题:
已被CORS策略阻止请求的资源上没有 Access-Control-Allow-Origin标头跨域请求失败 Access to XMLHttpRequest at http://localhost:8080/lagou_edu_home/course? methodNamefindCourseList 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-CredentialsAccess-Control-Allow-Origin 标识允许跨域的请求有哪些
在java项目下
1. 在pom.xml文件中引入依赖
!-- 解决跨域问题所需依赖 --
dependency groupIdcom.thetransactioncompany/groupId artifactIdcors-filter/artifactId version2.5/version
/dependency
2. 在web.xml中 配置跨域 filter
!--配置跨域过滤器--
filter filter-namecorsFilter/filter-name filter-classcom.thetransactioncompany.cors.CORSFilter/filter-class
/filter
filter-mapping filter-namecorsFilter/filter-name url-pattern/*/url-pattern
/filter-mapping
2.4 再次查询
解决跨域问题之后,页面显示数据
条件查询
1 ElementUI输入框组件
Input 输入框通过鼠标或键盘输入字符 el-input placeholder请输入内容 v-modelinput4 i slotprefix classel-input__icon el-icon-search/i
/el-input
Course.vue 添加输入框并使用layout布局
el-row :gutter20el-col :span6el-input v-modelfilter.course_name placeholder课程名称 prefix-iconel-icon-search clearable/el-input/el-colel-col :span1el-button typeprimary clicksearch点击查询/el-button/el-col
/el-row
3 完成根据课程名查询
1. 双向数据绑定
Model 模型 data() {return {courseList: [],// //是否弹出加载提示loading: true,// 定义集合,保存从接口获取的参数filter:{course_name:}// 查询条件};},
View 视图
el-input v-modelfilter.course_name placeholder课程名称 prefix-iconel-icon-search clearable/el-input
2. 设置点击事件
el-button typeprimary clicksearch点击查询/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(获取数据失败);})}
再次学习须到官网查看相应文档继续加深
https://element.eleme.cn/#/zh-CN/component/message
