专栏首页JackieZhengNodejs学习笔记(三)——一张图看懂Nodejs建站

Nodejs学习笔记(三)——一张图看懂Nodejs建站

前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广。

通俗解释上面的胡言乱语:还没学会爬,就学起走了?!

继上篇《Nodejs学习笔记(二)——Eclipse中运行调试Nodejs》之后,代码编写环境就从Sublime转战到Eclipse下,感觉顺手多了。于是就跟着Scott老师学起了Nodejs建站的课程(推荐大家点进去看看),踏上了未爬先走的路子。

作为一个白里透白的小白来说,今天主要记录下如何用Nodejs搭建一个小小的网站,以及自己对于这种Nodejs建站的运行逻辑的理解,还有在建站过程中需要安装一些模块等遇到的问题,也是借此机会梳理下思路。

  1. 创建项目

1.1 鉴于前两篇的努力,现在已经可以在Eclipse中创建一个Node Project了。所以首先要创建一个Node工程,创建好了如下所示,基本是空空如也。

1.2 随后要做的就是将项目包装成一个express模样的project并且安装依赖的模块

  进入到项目的上级目录,执行express imooc_1命令:

  再进入到项目目录下,执行npm install命令

1.3 此时再去刷新Eclipse中项目imooc_1,就可以看到新生成的文件和新的项目结构

其中app.js是入口文件,views目录下放的是视图文件routes负责路由public放的是一些css等文件node_modules下面是已安装和要安装模块的存放位置package.json是项目模块依赖文件

2.代码编写

为了不把整个项目讲的云里雾里的,这里先上文件(注:这里的代码主要参考了Scott老师以及一位兄弟的git上的代码,在此谢过^_^)

  项目的各文件目录结构如下

app.js

var express = require("express")//这里主要是引用所必须要的模块,当然,这些模块是需要使用"npm install 模块名"安装的
var bodyParser = require('body-parser')
var port = process.env.PORT || 3000
var app = express()

