11、NodeJs框架Express的使用方法

阅读() @2019-03-17 16:05:18

前端框架有Angular、vue、Reacet等,Java框架有Spring等,PHP框架有Laravel、ThinkPHP等。那NodeJs也有很多框架,目前官方推荐的是Express,可以提高开发者的码砖效率,相关笔记如下:

第一步:使用npm安装express

查看《学习安装NodeJs环境和NPM》。

第二步:在项目目录下新建views(前端模板)、routers(路由)三个文件夹。

第三步:在项目根目录下新建app.js作为项目入口,代码如下:

var http = require('http'),
    express = require('express'),//引入express模块
    app = express();//初始化express

//设置模板目录
app.set('views', __dirname + '/views');

//设置模板文件类型
app.set('view engine', 'ejs');

//设置静态资源目录
app.use(express.static(__dirname + '/public/'));

//加载路由文件
app.use('/', require('./routers/index').router);

//创建服务器
http.createServer(app).listen(3000);

console.log('express server is ok');

第四步:在routers文件夹下新建index.js文件,代码如下:

var express = require('express'),
    router = express.Router();//初始化路由

//访问当前路径时,使用response.render方法加载对应的前端模板文件
router.get('/', function(request, response){
  var obj = [
      {name : 'zym', age : '24', sex : 'man'},
      {name : 'zyy', age : '46', sex : 'man'}
  ];
  response.render('index', {data : obj});
});

//访问/admin路径时,显示相应内容
router.get('/admin', function(request, response){
  response.send('<h1>this is admin</h1>');
});

//导出router
exports.router = router;

console.log('this is index.js');

第五步:新建前端模板文件

在views文件夹下新建index.ejs、header.ejs和footer.ejs文件(注意在nodejs中,前端模板的后缀名是ejs)。

index.ejs中的代码如下:

<% include footer.ejs %>
    <% include header.ejs %><!-- 使用<% include %>标签引入其他模板 -->
    <% for(var i=0; i<data.length; i++){ %>
        <a href="#"><%= data[i].name %></a>
        <a href="#"><%= data[i].age %></a>
        <a href="#"><%= data[i].sex %></a>
    <% } %><!-- 此标签相当于其他后端语言中的foreach,作为循环输出数据 -->
    <img src="images/tx.jpg" alt="">

header.ejs中的代码如下:

<a href="javascript:;" id="file">资源</a>
<script type="text/javascript">
    var file = document.getElementById('file');

    file.onclick = function(){
        this.style.color = 'orange';
    }
</script>

footer.ejs中的代码如下:

<a href="javascript:;" id="course">课程</a>
<script type="text/javascript">
    var course = document.getElementById('course');

    course.onclick = function(){
        this.style.color = 'red';
    }
</script>

此项目github地址:https://github.com/zymseo/nodeStudy

微信二维码