原因：
感觉对后端知识很模糊
工具
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
- 写好入口和出口
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'
}
}
- 安装webpack
yarn add webpack --save-dev
4.package.json中添加脚本
"scripts": {
"start": "node ./bin/www",
"webpack": "webpack --config=src/webpack.config.js"
},
网友评论