使用Nodejs創(chuàng)建基本的網(wǎng)站 Microblog--《Node.js開發(fā)指南》 1

發(fā)布時間：2020-06-24 08:53:52 來源：網(wǎng)絡(luò) 閱讀：1437 作者：xjhznick 欄目：web開發(fā)

使用Web框架 -- Express

express -g 全局安裝

express express_examplename

install dependencies:

$ cd express_example && npm install

run the app:

$ DEBUG=express_example ./bin/www

結(jié)構(gòu)：

app.js bin node_modules package.json public routes views

2. Express使用Jade作為默認模板引擎

Jade - Template Engine

Jade是基于縮進的模板引擎，代碼縮進方式很重要，它定義了文檔的層次結(jié)構(gòu)。

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的標簽系統(tǒng)：

<% code %> : JavaScript代碼；
<%= code %> : 顯示替換過HTML特殊字符的內(nèi)容；
<%- code %> : 顯示原始的HTML內(nèi)容。

可以利用它們實現(xiàn)頁面模板系統(tǒng)能實現(xiàn)的任何內(nèi)容。

Getting Started with EJS

Express網(wǎng)站的架構(gòu)--一個典型的MVC(Model-View-Controller)架構(gòu)

MVC架構(gòu)中模板引擎包含在服務(wù)器端，控制器獲取用戶請求之后，從模型獲取數(shù)據(jù)，調(diào)用模板引擎，模板引擎以數(shù)據(jù)和頁面模板為輸入，生成HTML頁面，然后返回給控制器，由控制器交給客戶端。

模板引擎在MVC架構(gòu)中的位置

3.建立微博網(wǎng)站

《node.js開發(fā)指南》代碼中需要注意的幾點

3.1路由規(guī)劃

進行功能設(shè)計，然后劃分路由

/ ：首頁
/users/:username ：用戶首頁
/post : 發(fā)表信息
/reg：用戶注冊
/login：用戶登錄
/logout：用戶登出

以上頁面還需要更加用戶狀態(tài)細分。

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界面設(shè)計 -- 使用Bootstrap

Bootstrap中文網(wǎng)

解壓之后將相關(guān)文件放到 public/下相關(guān)文件夾中；同時下載一份最新的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>&copy;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 的微博系統(tǒng)。</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) 是一個開源的中文繁簡轉(zhuǎn)換工具，<br>
      致力于制作高質(zhì)量的基于統(tǒng)計預(yù)料的繁簡轉(zhuǎn)換詞庫。還提供<br>
      函數(shù)庫(libopencc)、命令行繁簡轉(zhuǎn)換工具、人工校對工具、詞典生成<br>
      程序、在線轉(zhuǎn)換服務(wù)及圖形用戶界面。 </p>
  </div>
  <div class="span4">
    <h3>黃蓉 說</h3>
    <p>
    EJS是一個JavaScript模板庫，用來從JSON數(shù)據(jù)中生成HTML字符串。<br>
    EJS的優(yōu)點是將    會帶給你明確、維護性良好的HTML代碼結(jié)構(gòu)。 </p>
  </div>
</div>

安裝 express-partials 模塊以支持layout模板，運行效果：

使用Nodejs創(chuàng)建基本的網(wǎng)站 Microblog--《Node.js開發(fā)指南》 1

問題及解決方案

$ ./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

向AI問一下細節(jié)

使用Nodejs創(chuàng)建基本的網(wǎng)站 Microblog--《Node.js開發(fā)指南》 1

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