温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 1

发布时间:2020-06-24 08:53:52 来源:网络 阅读:1443 作者:xjhznick 栏目:web开发
  1. 使用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)架构

使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 1

    MVC架构中模板引擎包含在服务器端,控制器获取用户请求之后,从模型获取数据,调用模板引擎,模板引擎以数据和页面模板为输入,生成HTML页面,然后返回给控制器,由控制器交给客户端。

                              模板引擎在MVC架构中的位置

使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 1

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 href="http://www.baidu.com/" target="_blank">百度一下<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 的微博系统。</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模板,运行效果:

使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 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问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI