Node.js Express博客项目实战 之 实现第一个页面请求

在浏览器中的启动效果：

 出现该效果的原因，由于代码中没有配置路由：

出现该效果的代码：

 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  });
app.js

配置路由之后：

配置路由的代码：

 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  });
app.js

需要显示的是一个页面，因此需要使用模板引擎进行引入：

在命令行输入：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");
 });
app.js

//加载页面
       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;
index.js

后台路由

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;
admin.js

显示后台的效果：

在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;
routers->admin->admin.js

 在浏览器中输入地址http://localhost:3000/admin/admin/add：

在项目路由的创建中都是按照路由规则进行分类，方便进行维护。

项目后台页面的搭建

在浏览器中http://localhost:3000/admin

由于在后台中没有相关的路由，所以出现上述的效果，因此我们需要进行注入路由：

在routers->admin.js中进行后台路由的注入：

//后台首页路由

router.get('/',function(req,res,next){
    
    //加载对应的后台页面
    res.render("admin/index");
    
})

当我们再一次在浏览器中输入地址

http://localhost:3000/admin

 会出现这样的错误：没有发现视图对应的文件

 因此，需要在后台视图目录下：

将静态资源放入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> &nbsp;&nbsp;<a href="##" class="button button-little bg-blue"><span class="icon-wrench"></span> 清除缓存</a> &nbsp;&nbsp;<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   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;切换语言：<a href="##">中文</a> &nbsp;&nbsp;<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>
后台首页index.html
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiguiyan/p/11324633.html