Node.js -Express 路由配置

最新推荐文章于 2023-05-28 15:58:14 发布
最新推荐文章于 2023-05-28 15:58:14 发布
阅读量440 收藏
点赞数
分类专栏： JS css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vodka688/article/details/115565378
版权
JS 同时被 2 个专栏收录
23 篇文章 2 订阅
订阅专栏
css
3 篇文章 2 订阅
订阅专栏 
//方法一：router.js
var fs = require('fs');
var express = require('express');
console.log('Router had been excuted.');
//路由页面，用来存放各种各样的路由
module.exports = function(app){
   //主页面的views目录要和app.js目录同级
    app.get('/',function(request,response){
    //从文件中读取数据,(因为读取文件时，默认读取格式是16进制)第二个参数是文件传输格式，也可以选择用函数 data.toString()进行转换;
    fs.readFile('./database.json',function(error,data){
       //若读取失败
       if(error){
           return status(500).send('Server error'); //500状态码，服务端出错状态码
       }else{
          response.render('index.html',{
              Students: JSON.parse(data).students// 用parse将JSON数据转为对象(data 是一个对象)，再选择students对象
          });   
       }
    });
    });
    app.get('/hello',function(request,response){
        response.render('hello.html');
    });
    app.get('/xxx',function(request,response){
        response.render('xxx.html');
    });
}

//方法二: router.js
var fs = require('fs');
var express = require('express');
//创建路由器,Express框架自带
var router = express.Router();
//路由容器，用来存放各种各样的路由

   //主页面的views目录要和app.js目录同级
    router.get('/',function(request,response){
    //从文件中读取数据,(因为读取文件时，默认读取格式是16进制)第二个参数是文件传输格式，也可以选择用函数 data.toString()进行转换;
    fs.readFile('./database.json',function(error,data){
       //若读取失败
       if(error){
           return status(500).send('Server error'); //500状态码，服务端出错状态码
       }else{
          response.render('index.html',{
              Students: JSON.parse(data).students// 用parse将JSON数据转为对象(data 是一个对象)，再选择students对象
          });   
       }
    });
    });
    router.get('/hello',function(request,response){
        response.render('hello.html');
    });
    router.get('/xxx',function(request,response){
        response.render('xxx.html');
    });

    //导出路由容器
    module.exports  = router ;





//app.js
var express = require('express');
var fs = require('fs');
var router = require('./router');
var app =  express();
//处理页面中各种链接请求，将各种静态资源统一放在一个开头相同的文件中,当服务端收到新的链接请求时，就会到相应目录中去寻找
app.use ('/node_modules',express.static('../node_modules/'));
app.use('/views/',express.static('./views/'));
/*
  配置使用 art-template  模板引擎,第一个参数表示，当渲染以  .art 结尾的文件的时候(也可以修改为其他后缀,如： .html )， 使用
  art-template  模板引擎， express-art-template  是专门用来在 Express 中把art-template 整合到Express 中，原因在于 express-art-template 依赖了 art-template
*/
app.engine('html',require('express-art-template'));
//方法一使用router函数
router(app);
//方法二:
app.use(router);

app.listen(5000,function(){
    console.log('Running server 5000.....');
})

<--index.html!-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/views/css/index.css" >
    
    <title>Index Page</title>
