糖尿病康复,内容丰富有趣,生活中的好帮手!
糖尿病康复 > 初步尝试Express&jade快速建站

初步尝试Express&jade快速建站

时间:2018-08-24 03:09:03

相关推荐

初步尝试Express&jade快速建站

后端开发|php教程

初步尝试Express&jade快速建站

后端开发-php教程

最近一直在看Web开发相关的书籍,一周时间读完了《Node开发指南》一书,由于之前了解过一些Node的相关知识,于是前面基础知识学得比较快,到开发实践这一章的时候,却发现好多内容不能跟着练习了。因为近几年Node的发展过于快速,其Web开发框架 Express 必然也更新得比较频繁,并且版本与版本之间差异较大。所以,书中必然有好多代码在现在来看肯定运行不了,但是大体的框架还是在那里,想动手实践还是得对照着官方文档进行。

照片浏览源码,ubuntu 安卓sdk,http权威指南 爬虫,PHP防止修改同一条数据,曹操博客seolzw

1. 生成Express项目

根据 官方文档入门 的介绍,根据Express建站的步骤大致写一下:

微擎微信大屏源码,ubuntu命令模式密码,架构师必读的tomcat,rstudio爬虫代理,php上传指定文件的脚本,正规seo技术lzw

npm install express 安装express npm install express-generator -g 安装express应用生成器 express myapp 生成express项目目录以及基本启动代码 DEBUG=myapp npm start 启动应用(Mac or Linux); set DEBUG=myapp & npm start 启动应用(Windows) 浏览器访问 http://localhost:3000

免费微信公众平台源码下载,vscode清除数据,ubuntu中国销售,tomcat怎么定时重启,群聊爬虫,php 转码 iconv,上海seo优化收费标准,个人站长影视类网站,书详情页模板制作教程视频教程lzw

通过上面几步很快就完成了一个项目的部署,那么接下来就是要往里填写内容了,用框架开发就是这么快,但是会忽略掉很多重要的细节。

打开 myapp 文件夹,会看到该项目的目录结构如下:

.├── app.js├── bin│ └── www├── package.json├── public│ ├── images│ ├── javascripts│ └── stylesheets│ └── style.css├── routes│ ├── index.js│ └── users.js└── views ├── error.jade ├── index.jade └── layout.jade

了解过一些Node的相关知识就知道,Node是通过动态网页的方式来实现网站的,就如同其他语言Java、PHP一样,要实现动态页面就要在HTML模板中插入程序代码,于是就有了JSP、PHP以及ASP等技术。通过JavaScript实现的模板引擎有很多, Jade 就是其中之一,为什么选择它,因为Express默认就是它,反正也是新接触,那就它咯。

2. Jade 模板引擎

由于新学,也没有什么经验可谈,基本用法参考官网就可以了。这类语言基本上看一遍就百分之八九十了,接下来就是熟练使用它。

Jade Template Syntax Documentation by Example Jade —— 源于 Node.js 的 HTML 模板引擎 – 新闻 – SegmentFault

3. 回头看看 app.js

// view engine setupapp.set(views, path.join(__dirname, views));app.set(view engine, jade);

这里就是设置 Jade 模板引擎以及视图目录的地方。

4. 编写路由规则

编写路由规则,打开 routes/index.js 文件,添加4条路由规则,代表4个不同的页面。

/* GET home page. */router.get(/, function(req, res, next) { res.render(index, { title: Home Page});});/* GET detail page. */router.get(/detail/:id, function(req, res, next) { res.render(detail, { title: Detail Page});});/* GET admin page. */router.get(/admin, function(req, res, next) { res.render(admin, { title: Admin Page});});/* GET list page. */router.get(/list, function(req, res, next) { res.render(list, { title: List Page});});

5. 瞧瞧 jade 模板视图文件

打开 views/layout.jade

doctype htmlhtml head title= title link(rel=stylesheet, href=/stylesheets/style.css) body block content

看了一遍 jade 语法的基本就能看出这是一个基本页面,然后再打开 views/index.jade 。

extends layoutblock content h1= title p Welcome to #{title}

路由规则中, title 变量就用与此处,如此即为动态页面。 npm start 启动应用,访问 http://localhost:3000 得到页面如下图。

6. 依次创建 detail 、 list 、 admin 页面

根据路由规则所规定的访问路径,依次访问,会得到不同的动态页面。

如果觉得《初步尝试Express&jade快速建站》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。