资讯专栏INFORMATION COLUMN

用express搭建网站

Kosmos / 1959人阅读

摘要:先建个简单的服务器当然你先得安装使用,如果这里的代码复制后运行不了请移步我的下载源码顺手给我个小星星鼓励哈运行后访问默认匹配的路由是,多个要使用方法,但是使用了,或者就不能使用到达下一个了是添加路由的方法,忽略大小写,反斜杠,进行匹配时不

先建个简单的服务器

当然你先得安装express npm install express

//使用express,如果这里的代码复制后运行不了请移步我的github下载源码,顺手star给我个小星星鼓励哈
//http://github.com/sally2015/express-project
// npm install  运行node main 后访问loaclhost:3000
var express = require("express");
var app = express();
app.set("port", process.env.PORT || 3000);

app.get("/",function(req, res){
    res.send("home");
    
});
app.use("/about",function(req, res){
    res.send("about");
    
});
app.use(function(req, res){


    res.send("404");
    
});

app.use(function(req, res, next){

    res.send("500");
});

app.listen(app.get("port"), function () {
    console.log("Express started on http:localhost"+app.get("port"));
});

app.use(function(req,res,next){})默认匹配的路由是‘/’,多个use要使用next()方法,但是使用了,res.end()或者res.send()就不能使用next到达下一个use了

app.get()是添加路由的方法,忽略大小写,反斜杠,进行匹配时不考虑查询字符串

//不使用express你可能要这么写
/*
* var http = require("http");
* var server =  http.createServer(function(req, res){
*    if(req.url === "/"){
        res.setHeader("Content-type","text-plain");
        res.write("……");&&res.end();
*   }
*}).listen(3000,"localhost");
*/

对定制的404页面和500页面的处理与对普通页面的处理有所区别,用的不是app.get,而是app.use。app.use是express添加中间件的一种方法

express中路由和中间件的添加顺序至关重要,如果把404处理器放在所有的路由上面,普通页面的路由就不能用了

express能根据回调函数中的参数区分404和500处理器

使用handlebars

(defaultLayout:"main")意味着除非你特别指明否则所有的视图都是这个布局

var handlebars = require("express3-handlebars") //现在已经重命名为express-handlebar了,由于牵一发可能要动全身,我这里就不改了
.create({ 
    defaultLayout: "main", // 设置默认布局为
});

app.engine("handlebars", handlebars.engine); // 将express模板引擎配置成handlebars 
app.set("view engine", "handlebars");

创建一个views/layouts/main.handlebars文件



Document


{{{body}}}


