`
裴小星
  • 浏览: 265287 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
8ccf5db2-0d60-335f-a337-3c30d2feabdb
Java NIO翻译
浏览量:27825
F3e939f0-dc16-3d6e-8c0b-3315c810fb91
PureJS开发过程详解
浏览量:74141
07a6d496-dc19-3c71-92cf-92edb5203cef
MongoDB Java ...
浏览量:62957
社区版块
存档分类
最新评论

PandaJS 使用说明 (1.2): Hello, World!

阅读更多
PandaJS 使用说明 (1.2): Hello, World!


  PandaJS 中服务器端处理的请求有两类,一类是 API 请求,另一类是页面请求。本文将介绍如何从客户端调用服务器端的 API ,并编写一个简单的 Hello, World! 示例。

  
准备工作

  利用上一篇文章中介绍的方法,建立新项目 HelloPanada,删除以下目录中的内容,因为我们将从零开始建立示例程序:

  1. scripts/app,scripts/test/app 和 scripts/test/both 目录中的文件
  2. webapp 目录中的 html 文件
  3. webapp/js 和 webapp/js/both 中的 js 文件,保留 webapp/lib 中的文件

   现在我们可以在 src/com/pandajs/Luncher.java 上点击鼠标右键,选择 Run As -> Java Application,Web 应用可以正常启动(虽然现在没有与数据库相关的操作,但还是请先启动 mongod),并输出日志。
  由于我们还没有编写处理请求的 JS 代码,因此现在还无法访问任何页面。

  PandaJS 支持热部署,通常不需要重启应用。
  那么接下来就让我们一边编写代码,一边看看效果吧。

  
HTML 页面

  首先,我们需要建立一个 HTML 页面,来显示服务器端 API 返回的结果,并引入必要的客户端 JS 文件。
  我们可以在 webapp 目录下创建文件 hello.html:
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="css/hello.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="message" /></div>

	<script src="js/lib/jquery.js"></script>
	<script src="js/lib/jquery.tmpl.js"></script>
	<script src="js/lib/json.js"></script>
	<script src="js/lib/panda.js"></script>
	<script src="js/hello.js"></script>
</body>
</html>


  这个页面实际只包含了一个 id 为 message 的 div。我们会将服务器端 API 返回的结果放在这个 div 里。

  我们将使用 jQuery Template 渲染页面,因此我们引入了 jQuery 和 jQuery Template;
  同时 webapp/lib/panda.js 中包含了一些可以在客户端使用的便捷的函数。

  
Hello, World!

  接下来我们就要正式地为我们伟大的 Hello, World! 应用编写代码了。
  首先,我们需要在客户端 js 中向服务器端发起请求,并将结果显示在 ID 为 message 的 div 中。
  webapp/js/hello.js  
$(function(){
	// 构造 request 对象
	// 调用服务器端名称为 "hello.say" 的 API
	var request = {
		action: "hello.say"
	};

	// 发送请求
	// 并将结果显示在 ID 为 message 的 div 中
	panda.post(request, function(data) {
		$("#message").html(data);
	});
});


  相应地,在服务器端需要编写 hello.say 的处理程序。

  首先,需要在 scripts/app 目录下创建子目录 api 和 proxy。
  这个时候,如果 web 应用正在运行,将会自动创建全局对象 api 和 proxy;
  否则,将会在下次启动时创建。
引用
创建文件夹时自动创建全局对象,这是 0.0.2 版本新增的功能

  我们暂时还不会在 proxy 目录下创建 js 文件,但需要在 api 目录下创建hello.js,
  api.hello 是一个对象,实现了用于响应的客户端请求的方法:
  scripts/app/api/hello.js 
api.hello = {
	say: function() {
		return "Hello, World!";
	}
};

  
  在浏览器中输入http://localhost/hello.html,就可以在左上角看到 Hello, World! 了。
引用
proxy 对象用于实现日志、权限控制、数据校验等需要拦截方法调用的功能

  
Hello, Panda!

  光是让服务器端返回固定的结果,实在太单调了。
  接下来,就让我们向服务器端传递一些参数吧。

  首先,我们需要在构造  request 对象时增加参数:
$(function(){
	// 在 request 对象中增加了参数 params
	// 这个参数也可以是一个更复杂的 js 对象
	var request = {
		action: "hello.say",
		params: { name: "Panda" }
	};

	panda.post(request, function(data) {
		$("#message").html(data);
	});
});


  接着,我们需要修改服务器端 js,增加对参数的处理:
api.hello = {
	// 增加参数 params
	// 获取 params.name 并处理后返回
	say: function(params) {
		return "Hello, " + params.name + "!";
	}
};


  刷新页面,就可以在左上角看到 Hello, Panda! 了。


  到此为止,一个简单的 hello, World! (以及 Hello, Panda!)应用就算完成了。
  当然,直接在浏览器中输入 html 路径可能有点奇怪,我们在后面将看到如何用 page 对象处理页面请求。
  不过,下一篇文章里,还是先让我们看一看文件上传与下载的相关内容吧。
16
11
分享到:
评论

相关推荐

    1023 Hello,World!的大小.cpp

    1023:Hello,World!的大小 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 55575 通过数: 21322 【题目描述】 我们曾经输出过的“Hello, World!”吗?它虽然不是本章所涉及的基本数据类型的数据,但我们同样可以用...

    Hello,World!

    "Hello, World!" 是编程世界的传统起点,是初学者学习新编程语言时编写的第一个小程序。这个简单的程序在屏幕上打印出 "Hello, World!" 文本,帮助开发者了解如何在特定的语言环境中控制输出。下面我们将详细讲解...

    [编程] Hello World! 少儿电脑编程 初学者指南 第1版 (英文版)

    ☆ 资源说明:☆ [Manning Publications] Hello World! 少儿电脑编程 初学者指南 第1版 (英文版) [Manning Publications] Hello World! Computer Programming for Kids and Other Beginners 1st Edition (E-Book) ...

    关于"Hello World!"程序

    std::cout &lt;&lt; "Hello, world!" &lt;&lt; std::endl; std::operator(std::cout, "Hello, world!"); // friend cout是模板类的实例 std::cout.operator(std::endl); // member endl是函数模板指针 std::...

    c++显示hello world!

    接下来,我们将深入探讨如何使用C++编写“Hello World!”程序,并在此基础上延伸出更多相关的知识点。 #### 二、“Hello World!”程序分析 给定的“Hello World!”程序如下: ```cpp #include #define Say(sth) ...

    C++第一课:Hello,World!

    C++第一课:Hello,World!

    Struts2入门使用案例HelloWorld

    "Struts2入门使用案例HelloWorld"是一个典型的教程,旨在帮助初学者快速理解并开始使用Struts2框架。下面我们将深入探讨这个案例涉及的关键知识点。 首先,我们需要创建一个Maven工程。Maven是Java项目管理和构建...

    Python - Hello World! Computer Programming for Kids and Other Beginners by Carter Sande.pdf

    ### Python - Hello World! Computer Programming for Kids and Other Beginners by Carter Sande #### 一、书籍简介与背景 《Python - Hello World! Computer Programming for Kids and Other Beginners》是一本...

    Hello world!

    标题 "Hello world!" 是编程初学者接触的第一个程序,它标志着编程旅程的开始。"Hello, World!" 程序通常用于演示基本的编程语法和环境设置。在大多数编程语言中,这个程序非常简单,通常只包含一行代码,用于在...

    python基础教程之Hello World!

    &gt;&gt;&gt;print(‘Hello World!’) 可以看到,随后在屏幕上输出: 复制代码 代码如下: Hello World! print是一个常用函数,其功能就是输出括号中得字符串。 (在Python 2.x中,print还可以是一个关键字,可写成print ...

    单片机"Hello world!"

    Serial.println("Hello world!"); //串口输出Hello world!

    hellopython的代码-python基础教程之HelloWorld!.pdf

    在Python 2.x版本中,`print`可以作为一个关键字使用,格式如`print 'Hello World!'`,但这种写法在Python 3.x中已被废弃,现在推荐使用`print()`函数的形式。 接下来,我们可以创建一个实际的Python程序。使用文本...

    新浪微博java版helloWorld!

    新浪微博java版helloWorld!

    笨鸟学Android开发(1):HelloWorld

    这个"HelloWorld"项目只是Android开发的冰山一角,后续你将学习更多,如Activity的生命周期、Intent的使用、UI组件的交互、数据存储、网络请求、多线程等。Android开发是一个深邃且广阔的领域,不断学习和实践,你将...

    在计算机屏幕上显示Hello World!

    在计算机屏幕上显示Hello World!

    Uno“Hello world!” 项目使用Windows UWP,iOS,Android和WebAssembly.zip

    Uno“Hello world!” 项目使用Windows UWP,iOS,Android和WebAssembly.zip,An Uno "Hello world!" project using Windows UWP, iOS, Android and WebAssembly

    hello world!

    "Hello World!" 是编程世界的入门程序,它标志着一个程序员的旅程开始。在大多数编程语言中,"Hello World!" 是编写的第一段代码,用于演示最基本的语法结构。这个简单的程序通常会打印出 "Hello World!" 这个字符串...

    例程1-Hello World!.zip

    在本压缩包“例程1-Hello World!.zip”中,我们找到了关于单片机编程的基础教程,特别针对UNO系列和Arduino平台,这对于初学者来说是一个很好的起点。 Arduino是一个开源硬件和软件平台,广泛用于电子制作、教育和...

Global site tag (gtag.js) - Google Analytics