搭建基于node Express框架运行环境,并使用html引擎

最新推荐文章于 2022-10-29 20:55:56 发布

xyphf_和派孔明

最新推荐文章于 2022-10-29 20:55:56 发布

阅读量469

点赞数 1

分类专栏： node 文章标签： node

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/84203596

版权

node 专栏收录该内容

25 篇文章

订阅专栏

安装express generator生成器
通过生成器自动创建项目
配置分析

第一步：安装

npm i -g express-generator@4.14.1

查询使用安装成功，一定要输入express --version，输入express -v是不行的

express --version

第二步：通过express server命令快速生成项目

express server

默认生产的项目目录如下:

bin 就是可执行文件; 后期我们通过node www 就可以启动这个服务

public 就是一些静态资源

routes 路由，这个路由就是我们浏览器访问的地址

views 视图，express 官方推荐使用jade语法

app.js 是入口文件

package.json 项目依赖

app.js文件释义

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');

/** 加载index路由模块 */
var index = require('./routes/index');
/** 加载user路由模块 */
var users = require('./routes/users');

var app = express();

// view engine setup
/** 设置访问的目录 设置views页面在哪放着 */
app.set('views', path.join(__dirname, 'views'));
/** 设置引擎是jade引擎 */
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
/** 安装第三方插件 */
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
/** 设置静态文件目录 path.join方法就是把两个变量连接要一块 __dirnam就是获取当前目录 */
app.use(express.static(path.join(__dirname, 'public')));
/** 表示当我们访问/的时候就去加载index的路由 */
app.use('/', index);
/** 当访问/user的时候,就去访问users的路由 */
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); // 如果next拿不到参数它就会用err这个参数,如果拿到的话它就不会用
});

// error handler
/** 对error的处理 */
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'); // 一旦报错以后就会渲染这个error的页面
});

module.exports = app;

cd server进入server目录

运行 node bin/www

打开 http://127.0.0.1:3000/

说明我们的页面已经访问到了，上面我们说了，如果我们访问的是/就会默认访问index

这时因为routes/index.js路由有个/

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

这时它会去render index页面,也就是views下的index.jade，这时不用再去设置views文件夹路径了，因为app.js里面已经设置过了

app.set('views',path.jpin(__dirname, 'views')); 所以在routes/index.js路由里面直接runder('index')就可以找到index.jade了,它传的变量是Express，所以index.jade里面拿到的是Express

extends layout

block content
  h1= title
  p Welcome to #{title}

————————————————————————————————————————————————————————

如果大家不想使用jade语法，也可以使用html

安装 ejs

npm i ejs --save

在app.js中引入ejs

var ejs = require('ejs');

并设置

app.engine('.html',ejs.__express)

并且将app.js中的app.set('view engine', 'jade');模板引擎改为app.set('view engine', 'html');模板引擎

在views下建一个index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
    <h2>
        hello,Express is very Good!
    </h2>
</body>
</html>

运行 node server/bin/www

访问 http://127.0.0.1:3000/

————————————————————————————————————————————————————————