溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用Web框架 -- Express
express -g 全局安裝
express express_examplename
install dependencies:
$ cd express_example && npm install
run the app:
$ DEBUG=express_example ./bin/www
結構：
app.js bin node_modules package.json public routes views
2. Express使用Jade作為默認模板引擎
Jade - Template Engine
Jade是基于縮進的模板引擎，代碼縮進方式很重要，它定義了文檔的層次結構。
Jade使用稍微復雜，因此使用ejs(Embedded JavaScript)代替Jade。
修改package.json，在dependencies中添加："ejs": ">= 1.0.0"
修改app.js：
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
ejs的標簽系統：
<% code %> : JavaScript代碼；
<%= code %> : 顯示替換過HTML特殊字符的內容；
<%- code %> : 顯示原始的HTML內容。
可以利用它們實現頁面模板系統能實現的任何內容。
Getting Started with EJS
Express網站的架構--一個典型的MVC(Model-View-Controller)架構
MVC架構中模板引擎包含在服務器端，控制器獲取用戶請求之后，從模型獲取數據，調用模板引擎，模板引擎以數據和頁面模板為輸入，生成HTML頁面，然后返回給控制器，由控制器交給客戶端。
模板引擎在MVC架構中的位置
3.建立微博網站
《node.js開發指南》代碼中需要注意的幾點
3.1路由規劃
進行功能設計，然后劃分路由
/ ：首頁
/users/:username ：用戶首頁
/post : 發表信息
/reg：用戶注冊
/login：用戶登錄
/logout：用戶登出
以上頁面還需要更加用戶狀態細分。
app.js
var routes = require('./routes/index');
app.use('/', routes);/routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
router.get('/users/:username', function(req, res) {
res.send('user: ' + req.params.username);
});
router.post('/post', function(req, res) {
});
router.get('/reg', function(req, res) {
});
router.post('/doReg', function(req, res) {
});
router.get('/login', function(req, res) {
});
router.post('/doLogin', function(req, res) {
});
router.get('/logout', function(req, res) {
});
module.exports = router;3.2界面設計 -- 使用Bootstrap
Bootstrap中文網
解壓之后將相關文件放到 public/下相關文件夾中；同時下載一份最新的jquery.js放入 public/javascripts中。
修改 views/layout.ejs：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title><%= title %> - Microblog</title>
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="stylesheets/bootstrap-theme.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Microblog</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">首頁</a></li>
<li><a href="/login">注冊</a></li>
<li><a href="/reg">注冊</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="container" calss="container">
<style>
body{ text-align:center}
</style>
<%- body %>
</div>
<hr>
<div>
<footer>
<p><a >百度一下<a>©Company 2014</p>
</footer>
</div>
</body>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
</html>修改 views/index.ejs:
<div class="hero-unit"> <h2>歡迎來到 Microblog</h2> <p>Microblog是一個基于Node.js 的微博系統。</p> <p> <a class="btn btn-primary btn-large" href="/login">登錄</a> <a class="btn btn-large" href="/reg">注冊</a> </p> </div> <div class="row"> <div class="span4"> <h3>Carbo 說</h3> <p>東風破早梅 向暖一枝開 冰雪無人見 春從天上來</p> </div> <div class="span4"> <h3>BYVoid 說</h3> <p> Open Chinese Convert(OpenCC) 是一個開源的中文繁簡轉換工具，<br> 致力于制作高質量的基于統計預料的繁簡轉換詞庫。還提供<br> 函數庫(libopencc)、命令行繁簡轉換工具、人工校對工具、詞典生成<br> 程序、在線轉換服務及圖形用戶界面。 </p> </div> <div class="span4"> <h3>黃蓉 說</h3> <p> EJS是一個JavaScript模板庫，用來從JSON數據中生成HTML字符串。<br> EJS的優點是將 會帶給你明確、維護性良好的HTML代碼結構。 </p> </div> </div>
安裝 express-partials 模塊以支持layout模板，運行效果：
問題及解決方案
$ ./bin/www
events.js:72
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE
at errnoException (net.js:904:11)
at Server._listen2 (net.js:1042:14)
at listen (net.js:1064:10)
at Server.listen (net.js:1138:5)
at Function.app.listen (/home/nick/nodejs/microblog/node_modules/express/lib/application.js:532:24)
at Object.<anonymous> (/home/nick/nodejs/microblog/bin/www:7:18)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
端口號沖突，修改被占用或者阻塞的端口號3000
查看node進程運行情況：
ps -aux | grep node kill pid
查看端口占用情況：
netstat -apn
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