</head>
<body>
    <div id="MajorBody">
        
        <div id ="Header"> 
            <span class="ProjectName"> Student Admini System</span>    
            <input type="text" value="" name ="" placeholder="Search..." class="Search" id="Search" >
            <span class="direct" id="DashBoard">
                <a href="javascript:void(0)">DashBoard</a>
            </span>
            <span class="direct" id="Settings">
                <a href="javascript:void(0)">Settings</a>
            </span>
            <span class="direct" id="Profile">
                <a href="javascript:void(0)">Profile</a>
            </span>
            <span class="direct" id="Help">
                <a href="javascript:void(0)">Help</a>
            </span>
        </div>
 
        <div id="navigator">
            <ul id="Part">
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
            </ul>

            <ul id="Part" class="Two">
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
            </ul>

            <ul id="Part" class="Three">
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
                
                <li>
                    <a href="#">Overview</a>
                </li>
            </ul>
        </div>

        <div id="Board">
            <div id="ProfileBoard">

                <div class="ins">
                    <div class="image">
                        <img src="/views/img/猫咪投降.jpg" alt="">
                    </div>
                    <span class = "Name">Cat</span>
                    <span class = "introduction">Miao~Miao~</span>
                </div>

                <div class="ins">
                    <div class="image">
                        <img src="/views/img/小马嚎叫.jpg" alt="">
                    </div>
                    <span class = "Name">Fang</span>
                    <span class = "introduction">我很强，我知道</span>
                </div>

                <div class="ins">
                    <div class="image">
                        <img src="/views/img/李信.png" alt="">
                    </div>
                    <span class = "Name">Xin</span>
                    <span class = "introduction">不为不存在的天命而压低脊梁</span>
                </div>

                <div class="ins">
                    <div class="image">
                        <img src="/views/img/Yuyuan.jpg" alt="">
                    </div>
                    <span class = "Name">Yuyuan</span>
                    <span class = "introduction">今天吃啥？</span>
                </div>

            </div> 

            <div id="ControlButton">
                <button id="Add">Add Student</button>
            </div>

            <div id="InfoBoard">

                <div class="Title">
                    <div class="Sno">Sno</div>
                    <div class="SName">Name</div>
                    <div class="SAge">Age</div>
                    <div class="SGender">Gender</div>
                    <div class="SHobbies">Hobbies</div>
                </div>
                
                <ul id="Info">
                    {{ each Students}}
                    <li >
                        <div class="Sno"> {{ $value.Sno }}</div>
                        <div class="SName">{{ $value.Name }}</div>
                        <div class="SAge">{{ $value.Age }}</div>
                        <div class="SGender">{{ $value.Gender }} </div>
                        <div class="SHobbies">{{ $value.Hobbies }}</div>
                    </li>
                     {{ /each }}
                </ul>
            </div>
        </div>

    </div>
</body>
</html> 




-index.css
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
#MajorBody{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   width: 1520px;
   height: 1500px;

}

#Header{
   display: flex; 
   justify-content: flex-start;
   align-items: center;
   position:fixed;
   width: 1520px;
   height: 100px;
   color: white;
   background-color: rgba(10, 9, 9, 0.68);
}

.ProjectName{
   padding-left: 10px;
   font-size: 30px;
}

.Search{
   position: relative;
   width: 200px;
   height: 50px;
   margin-left: 450px;
   padding-left: 10px;
   border-radius: 15px;
   border:none;
   outline: none;
   font-size: 25px;
   color:rgba(128, 128, 128, 0.496);
}
.direct{
   display:flex;
   justify-content: flex-start;
   align-items: center;
   width: 120px;
   height: 90px;
}
.direct > a{
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 110px;
   height: 80px;
   font-size: 20px;
   
   text-decoration: none;
   color:aliceblue;
   
}
.direct > a:hover{
   color: aqua;
}
.direct :nth-of-type(1){
   margin-left: 20px;
}
#navigator{
    display: flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
    margin-top: 100px;
    height: 1200px;
    background-color: rgba(194, 218, 240, 0.938);
}

#Part{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 400px;
 
}
#Part > li{
   display: flex;
   justify-content: center;
   align-items: center;
   width:199px;
   height: 70px;
   margin: 3px 5px;
   background-color: rgba(128, 185, 241, 0.442);
}
#Part >li > a{
   display:flex;
   justify-content: flex-start;
   align-items: center;
   width: 100px;
   height: 6px;
   text-decoration: none;
   color: black;
}
#Part >li:hover{
   cursor: pointer;
   background-color: rgba(255, 166, 0, 0.585);
}

#Part > li > a:hover{
   color: white;
}

.Two{
   margin-top: -80px;
}

.Three{
   margin-top: -80px;
}
#Board{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   width: 1320px;
   height: 1200px;
   margin-top: 100px;
}

#ProfileBoard{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 1500px;
   height: 300px;
   background-color: rgba(219, 233, 233, 0.755);
}

.ins{
   display:flex;
   justify-content: center;
   align-items:center;
   flex-wrap:wrap;
   width: 300px;
   height: 300px;
   color:rgb(81, 81, 81);
}
.ins > .image> img{
   display:flex;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   
}
.ins .image{
   display:flex;
   justify-content: center;
   align-items: center;
   width: 150px;
   height: 150px;
   border-radius: 50%;
  
}

