nodejs express 路由与view创建多级目录
生活随笔
收集整理的這篇文章主要介紹了
nodejs express 路由与view创建多级目录
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、首先使用np 安裝express 庫(kù)
#創(chuàng)建項(xiàng)目目錄 mkdir myapp #進(jìn)入項(xiàng)目目錄 cd myapp #在該目錄創(chuàng)建,并初始化 package.json 文件 npm init #在當(dāng)前目錄下安裝 express 庫(kù) npm install express --save二、使用express 的應(yīng)用程序生成器
#全局安裝應(yīng)用程序生成器 npm install -g express-generator #展示express 應(yīng)用生成器的選項(xiàng) express -h #使用express 創(chuàng)建一個(gè)使用ejs為模板的項(xiàng)目 express -e ejsProject創(chuàng)建后項(xiàng)目目錄如下:
項(xiàng)目創(chuàng)建好之后,需要安裝依賴
cd ejsTest npm install三、啟動(dòng)express 項(xiàng)目路
#Mac下或linux環(huán)境下啟動(dòng) DEBUG=myapp:* npm start#windows下啟動(dòng) set DEBUG=myapp:* & npm start 或者使用一下方式 set DEBUG=myapp:* npm start訪問 localhost:3000 ,即可訪問:
四、為view 和視圖創(chuàng)建字母結(jié)構(gòu)
在route目錄下創(chuàng)建 login目錄,并創(chuàng)建login.js,添加以下代碼:
var express = require('express'); var router = express.Router();/* GET users listing. */ router.get('/', function(req, res, next) {res.send('this is login page'); });router.get('/login', function(req, res, next) { //前面沒有 "/"符號(hào)res.render('login/login', { title: 'Express' }); });module.exports = router在views目錄下創(chuàng)建文件夾login,并在該目錄下創(chuàng)建login.ejs文件,添加一下代碼:
<!DOCTYPE html> <html><head><title>login</title><link rel='stylesheet' href='/stylesheets/style.css' /></head><body><h1>login page</h1><p>Welcome to login page</p></body> </html>在app.js中注冊(cè)新的路由,添加一下代碼:
var loginRouter = require('./routes/login/login');
app.use('/login/login', loginRouter);
添加后如下:
var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan');var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); //以下是新添加的代碼++++++++++++++++++++++++ var loginRouter = require('./routes/login/login');var app = express();// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs');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('/login/login', loginRouter);// 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 developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error'); });module.exports = app;啟動(dòng)應(yīng)用訪問 :http://localhost:3000/login/login? ,得到如下:
訪問:http://localhost:3000/login/login/login? ,得到如下:
到此 express 的多級(jí)路由目錄完成
總結(jié)
以上是生活随笔為你收集整理的nodejs express 路由与view创建多级目录的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用Lua编写whireshark插件
- 下一篇: wxPython各个布局的简单案例