node-express

原因：

感觉对后端知识很模糊

工具

node express框架
express generator

yarn add express-generator --save-dev

官方推荐全局安装 我这里使用的是局部

$ npx express --view=ejs myapp

选用模板引擎ejs
···

cd myapp
yarn

我用的yarn 来安装依赖

 set DEBUG=myapp:* & npm start

官网推荐命令
试了一下 yarn start 也可以

入口文件 app.js

设置了好多东西 慢慢看吧
显示路由

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app=express() 调用框架
app.use('/', indexRouter);调用路由
app.use('/users', usersRouter);同上

设置路径和编译模板

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

路由文件 index.js

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

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

module.exports = router;

在这里处理请求，如果是发送的数据请求 调用res.send
如果是页面请求 调用res.render //view文件夹 里面对应的ejs模板

中间件

• 应用级中间件

var app = express()

app.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

没有挂在路径的中间件 app中的每个请求都会执行该中间件

app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method)
  next()
})

挂在路径的 所有请求/user/:id的都要通过该中间件

app.get('/user/:id', function (req, res, next) {
  res.send('USER')
})

最后处理的不用调用next()

app.use(express.static(path.join(__dirname, 'public')));，加载public 里面的资源

这个一开始设置静态资源的路径

配置

image.png

webpack

`1. src下创建配置文件

+ src/webpack-config.js

2. 写好入口和出口

let path =require('path');
// let webpack=require('webpack');
module.exports= {
    mode: 'production',
    entry:path.join(__dirname,'js/app/index.js'),
    output:{
        path:path.join(__dirname,'../public/javascripts'),
        filename:'index.js'
    }
}

3. 安装webpack

yarn add webpack --save-dev

4.package.json中添加脚本

"scripts": {
    "start": "node ./bin/www",
    "webpack": "webpack --config=src/webpack.config.js"
  },