CMS3.0——初次邂逅express

時間 2019-11-25

標籤 cms3.0 cms 初次邂逅 express 欄目 CMS 简体版

原文原文鏈接

前言：

剛接手cms3.0的工做，彷佛對一切都那麼的不熟悉，因而在開始新需求以前，先作一個簡單的登陸系統。javascript

項目目錄：

1.使用webstroms建expreess項目，很是方便簡單，建好的項目目錄就是這樣子的：css

；html

/bin: 用於應用啓動java

/public: 靜態資源目錄jquery

/routes：能夠認爲是controller（控制器）目錄web

/views: jade/ejs/html模板目錄，能夠認爲是view(視圖)目錄express

app.js 程序main文件bootstrap

2.在文件夾bin下面找www，右鍵單擊Run 'bin\www',便可看到控制檯輸出「server Listening on port 3000 +0ms」，而後在瀏覽器輸入「localhost:3000」就能夠看見頁面上「Hello Express」的字樣；瀏覽器

3.在建項目之初，選用的模板是ejs或者jade，在這裏爲了方便，咱們須要把模板改爲經常使用的，挑一種來講，這是修改app.js文件中的代碼：app

... 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時，才能夠跳轉到

如左圖的頁面，不然就是

提示的錯誤信息~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。