ajax实现局部删除,Express+AdminLTE+hbs+Ajax实现局部刷新终极版(第二部分)
上一篇中已经把所有思路都理顺了,这边我们就开始具体编码吧。(如果您有更好的办法,欢迎留言讨论!互相学习!)
我们先来看一下最终完成的效果:
一:完整项目目录结构如图所示:
二:更换模板引擎为 hbs
2.1 安装 express-hbs
npm i express-hbs
2.2 在app.js中更换模板引擎,并指定母版页位置 如图:
至此,我们的模板引擎更换完毕,你会发现,在Views文件加下的所有文件,都是以*.hbs结尾的,如果新加文件,请保持后缀一致。
2.3 刚才已经配置好了母版页的位置,就是 “/views/layout” ,现在我们去看看这个母版页里面的内容吧;如下图
2.4 现在来介绍下母版页,这个母版页是AdminLTE中的精简版,我把多余的部分全部删除。
从图中可以看出,模板分为四个部分:header(头部)、 aside(侧边栏)、 content(中间内容) 和 footer(底部)
其中我们注意到,在中间内容部分,有一个 {{{body}}}这种写法的意思就是:每次访问具体页面时,会将具体页面替换掉{{{body}}}部分的内容;
例如:我们想访问主页,主页是 views/index.hbs,我们来看看其中的内容:
是的,主页里就只有这些代码,当进行访问主页路由的时候,也就是 localhost:3000时,hbs会将整个div自动替换{{{body}}}
我们所看到的就会如下:这极大的方便了我们对模板的应用。
到目前,我们所有的视图都具备模板了,而且母版页是单独存放的;下面我们来解决无刷新问题;
三:使用ajax实现无刷新页面
首先,我们编写一个公共的js方法,放在 Base.js中,这个方法有两个作用
1:将侧边栏所有的页面切换请求,通过Ajax发送出去,并得到一个html 页面,将中间部分进行填充;
2:成功填充页面后,将当期请求的url更新到地址栏,以便于用户刷新操作;
看一下这个方法:
var ChangePage = function (url) {
$.ajax({
type: 'GET',
url: url,
data: { c_type: 'page' },
success: function (res) {
$("#main_container").html(res);
var stateObject = {};
var title = "Wow Title";
var newUrl = url;
history.pushState(stateObject, title, newUrl);
}
});
}
细心的朋友会发现一个问题,我在ajax请求的时候,给了一个参数:c_type
别忘记了,这里还有一个非常严重的问题没有解决,那就是 通过页面侧边栏发起的页面跳转,我们希望返回的是不带模板页的分布视图!
这里的参数 c_type就是为了便于后续的区分处理
四:路由中渲染页面的区分处理
4.1 来看一下路由渲染页面是如何进行操作的(为了方便,我把所有页面的跳转都写到了index.js路由中,不要像我学习啊,我实在是太懒了)
router.get('/', function(req, res, next) {
var pageData = {};
if(req.query.c_type=='page')
{
pageData.layout='';
}
res.render('index', pageData);
});
首先我们定义了一个对象:pageData,他用来向页面传递数据;
这里当我们发现前端请求的参数里包含一个叫 c_type 的参数,并且值为 page 那么我们就认为他是从页面侧边栏发起的请求
这个时候,我们关键性的一句来了:pageData.layout='';这一句的意思就是不使用模板,返回局部视图,从而实现了无刷新;
4.2 但是这样的操作太过繁琐,我们岂不是每个路由都需要添加一个类似的判断?太麻烦了吧?于是我们想到了 中间件 ,它可以把每个请求都过滤一下;
我们来看一下中间件的写法:
//拦截器,必须放在静态资源声明之后、路由导航之前
app.use(function (req, res, next) {
var url = req.query.c_type;
global.pageData = {
data:{}
}
if (url == "page") {
global.pageData.layout='';
}
console.log(global.pageData)
next();
});
这里我们把每个请求都就进行拦截,如果发现请求中带有 c_type参数,那么我们就定义一个全局对象:global.pageData
并给 pageData.layout 赋值为空;
在每个路由中,我们只需要引用下这个全局变量,就可以实现模板的自由控制:改良后的路由如下:
router.get('/', function(req, res, next) {
res.render('index', global.pageData);
});
是不是瞬间少了好多代码!
如果你有一些自定义的数据,就可以放到global.pageData中,这里不作过多解释;
到目前,你已经完成了大部分的操作,页面实现了无刷新加载!
五:关于页面侧边栏配置,以及样式保留问题
侧边栏的样式完全是AdminLTE中的原始样式,这里你需要稍微观察一下,如果需要添加更多的侧边栏,只需要按照其规则就可以
关于样式保留,这里我们不过多的介绍,下面是完整方法:在 Base.js中
$(".treeview a").click(function () {
var item = $(this).parent().parent().parent('.treeview');
var idStr = $(item).attr('id');
if (idStr != undefined) {
localStorage.setItem("c_slider", idStr);
}else
{
localStorage.setItem("c_slider", '');
}
})
$(function () {
var c_slider = localStorage.c_slider
if (c_slider != undefined) {
$("#" + c_slider).addClass("menu-open");
$("#" + c_slider + ' ul').css('display', 'block');
}
})
六:完整Demo下载:
https://download.csdn.net/download/tomato2313/10937611(可能还在审核中)
ajax实现局部删除,Express+AdminLTE+hbs+Ajax实现局部刷新终极版(第二部分)相关推荐
- Express框架与Ajax应用
文章目录 Express框架 Ajax发送请求前的准备 前端页面的准备 服务端的代码准备 用Ajax发送GET请求 服务器端js 请求端 代码的注意点 Ajax设置请求参数 Express框架 Exp ...
- js+jQuery获取全选并用ajax进行批量删除
今天在处理后台的时候做了个小小的ajax处理批量删除的功能,给大家分享下. 1.在Repater绑定出放入单选 <input id="chkContentId" name=& ...
- laravel ajax评论,javascript-Laravel 5.8尝试进行AJAX调用以删除评...
我正在尝试使用AJAX调用来删除我的配方应用程序中的评论. 它一直给我一个405错误:不允许使用方法.不知道它在哪里破裂,对我来说看起来还不错.有人可以看看吗? 刀片视图 @foreach($reci ...
- ajax删除成功后的回调,Ajax成功回调'删除'不触发在Firefox中
我有一个测试页面使用Ajax来向服务器发出一个http'删除'请求.以下JS代码在IE7中按照预期工作,但在Firefox中不起作用(除非我使ajax调用异步).Ajax成功回调'删除'不触发在Fir ...
- ajax添加和删除数据,ajax 添加 更新 删除数据库
ajax 添加 更新 删除数据库 内容精选 换一换 云审计服务(Cloud Trace Service,CTS)记录了数据安全中心相关的操作事件,方便用户日后的查询.审计和回溯,具体请参见云审计服务用 ...
- express应用中ajax结合模板引擎ejs.js渲染页面
一.express应用中ajax结合模板引擎ejs.js渲染页面 在views新建一个渲染模板命名 Template.ejs Template.ejs 示例: <% if(coursesList ...
- Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...
- ajax java用户名查重_Django之AJAX
AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JS ...
- ajax带来的主要问题有哪些,ajax面试题
1.ajax是什么?如何创建一个ajax? ajax并不算是一种新的技术,全称是asynchronous javasript and xml,可以说是已有技术的组合,主要用来实现客户端服务器的异步通信 ...
最新文章
- 双十一,假如有人把支付宝存储服务器炸了,你的钱是不是都没了?
- 计算机之间是如何实现通信的?—Vecloud微云
- Android--面试题整理(二)
- MVC5 数据注解和验证
- 关闭系统进程,以及如何调用cmd并执行命令
- PHP 在作为中间件时print无返回值问题
- LDAP命令介绍---dsreplication--enable:DISABLE
- Swift中文教程(六)函数
- php 函数strtr 替换函数实例解析 strtr 速度比较快
- 直播预告丨统一便捷的数据操作平台CloudQuery年终发布!
- 将Git子模块更新为最新的原始提交
- 正充电手机自动订了总统套房!公安介入调查:排除被植入后门或被控制可能...
- 英伟达实时 3D 设计协作和仿真平台已正式发布
- 【转】工业物联网技术(IIoT)的技术与挑战(PPT全文)
- 无线路由器DNS服务器异常,fast无线路由器dns异常的解决方法
- 社会学与计算机哪个考研容易,国内几所较热的社会学系考研难度比较
- 神技能:Python控制键盘鼠标
- 如何从网页获取原图片
- kill -15 与kill -9的区别
- HBuilderX 终端显示空白问题
热门文章
- 阿里云ECS开放批量创建实例接口,实现弹性资源的创建
- API信息全掌控,方便你的日志管理——阿里云推出API网关打通日志服务
- 阿里1682亿背后的协同研发云——云效公共云正式商业化 1
- Kibana:数据分析的可视化利器
- 填平数据、产品、模式需求鸿沟,浪潮云发布新一代行业云 MEP战略
- 为什么我学了6个月Python,还是找不到工作?
- FreeWheel是一家怎样的公司?| 人物志
- python 抽象语法树_用python演示一个简单的AST(抽象语法树)
- 轻博客框架 php,DouPHP轻博客 v1.6 Release 20200925
- RabbitMQ的5种队列_路由模式_入门试炼_第8篇