.ins .Name{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 30px;
   margin-top: -20px;
}
.ins .introduction{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 50px;
   margin-top: -50px;
}

div[class = "ins"]:nth-child(2){
   margin-left: 30px;
}

div[class = "ins"]:nth-child(3){
   margin-left: 30px;
}
 
div[class = "ins"]:nth-child(4){
   margin-left: 30px;
}
#ControlButton{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 1520px;
   height: 80px;
   background-color: rgba(219, 233, 233, 0.755);
}

#Add{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left:600px;
   width: 80px;
   height: 60px;
   border-radius: 15px;
   background-color: aqua;
   outline: none;
}
#Add:hover{
   color:white;
   cursor: pointer;
}

#InfoBoard{
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   flex-wrap:wrap;
   width: 1520px;
   height: 820px;
   background-color: rgba(127, 255, 212, 0.503);
}

.Title{
   display:flex;
   width: 1500px;
   height: 60px;
   justify-content: flex-start;
   align-items: center;
   border-bottom: 2px solid gray;
}

.Sno , .SName , .SGender , .SHobbies , .SAge{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 60px;
    border: 1px solid gray;
}

.SHobbies{
   width: 520px;
}
#Info , #Info > li{
   display:flex;
   width: 1500px;
   height: 60px;
   justify-content: flex-start;
   flex-wrap: wrap;
   align-items: center;
   list-style: none;
}

服务端渲染页面

