前言：

刚接手cms3.0的工作，似乎对一切都那么的不熟悉，于是在开始新需求之前，先做一个简单的登录系统。

项目目录：

1.使用webstroms建expreess项目，非常方便简单，建好的项目目录就是这样子的：

   ；

/bin: 用于应用启动

/public: 静态资源目录

/routes：可以认为是controller（控制器）目录

/views: jade/ejs/html模板目录，可以认为是view(视图)目录

app.js 程序main文件

2.在文件夹bin下面找www，右键单击Run 'bin\www',即可看到控制台输出“server Listening on port 3000 +0ms”，然后在浏览器输入“localhost:3000”就可以看见页面上“Hello Express”的字样；

3.在建项目之初，选用的模板是ejs或者jade，在这里为了方便，我们需要把模板改成常用的，挑一种来说，这是修改app.js文件中的代码：

...

var app = express();

// view engine setup

// app.set('views', path.join(__dirname, 'views'));

// app.set('view engine', 'jade');

// 设置模板引擎从jade为html

// view engine setup

app.set('views', path.join(__dirname, 'views'));

var template = require('arttemplate-gg');

template.config('base', '');

template.config('extname', '.html');

app.engine('.html', template.__express);

app.set('view engine', 'html');

...

最后还需要吧views文件夹底下的页面全部修改成.html结束的文件。这样基本的框架才搭建出来了；

4.项目中所需的静态文件，比如jQuery、图片、插件、样式文件统一放在public对应的文件夹底下；

5.在views文件夹底下总共建4个页面：

①err.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

<h1>{{message}}</h1>

<h2> {{error.status}}</h2>

<pre>{{error.stack}}</pre>

</body>

</html>

②home.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>欢迎登录@@@@@@@@@@</title>

</head>

<body>

欢迎登录

</body>

</html>

③index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link href="/public/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">

  <title></title>

</head>

<body>

<p>我是index页面~~~</p>

<script src="/public/javascripts/jquery.min.js"></script>

<script src="/public/javascripts/bootstrap.min.js"></script>

</body>

</html>

