大前端之路node第(2)天:Express Generator搭建node專案後臺
使用 Express Generator
Express Application Generator 能夠快速建立一個Express應用框架。
npm install express-generator -g
express myapp --view=pug
cd myapp
npm install
# Run the myapp on Windows
SET DEBUG=myapp:* & npm start
# Run myapp on Linux/Mac OS X
DEBUG=myapp:* npm start
去http://localhost:3000/ 看看剛才建立的Express應用長什麼樣。
新增nodemon
在開發的時候,每次修改檔案,都需要重啟 express 服務,比較麻煩。使用nodemon,修改檔案後可以自動重啟 express 服務。
npm install --save-dev nodemon
修改 package.json 的 scripts 內容:
"scripts": {
"start": "node ./bin/www",
"devstart": "nodemon ./bin/www"
}
之後,使用 SET DEBUG=myapp:* & npm run devstart
啟動 express 服務。這樣在開發過程中修改檔案的時候,express服務就會自動重啟,非常方便。
生成的文件目錄結構
/myapp app.js /bin www package.json /node_modules [about 4,500 subdirectories and files] /public /images /javascripts /stylesheets style.css /routes index.js users.js /views error.pug index.pug layout.pug
www file
/bin/www 是應用的主入口。應用的真正入口是app.js檔案,所以www檔案先把app.js檔案引進來,其餘的內容主要就是建立了一個node HTTP server。
app.js
這個可是主要檔案,得好好嘮嘮,在app.js裡面,主要做了這些事兒:
1.引入之前使用npm install
下載的包,並建立express物件:
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');
var app = express();
2.使用上面引入的包:
// 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());
app.use(express.static(path.join(__dirname, 'public')));
3.引入routes資料夾裡面的檔案,這些檔案主要處理URL路由。
var index = require('./routes/index');
var users = require('./routes/users');
4.關聯路由路徑與引入的檔案:
app.use('/', index);
app.use('/users', users);
5.設定模板,views 設定了模板的位置;view engine設定了要使用的模板引擎。
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
6.最後處理錯誤的http請求:
//設定跨域訪問
router.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// 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');
});
routes資料夾
以users.js為例,首先載入express,通過express獲取到router物件。使用router物件指定路由的方法和路徑。由於在app.js已經指定 /users
到本檔案,因此當瀏覽器請求/user時,會執行下面的回撥函式。
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
回撥函式有第三個引數next,主要用於中介軟體中,即將資料傳遞到下一個方法去處理。
接下來寫一下可能遇到的問題:
1、自定義埠:
2、package.json: script:{鍵值:可執行指令碼語句} 使用:npm run 鍵值 這裡藉助nodemon實現熱啟動
3、view資料夾可以放前端渲染模板,前後分離可忽略。
4、routes為渲染路由 下面是為其配置同意字首
接下來就是熟悉資料庫 這裡我選用的mongodb,你也可以其他sql,
伺服器搭建完成,接下來就是如何與資料庫打交道了,
那麼首先我們得先了解mongodb資料庫,下篇待續