Vodka~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs-express4-ejs搭建及路由简单配置
fasdfdssdf的博客
08-09 501
环境 wid7 64bit node环境（网址：http://nodejs.cn） 首先，我们需要安装express库，当前应该是4点几版本了 Express需要全局安装的，项目构建器模块是合并在Express项目中的，后来这个构建器被拆分出来，独立成为了一个项目express-generator，现在我们只需要全局安装express-generator项目就行了。 ~ npm install -...
Node.js-EXPRESS初始化平台搭建
08-09
**Node.js与Express基础知识** Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让JavaScript能够在服务器端执行，打破了JavaScript只能在浏览器端使用的限制。Node.js具有非阻塞I/O模型，使其在处理高并发...
Express 路由
weixin_43563864的博客
10-27 676
1. Express 路由 1.1 路由的概念 1. 什么是路由 广义上来讲，路由就是映射关系。 2. 现实生活中的路由 按键 1 -> 业务查询 按键 2 -> 手机充值 按键 3 -> 业务办理 按键 4 -> 密码服务与停复机 按键 5 -> 家庭宽带 按键 6 -> 话费流量 按键 8 -> 集团业务 按键 0 -> 人工服务 在这里，路由是按键与服务之间的映射关系 3. Express 中的路由 在 Express 中，路由指的是客户端的请求与服务
Nodejs路由配置
weixin_52629158的博客
05-28 501
/载入文件res.render("home/index");创建routers文件夹，创建index.js路由配置文件,nodejs中实例化路由类router，目的是通过 路径，访问页面。req request对象 保存客户端请求的相关信息res response对象 服务器端返回的响应信息next 执行下一个方法。路由的目的：八个字，载入页面，显示数据（接口中的数据）。页面取接口中的数据，显示在页面上。
node.js零基础详细教程(5)：express 、 路由
weixin_30739595的博客
06-13 129
第五章 建议学习时间4小时 课程共10章 学习方式：详细阅读，并手动实现相关代码 学习目标：此教程将教会大家 安装Node、搭建服务器、express、mysql、mongodb、编写后台业务逻辑、编写接口，最后完成一个完整的项目后台，预计共10天课程。 express Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大...
(三) nodejs设置路由(windows本地)
weixin_43770268的博客
12-24 338
参考： https://blog.csdn.net/weixin_42749765/article/details/82253558 https://blog.csdn.net/qq_33862644/article/details/79337348 就纯小白看了一圈博客下来，只知道它的一些概念，具体怎么用还是不太理解，最后请教了一下之后大概明白了一些。关于下载安装就不说了，其实下载安装完了，需要做的就是配置D:\nginx-1.14.2\conf目录文件下的nginx.conf文件即可，其他的不能理解的参
03 初识 Node.js -Express
最新发布
03-09
### 03 初识 Node.js - Express #### 1.1 Express 简介 - **Express** 是一个基于 **Node.js** 平台，快速、开放且极简的 Web 开发框架。 - **通俗理解**: Express 类似于 Node.js 内置的 http 模块，主要用于创建...
Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发
08-10
标题中的“Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发”揭示了我们讨论的主题：一个使用Node.js和Express框架构建的MongoDB Web管理界面，名为“mongo-express”。这个工具提供了图形...
Node.js-Express入门套件
08-10
Express是Node.js平台上的一个Web应用框架，它为快速构建Web应用提供了许多实用的功能，如路由处理、中间件系统和模板引擎等。Express遵循MVC（Model-View-Controller）设计模式，使得应用程序结构清晰，易于维护。...
Node.js-express的简单实现
08-10
**Node.js-express的简单实现** Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让JavaScript能够在服务器端运行，打破了传统的前端限制。Express则是基于Node.js平台的、快速、开放、极简的Web开发框架，...
详解NodeJS框架express的路径映射（路由）功能及控制
10-20
主要介绍了详解NodeJS框架express的路径映射（路由）功能及控制，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
node.js Express框架路由模块化
02-01
最近学习了一下node.js,里面有一个路由模块化，我觉得很重要，所以写了一个例子，上传，和大家交流学习
Node.js 搭建 web 程序 之 路由配置
王飞
03-11 1134
前一篇博客里我们说到了 Node.js 和 fs 模块的使用，主要是安装配置 Node.js 和 HTTP web模块，不了解的可以去看下我的前一篇博客 Node.js 搭建 web 程序 之 使用基础 ，本篇我们将Node.js和模块模块实现路由配置。 fs文件系统模块 fs模块是 Node.js 主要用于读文件。 引用模块 var http = require('HTTP') 读取文件分为同...
Node.js之路由
QSY_com的博客
02-11 986
中间件(Middleware)，特指业务流程的中间处理环节。// 常量mv所指向的，就是一个中间件函数console.log('这是一个简单的中间件函数');// 注意：在当前中间件的业务处理完毕后，必须调用next()函数// 表示把流转关系交给下一个中间件或路由next();// 全局生效的中间件console.log('这是一个简单的中间件函数');next();});// 可以在路由中，通过如下两种等价的方式，使用多个局部中间件：自己手动模拟。
Nodejs--express路由
xieyuleisss的博客
07-10 611
什么是路由 路由这个次不是nodejs专属，在web应用程序中就有路由，路由描述应用程序是否以及如何对调http（超文本传输协议）请求进行应答，当用户在与应用程序或者网站交互的时候，浏览器就会生成这些请求。 路由就是映射关系 根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 Express中的路由 在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系 Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、
【Node.js】Node.js入门（五）：Express路由
郭老二
10-31 522
路由指的是web服务端通过客户端发来的不同的url来响应客户不同的请求。对应到代码最简单的理解就是：一组字符串和一组函数接口的键值对对应，解析url中不同字符调取不同的函数接口。Express中有四种种路由接口再啰嗦几句：这些路由方法指定一个回调函数(有时称为“处理函数”)，当应用程序接收到对指定路由(端点)和HTTP方法的请求时调用。换句话说，应用程序“监听”匹配指定路由和方法的请求，当它检测到匹配时，它调用指定的回调函数。路由方法可以有多个回调函数作为参数。
nodejs之express（一）简单实现路由
代码解释生活
03-07 1182
express的中间件有：Express 4.0 Namebody-parser：解析请求体，相当于cntent-type设置；compression：压缩；cookie-sessionMorgan：morgan是express默认的日志中间件，也可以脱离express，作为node.js的日志组件单独使用；cookie-parser：设置cookie；express-session：设置sess...
node 配置路由
weixin_43845059的博客
09-14 1389
node 配置dist路由
Nodejs -- Express 路由原理及设置模块化路由
Qlz的博客
11-28 907
1. 路由的概念 1.1 什么是路由 1.2 显示生活中的路由 1.3 Express中的路由 1.4 Express中路由的例子 1.5 路由的匹配过程 2 路由的使用 2.1 最简单的用法 2.2 模块化路由 2.3 为路由模块添加统一前缀
node.js实现express路由
05-18
在使用Node.js实现Express路由之前，需要确保已经安装了Node.js和Express模块。 以下是一个简单的Express路由示例： ```javascript // 引入Express模块 const express = require('express'); // 创建Express应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值