么是Element-ui?
根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。
官网:https://element.eleme.cn/#/zh-CN
如何使用?
1、创建文件夹element-ui。
2、下载组件。
npm install vue #安装Vue
npm i element-ui -S #安装Element-ui
3、为了代码更加清爽,可以将主要依赖vue.min.js和element-ui包放入lib目录中,lib目录需手动创建。
4、搭建第一个UI界面入门程序。
<!DOCTYPE html>
<html>
?
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>
?
<body>
<div id="app">
<!-- 所有的el-开头的标签都是elementui的组件! -->
<el-button @click="visible=true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>
?
<script>
new Vue({
el: '#app',
data: function () {
return { visible: false }
}
})
</script>
?
</html>
官网基本组件测试
1、容器,拿来即用即可。
2、图标,el内置了许多图标,使用icon="iconname"属性即可使用,也推荐使用https://fontawesome.dashgame.com/这个网站中的图标。
<el-button @click="visible=true" icon="el-icon-search">Button</el-button>
3、对于后台程序员来说,大部分情况下都是在对表单进行操作。el几乎内置了开发中会使用的所有表单组件。
前端怎么写?
对于一些后台开发人员来说,可能会存在开发一个项目不知道怎么开始第一步的问题,其原因大概是:
对于第一个问题,Element-ui组件可以直接套用,我们平时可以多去看看其他网站如何设计,借鉴学习。
至于第二个问题,其实也是因为第一个问题没解决,当我们把前端写好之后,数据库的结构自然就出来了。解决了这两个问题,剩下的就是后台的CRUD了,这是我们最熟悉的部分。
编写前端的基本套路:
设计多级下拉菜单的联动效果
如下图所示,现在要实现第一个下拉框选择不同的选项时,第二个下拉框中的下拉选项也要随之发生变化的效果,这时可以使用级联选择器(cascader)来实现。
<div class="block">
<span class="demonstration">默认 click 触发子菜单</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 触发子菜单</span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</div>
?
<script>
export default {
data() {
return {
value: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}
}
所有的前端弹窗建议都使用layer组件来实现。
Access中,有多个组合框,每个组合框的的值受限于上一层组合框的值
即组合框的联动。如在组合框选择了一个省份后,下一层组合框智能筛选这个省份的市
设置方法:
一、建立基础表,这里我们建立3个表:省,市,县(区)这3个表
二、窗体设置
1、省设置
① 窗体设计图如下:创建3个组合框,分别命名为省,市,县。窗体保存为命名为“窗体12”
② 设置省的组合框的行来源:
SELECT 省.省编号, 省.省名 FROM 省;
同时设置组合框属性,列数为2,列宽为0;2
③ 设置组合框属性 更新后事件为:
Private Sub 省_AfterUpdate() Me.市.Requery Me.市=Null Me.县=Null End Sub
这里的代码主要是当选择省份后,自动刷新市,同时设置市和县为空
2、设置市
如上面同理,设置市的行来源为
SELECT 市.市编号, 市.市名 FROM 市 WHERE (((市.省编号)=[forms]![窗体12]![省]));
这里同时要记得设置 列数和列宽。
市组合框的更新后事件为:
Private Sub 市_AfterUpdate() Me.县.Requery Me.县=Null End Sub
3、设置县
设置县的行来源为:
SELECT 县名.县名 FROM 县名 WHERE (((县名.上级市)=[forms]![窗体12]![市]));
最后效果图:
完整源码下载:
http://www.office-cn.net/access-frmother/353.html
一篇文章我们介绍了一个html/xml解析器——htmlparser,这篇文章我们介绍另外一个解析模块htmlparser2,后者是对前者的重构,同时对前者的API做了部分兼容。
安装
const { Parser }=require('htmlparser2');
const parser=new Parser(handler, options);
parser.parseComplete('html/xml内容');
写法
const { Parser }=require('htmlparser2');
const parser=new Parser(handler, options);
parser.parseComplete('html/xml内容');
htmlparser2提供了一个解析器——Parser,初始化它至少需要一个handler,options是可选的。
handler是一个对象,在这个对象上可以设置很多的钩子函数,Parser解析时会在每个阶段运行对应的钩子函数。
以下是可以设置的所有的钩子函数,
htmlparser模块是通过正则表达式来解析html内容的,而htmlparser2则不同,它会按顺序读取html的每个字符,并且推测后面字符是标签名、属性还是其他的类型,所以htmlparser2在解析完每一个标签后都会运行相应的钩子函数。
先来看一下例子,
图1
图1中设置了所有的钩子函数以便来说明每个钩子函数的作用,运行一下,
图2
对照图1和图2就能看出来每个钩子函数的运行时机,这其中有以下几个钩子函数需要注意一下。
除了自定义handler以外,htmlparser2还提供了几个handler,比如DomHandler,用法如下:
图3
运行一下,我们看看结果,
图4
如果4所示,DomHandler处理的结果是以数组的形式输出的,在每个单元数据中还可以拿到上一个、下一个以及父节点的数据。
htmlparser2还可以通过操作流Stream解析内容,写法如下:
图5
这篇文章和上一篇是姊妹篇,都是介绍解析html/xml内容的模块,通过对比,我们发现htmlparser2模块功能更强大一些,也更灵活一些,同时也兼容htmlparser模块的一些接口。虽然两者功能类似,但是这给了我们更多的选择性。
喜欢我的文章就关注我吧,有问题可以发表评论,我们一起学习,共同成长!
*请认真填写需求信息,我们会在24小时内与您取得联系。