在浏览器中的启动效果：
出现该效果的原因，由于代码中没有配置路由：
出现该效果的代码：
1 //导入express框架 2 let express=require('express'); 3 4 //初始化express 5 let app=express(); 6 7 //监听服务 器 8 app.listen(3000,function(){ 9 10 11 console.log("node 服务已经启动！！ 端口 3000"); 12 });
配置路由之后：
配置路由的代码：
1 //导入express框架 2 let express=require('express'); 3 4 //初始化express 5 let app=express(); 6 7 8 //完善博客项目首页的路由 9 10 app.get('/',function(req,res,next){ 11 //req request对象 保存客户端的请求信息 12 //res response对象 服务器端输入相应的信息 13 //next 执行下一个方法 14 15 16 res.send("我是blog项目首页"); 17 18 19 20 }) 21 22 //监听服务 器 23 app.listen(3000,function(){ 24 25 26 console.log("node 服务已经启动！！ 端口 3000"); 27 });
需要显示的是一个页面，因此需要使用模板引擎进行引入：
在命令行输入：npm install ejs 安装ejs模板
设置模板存放的目录
//设置模板存放的目录 //第一个参数：固定的 //第二个参数：模板存在的目录 app.set('views','./views')
定义使用的模板引擎
//定义使用的模板引擎 //第一个参数：模板引擎的名称，模板引擎的后缀 //第二个参数：模板引擎的方法 app.engine("html",ejs._express);
在app中注册模板引擎
//在app中注册模板引擎 //第一个参数：固定不变 //第二个参数：与定义的模板名称有关 app.set("view engine","html");
在views中新建文件夹
在hone文件夹中新建index.html
在app.js中进行加载页面：
最终加载的效果：
使用页面加载的代码：
//导入express框架 let express=require('express'); //初始化express let app=express(); //设置模板引擎相关信息 let ejs=require('ejs'); //设置模板存放的目录 //第一个参数：固定的 //第二个参数：模板存在的目录 app.set('views','./views') //定义使用的模板引擎 //第一个参数：模板引擎的名称，模板引擎的后缀 //第二个参数：模板引擎的方法 app.engine("html",ejs.__express); //在app中注册模板引擎 //第一个参数：固定不变 //第二个参数：与定义的模板名称有关 app.set("view engine","html"); //完善博客项目首页的路由 app.get('/',function(req,res,next){ //req request对象 保存客户端的请求信息 //res response对象 服务器端输入相应的信息 //next 执行下一个方法 //给页面输出一段文字 // res.send("我是blog项目首页"); //加载页面 res.render("home/index"); }); //监听服务 器 app.listen(3000,function(){ console.log("node 服务已经启动！！ 端口 3000"); });
//加载页面 res.render("home/index");
静态资源放入public中：
//设置静态资源的访问 app.use("/public",express.static(__dirname+"/public"));
最终页面显示，效果：
项目路由的创建
在routers文件夹中分别：
前台路由
在app.js中
//导入前台路由 let indexRouter=require("./routers/index"); //使用前台路由 //参数1：匹配路由规则 //参数2：请求路由规则 app.use('/',indexRouter);
在index.js中写入路由
最后效果：想进入那一个页面进入输入名称即可进入
1 //导入express 2 3 let express=require("express"); 4 5 //实例化路由类 6 7 let router=express.Router(); 8 9 //前台首页 10 11 router.get('/',function(req,res,next){ 12 13 res.send("Blog项目首页"); 14 15 16 }); 17 18 //前台分类页 19 router.get('/list',function(req,res,next){ 20 21 22 res.send("blog项目分类页"); 23 24 }); 25 26 27 //前台新闻详情页 28 router.get('/news',function(req,res,next){ 29 30 31 res.send("blog项目新闻详情页"); 32 33 }); 34 35 //前台登录页面 36 router.get('/login',function(req,res,next){ 37 38 39 res.send("blog项目登录页面"); 40 41 }); 42 43 //前台注册页面 44 45 router.get('/reg',function(req,res,next){ 46 47 48 res.send("blog项目注册页面"); 49 50 }); 51 52 53 54 module.exports=router;
后台路由
app.js
//导入后台路由 let adminRouter=require("./routers/admin"); app.use('/admin',adminRouter);
在admin.js中写入路由
1 //导入express 2 3 let express=require("express"); 4 5 6 //实例化 7 8 let router=express.Router(); 9 10 11 //管理员管理 12 13 router.get('/admin',function(req,res,next){ 14 15 res.send("管理员管理"); 16 }); 17 18 19 //会员管理 20 21 router.get('/user',function(req,res,next){ 22 23 res.send("会员管理"); 24 }); 25 26 27 //栏目管理 28 router.get('/column',function(req,res,next){ 29 30 res.send("栏目管理"); 31 }); 32 33 34 //轮播图管理 35 36 37 38 //新闻分类管理 39 40 //新闻管理 41 42 43 44 //评论管理 45 46 //系统管理 47 48 49 module.exports=router;
显示后台的效果：
在routers文件夹中新建一个admin文件夹用来管理后台路由：
在文件夹中新建不同管理的js:
在admin.js中将管理员管理部分改为导入管理员管理：
//管理员管理,导入管理员管理的路由 let adminRouter=require('./admin/admin'); router.use('/admin',adminRouter);
在新建的admin的文件夹中找到admin.js中进行书写管理员管理的路由：
1 //导入express 2 3 let express=require("express"); 4 5 //实例化 6 7 let router=new express.Router(); 8 9 10 //管理员管理的首页 11 router.get('/',function(req,res,next){ 12 13 res.send("管理员管理的首页"); 14 }); 15 16 router.get('/add',function(req,res,next){ 17 18 res.send("管理员添加"); 19 }); 20 router.get('/edit',function(req,res,next){ 21 22 res.send("管理员修改"); 23 }); 24 router.get('/insert',function(req,res,next){ 25 26 res.send("管理员管理的添加操作"); 27 }); 28 router.get('/save',function(req,res,next){ 29 30 res.send("管理员管理的修改操作"); 31 }); 32 router.get('/delete',function(req,res,next){ 33 34 res.send("管理员管理的删除操作"); 35 }); 36 37 38 39 40 41 module.exports=router;
在浏览器中输入地址http://localhost:3000/admin/admin/add：
在项目路由的创建中都是按照路由规则进行分类，方便进行维护。
项目后台页面的搭建
在浏览器中http://localhost:3000/admin
由于在后台中没有相关的路由，所以出现上述的效果，因此我们需要进行注入路由：
在routers->admin.js中进行后台路由的注入：
//后台首页路由 router.get('/',function(req,res,next){ //加载对应的后台页面 res.render("admin/index"); })
当我们再一次在浏览器中输入地址
会出现这样的错误：没有发现视图对应的文件
因此，需要在后台视图目录下：
将静态资源放入public->admin文件夹中：
当再一次在浏览器中输入地址：http://localhost:3000/admin
在效果图中没有看到样式，因此需要进行修改：
最终显示效果：
代码：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <meta name="renderer" content="webkit"> 8 <title>博客项目后台管理中心</title> 9 <link rel="stylesheet" href="./../public/admin/css/pintuer.css"> 10 <link rel="stylesheet" href="./../public/admin/css/admin.css"> 11 <script src="./../public/admin/js/jquery.js"></script> 12 </head> 13 <body style="background-color:#f2f9fd;"> 14 <div class="header bg-main"> 15 <div class="logo margin-big-left fadein-top"> 16 <h1><img src="./../public/admin/images/y.jpg" class="radius-circle rotate-hover" height="50" alt="" />后台管理中心</h1> 17 </div> 18 <div class="head-l"><a class="button button-little bg-green" href="" target="_blank"><span class="icon-home"></span> 前台首页</a> <a href="##" class="button button-little bg-blue"><span class="icon-wrench"></span> 清除缓存</a> <a class="button button-little bg-red" href="login.html"><span class="icon-power-off"></span> 退出登录</a> </div> 19 </div> 20 <div class="leftnav"> 21 <div class="leftnav-title"><strong><span class="icon-list"></span>菜单列表</strong></div> 22 <h2><span class="icon-user"></span>管理员管理</h2> 23 <ul > 24 <li><a href="/admin/admin/add" target="right"><span class="icon-caret-right"></span>添加管理员</a></li> 25 <li><a href="/admin/admin" target="right"><span class="icon-caret-right"></span>查看管理员</a></li> 26 27 </ul> 28 29 <h2><span class="icon-pencil-square-o"></span>会员管理</h2> 30 <ul> 31 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 32 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 33 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 34 </ul> 35 36 <h2><span class="icon-pencil-square-o"></span>栏目管理</h2> 37 <ul> 38 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 39 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 40 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 41 </ul> 42 43 <h2><span class="icon-pencil-square-o"></span>轮播图管理</h2> 44 <ul> 45 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 46 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 47 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 48 </ul> 49 50 <h2><span class="icon-pencil-square-o"></span>新闻分类管理</h2> 51 <ul> 52 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 53 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 54 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 55 </ul> 56 57 <h2><span class="icon-pencil-square-o"></span>新闻管理</h2> 58 <ul> 59 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 60 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 61 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 62 </ul> 63 64 <h2><span class="icon-pencil-square-o"></span>评论管理</h2> 65 <ul> 66 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 67 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 68 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 69 </ul> 70 71 <h2><span class="icon-pencil-square-o"></span>系统管理</h2> 72 <ul> 73 <li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li> 74 <li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li> 75 <li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li> 76 </ul> 77 </div> 78 <script type="text/javascript"> 79 $(function(){ 80 $(".leftnav h2").click(function(){ 81 $(this).next().slideToggle(200); 82 $(this).toggleClass("on"); 83 }) 84 $(".leftnav ul li a").click(function(){ 85 $("#a_leader_txt").text($(this).text()); 86 $(".leftnav ul li a").removeClass("on"); 87 $(this).addClass("on"); 88 }) 89 }); 90 </script> 91 <ul class="bread"> 92 <li><a href="{:U('Index/info')}" target="right" class="icon-home"> 首页</a></li> 93 <li><a href="##" id="a_leader_txt">网站信息</a></li> 94 <li><b>当前语言：</b><span style="color:red;">中文</php></span> 95 切换语言：<a href="##">中文</a> <a href="##">英文</a> </li> 96 </ul> 97 <div class="admin"> 98 <iframe scrolling="auto" rameborder="0" src="/admin/welcome" name="right" width="100%" height="100%"></iframe> 99 </div> 100 101 </body> 102 </html>