express-generator 生成器 & 通过ejs渲染后端数据

express-generator生成器

安装

$ cnpm i express-generator -g 
express -e 项目名称

项目目录结构

1. bin

• www 创建服务器,并且监听服务器

2. public 静态资源目录

• img
• css

3. routes 路由文件
4. views 模板文件

• ejs
• pug

5. app.js 整个项目的入口文件

• 中间件绑定的
  • 中间件类型【 三种 】
    • 应用级中间件( 只是一个单一功能，如：绑定静态资源目录 )
    • 路由中间件( 暴露一个路由 )
    • 错误处理中间件( 处理项目的错误 )

6. packag.json

• 记录项目依赖包配置信息和项目的命令脚本

app.js 内部细节的解释

引入路由模块

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var shopcarRouter = require('./routes/shopcar')

指定模板目录文件夹

app.set('views', path.join(__dirname, 'views'));

绑定应用级中间件

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false })); // 省略文件后缀名
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));  //指定静态资源目录

绑定路由中间件

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/shopcar', shopcarRouter)

错误处理中间件

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
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');
});

暴露模块

module.exports = app;

自定义接口文件模块

1. 引入express模块
2. 引入路由对象
3. 暴露模块

router.get的第一个参数是路由 与静态服务器 app.use()的第一个参数是叠加的

• res.render( 模板路径,options )
• 模板路径一开始是res.render( ‘…/views/shopcar.ejs’ )
• 通过app.js中的app.set(‘views’, path.join(__dirname, ‘views’)); // 指定模板目录文件夹
• 模板路径变成res.render(‘shopcar.ejs’)
• 通过app.js中的app.use(express.urlencoded({ extended: false })); // 省略文件后缀名
• 模板路径变成res.render(‘shopcar’)

通过ejs渲染后端数据

• 以下代码是用来做一个暴露接口的路由 后端获取一个接口地址 将地址中的数据读取 然后通过ejs渲染后端数据 通过入口文件的引入 ejs中直接操作渲染取得的数据

const express = require( 'express' ) 

const router = express.Router()

const request = require( 'request' )  //用于获取接口

router.get( '', ( req,res,next ) => {
    
    request( 'https://m.lagou.com/listmore.json',( error,response,body ) => {
        
        const result = JSON.parse( body ).content.data.page.result //获取数据
        
        res.render( 'shopcar',{
            //数据
            data: {
                result
            }
        })
        
    })
})

module.exports = router