java入职学习6之前端UI(element-ui,ant-design-vue)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了java入职学习6之前端UI(element-ui,ant-design-vue),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含10637字,纯文字阅读大概需要16分钟。
内容图文
![java入职学习6之前端UI(element-ui,ant-design-vue)](/upload/InfoBanner/zyjiaocheng/618/9f28141209d34947931efe1f65313051.jpg)
一、element-ui
1.简介
element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
其设计原则为:
一致性 Consistency
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
反馈 Feedback
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
可控 Controllability
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
2. Layout布局(el-row、el-col)
element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
span属性:表示col所要占领的栅格占比个数。
offset属性:表示col相对偏移的个数。
Container布局容器
这些布局容器,一般充当div来使用。
el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。
el-header:顶栏容器
el-footer:底部栏容器
el-aside:侧边栏容器
el-main:页面主视图
3. icons的使用
在element-ui 中,图标是用class就可以搞定的。
比如一个编辑的图标就可以如下表示:
<i class="el-icon-edit"></i>
按钮(el-button)
按钮是el-button来表示的
按钮是分类的,每一种类型就对应不同的button。
按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’
plain:决定了按钮是否使用素色系列。
round:决定了按钮是不是圆角展示。
<div class="flex-box">
<h2>各种button</h2>
<el-row class="flex1 margin-left10">
<el-col :span="3"><el-button>默认按钮</el-button></el-col>
<el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
<el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
<el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
<el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
<el-col :span="3"><el-button round>默认按钮</el-button></el-col>
</el-row>
</div>
4.级联选择(el-cascader)
//组件
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
//data数据
options: [{
value:'1',
label:'components',
children: [{
label:'input'
},{
label:'swiper'
}]
},{
value:'1',
label:'views'
},{
value:'1',
label:'actions'
}]
TimePicker 时间选择器
picker-options是一个对象。
这个对象的属性有start、step、end、selectableRange等。
当设置selectableRange属性时,它提供了一个时间选择的点。
<el-time-select
v-model="value1"
:picker-options="{
start:'08:30',
step:'00:15',
end:'18:30'
}"
placeholder="选择时间"
></el-time-select>
5.日期选择器
日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。
<el-date-picker
v-model="valueDate"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-date-picker
type='week'
v-model='value'
placeholder='选择周'
>
</el-date-picker>
DateTimePicker 日期时间选择器
本质就是把type改为datetime。
<el-date-picker
v-model="value1"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
6.form表单
element-ui的form表单组件:el-form
element-ui的formItem组件:el-form-item
一个简单的form表单的实现如下:
<el-form :model=''>
<el-form-item label='用户名'>
<el-input></el-input>
</el-form-item>
<el-form-item label='密码'>
<el-input></el-input>
</el-form-item>
</el-form>
form表单还有验证:form的rules就是用来验证使用。
7.Table 表格
el-table:element-ui的表格。
el-table-column:element-ui的表格所对应的列。
table属性中:stripe属性可以创建带斑马纹的表格。
table属性中:border属性可以创建带斑马纹的表格。
table属性中:height属性可实现固定表头的表格。
<el-table
:data="tableData"
style="width: 100%"
height="200"
>
<el-table-column fixed width="120" label="日期" prop="date"></el-table-column>
<el-table-column width="120" label="姓名" prop="name"></el-table-column>
<el-table-column width="360" label="地址" prop="address"></el-table-column>
</el-table>
8. Carousel 走马灯
其实就相当于一个轮播
type属性:可以让轮播卡片化
interval属性:定义轮播切换的周期
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
9. Collapse 折叠面板
折叠面板的el-collapse-item需要title属性。
<el-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
<div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
10. Navigation 导航
el-menu
el-menu:表示导航菜单的盒子。
el-submenu:表示导航菜单的子盒子选项。
el-menu-item:表示导航菜单的每一项。
其中submenu和munuitem都是用于属性index。
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
el-tabs
<el-tabs v-model="activeName">
<el-tab-pane label="用户管理" name="first">
用户管理
</el-tab-pane>
</el-tabs>
11. Tree 树形控件
data属性:代表着树形组件的渲染。
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
二、ant-design-vue
1.简介
Ant Design Vue
Ant Design是蚂蚁金服出品的一款前端UI库,官方的介绍是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。
环境node.js webpack vscode npm
//安装vue脚手架和ant design vue
npm install -g @vue/cli
npm i --save ant-design-vue
//创建一个vue demo
vue create antd-demo
//在mian.js中完整引入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false
Vue.use(Antd);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2. 目录结构
├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目基础配置,包含路由,全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化,依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
├── tests # 测试工具
├── README.md
└── package.json
4. 本地开发
(1) clone到本地后安装依赖
$ npm install
(2) 运行
$ npm run serve
启动浏览器访问 http:localhost:8000.看到首页登录页就OK
(3) 根据业务修改代码进行开发。
路由
(1) 在目录src下的config目录的router.config.js统一配置管理路由。
(2) vue路由是通过创建一个路由实例对象注册到vue实例中,菜单生成是根据路由配置的。在vue-router的配置上新增另一些参数。
1.hideChildrenInMenu用于隐藏不需要的菜单中展示的子路由个人设置。
2.hidden可以在菜单中不展示这个路由,包括子路由。效果可以查看other下的路由配置。
3.meta.title和meta.icon分别代表生成菜单项的文本和图标。
4.meta.permission 采取配置此路由的权限,如果配置了将会验证内部用户的权限,并决定是否展示*(放置在下)。
5.meta.hiddenHeaderContent可以强制当前页面不显示PageHeader组件中的页面带的面包屑和页面标题栏
(3) 实例
{
path: ‘/form’, //路径
redirect: ‘/form/base-form’, //重定向到
component: PageView, //组件
meta: { title: ‘表单页’, icon: ‘form’, permission: [ ‘form’ ] }, //菜单名称,icon,路由权限验证
children: [
{
path: ‘/form/base-form’,
name: ‘BaseForm’,
component: () => import(’@/views/form/BasicForm’), //路由懒加载模式
meta: { title: ‘基础表单’, keepAlive: true, permission: [ ‘form’ ] } //权限匹配
},
{
path: ‘/form/step-form’,
name: ‘StepForm’,
component: () => import(’@/views/form/stepForm/StepForm’),
meta: { title: ‘分步表单’, keepAlive: true, permission: [ ‘form’ ] }
},
{
path: ‘/form/advanced-form’,
name: ‘AdvanceForm’,
component: () => import(’@/views/form/advancedForm/AdvancedForm’),
meta: { title: ‘高级表单’, keepAlive: true, permission: [ ‘form’ ] }
}
]
},
4.布局
(1) 在Any Design 抽离了常用通用布局,放在layouts目录
.
BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏
UserLayout:抽离出用于登陆注册页面的通用布局
PageView:基础布局,包含了面包屑,和中间内容区 (slot)
RouterView:空布局,专门为了二级菜单内容区自定义
BlankLayout:空白的布局
(2) Ant Design 布局组件
Grid组件
它支持flex布局,基于行(row) 列(col),总结一下几个常用组件的属性
pull 栅格向左移动格数 number 0
push 栅格向右移动格数 number 0
span 栅格占位格数,为 0 时相当于 display: none number -
sm ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
md ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
lg ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 number|object -
Layout 组件 ,他是页面整体布局,被抽象出来放到components 和 Layout文件夹。
5. 新增页面
(1) 新建页面在src/views下建一个vue文件,如果有相关页面,可以新建一个文件夹放置相关文件。
(2) 然后将组件在路由中定义好就可以访问页面。
(3) 最后在newPage中写业务代码
6. 样式
(1) 默认使用less,这样是为了防止样式全局污染。
(2) 在src/global.less设置全局样式
(3) 可以用 /deep/ 对组件进行样式穿透
11 serve side交互
(1) 请求流程
1.UI 组件交互操作;
2.调用统一管理的 api service 请求函数;
3.使用封装的 request.js 发送请求;
4.获取服务端返回;
5.更新 data。
(2) 为了方便管理维护,所有统一的请求都放在@src/api文件夹。
(3) 在@/src/utils/request.js中对axios 进行封装,目的是,便于统一出路post get 等请求参数,请求头。
例子:
// 根据用户 id 获取用户信息
export function getUser (id) {
return axios({
url:
a
p
i
.
u
s
e
r
/
{api.user}/
api.user/{id},
method: ‘get’
})
}
<template>
<div>
<a-button @click="queryUser"></a-button>
<a-table :dataSource="list">
</a-table>
</div>
</template>
<script>
import { getUser } from '@/api/user'
export default {
data () {
return {
id: 0,
queryParam: {
pageSize: 10,
pageNo: 1,
username: ''
},
info: {}
}
},
methods: {
queryUser () {
const { $message } = this
getUser(this.id).then(res => {
this.info = res.data
}).catch(err => {
$message.error(`load user err: ${err.message}`)
})
}
}
}
</script>
内容总结
以上是互联网集市为您收集整理的java入职学习6之前端UI(element-ui,ant-design-vue)全部内容,希望文章能够帮你解决java入职学习6之前端UI(element-ui,ant-design-vue)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。