徐州手机网站,新闻热点事件2023最新,wordpress 创建页面,中国建设银行人事网站目录 开发环境 1、建立工程 2、目录结构 3、Express配置文件 4、Ejs模板 5、安装常用库及页面分离 6、路由 7、session 8、页面访问控制及提示JS是脚本语言#xff0c;脚本语言都需要一个解析器才能运行。对于写在HTML页面里 的JS#xff0c;浏览器充… 目录 开发环境 1、建立工程 2、目录结构 3、Express配置文件 4、Ejs模板 5、安装常用库及页面分离 6、路由 7、session 8、页面访问控制及提示 JS是脚本语言脚本语言都需要一个解析器才能运行。对于写在HTML页面里 的JS浏览器充当了解析器的角色。而对于需要独立运行的JSNodeJS就是一个解析器。每一种解析器都是一个运行环境不但允许JS定义各种数据结 构进行各种计算还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM浏览器就提供了 document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器NodeJS就相应提供了fs、http等内 置对象。Express作为NodeJS的Web应用框架可以帮助我们快速开发Web网站。 开发环境 NodeJSv0.10.30npm1.4.21OSWin7旗舰版 32bitExpress4.2.0MongoDB2.6.3 1 2 E:\project node -v v0.10.30 E:\project npm -v 1.4.21 E:\project express -V 4.2.0 1、建立工程 使用express命令建立工程并支持ejs 根据提示下载依赖包 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 E:\project cd .\nodejs-demo E:\project\nodejs-demo npm install npm WARN deprecated static-favicon1.0.2: use serve-favicon module static-favicon1.0.2 node_modules\static-favicon debug0.7.4 node_modules\debug ejs0.8.8 node_modules\ejs cookie-parser1.0.1 node_modules\cookie-parser ├── cookie-signature1.0.3 └── cookie0.1.0 morgan1.0.1 node_modules\morgan └── bytes0.3.0 body-parser1.0.2 node_modules\body-parser ├── qs0.6.6 ├── raw-body1.1.7 (bytes1.0.0, string_decoder0.10.25-1) └── type-is1.1.0 (mime1.2.11) express4.2.0 node_modules\express ├── parseurl1.0.1 ├── utils-merge1.0.0 ├── cookie0.1.2 ├── merge-descriptors0.0.2 ├── escape-html1.0.1 ├── range-parser1.0.0 ├── fresh0.2.2 ├── cookie-signature1.0.3 ├── debug0.8.1 ├── methods1.0.0 ├── buffer-crc320.2.1 ├── serve-static1.1.0 ├── path-to-regexp0.1.2 ├── qs0.6.6 ├── send0.3.0 (debug0.8.0, mime1.2.11) ├── accepts1.0.1 (negotiator0.4.7, mime1.2.11) └── type-is1.1.0 (mime1.2.11) E:\project\nodejs-demo 工程建立成功启动服务 1 E:\project\nodejs-demo npm start nodejs-demo0.0.1 start E:\project\nodejs-demo node ./bin/www 本地3000端口被打开在浏览器地址栏输入localhost:3000访问成功。 2、目录结构 bin——存放命令行程序。node_modules——存放所有的项目依赖库。public——存放静态文件包括css、js、img等。routes——存放路由文件。views——存放页面文件ejs模板。app.js——程序启动文件。package.json——项目依赖配置及开发者信息。 1 2 3 4 5 6 7 8 9 10 11 E:\project\nodejs-demo dir 目录: E:\project\nodejs-demo Mode LastWriteTime Length Name ---- ------------- ------ ---- d---- 2014/8/16 21:55 bin d---- 2014/8/16 22:03 node_modules d---- 2014/8/16 21:55 public d---- 2014/8/16 21:55 routes d---- 2014/8/16 21:55 views -a--- 2014/8/16 21:55 1375 app.js -a--- 2014/8/16 21:55 327 package.json 3、Express配置文件 打开app.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 var express require(express); var path require(path); var favicon require(static-favicon); var logger require(morgan); var cookieParser require(cookie-parser); var bodyParser require(body-parser); var routes require(./routes/index); var users require(./routes/users); var app express(); // view engine setup app.set(views, path.join(__dirname, views)); app.set(view engine, ejs); app.use(favicon()); app.use(logger(dev)); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, public))); app.use(/, routes); app.use(/users, users); /// 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 handlers // development error handler // will print stacktrace if (app.get(env) development) { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render(error, { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render(error, { message: err.message, error: {} }); }); module.exports app; 4、Ejs模板 修改app.js让ejs模板文件使用扩展名为html的文件 1 2 3 4 5 13 // view engine setup 14 app.set(views, path.join(__dirname, views)); 15 //app.set(view engine, ejs); 16 app.engine(html, require(ejs).renderFile); 17 app.set(view engine, html); 修改完成后重命名views/index.ejs为views/index.html。重启服务访问成功。 5、安装常用库及页面分离 添加bootstrap和jQuery E:\project\nodejs-demo npm install bootstrap
bootstrap3.2.0 node_modules\bootstrap
E:\project\nodejs-demo npm install jquery
jquery2.1.1 node_modules\jquery
E:\project\nodejs-demo 接下来把index.html分成三个部分 header.html——页面头部区域。index.html——页面内容区域。footer.html——页面底部区域。 header.html 1 2 3 4 5 6 7 8 9 !DOCTYPE html html langen head meta charsetutf-8 title% title %/title !-- Bootstrap -- link href/stylesheets/bootstrap.min.css relstylesheet mediascreen /head body screen_capture_injectedtrue index.html 1 2 3 4 1 % include header.html % 2 h1% title %/h1 3 pWelcome to % title %/p 4 % include footer.html % footer.html 1 2 3 4 5 6 script src/javascripts/jquery.min.js/script script src/javascripts/bootstrap.min.js/script /body /html 重启服务访问成功。 6、路由 登录设计 访问路径页面描述/index.html不需要登录可以直接访问。/homehome.html必须用户登录以后才可以访问。/loginlogin.html登录页面用户名密码输入正确自动跳转到home.html。/logout无退出登录后自动跳转到index.html。 打开app.js文件增加路由配置 1 2 3 4 5 26 app.use(/, routes); 27 app.use(/users, users); 28 app.use(/login, routes); 29 app.use(/logout, routes); 30 app.use(/home, routes); 打开routes/index.js文件添加对应方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 var express require(express); var router express.Router(); /* GET home page. */ router.get(/, function(req, res) { res.render(index, { title: Express }); }); router.route(/login) .get(function(req, res) { res.render(login, { title: 用户登录 }); }) .post(function(req, res) { var user{ username: admin, password: 123456 } if(req.body.username user.username req.body.password user.password){ res.redirect(/home); } res.redirect(/login); }); router.get(/logout, function(req, res) { res.redirect(/); }); router.get(/home, function(req, res) { var user{ username:admin, password:123456 } res.render(home, { title: Home, user: user }); }); module.exports router; 创建views/login.html和views/home.html两个文件 login.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 % include header.html % div classcontainer form classcol-sm-offset-4 col-sm-4 form-horizontal roleform methodpost fieldset legend用户登录/legend div classform-group label classcol-sm-3 control-label forusername用户名/label div classcol-sm-9 input typetext classform-control idusername nameusername placeholder用户名 required /div /div div classform-group label classcol-sm-3 control-label forpassword密码/label div classcol-sm-9 input typepassword classform-control idpassword namepassword placeholder密码 required /div /div div classform-group div classcol-sm-offset-3 col-sm-9 button typesubmit classbtn btn-primary登录/button /div /div /fieldset /form /div % include footer.html % home.html 1 2 3 4 1 % include header.html % 2 h1Welcome % user.username %, 欢迎登录/h1 3 a classbtn href/logout退出/a 4 % include footer.html % 修改index.html增加登录链接 1 2 3 4 1 % include header.html % 2 h1Welcome to % title %/h1 3 pa href/login登录/a/p 4 % include footer.html % 路由及页面已准备好重启服务访问成功。 7、session 安装中间件express-session 1 2 3 4 5 E:\project\nodejs-demo npm install express-session express-session1.7.5 node_modules\express-session ├── cookie0.1.2 ├── cookie-signature1.0.4 ├── on-headers1.0.0 ├── utils-merge1.0.0 ├── parseurl1.3.0 ├── buffer-crc320.2.3 ├── depd0.4.4 ├── debug1.0.4 (ms0.6.2) └── uid-safe1.0.1 (base64-url1.0.0, mz1.0.0) E:\project\nodejs-demo 安装中间件connect-mongodb 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 E:\project\nodejs-demo npm install connect-mongodb \ kerberos0.0.3 install E:\project\nodejs-demo\node_modules\connect-mongodb\nod e_modules\mongodb\node_modules\kerberos (node-gyp rebuild 2 builderror.log) || (exit 0) | E:\project\nodejs-demo\node_modules\connect-mongodb\node_modules\mongodb\node_mo dules\kerberosnode C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\ ..\..\node_modules\node-gyp\bin\node-gyp.js rebuild | bson0.2.11 install E:\project\nodejs-demo\node_modules\connect-mongodb\node_m odules\mongodb\node_modules\bson (node-gyp rebuild 2 builderror.log) || (exit 0) E:\project\nodejs-demo\node_modules\connect-mongodb\node_modules\mongodb\node_mo dules\bsonnode C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\. .\node_modules\node-gyp\bin\node-gyp.js rebuild connect-mongodb1.1.5 node_modules\connect-mongodb ├── connect1.9.2 (mime1.2.11, formidable1.0.15, qs1.2.2) └── mongodb1.4.8 (kerberos0.0.3, readable-stream1.0.27-1, bson0.2.11) E:\project\nodejs-demo 安装中间件mongodb 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 E:\project\nodejs-demo npm install mongodb - kerberos0.0.3 install E:\project\nodejs-demo\node_modules\mongodb\node_module s\kerberos (node-gyp rebuild 2 builderror.log) || (exit 0) - E:\project\nodejs-demo\node_modules\mongodb\node_modules\kerberosnode C:\Progr am Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\b in\node-gyp.js rebuild | bson0.2.11 install E:\project\nodejs-demo\node_modules\mongodb\node_modules\b son (node-gyp rebuild 2 builderror.log) || (exit 0) E:\project\nodejs-demo\node_modules\mongodb\node_modules\bsonnode C:\Program F iles\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\n ode-gyp.js rebuild mongodb1.4.8 node_modules\mongodb ├── kerberos0.0.3 ├── readable-stream1.0.27-1 (isarray0.0.1, string_decoder0.10.25-1, inheri ts2.0.1, core-util-is1.0.1) └── bson0.2.11 (nan1.2.0) E:\project\nodejs-demo 添加database/settings.js和database/msession.js这两个文件 settings.js 1 2 3 4 5 6 7 8 9 module.exports { COOKIE_SECRET: ywang1724.com, URL: mongodb://127.0.0.1:27017/nodedb, DB: nodedb, HOST: 127.0.0.1, PORT: 27017, USERNAME: admin, PASSWORD: 123456 }; msession.js 1 2 3 4 5 6 1 var Settings require(./settings); 2 var Db require(mongodb).Db; 3 var Server require(mongodb).Server; 4 var db new Db(Settings.DB, new Server(Settings.HOST, Settings.PORT, {auto_reconnect:true, native_parser: true}),{safe: false}); 5 6 module.exports db; 修改app.js文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 var express require(express); var path require(path); var favicon require(static-favicon); var logger require(morgan); var cookieParser require(cookie-parser); var bodyParser require(body-parser); //采用connect-mongodb中间件作为Session存储 var session require(express-session); var Settings require(./database/settings); var MongoStore require(connect-mongodb); var db require(./database/msession); var routes require(./routes/index); var users require(./routes/users); var app express(); // view engine setup app.set(views, path.join(__dirname, views)); //app.set(view engine, ejs); app.engine(html, require(ejs).renderFile); app.set(view engine, html); app.use(favicon()); app.use(logger(dev)); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); //session配置 app.use(session({ cookie: { maxAge: 600000 }, secret: Settings.COOKIE_SECRET, store: new MongoStore({ username: Settings.USERNAME, password: Settings.PASSWORD, url: Settings.URL, db: db}) })) app.use(function(req, res, next){ res.locals.user req.session.user; next(); }); app.use(express.static(path.join(__dirname, public))); ...... 修改index.js文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 var express require(express); var router express.Router(); /* GET home page. */ router.get(/, function(req, res) { res.render(index, { title: Express }); }); router.route(/login) .get(function(req, res) { res.render(login, { title: 用户登录 }); }) .post(function(req, res) { var user { username: admin, password: 123456 } if(req.body.username user.username req.body.password user.password){ req.session.user user; res.redirect(/home); } else { res.redirect(/login); } }); router.get(/logout, function(req, res) { req.session.user null; res.redirect(/); }); router.get(/home, function(req, res) { res.render(home, { title: Home }); }); module.exports router; 本地安装数据库MongoDB新建用户nodedb。重启服务访问成功。 8、页面访问控制及提示 访问控制设计 访问路径描述/任何人都可以访问不需要认证。/home拦截get请求调用authentication()进行认证不通过则自动跳转到登录页面。/login任何人都可以访问不需要认证。/logout任何人都可以访问不需要认证。 修改index.js文件 1 2 3 4 5 6 7 8 9 10 router.get(/home, function(req, res) { authentication(req, res); res.render(home, { title: Home }); }); function authentication(req, res) { if (!req.session.user) { return res.redirect(/login); } } 重启服务访问成功。 添加页面提示修改app.js文件增加res.locals.message 1 2 3 4 5 6 7 8 9 10 app.use(function(req, res, next) { res.locals.user req.session.user; var err req.session.error; delete req.session.error; res.locals.message ; if (err) { res.locals.message div classalert alert-warning err /div; } next(); }); 修改index.js文件增加req.session.error 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 var express require(express); var router express.Router(); /* GET home page. */ router.get(/, function(req, res) { res.render(index, { title: Express }); }); router.route(/login) .get(function(req, res) { if (req.session.user) { res.redirect(/home); } res.render(login, { title: 用户登录 }); }) .post(function(req, res) { var user { username: admin, password: 123456 } if (req.body.username user.username req.body.password user.password) { req.session.user user; res.redirect(/home); } else { req.session.error用户名或密码不正确; res.redirect(/login); } }); router.get(/logout, function(req, res) { req.session.user null; res.redirect(/); }); router.get(/home, function(req, res) { authentication(req, res); res.render(home, { title: Home }); }); function authentication(req, res) { if (!req.session.user) { req.session.error请先登录; return res.redirect(/login); } } module.exports router; 修改login.html增加%- message % 1 2 3 5 legend用户登录/legend 6 %- message % 7 div classform-group 重启服务访问成功。输入错误用户名密码 转载于:https://www.cnblogs.com/winyh/p/6681422.html
