博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nodejs之express4x
阅读量:5958 次
发布时间:2019-06-19

本文共 4567 字,大约阅读时间需要 15 分钟。

学习node好榜样!前阵子看了php,那个模块化编译真的好棒。然而php学习起来不是一般的记不住,毕竟和js还是有不同的。于是转移到了node。看到熟悉的js脚本,心里踏实多了。

话不多讲,php我也是要驾驭的,只是要排到后面去了。今天先来个基于node的框架之express4的模板实例

官网api:http://www.expressjs.com.cn/4x/api.html

1.首先,全局安装。

 npm install -g express-generator@4

2.检测安装结果

express --version 

3.创建项目,这里我选择d盘node文件夹,安装框架模板。

express -e nodeDemo

4.进入项目安装依赖

cd nodeDemo && npm install

5.运行项目,如果不知道运行命令是啥,打开项目根目录下‘package.json’文件,查看scripts对象里默认第一个的属性名,这个模板里叫start。

npm start 

6.运行之后,打开项目根目录下的bin文件夹里的www.js,查看这一句代码:‘var port = normalizePort(process.env.PORT || '3000');’3000就是端口号。基于node服务器本机ip原则。在浏览器输入。

localhost:3000 或者 127.0.0.1:3000

7.项目结构

bin, 存放启动项目的脚本文件

node_modules, 存放所有的项目依赖库。
public,静态文件(css,js,img)
routes,路由文件(MVC中的C,controller)
views,页面文件(Ejs模板)
package.json,项目依赖配置及开发者信息
app.js,应用核心配置文件

8.app.js核心文件说明

// 加载依赖库,原来这个类库都封装在connect中,现在需地注单独加载var express = require('express');var path = require('path');var favicon = require('serve-favicon');var logger = require('morgan');var cookieParser = require('cookie-parser');var bodyParser = require('body-parser');// 加载路由控制var index = require('./routes/index');var users = require('./routes/users');// 创建项目实例var app = express();// // 定义EJS模板引擎和模板文件位置,也可以使用jade或其他模型引擎比如htmlapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');//如果选用html模版就把下面的注释并打开把上面这句注释即可。/* app.engine('.html', ejs.__express); app.set('view engine', 'html');*/// uncomment after placing your favicon in /public// 定义icon图标//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));// 定义日志和输出级别app.use(logger('dev'));// 定义数据解析器app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));// 定义cookie解析器app.use(cookieParser());// 定义静态文件目录app.use(express.static(path.join(__dirname, 'public')));// 匹配路径和路由app.use('/', index);app.use('/users', users);// catch 404 and forward to error handler//404错误app.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});// error handler//500错误app.use(function(err, req, res, next) {  // set locals, only providing error in development  res.locals.message = err.message;  res.locals.error = req.app.get('env') === 'development' ? err : {};  // render the error page  res.status(err.status || 500);  res.render('error');});// 输出模型appmodule.exports = app;

  

9.查看./bin/www文件。

#!/usr/bin/env node/** * 依赖加载 */var app = require('../app');var debug = require('debug')('nodedemo1:server');var http = require('http');/** * 定义启动端口. */var port = normalizePort(process.env.PORT || '3000');app.set('port', port);/** * 创建HTTP服务器实例 */var server = http.createServer(app);/** * 启动网络服务监听端口 */server.listen(port);server.on('error', onError);server.on('listening', onListening);/** * 端口标准化函数 */function normalizePort(val) {  var port = parseInt(val, 10);  if (isNaN(port)) {    // named pipe    return val;  }  if (port >= 0) {    // port number    return port;  }  return false;}/** * HTTP异常事件处理函数 */function onError(error) {  if (error.syscall !== 'listen') {    throw error;  }  var bind = typeof port === 'string'    ? 'Pipe ' + port    : 'Port ' + port;  // handle specific listen errors with friendly messages  switch (error.code) {    case 'EACCES':      console.error(bind + ' requires elevated privileges');      process.exit(1);      break;    case 'EADDRINUSE':      console.error(bind + ' is already in use');      process.exit(1);      break;    default:      throw error;  }}/** * 事件绑定函数 */function onListening() {  var addr = server.address();  var bind = typeof addr === 'string'    ? 'pipe ' + addr    : 'port ' + addr.port;  debug('Listening on ' + bind);}

  

10.编辑views/index.ejs文件

这里就是前台展示的页面了。可以使用我们熟悉框架啊之类的。文件类型是ejs的,如果想用熟悉的html的,需要在app.js里修改一下就好,我已经在上面代码中写清楚了注释。

11.重点来了,我梦寐以求的模块化网站:把index.ejs页面切分成3个部分:header.ejs, index.ejs, footer.ejs,用于网站页面的模块化。

编辑header.ejs。注意结构!

      <%= title %>    

  

编辑footer.ejs。

      

  

编辑index.ejs。

<% include header.ejs %>

<%= title %>

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<% include footer.ejs %>

  重新启动项目,刷新页面就会看到结果了。

这里需要注意,如果你的模块组件放在了其他文件夹下 那么引入的命令里是可以加路径的,如果你换成了html模板的话,记得把引入命令也修改了。比如:<% include ./psge/header.html %>

至于路由啊还有更高层次的就到官网上看api吧http://www.expressjs.com.cn/4x/api.html

入门到此结束。

 

 

<% include header.ejs %>

<%= title %>

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<% include footer.ejs %>

转载于:https://www.cnblogs.com/webSong/p/7425900.html

你可能感兴趣的文章
css3 图片 悬停效果
查看>>
Bitmap Style Designer非官方说明
查看>>
Winform开发框架的重要特性总结
查看>>
jquery script
查看>>
hdu1711
查看>>
使用sun.misc.BASE64Decoder出错解决方案
查看>>
转 通过phpize为php在不重新编译php情况下安装模块openssl
查看>>
实现 Sunday 算法
查看>>
关于mac mini组装普液晶显示器
查看>>
c# winform项目用到的部分知识点总结
查看>>
stdafx
查看>>
cuda编程知识普及
查看>>
JS声明语句提升与作用域
查看>>
非抢占式RCU实现(二),解释:为什么 RCU_NEXT_SIZE 宏值是4?
查看>>
在虚拟机的linux中利用VMware Tools实现与windows共享文件
查看>>
Windows下配置Java环境变量
查看>>
leetcode -- Candy
查看>>
几种减小javascript对性能影响的方法
查看>>
PHP常用库函数介绍+常见疑难问题解答
查看>>
ios 自定义UITableView中分组的标题sectionview
查看>>