- {{{body}}}注意这里是三个大括号,这个表达式会被每个视图自己的html取代
- 分别创建首页、关于、404、500页面,后缀名都是handlebars
  - ```html
views/home.handlebars
=> 

welcome to home

views/about.handlebars =>

welcome to about

views/404.handlebars =>

not found - 404

views/500.handlebars =>

500 server error

视图和静态文件

express靠中间件处理静态文件和视图,中间件是一种模块化手段,使请求处理更加容易

static中间件可以将一个或多个目录指派为包含静态资源的目录,其中的资源不经过特殊处理直接发送到客户端

app.use(express.static(__dirname+"/public"));
//现在所有文件都可以相对public直接进行访问,例如public下面有一个img文
//件夹,那么在handlebars中(不需要理会在handlebars的目录结构)直接访问
//路径/img/logo.png

视图和静态资源的区别是它不一定是静态的,html可以动态构建

在项目下建一个public的子目录,应该把static中间件加载所有路由之前

向handlebars里传递参数
var args = "its a arguments";//虚拟一个参数
//修改此时的about路由
app.get("/about", function(req,res){
    
    res.render("about", {args:args});
});

修改about文件

此时访问就会得到下面的结果

以上代码在https://github.com/sally2015/... ch1
---------------------------------------------分割线----------------------------------------------

ch2讲讲怎么快速、可维护的开发

使用自定义模块

ch1为了传递参数在main.js里面定义了一个虚拟数据,为了将数据分离出来,在根目录下定义一个lib目录,放置一个数据模块m_data.js

var args = "its a arguments";//虚拟一个参数

exports.getData = function(){
    return args;
}

main.js

var m_data = require("./lib/m_data.js");
app.get("/about", function(req,res){
    
    res.render("about", {args:m_data.getData()});
});
使用nodemon自动重启服务器

每次修改main文件都要ctrl+c停止再运行很累,使用nodeman每次修改都会帮我们重启服务器

使用也非常简单,npm install nodemon -g,运行nodemon main

页面测试

需要一个测试框架Mocha ---- npm install mocha --save-dev 这里dev的意思是只在开发时依赖

mocha是要运行在客户端的所以把mocha资源放在public目录下

public/vendor

=> node_modules/mocha/mocha.js

=> node_modules/mocha/mocha.css

测试通常需要一个assert函数

npm install chai --save-dev

node_modules/chai/chai.js => public/vendor

不让测试一直运行

因为拖慢网站的速度,用户也不需要看到测试结果

期望的情况是在url后面加上?test=1才加载测试页面

定义中间件来检测查询字符串中的test=1,放在所有路由之前

如果test=1出现在任何页面的字符串查询中,属性res.locals.showTests就会被设为true

res.locals对象是要传给视图上下文的一部分

app.use(function(req, res, next){
    res.locals.showTests = app.get("env") !== "production" 
          && req.query.test === "1";
    next();
});
引入测试框架

修改main.handlebars(以后简写main),修改head


    Meadowlark Travel
    {{#if showTests}}
        
    {{/if}}
    

这里在head引入jquery是为了方便测试

在之前引入mocha和chai,还需引入一个qa/global-test.js脚本

{{#if showTests}}
        
{{#if pageTestScript}} {{/if}} {{/if}}

创建public/qa/tests-global.js全局测试脚本

suite("Global Tests", function(){
    test("page has a valid title", function(){
        assert(document.title && document.title.match(/S/) && 
          document.title.toUpperCase() !== "TODO");
    });
});

访问localhost:3000没有任何变化,但是访问localhost:3000?test=1,你会发现加载了测试的文件帮你做的这些东西

针对about页面进行测试

这里假设测试确保有总有一个指向联系我们页面的链接,创建一个public/qa/tests-about.js

suite(""About" Page Tests", function(){
  test("page should contain link to contact page", function(){
      assert($("a[href="/contact"]").length);
  });
});

在main.js上改变路由/about的参数

app.get("/about", function(req,res){
  
  res.render("about", {
      args:m_data.getData(),
      pageTestScript:"/qa/tests-about.js"
  });
});

现在刷新页面about会有一个错误的断言

只要about模板中有一个链接,这个错误测试断言就会消失

例如contact us

使用局部组件

场景定义一个天气组件,在任何页面都可以调用,这样的需要重复调用的可以用局部文件实现

新建一个views/partials/weather.handlebard

{{#each weather.locations}} {{/each}}

在weatherData.js中放入虚拟数据

function getWeatherData(){

    return {
        locations:[
            {
                name:"广州",
                forecastUrl:"https://github.com/sally2015",
                weather:"广州的温度情况",
                temp:"温度"
            },
            {
                name:"深圳",
                forecastUrl:"https://github.com/sally2015",
                weather:"深圳的温度情况",
                temp:"温度"
            },
            {
                name:"珠海",
                forecastUrl:"https://github.com/sally2015",
                weather:"珠海的温度情况",
                temp:"温度"
            }
        ]
    }
}
exports.getWeatherData = getWeatherData

创建一个中间件给res.locals.weather添加数据

//给res.locals.weather添加数据
app.use(function(req, res, next){
    if(!res.locals.weather){
        res.locals.weather = {};

    }
    res.locals.weather = m_weatherData.getWeatherData();
    next();
});

将组件放在主页home上

welcome to home

{{>weather}}

语法{> partialname}可以让你在视图中包含一个局部文件,express-handlebars会在views/partials寻找

你可以将这个语法放在任何你需要的页面上

客户端使用模板和动态获取数据

客户端使用handlebars需要加载handlebars文件,你可以从node_moudles里面找,像正常文件一样引入即可

定义一个view/partials/ajaxtest.handlebars文件


在main.js中设定接口

app.get("/data/ajaxtest", function(req, res) {
    res.json({
            animal:"dog",
            bodyPart:"tail",
            adjective : "sharp",
            noun : "run"
        });
});

在你想要的视图里面加入{{>ajaxtest}}

这时候当你点击按钮就会请求到数据,注意接口使用的方法是json


--------------------分割线------------------------------------ch2 https://github.com/sally2015/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80644.html

相关文章

  • 一步一步搭建一个图片上传网站(后台服务器nodejs)

    摘要:把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器,利用中间件指定文件路径。利用这个前端和后端技术,我们基本上就可以做出一个图片上传存储的基本网站核心。 前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试。也没有具体的一个实例都是一些基本的原理片段,并且ui界面也不...

    Darkgel 评论0 收藏0
  • NodeJS+Express搭建个人博客-环境搭建(一)

    摘要:本项目持续更新中,开源免费与各位爱好技术达人共勉,注现阶段仍在开发中。。。。。 NodeJS+Express+MongoDb开发的个人博客 NodeJS+Express搭建个人博客-环境搭建(一)NodeJS+Express搭建个人博客-gulp自动化构建工具使用(二)NodeJS+Express搭建个人博客-Express+Mongodb组合架构介绍(三)NodeJS+Express...

    Clect 评论0 收藏0
  • Node中间层实践(二)——搭建项目框架

    摘要:项目地址脚手架使用过,的同学都清楚,官方推荐的安装方式是通过专用的来快速搭建一个由编译打包的项目框架。用在层的模块化,在中间层实现了模块化。这样,从中间层到前端都实现了热加载。 版权声明:更多文章请访问我的个人站Keyon Y,转载请注明出处。 项目地址:https://github.com/KeyonY/NodeMiddle 脚手架? 使用过angular2,vue2的同学都清楚,官...

    DrizzleX 评论0 收藏0
  • 如何使 Zend Expressive 建立 NASA 图片库?

    摘要:在本文中,我们将借助天文图库,使用建立图片库。在使用虚拟机时,此处应为,命令将在目录下运行。我们建议在选择服务名时,尽量使用完整的类名。这样,相当于告诉它必须使用指定的类来创建服务。在返回中的最后一个响应之前,应用会缓存该响应以备下次使用。 在本文中,我们将借助 NASA 天文图库 API,使用 Zend Expressive 建立图片库。最后的结果将显示在 AstroSpla...

    hidogs 评论0 收藏0
  • MEVN 架构(MongoDB + Express + Vue + NODEJS)搭建

    摘要:连接数据库如果不自己创建默认数据库会自动生成地址跟第一步的地址对应。现在回过头来看里面的入口文件最后,我们在浏览器输入,就会跳到。到此为止,我们就完成了整个前后端各自开发到正式部署的流程。 一个完整的网站服务架构包括:1、web frame ---这里应用express框架2、web server ---这里应用nodejs3、Database ---这里应用monggoDB4、...

    Lsnsh 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<