app.set('views', './views/pages')//定义了一些路径和所用到的引擎
app.set('view engine', 'jade')
app.use(bodyParser.urlencoded({extended: true}))
//app.use(require('body-parser').urlencoded({extended: true}))
// app.use(express.static(path.join(__dirname,'bower_components')))
app.use(express.static(__dirname + '/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.listen(port);

console.log('imooc started on port ' + port);

//index page    这里以及下面皆是路由以及赋值,这里的字段如title, poster等都会在相应的jade如index.jade中用到,实际上是将这里的值传入相应的jade以渲染页面
app.get('/', function (req, res) {
    res.render('index', {
        title: 'imooc 首页',
        movies: [{
            title: "复仇者联盟2",
            _id: 1,
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
        }, {
            title: "复仇者联盟2",
            _id: 2,
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
        }, {
            title: "复仇者联盟2",
            _id: 3,
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
        }, {
            title: "复仇者联盟2",
            _id: 4,
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
        }, {
            title: "复仇者联盟2",
            _id: 5,
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg'
        }]
    })
})

//detail page
app.get('/movie/:id', function (req, res) {
    res.render('detail', {
        title: 'imooc 详情',
        movie: {
            doctor: '乔斯·韦登',
            country: '美国',
            title: '复仇者联盟2',
            year: '2015',
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg',
            language: '英语',
            flash: 'http://v.youku.com/v_show/id_XODc4NDY0MjA4.html',
            summary: '影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时,事情出了差错。于是,在地球面临生死存亡的紧急关头时,强大的超级英雄们挺身而出承担起拯救世界的重任,他们将阻止可怕的人工智能机器人“奥创”制定恐怖计划。'
        }
    })
})
//admin page
app.get('/admin/movie', function (req, res) {
    res.render('admin', {
        title: 'imooc 后台录入页',
        movie: {
            doctor: '',
            country: '',
            title: '',
            year: '',
            poster: '',
            language: '',
            flash: '',
            summary: ''
        }
    })
})
//list page
app.get('/admin/list', function (req, res) {
    res.render('list', {
        title: 'imooc 列表页',
        movies: [{
            doctor: '乔斯·韦登',
            country: '美国',
            title: '复仇者联盟2',
            year: '2015',
            poster: 'http://img31.mtime.cn/mg/2015/03/27/120537.13212993_270X405X4.jpg',
            language: '英语',
            flash: 'http://v.youku.com/v_show/id_XODc4NDY0MjA4.html',
            summary: '影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时,事情出了差错。于是,在地球面临生死存亡的紧急关头时,强大的超级英雄们挺身而出承担起拯救世界的重任,他们将阻止可怕的人工智能机器人“奥创”制定恐怖计划。'
        }]
    })
})

  layout.jade

doctype
html
	head   //这是页面的head,其中还有要用到的一些head文件如bootstrap以及jquery等
		meta(charset="utf-8")
		title #{title}
		include ./includes/head
	body   //这是页面的body,其中有header部分以及主体的body内容,需要到相应的jade文件中访问
		include ./includes/header
		block content

   index.jade

extend ../layout

block content
	.container
		.row
			each item in movies
				.col-md-2
					.thumbnail
						a(href="/movie/#{item._id}")
							img(src="#{item.poster}",alt="#{item.title}")
					.caption
						h3 #{item.title}
						p: a.btn.btn-primary(href="/movie/#{item._id}",role="button") 观看预告片

  admin.jade

extend ../layout

block content
	.container
		.row
			form.form-horizontal(method="post",action="/admin/movie/new")
				.form-group
					label.col-sm-2.control-label(for="inputTitle") 电影名字
					.col-sm-10
						input#inputTitle.col-sm-10.form-control(type="text",name="movie[title]")
				.form-group
					label.col-sm-2.control-label(for="inputDirector") 导演
					.col-sm-10
						input#inputDirector.col-sm-10.form-control(type="text",name="movie[director]")
				.form-group
					label.col-sm-2.control-label(for="inputCountry") 国家
					.col-sm-10
						input#inputCountry.col-sm-10.form-control(type="text",name="movie[country]")
				.form-group
					label.col-sm-2.control-label(for="inputLanguage") 语言
					.col-sm-10
						input#inputLanguage.col-sm-10.form-control(type="text",name="movie[language]")
				.form-group
					label.col-sm-2.control-label(for="inputYear") 上映年份
					.col-sm-10
						input#inputYear.col-sm-10.form-control(type="text",name="movie[year]")
				.form-group
					label.col-sm-2.control-label(for="inputSummary") 简介
					.col-sm-10
						input#inputSummary.col-sm-10.form-control(type="text",name="movie[summary]")

  detail.jade

extend ../layout

block content
	.container
		.row
			.col-md-7
				//-embed(src="#{movie.flash}",allowFullScreen="true",quality="high",width="720",height="600" align="middle",type="application/x-shockwave-flash")
				video(src="#{movie.flash}",autoplay="true" width="720",height="600" )
			.col-md-5
				dl.dl-horizontal
					dt 电影名字
					dd=movie.title
					dt 导演
					dd=movie.doctor
					dt 国家
					dd=movie.country
					dt 语言
					dd=movie.language
					dt 上映年份
					dd=movie.year
					dt 简介
					dd=movie.summary

 list.jade

extend ../layout

block content
	.container
		.row
		table.table.table-hover.table-bordered
			thead
				tr
					th 电影名字
					th 导演
					th 国家
					th 上映时间
					//-th 录入时间
					th 查看
					th 更新
					th 删除
			tbody
			each item in movies
				tr(class="item-id-#{item._id}")
					td #{item.title}
					td #{item.doctor}
					td #{item.country}
					td #{item.year}
					//-td #{moment(item.meta.createdAt).format('MM/DD/YYYY')}
					td: a(target="_blank",href="../movie/#{item._id}") 查看
					td: a(target="_blank",href="../admin/update/#{item._id}") 修改
					td 
						button.btn.btn-danger.del(type="button",data-id="#{item._id")删除

 head.jade

link(href="/bower_components/bootstrap/dist/css/bootstrap.min.css",rel="stylesheet")
script(src="/bower_components/jquery/dist/jquery.min.js")
script(src="/bower_components/bootstrap/dist/js/bootstrap.min.js")

  header.jade

.container
	.row
		.page-header
			h1= title
			small 重度科幻迷

  虽然文件不少,但是捋一捋,逻辑还是比较清楚的,下面以在浏览器中输入http://localhost:3000/从而访问index.html为例,通过一张图道出Nodejs建站以及页面访问的内部机制

  其他页面的访问,如list、detail原理与此类似,这里不在赘述。

看明白的点个赞,没看明白的请留言,哇~~哈~哈~哈~~

3. 遇到的坑

3.1 bootstrap安装

  在安装bootstrap模块时,反反复复的不顺利。网上有说要设置git的环境变量的,也有说要在git bash里面敲命令的,但是这两种方法都没有解决我的问题。

  最后还是升级了下bower,然后安装bootstrap,成功!

3.2 还有一个坑就是jade语法中的缩进,不正确的缩进导致应用无法启动,当然主要自己对jade完全不熟悉,所以吃了很多亏。

 4. 效果展示

  最后附上建成网站之后的各个页面:

                                               首页

                                              后台录入页

列表页

详情页

以上记录了一个用Nodejs建立一个简单网站应用的过程,已经发现坑并如何填坑的励志故事。

如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 探秘Tomcat——一个简易的Servlet容器

    即便再简陋的服务器也是服务器,今天就来循着书本的第二章来看看如何实现一个servlet容器。 背景知识   既然说到servlet容器这个名词,我们首先要了解它...

    JackieZheng
  • 探秘Tomcat——启动篇

    tomcat作为一款web服务器本身很复杂,代码量也很大,但是模块化很强,最核心的模块还是连接器Connector和容器Container。具体请看下图: ? ...

    JackieZheng
  • 漫谈可视化Prefuse(五)---一款属于我自己的可视化工具

      伴随着前期的基础积累,翻过API,读过一些Demo,总觉得自己已经摸透了Prefuse,小打小闹似乎已经无法满足内心膨胀的自己。还记得儿时看的《武状元苏乞儿...

    JackieZheng
  • PageAdmin Cms网站管理系统如何修改后台目录

    这几年用过很多cms,dedecms,帝国cms等等,大多数改后台目录一般都是通过直接进入文件目录修改,或者通过ftp修改目录名,最近因为dedecms安全漏洞...

    用户4831957
  • JAVA基础知识之JAVA的引用类型

              在Java中,除了基本数据类型之外,其它类型都是引用数据类型,比如String类型和自己定义的class类、数组、接口都是引用类型。

    IT大飞说
  • 14(01)正则表达式,Pattern,Mactcher,Math,BigInteger,BigDeximal,System等

    学正则表达式之前qq号问题: package cn.itcast_01; import java.util.Scanner; /* * 校验qq号码. * ...

    Java帮帮
  • WebService 之 身份验证

      在项目开发,我们经常会使用WebService,但在使用WebService时我们经常会考虑到了WebService是安全问题,很容易想到通过一组用户名与密...

    郑小超.
  • WCF系列教程之WCF客户端异常处理

    本文参考自:http://www.cnblogs.com/wangweimutou/p/4414393.html,纯属读书笔记,加深记忆 一、简介 当我们打开W...

    郑小超.
  • .net程序员使用Oracle新手上路指南

    虽然oracle,sqlserver都是关系型数据库,sql语句大部分也差不多,但是从sqlserver换到oracle还是有很多不适应的地方,本文旨在帮助广大...

    菩提树下的杨过
  • java编程思想第四版第三章要点习题

    用户7798898

扫码关注云+社区

领取腾讯云代金券