文档章节

nodejs开发cms系统第二篇之首页

yong888
 yong888
发布于 2016/01/25 21:54
字数 1402
阅读 82
收藏 1
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';
                    }
                });
            });
      });

五、总结

到此,首页的页面设计和功能实现已经完成,修改密码和安全退出功能也较简单,下篇将实现用户管理的功能。

 

 

© 著作权归作者所有

yong888
粉丝 3
博文 7
码字总数 7777
作品 0
程序员
私信 提问
Cody 更新到 Express 4.x

Cody 更新到 Express 4.x,cody 是一个使用 Node.js 开发的CMS系统,这是一个由 比利时 根特大学 布鲁日校区howest(猜测是一个学院的名称)的教授和学生开发的一个项目,他们已经把这个项目...

糊涂茶
2014/08/25
2.3K
1
使用VS Code开发纸壳CMS自动编译主题压缩CSS,JS

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,并针对网页...

ZKEASOFT
05/07
0
0
NodeWk 1.0 发布,企业级开源开发框架

NodeWk,是基于sails.js框架开发的,node.js企业级开源开发框架,主要实现了权限系统、系统管理、微信模块、简单的CMS模块,基于NodeWk 你可以快速构建自己的项目,快速上手开发node.js项目。...

Wizzer
2016/07/16
1K
4
io.js入门(一)—— 初识io.js

io.js可以说是彻底从NodeJS里分离出来的一条分支,其事情始末可以查看这篇报道,此处便也不赘言。既然是分支,io.js便也基本兼容NodeJS的各种API,连执行指令也依旧兼容Node的 node XXX (新...

开源oschina
2015/01/14
0
0
企业建站系统--nodecms

nodecms 使用 nodejs 开发定位于企业网站的简易 CMS,目标为容易拓展、部署,前端开发者容易使用的 CMS 系统。 特性 使用nodejs 开发,为前端开发者准备的,前后端都使用JS,做个企业网站就很...

linksgo2011
2015/10/19
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
3
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
8
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
4
0
centos7修改命令行或图形界面启动模式

1.systemctl get-default命令获取当前模式 2.systemctl set-default graphical.target 修改启动模式(修改为图形界面,要是修改为命令行就multi-user.target) 2.systemctl set-default multi-...

大圣39
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部