form表单与模板引擎
form表单的基本使用
什么是表单
表单在网页中主要负责数据的采集，将采集的数据提交到服务器端进行处理。
表单的组成部分
表单标签
表单域：文本框，密码框，隐藏域，多行文本框，复选框，单选框，下拉选择框和文件上传框等
表单按钮
form标签的属性
用来规定如何把采集的数据发送到服务器。
action
用来规定向何处发送表单数据，action属性值应该是后端提供的一个url地址，如果没有值，则默认为当前页面url地址。（当提交表单后，页面会立即跳转到action属性指定的URL地址）
target
method
表单以何种方式上传数据，get或post （默认值为get）
enctype
用来规定在发送表单数据前如何对数据进行编码。
在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data；其他时间默认值即可。
表单的同步提交及缺点
什么是表单的同步提交
点击提交按钮的同时页面跳转向URL地址指向的页面
表单同步提交的缺点
- 提交后，整个页面会发生跳转
- 提交后，页面之前的状态和数据会丢失
解决上述缺点
表单只负责采集数据，Ajax负责将数据提交到服务器
通过ajax提交表单数据
监听表单提交事件
绑定submit事件
第一种方式：
$('#form').submit(function(){
//逻辑代码
})
第二种方式：
$('#form').on('submit',function(){})
阻止表单默认提交行为
第一种方式：
$('#form').submit(function(e){
//逻辑代码
e.preventDefault()
})
第二种方式：
$('#form').on('submit',function(e){
e.preventDefault()
})
快速获取表单中的数据
- serialize（）函数：可以一次性获取表单中的所有数据,但在使用该函数时，每个表单元素必须要有name属性
语法：$(selector).serialize()
案例
渲染评论列表
layui+jquery
function getCommentList() {
$.ajax({
type: 'get',
url: 'http://www.liulongbin.top:3006/api/cmtlist',
data: {},
success: function(res) {
console.log(res)
if (res.status !== 200) return alert("获取图书失败")
// console.log('获取数据成功');
var rows = []
$.each(res.data, function(i, item) {
var str = '<div class="layui-col-md9">' + item.content +
'</div><div class="layui-col-md3"><span class="layui-badge layui-bg-blue" style="float: right;">评论时间：' +
item.time +
'</span><span class="layui-badge layui-bg-orange" style="float: right;">评论人：' +
item.username + '</span></div>'
rows.push(str)
})
$('#cmtlist').empty().append(rows.join(''))
}
})
}
getCommentList()
$(function () {
$('#form1').submit(function (e) {
e.preventDefault()
var data = $(this).serialize()
alert(data)
$.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
if (res.status !== 201) {
return alert('发表评论失败！')
}
getCommentList()
$('#form1')[0].reset()
})
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../lib/jquery.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<title></title>
</head>
<body style="padding: 25px;">
<!-- 发表评论 -->
<form id="form1">
<div class="layui-card">
<div class="layui-card-header" style="background-color: #01AAED; color: white;">发表评论</div>
<div class="layui-card-body">
<div class="layui-form-item">
<label class="layui-form-label">评论人：</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入昵称"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">评论内容：</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit
style="background-color: #01AAED;color:white;">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</div>
</form>
<!-- 评论列表 -->
<h1>评论列表</h1>
<div class="layui-row layui-inline" id="cmtlist" style="margin: 10px;">
<div class="layui-col-md9">
75%
</div>
<div class="layui-col-md3">
<span class="layui-badge layui-bg-blue" name="username">评论时间：</span>
<span class="layui-badge layui-bg-orange" name="content">评论人：</span>
</div>
</div>
<script src="./js/cmt.js"></script>
</body>
</html>
模板引擎的基本概念
渲染UI结构时遇到的问题
用到了拼接技术，不利于维护
什么是模板引擎
根据程序员指定的模板结构和数据，自动生成一个完整的HTML界面
模板引擎的好处
减少了字符串的拼接
使代码结构更清晰
使代码更易于阅读和维护
art-template模板引擎
安装
http://aui.github.io/art-template/zh-cn/docs/installation.html
art-template的使用步骤
导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.导入模板引擎 -->
<!-- 在Windows全局多一个函数template('模板的Id',需要渲染的数据对象) -->
<script src="../lib/jquery.js"></script>
<script src="./js/template-web.js"></script>
<title></title>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板-->
<!-- 模板的html结构，必须定义在script中 -->
<script type="text/html" id="tpl-user">
<h1>{{name}}</h1>
</script>
<script>
//2.定义需要渲染的数据
var data = {name:'张三'}
// 调用template函数
var htmlStr = template('tpl-user',data)
// alert(htmlStr)
//5.渲染html结构
$('#container').html(htmlStr)
</script>
</body>
</html>
art-template标准语法
art-template 提供了{{}}双花括号这种语法，在这里面可以进行变量输出或数组循环，{{}}是该引擎的标准语法
语法eg:
{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a+b}}
原文输出
如果要输出的value值中，包含HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染
eg：
{{@ value}}
条件输出
可以在{{}}中使用if 条件，else条件输出
flag是定义的数据中的一个键，他的值是0或1
<script type="text/html">
<div id="">
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
</script>
循环输出
hobby是定义的数据当中的一个键，他的值是数组[‘吃饭’,‘睡觉’,‘写代码’]
<script type="text/html">
<ul>
{{each hobby}}
<li>索引是：{{$index}},循环项是：{{$value}}</li>
{{/each}}
</ul>
</script>
过滤器
{{value | filterName}}其中竖线表示调用函数
定义过滤器的基本语法
template.defaults.imports.filterName = function(value){//return处理的结果}
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 1.导入模板引擎 -->
<!-- 在Windows全局多一个函数template('模板的Id',需要渲染的数据对象) -->
<script src="../lib/jquery.js"></script>
<script src="./js/template-web.js"></script>
<title></title>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板-->
<!-- 模板的html结构，必须定义在script中 -->
<script type="text/html" id="tpl-user">
<h1>{{name}}</h1>
<div>注册时间：{{regTime | dateFormat}}</div>
</script>
<script>
template.defaults.imports.dateFormat = function(date){
var y = date.getFullYear()
var m = date.getMonth()+1
var d = date.getDate()
return y+'-'+m+'-'+d
}
//2.定义需要渲染的数据
var data = {name:'张三',regTime:new Date()}
// 调用template函数
var htmlStr = template('tpl-user',data)
// alert(htmlStr)
//5.渲染html结构
$('#container').html(htmlStr)
</script>
</body>
</html>
案例-新闻列表
实现步骤
获取新闻数据
定义template模板
编译模板
定义时间过滤器
定义补零函数
$(function() {
//补零函数
function padZero(n){
if(n<10){
return '0'+n
}
else{
return n
}
}
//定义格式化时间的过滤器
template.defaults.imports.dateFormat = function(dtStr){
var dt = new Date(dtStr)
var y = padZero(dt.getFullYear())
var m = padZero(dt.getMonth()+1)
var d = padZero(dt.getDate())
var hh = padZero(dt.getHours())
var mm = padZero(dt.getMinutes())
var ss = padZero(dt.getSeconds())
return y+'-'+m+'-'+d+' '+hh+':'+mm+':'+ss
}
//获取新闻列表的函数
function getNewsList() {
$.get('http://www.liulongbin.top:3006/api/news',
function(res) {
if (res.status !== 200) {
return alert('获取新闻列表失败')
}
for(var i=0;i<res.data.length;i++){
res.data[i].tags = res.data[i].tags.split(',')
}
var htmlStr = template('tpl-news',res)
$('#news-list').html(htmlStr)
})
}
getNewsList()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./assets/news.css" />
<script src="./lib/jquery.js"></script>
<script src="./lib/template-web.js"></script>
<script src="./js/news.js"></script>
</head>
<body>
<div id="news-list"></div>
<script type="text/html" id="tpl-news">
<!-- {{data.length}} -->
{{each data}}
<div class="news-item">
<img class="thumb" src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="" />
<div class="right-box">
<h1 class="title">{{$value.title}}</h1>
<div class="tags">
{{each $value.tags}}
<span>{{$value}}</span>
{{/each}}
</div>
<div class="footer">
<div>
<span>{{$value.source}}</span>
<span>{{$value.time | dateFormat}}</span>
</div>
<span>评论数：{{$value.cmtcount}}66</span>
</div>
</div>
</div>
{{/each}}
</script>
</body>
</html>
模板引擎的实现原理
正则与字符串操作
基本语法
分组
replace函数
多次replace
https://www.bilibili.com/video/BV1zs411h74a?p=38&spm_id_from=pageDriver&vd_source=a759a12f30e6ba09114aaba19d3cbe13
1693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