④login.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>用户登录</title>

    <style>

        *{ margin:0px; padding:0px; list-style:none;}

        body,html{ height:100%;font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,sans-serif;}

        html{ background:url(/images/bg.png) repeat-x;}

        body{ background:url(/images/ftbg.png) 0 bottom repeat-x;}

        .main{ background:url(/images/mbg.png) no-repeat center bottom;position: absolute;width:100%;height:500px;top:50%;

            margin-left:0;margin-top:-290px; z-index:99}

        .loginbox{ width:410px;  height:375px;background:url(/images/borderbg.png); position: absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; border-radius:8px;-moz-border-radius: 8px; -webkit-border-radius:8px; z-index:999;}

        .loginbg{ width:310px;padding:40px; margin:0 auto; margin-top:10px; background-color:#fff; border-radius:8px;-moz-border-radius: 8px; -webkit-border-radius:8px;}

        .loginbox h3{ font-size:18px; font-weight:normal; color:#333; padding-bottom:15px; text-align:center;}

        .loginbox input{ width:260px; height:46px; border:1px solid #dbdbdb; padding:0 5px; font-size:14px; color:#666;border-radius:5px rgba(0,0,0,0.5);-moz-border-radius: 5px; -webkit-border-radius:5px; padding-left:45px; line-height:46px;}

        .loginbox ul li{ padding:15px 0; position:relative;}

        .loginbox .user{ background:url(/images/lgicon.png) 0 0 no-repeat; display:inline-block; position:absolute; width:19px; height:20px; left:15px; top:27px;}

        .loginbox .pwd{ background:url(/images/lgicon.png) 0 bottom no-repeat; display:inline-block; position:absolute; width:19px; height:22px; left:15px; top:27px;}

        .loginbox input.lgbtn{ width:312px; background-color:#f86c6b; border:0px; color:#fff; font-size:18px; font-family:\5FAE\8F6F\96C5\9ED1;line-height:46px; text-align:center; cursor:pointer; text-indent:0px; padding:0px;}

        .main h2{ margin-top:-40px; font-size:30px; text-align:center; color:#fff; font-weight:normal;}

        .footer{ position:fixed; z-index:9; bottom:0px; text-align:center; color:#666; width:100%; padding-bottom:20px; font-size:14px;}

    </style>

</head>

<body>

<div class="main">

    <h2>小小登录窗口</h2>

    <div class="loginbox">

        <div class="loginbg">

            <h3>测试登录</h3>

            <form id="fm" action="/" method="post">

                <ul>

                    <li><span class="user" ></span><input type="text" id="username" name="username"  value=""></li>

                    <li><span class="pwd" ></span><input type="password" id="password" name="password" required="true" value=""><span style="color: red;position: absolute;top: 70px;left: 10px" id="msg">{{msg}}</span></li>

                    <li><input type="submit" value="登录" class="lgbtn"/></li>

                </ul>

            </form>

        </div>

    </div>

</div>

<div class="footer">Come on 测试一下~~~</div>

<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

<script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

</body>

</html>

6.所对应的js文件——routes底下的index.js

/**

 * created 2016-11-01

 *

 */

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function (req, res, next) {

    res.render('login', {title: 'Express'});

});

// 自定义方法

router.post('/', function (req, res, next) {

    var username = req.body.username;

    var password = req.body.password;

    var user={

        username:'admin',

        password:'admin'

    };

    if(username == user.username && password == user.password){

        console.log("验证正确");

        res.render('home', {title: 'Express'});

    } else {

        console.log("验证失败");

        res.render('login', {msg: '用户名或密码错误！'});

    }

});

module.exports = router;

最终的效果就是：

7.由于js中定义了账号和密码都为admin，因此只有输入值为admin时，才可以跳转到

如左图的页面，否则就是

提示的错误信息~

cms3.0——收获(1)的更多相关文章

  1. CMS3.0——初次邂逅express

    前言: 刚接手cms3.0的工作,似乎对一切都那么的不熟悉,于是在开始新需求之前,先做一个简单的登录系统. 项目目录: 1.使用webstroms建expreess项目,非常方便简单,建好的项目目录就 ...

  2. 纸壳CMS3.0中的规则引擎，表达式计算

    纸壳CMS3.0中的规则引擎,用于计算通用表达试结果.通常业务逻辑总是复杂多变的,使用这个规则引擎可以灵活的修改计算表达式. IRuleManager IRuleManager,是使用规则引擎的主要接 ...

  3. CMS4.0——后知后觉

    前言: 2016年底,自己作为参与者加入CMS3.0的改版中:2017年中,CMS4.0在经过一个月有余的时间,华丽丽的蜕变成现在大家喜闻乐见的:http://news.gangguwang.com/ ...

  4. 纸壳CMS 3.0升级.Net Core 2.1性能大提升

    微软发布了.Net Core 2.1正式版,纸壳CMS也在第一时间做了升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新功能. Github https://gith ...

  5. 74CMS3.0储存型XSS漏洞代码审计

    发现一个总结了乌云以前代码审计案例的宝藏网站:https://php.mengsec.com/ 希望自己能成为那个认真复现和学习前辈们思路的那个人,然后准备慢慢开始审计一些新的小型cms了 骑士cms ...

  6. Discuz 5.x 6.x 7.x 前台SQL注入漏洞

    来源:http://wooyun.jozxing.cc/static/bugs/wooyun-2014-071516.html 漏洞出现在/include/editpost.inc.php. if($ ...

  7. bzoj 1051 强连通分量

    反建图,计算强连通分量,将每个分量看成一个点,缩点后的图是一个DAG,如果是一棵树,则根代表的连通分量的大小就是答案,否则答案为0. 收获: 图的东西如果不好解决,可以尝试缩点(有向图将每个强连通分量 ...

  8. 《京东上千页面搭建基石——CMS前后端分离演进史》阅读笔记

    一.背景 CMS即内容管理系统,目的是用于快速进行网站建设或者网页开发. 对于京东网站部门来说,CMS核心目的是用来快速开发和上线各种页面,诸如各种垂直频道页. 二.CMS核心目的 进行数据和模板的统 ...

  9. Getting started with the basics of programming exercises_1

    1.编写一个将输入复制到输出的程序,并将其中连续的多个空格用一个空格代替 使用if 结构: #include<stdio.h> #define NONBLANK 'a'; // repal ...

随机推荐

  1. redis数据库选择-select

    1.关于redis的select命令用法: SELECT index 切换到指定的数据库,数据库索引号 index 用数字值指定,以 0 作为起始索引值. 默认使用 0 号数据库. 可用版本: > ...

  2. 期权交易基本原理——买进看跌期权(Long Put),卖出看跌期权(Short Put)

    期权交易基本原理--买进看跌期权(Long Put),卖出看跌期权(Short Put) 来源:中电投先融期货-青岛 浏览:13508次2014-07-25 14:25:55 3 第三节 买进看跌期权 ...

  3. 高并发简单解决方案————redis队列缓存+mysql 批量入库(ThinkPhP)

    问题分析 问题一:要求日志最好入库:但是,直接入库mysql确实扛不住,批量入库没有问题,done.[批量入库和直接入库性能差异] 问题二:批量入库就需要有高并发的消息队列,决定采用redis lis ...

  4. oracle dba 职责, 及个人需要掌握内容

    ORACLE DBA 职责, 基本相当于日常工作. 0. 数据库设计 1. 模式对象的创建与管理(table, index 等等) 2. 事物管理, 例如并发等 3. SQL 调优 只是针对SQL的 ...

  5. JavaScript基于对象(面向对象)<一>类和对象

    javascript中一切皆对象,比如:Array,Date.....这些都是对象.javascript中没有class的定义,function既是定义函数,也可以是定义类.function Obj( ...

  6. linux install sublime_text3

    ubuntu & debian: (baidu or google) 1). download ***.deb to install inux系统下怎么安装.deb文件? deb 是 ubun ...

  7. C++—函数探幽

    一.内联函数 1.内联函数的机制 内联函数是C++为提高程序运行速度而做的一项改进. 函数调用机制:常规函数调用使程序使程序跳到被掉函数的地址,并在函数结束时返回. 内联函数的机制:内联函数的代码与其 ...

  8. lx：这么空！什么叫假大空 xy：那我做给你看

    “如果我答应你,你回来了XY,最后没有在一起肯定会怪我:而且我现在没有想好以后会怎么样” 希望你可以看到我的努力!PS : 坚持以后每日至少一篇.编程是一门手艺,手艺人靠手艺养家! ---手艺人

  9. shell脚本中获取本机ip地址的方法

    ipaddr='172.0.0.1' ipaddr=$(ip addr | awk '/^[0-9]+: / {}; /inet.*global/ {print gensub(/(.*)\/(.*)/ ...

  10. HBase 的存储结构

    HBase 的存储结构 2016-10-17 杜亦舒 HBase 中的表常常是超级大表,这么大的表,在 HBase 中是如何存储的呢?HBase 会对表按行进行切分,划分为多个区域块儿,每个块儿名为  ...