nodejs开发cms系统第二篇之首页
2016-01-25 00:00
281 查看
摘要: nodejs,cms,首页
上一篇文章讲述了SimpleCMS系统登录模块的功能实现，这篇文章将完成登录成功后首页的页面设计和功能实现。
一、首页
首页采用经典的easyui-layout布局即南北西中布局，顶部面板显示登录信息，底部面板显示系统版权信息，左边是导航菜单，右边是内容显示中心。
(1)、/views/index.ejs代码
<!DOCTYPE html>
<html>
<head id="head1">
<title>simple cms系统</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/themes/icon.css">
<link type="text/css" href="/stylesheets/index.css" rel="stylesheet"/>
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/locale/easyui-lang-zh_CN.js">
</script>
<script type="text/javascript" src="/javascripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src='/javascripts/outlook2.js'> </script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no">
<noscript>
<div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;">
<img src="/images/noscript.gif" alt='抱歉，请开启脚本支持！' />
</div>
</noscript>
<!--顶部区域-->
<div region="north" split="true" border="false" style="overflow: hidden; height: 30px;
background: url(/images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体">
<span style="float:right; padding-right:20px;" class="head">欢迎 admin <a href="#" id="editpass">修改密码</a> <a href="#" id="loginOut">安全退出</a></span>
<span style="padding-left:10px; font-size: 16px; "><img src="/images/blocks.gif" width="20" height="20" align="absmiddle" />
Simple CMS</span>
</div>
<!--左边导航菜单 -->
<div region="west" split="true" title="导航菜单" style="width:180px;" id="west">
<div class="easyui-accordion" fit="true" border="false">
<div title="系统管理" icon="icon-sys" style="overflow:auto;">
<ul>
<li>
<div><a target="mainFrame" href="/user/list" >
<span class="icon icon-users" ></span>用户管理</a></div>
</li>
</ul>
</div>
</div>
</div>
<!--中部区域-->
<div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
<div id="tabs" class="easyui-tabs" fit="true" border="false" >
<div title="欢迎使用" style="padding:20px;overflow:hidden;" id="home">
<h1>Simple CMS</h1>
<div id="centerContent"></div>
一个采用了简洁强大的Express4作为web框架，模板引擎用的是ejs，数据库用mysql，前端用的是easy ui框架的简单cms系统。
</div>
</div>
</div>
<!--底部区域-->
<!--background: #D2E0F2;-->
<div region="south" split="true" style="height: 30px; background-color:#eee; ">
<div class="footer">©Simple CMS 2016 Powered By Yong888</div>
</div>
<!--右键关闭菜单-->
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-exit">退出</div>
</div>
</body>
</html>
(2)、增加首页路由
在/routes/index.js中增加如下路由:
router.get('/index', function(req, res) {
res.render('index', { title: 'index' });//渲染/views/index.ejs视图并返回html
});
(3)、启动项目，浏览器访问:http://localhost:3000/index 运行效果如下:
二、修改密码功能
实现点击"修改密码"超链接，弹出修改密码窗口，输入新密码即可进行修改
(1)、在/views/index.ejs中增加如下html代码:
<!--修改密码窗口-->
<div id="w" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"
maximizable="false" icon="icon-save" style="width: 300px; height: 150px; padding: 5px;
background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<table cellpadding=3>
<tr>
<td>新密码：</td>
<td><input id="txtNewPass" type="Password" class="txt01" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input id="txtRePass" type="Password" class="txt01" /></td>
</tr>
</table>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >确定</a>
<a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)" onclick="closePwd()">取消</a>
</div>
</div>
</div>
(2)、修改密码实现：
//设置修改密码窗口
function openPwd() {
$('#w').window({
title: '修改密码',
width: 300,
modal: true,
shadow: true,
closed: true,
height: 160,
resizable:false
});
}
//关闭修改密码窗口
function closePwd() {
$('#w').window('close');
$('#txtNewPass').val('');
$('#txtRePass').val('');
}
//修改密码
function serverLogin() {
var $newpass = $('#txtNewPass');
var $rePass = $('#txtRePass');
var newPwd=$newpass.val();
var rePwd=$rePass.val();
if ( newPwd== '') {
msgShow('系统提示', '请输入密码！', 'warning');
return false;
}
if (rePwd == '') {
msgShow('系统提示', '请在一次输入密码！', 'warning');
return false;
}
if (newPwd!= rePwd) {
msgShow('系统提示', '两次密码不一至！请重新输入', 'warning');
return false;
}
$.post('/user/modifyPwd/' + newPwd,
function(data) {
msgShow('系统提示', '恭喜，密码修改成功！<br>您的新密码为：' + data.msg, 'info');
closePwd();
})
}
$(function() {
openPwd();
$('#editpass').click(function() {
$('#w').window('open');
});
$('#btnEp').click(function() {
serverLogin();
})
});
三、安全退出功能
这个功能比较简单，主要实现点击"安全退出"链接，弹出是否确认退出对话框，选择否则关闭对话框，选择是则清除用户登录的会话信息并跳转到登录页面。
(1)、安全退出功能js代码:
$('#loginOut').click(function() {
$.messager.confirm('系统提示', '您确定要退出本次登录吗?',
function(r) {
if (r) {
location.href = '/logout';
}
});
});
(2)、增加退出功能路由
/routes/index.js中增加如下代码:
router.get('/logout', function(req, res) {
//销毁session回话信息,后面实现
res.redirect('/login');//跳转到登录页面
});
四、完整index.js代码:
//设置修改密码窗口
function openPwd() {
$('#w').window({
title: '修改密码',
width: 300,
modal: true,
shadow: true,
closed: true,
height: 160,
resizable:false
});
}
//关闭修改密码窗口
function closePwd() {
$('#w').window('close');
$('#txtNewPass').val('');
$('#txtRePass').val('');
}
//修改密码
function serverLogin() {
var $newpass = $('#txtNewPass');
var $rePass = $('#txtRePass');
var newPwd=$newpass.val();
var rePwd=$rePass.val();
if ( newPwd== '') {
msgShow('系统提示', '请输入密码！', 'warning');
return false;
}
if (rePwd == '') {
msgShow('系统提示', '请在一次输入密码！', 'warning');
return false;
}
if (newPwd!= rePwd) {
msgShow('系统提示', '两次密码不一至！请重新输入', 'warning');
return false;
}
$.post('/user/modifyPwd/' + newPwd,
function(data) {
msgShow('系统提示', '恭喜，密码修改成功！<br>您的新密码为：' + data.msg, 'info');
closePwd();
})
}
$(function() {
openPwd();
//修改密码链接
$('#editpass').click(function() {
$('#w').window('open');
});
//确定按钮
$('#btnEp').click(function() {
serverLogin();
})
//安全退出
$('#loginOut').click(function() {
$.messager.confirm('系统提示', '您确定要退出本次登录吗?',
function(r) {
if (r) {
location.href = '/logout';
}
});
});
});
五、总结
到此，首页的页面设计和功能实现已经完成，修改密码和安全退出功能也较简单，下篇将实现用户管理的功能。
上一篇文章讲述了SimpleCMS系统登录模块的功能实现，这篇文章将完成登录成功后首页的页面设计和功能实现。
一、首页
首页采用经典的easyui-layout布局即南北西中布局，顶部面板显示登录信息，底部面板显示系统版权信息，左边是导航菜单，右边是内容显示中心。
(1)、/views/index.ejs代码
<!DOCTYPE html>
<html>
<head id="head1">
<title>simple cms系统</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/themes/icon.css">
<link type="text/css" href="/stylesheets/index.css" rel="stylesheet"/>
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/locale/easyui-lang-zh_CN.js">
</script>
<script type="text/javascript" src="/javascripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src='/javascripts/outlook2.js'> </script>
</head>
<body class="easyui-layout" style="overflow-y: hidden" scroll="no">
<noscript>
<div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;">
<img src="/images/noscript.gif" alt='抱歉，请开启脚本支持！' />
</div>
</noscript>
<!--顶部区域-->
<div region="north" split="true" border="false" style="overflow: hidden; height: 30px;
background: url(/images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体">
<span style="float:right; padding-right:20px;" class="head">欢迎 admin <a href="#" id="editpass">修改密码</a> <a href="#" id="loginOut">安全退出</a></span>
<span style="padding-left:10px; font-size: 16px; "><img src="/images/blocks.gif" width="20" height="20" align="absmiddle" />
Simple CMS</span>
</div>
<!--左边导航菜单 -->
<div region="west" split="true" title="导航菜单" style="width:180px;" id="west">
<div class="easyui-accordion" fit="true" border="false">
<div title="系统管理" icon="icon-sys" style="overflow:auto;">
<ul>
<li>
<div><a target="mainFrame" href="/user/list" >
<span class="icon icon-users" ></span>用户管理</a></div>
</li>
</ul>
</div>
</div>
</div>
<!--中部区域-->
<div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
<div id="tabs" class="easyui-tabs" fit="true" border="false" >
<div title="欢迎使用" style="padding:20px;overflow:hidden;" id="home">
<h1>Simple CMS</h1>
<div id="centerContent"></div>
一个采用了简洁强大的Express4作为web框架，模板引擎用的是ejs，数据库用mysql，前端用的是easy ui框架的简单cms系统。
</div>
</div>
</div>
<!--底部区域-->
<!--background: #D2E0F2;-->
<div region="south" split="true" style="height: 30px; background-color:#eee; ">
<div class="footer">©Simple CMS 2016 Powered By Yong888</div>
</div>
<!--右键关闭菜单-->
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-exit">退出</div>
</div>
</body>
</html>
(2)、增加首页路由
在/routes/index.js中增加如下路由:
router.get('/index', function(req, res) {
res.render('index', { title: 'index' });//渲染/views/index.ejs视图并返回html
});
(3)、启动项目，浏览器访问:http://localhost:3000/index 运行效果如下:
二、修改密码功能
实现点击"修改密码"超链接，弹出修改密码窗口，输入新密码即可进行修改
(1)、在/views/index.ejs中增加如下html代码:
<!--修改密码窗口-->
<div id="w" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"
maximizable="false" icon="icon-save" style="width: 300px; height: 150px; padding: 5px;
background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<table cellpadding=3>
<tr>
<td>新密码：</td>
<td><input id="txtNewPass" type="Password" class="txt01" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input id="txtRePass" type="Password" class="txt01" /></td>
</tr>
</table>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >确定</a>
<a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)" onclick="closePwd()">取消</a>
</div>
</div>
</div>
(2)、修改密码实现：
//设置修改密码窗口
function openPwd() {
$('#w').window({
title: '修改密码',
width: 300,
modal: true,
shadow: true,
closed: true,
height: 160,
resizable:false
});
}
//关闭修改密码窗口
function closePwd() {
$('#w').window('close');
$('#txtNewPass').val('');
$('#txtRePass').val('');
}
//修改密码
function serverLogin() {
var $newpass = $('#txtNewPass');
var $rePass = $('#txtRePass');
var newPwd=$newpass.val();
var rePwd=$rePass.val();
if ( newPwd== '') {
msgShow('系统提示', '请输入密码！', 'warning');
return false;
}
if (rePwd == '') {
msgShow('系统提示', '请在一次输入密码！', 'warning');
return false;
}
if (newPwd!= rePwd) {
msgShow('系统提示', '两次密码不一至！请重新输入', 'warning');
return false;
}
$.post('/user/modifyPwd/' + newPwd,
function(data) {
msgShow('系统提示', '恭喜，密码修改成功！<br>您的新密码为：' + data.msg, 'info');
closePwd();
})
}
$(function() {
openPwd();
$('#editpass').click(function() {
$('#w').window('open');
});
$('#btnEp').click(function() {
serverLogin();
})
});
三、安全退出功能
这个功能比较简单，主要实现点击"安全退出"链接，弹出是否确认退出对话框，选择否则关闭对话框，选择是则清除用户登录的会话信息并跳转到登录页面。
(1)、安全退出功能js代码:
$('#loginOut').click(function() {
$.messager.confirm('系统提示', '您确定要退出本次登录吗?',
function(r) {
if (r) {
location.href = '/logout';
}
});
});
(2)、增加退出功能路由
/routes/index.js中增加如下代码:
router.get('/logout', function(req, res) {
//销毁session回话信息,后面实现
res.redirect('/login');//跳转到登录页面
});
四、完整index.js代码:
//设置修改密码窗口
function openPwd() {
$('#w').window({
title: '修改密码',
width: 300,
modal: true,
shadow: true,
closed: true,
height: 160,
resizable:false
});
}
//关闭修改密码窗口
function closePwd() {
$('#w').window('close');
$('#txtNewPass').val('');
$('#txtRePass').val('');
}
//修改密码
function serverLogin() {
var $newpass = $('#txtNewPass');
var $rePass = $('#txtRePass');
var newPwd=$newpass.val();
var rePwd=$rePass.val();
if ( newPwd== '') {
msgShow('系统提示', '请输入密码！', 'warning');
return false;
}
if (rePwd == '') {
msgShow('系统提示', '请在一次输入密码！', 'warning');
return false;
}
if (newPwd!= rePwd) {
msgShow('系统提示', '两次密码不一至！请重新输入', 'warning');
return false;
}
$.post('/user/modifyPwd/' + newPwd,
function(data) {
msgShow('系统提示', '恭喜，密码修改成功！<br>您的新密码为：' + data.msg, 'info');
closePwd();
})
}
$(function() {
openPwd();
//修改密码链接
$('#editpass').click(function() {
$('#w').window('open');
});
//确定按钮
$('#btnEp').click(function() {
serverLogin();
})
//安全退出
$('#loginOut').click(function() {
$.messager.confirm('系统提示', '您确定要退出本次登录吗?',
function(r) {
if (r) {
location.href = '/logout';
}
});
});
});
五、总结
到此，首页的页面设计和功能实现已经完成，修改密码和安全退出功能也较简单，下篇将实现用户管理的功能。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 试用Kesion CMS 4.0商城版 商业版
- 基于php的CMS中展示文章类实例分析
- CMS不要让MySQL为你流泪
- 30 个很棒的PHP开源CMS内容管理系统小结
- 几款免费开源的不用数据库的php的cms
- 摘自织梦CMS中的图片处理类
- java开源内容管理系统 J4CMS增加新样式
- 【OSChina-MoPaaS应用开发大赛】JeeSite(JES)
- 帝国CMS的搜索表单语法规则
- 帝国CMS循环子栏目标签listsonclass介绍
- 如何使用帝国CMS自带的数据库类
- 如何使用帝国CMS的灵动标签e:loop
- 帝国CMS listshowclass循环栏目标签
- 如何让帝国CMS显示头条/置顶/推荐等标记
- 帝国CMS ecmsinfo万能标签
- 帝国CMS在CentOS环境下实现在线文档网站(类似百度文库)
- 帝国CMS6.6版到7.0版升级步骤及常见问题说明
- 给使用CMS建站新手的八个建议