By express generator [scaffolding]

By express generator [scaffolding]

1. Role: can help to quickly build a project express

2. scaffolding installation

• Global installation [available] npm cnpm
  • $ cnpm i express-generator -g
• npx installation
  • npx is a management tool under npm, it allows us not to use the global install one package
  • Npx advantage is that you can help us to reduce memory usage
  • But npx requirements npm versions above 5.2
  • npx is automatically carried npm

3. The use of scaffolding

• Global installed using
  • $ Express -e Project Name (-e: - ejs)
• Use npx installed
  • $ Npx express -e project name

4. Recognizes project directory structure

项目文件
    > bin
    > public
    > routes
    > views
      app.js
      package.json

- 1. First find package.json [dependencies recorded information on the project, npm script]

{
  "name": "01-web-server-ssr",
  "version": "0.0.0",
  "private": true, "scripts": { "start": "nodemon ./bin/www" }, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "ejs": "~2.6.1", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1" } } 

- 2. Find a Project Initiation Document bin / www

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

var server = http.createServer(app); 

• It is done through a http server, the default port is: 3000

• This document introduces a app file, this file is in the callback createServer placed outside, used in a modular fashion, we call this file: 'entry file'

- 3. See: app.js

• express and middleware is configured by the routing
  • Route: You can build a complete page, or the connection interface
  • Middleware: Middleware is a function, a function for a particular feature
    • There are three types of middleware

- 1.应用级中间件
app.use(logger('dev')); // 日志文件记录 app.use(express.json()); // json数据格式化 app.use(express.urlencoded({ extended: false })); // 引入文件后缀名省略 app.use(cookieParser()); // cookie处理 app.use(express.static(path.join(__dirname, 'public'))); // 指定项目静态资源文件夹为public - 2.路由中间件 // http://localhost:3000/users app.use('/', indexRouter); app.use('/users', usersRouter); app.use('/',homeRouter) - 3.错误处理中间件 // 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'); }); 

• Middleware Parameters
  • req: full name: request indicates a request
  • res: full name: response indicates the response
  • next: indicates the connection between the request and the response, corresponding to the role of bridge
  • If you disconnect the next, then the request and response will be interrupted next (false)
• To call middleware, must be called by the app use method

- 4. Route Middleware

• Routing middleware people in a modular form to use
• Look: routes / xx.js
  • There are two paths, two paths are spliced ​​together
    • Example: / home / banner / home / banner two routes
  • Why res.render ( 'index')
    • Configuration template path
    • Configuring the suffix is ​​omitted

5. See: view / xxx.ejs

• ejs grammar
• ejs file data can be used directly in the template syntax

6. ejs grammar learning

• Note: ejs Syntax Notation is not a line feed
• Unescaped output <% -%> type data may be parsed xml
• Escape output <% =%> Common types of data may be parsed
• Flow control <%>
  • if conditional statement
  • loop statement