AJAX跨域调用相关知识-CORS和JSONP
1、什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容。 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了。 […]
1、什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容。 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了。 […]
注:本文内容适用于V3.2及以下版本,V3.3版本及以上版本请参考“Baas for PHP” 1、概述 baas是WeX5的轻量级后端服务框架,可以用于为WeX5页面快速构建后端数据服务。WeX5版本中在”apache-tomcat\webapps\baas”目录下自带了Java的版本,前面我们在另一篇文章中发布了.NET的版本,现在又给大家带来了PHP的版本。 2、部署和调试 2.1、部署 首先我们需要有一个可以运行的php环境。如果还没有呢,可以去下载个wamp,照着网上的教程,几分钟后就可以运行了。(我这里的环境是5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b) 部署示例数据库。这里也可以用X5自带的mysql服务,但是如果大家想将数据库部署在php集成的那个mysql服务中,那么可以在X5的“apache-tomcat\webapps\baas”目录中,找到“takeout数据库初始化.sql”,创建数据库名为takeout,排序规则选择utf8_general_ci,然后执行脚本就可以了。 部署php资源。下载解压baas.php.zip到php的web根目录下,我这里wamp安装到d:\wamp,所以根目录默认是d:\wamp\www。 进入X5开发工具,打开“/UI2/demo/baas/baas.js”,修改BASE_URL与上面的配置一致。 启动X5的tomcat服务,启动PHP\MYSQL等相关服务(我这里启动了wamp,就一起都启动了)。 打开浏览器,进入“http://localhost:8080/x5/UI2/portal/sample/index.w”,打开里面的外卖及baas相关案例,这时的数据就是来源于PHP的后端baas服务了。 2.2、调试 如果上面的过程顺利的话,那么打开外卖就能看到菜单,就能下订单了。但是由于大家各自的环境差异,难免会遇到各种问题。下面提供一系列的调试手段,希望能帮助大家快速定位解决问题。 首先判断php是否部署成功和URL是否正确 用浏览器访问“http://localhost/baas/X5BaasService.php”,正常的话应该显示如下。 如果这里就没通过,那么就要返回去检查前面PHP的部署了。 如果只是出现了Hello X5!,没有出现下面的数据,那是PHP中没有连接到MYSQL,大家可以在代码中调整数据库连接: 如果上面的显示没问题,那么接下来就可以确定服务已经正常了。 如果baas.js中的BASE_URL配置正确的话,那么就可以正常运行了。 3、代码结构 代码里有注释,类库结构和调用方法都与Java版本基本一致,大家也可以参考Java版本的相关文档http://doc.wex5.com/wex5-baas-guide/。 以上所有代码是一个PHP新手,靠着API手册和百度,现学现卖搞出来的。代码中难免有遗漏错误,或者不符合大多数PHP程序员习惯的写法和用法,期待大家多多指正。 另外:如果大家使用过程中遇到各种问题,或者是有砖要拍,都请移步到官方论坛bbs.justep.com。 下载资源:baas.php.zip
本文适用于WeX5 3.2及以下版本,3.3及以上版本请参阅“Baas for .NET” 1、概述 baas是WeX5的轻量级后端服务框架,可以用于为WeX5页面快速构建后端数据服务。WeX5版本中在”apache-tomcat\webapps\baas”目录下自带了Java的版本,这里带来的是它的孪生兄弟.NET版本。 2、案例部署与测试 2.1、部署 1、下载baas.net.zip,解压到D:\baas.net。 2、打开IIS管理工具,在网站下面“添加应用程序”: (别名:baas.net;物理路径:d:\baas.net;应用程序池:ASP.NET v4.0) 3、进入X5开发工具,打开“/UI2/demo/baas/baas.js”,修改BASE_URL与上面的配置一致。 4、启动X5自带的MySql数据库,启动X5自带的Tomcat (数据库的配置在“D:\baas.net\App_Code\ X5BaasService.cs”中) 5、打开浏览器,进入“http://loalhost:8080”,打开里面的外卖及baas相关案例,这时的数据就是来源于.NET的后端baas服务了。 2.2、测试 如果上面的过程顺利的话,那么打开外卖就能看到菜单,就能下订单了。但是由于大家各自的环境差异,难免会遇到各种问题。下面提供一系列的测试手段,希望能帮助大家快速定位解决问题。 首先判断IIS是否部署成功和URL是否正确 用浏览器访问“http://127.0.0.1/baas.net/index.html”,正常的话应该显示hello。 如果这里就没通过,那么先去检查IIS是否启动,检查网站配置的端口是否是80。如果不是也没关系,可以按你自己的配置来,把baas.js里面的BASE_URL改一致就好了。 判断.NET应用服务是否能正常运行 用浏览器访问“http://127.0.0.1/baas.net/X5BaasService.asmx/HelloWorld”,正常的话应该显示外面案例中的菜单数据。 如果是这里没通过,那么首先参照上面IIS配置的要求进行检查,重点是.NET版本。 如果是提示数据库异常,请检查数据库是否启动,数据库配置是否与“D:\baas.net\App_Code\ X5BaasService.cs”中的配置相同。 如果上面几项都没问题,那么接下来就可以确定服务已经正常了。如果baas.js中的BASE_URL配置正确的话,那么就可以正常运行了。如果要跨机器访问的话,关注一下防火墙就可以了。 3、开发扩展与调试 大家可以基于baas.net去自己扩展,实现自己的后端服务。用Virsual Studio 2015(我用的就是这个版本~)打开网站,选择“D:\baas.net”就可以了。 [...]
{ // "@type" - 类型标识,"table"表明这个JSON是一个table结构的数据 "@type" : "table", // "userdata" - table的元信息 "userdata" : { // "idColumnName" - ID列的名称 "idColumnName" : "fID", // "idColumnType" - ID列的数据类型 "idColumnType" : "String", /**********可以在下面列定义中包含包含ID列,并忽略ID列定义**********/ // "relationAlias" - 列名,以逗号分隔 [...]
视频地址:http://pan.baidu.com/s/1hqlBoC8 目录 1、引言:《外卖》案例的代码不完整吗??? 2、概述 2.1、WeX5页面组成 2.2、数据绑定 3、规则表达式 3.1、数据规则 3.2、环境变量 3.3、上下文对象 3.4、ref、val和label的区别 4、绑定表达式 4.1、概述 4.2、绑定表达式的环境变量和上下文对象 4.3、特殊的ref绑定(bind-ref、bind-labelRef、bind-extRef) 4.4、数据相关的绑定表达式(bind-value、bind-checked、bind-text) 4.5、状态相关的绑定表达式(bind-visible、bind-enabled、bind-disabled、bind-hasFocus) 4.6、样式相关的绑定表达式(bind-style、bind-css) 4.7、其他HTML属性的绑定表达式(bind-attr-src、bind-attr-href、bind-attr-title、bind-attr-xxx) 4.8、HTML片段相关的绑定表达式(bind-if、binf-ifnot、bind-with、bind-foreach) 4.9、其他绑定表达式(bind-html、bind-uniqueName) 5、List组件的过滤表达式 6、表达式中使用JS对象和函数 附录、表达式环境变量及上下文对象一览表 1、引言:《外卖》案例的代码不完整吗??? WeX5自带了一个经典的《外卖》案例,实现了常见的购物车需求。但是初学者在第一次去看它的源码时,会发现它的JS代码是“不完整的”。JS代码中只有一些核心的与数据操作相关的代码片段,很多页面上的动态计算和显示都找不到相应的代码实现。 那么这些动态计算和显示是如何实现的呢?不需要写代码吗?仔细观察相关组件的属性定义,会发现它们原来都是通过一些支持表达式定义的属性来实现的。这就是现在要给大家介绍的WeX5的数据绑定了。数据绑定让很多原本需要大量的事件监控和代码编程才能完成的数据运算、规则校验和动态显示等页面逻辑,现在通过简单的表达式定义就可以轻松实现了。 购物车中菜品增加后,下面的购物车按钮会自动变成黄色,并显示项目数 购物车中菜品数量改变时,合计金额会自动计算 购物车中所有菜品数量为零时,下单按钮会自动禁用 2、概述 2.1、WeX5页面组成 首先,我们来看一下WeX5的页面组成。WeX5的页面主要由数据(Data)、视图(View)和代码(Code)三个部分组成,体现了数据与视图分离、页面描述与代码逻辑分离的核心设计思想。 数据部分包含若干个数据组件,是整个页面的数据核心; 视图部分包含布局组件、显示组件和编辑组件等各种视图组件,构成用户交互界面; [...]
WeX5.Baas服务详解 视频地址:http://pan.baidu.com/s/1jHB5XMA baas.net 版:Bass for .NET 1 概述 本案例实现了对takeout_order(外卖订单表)表的分页查询、关键字检索和修改保存的能力,数据库表结构参见WeX5自带的mysql数据库。 案例代码分为服务端和客户端两部分: 服务端包含一个servlet(com.justep.baas.test.DemoServlet),用于为客户端提供数据查询和数据保存的Web服务; 客户端包含一个.w页面(/UI2/demo/baas/simpleData/index.w),页面上的数据集通过ajax请求访问服务端提供的Web服务,实现数据的增删改查。 2 服务端 服务端实现了一个servlet(com.justep.baas.test.DemoServlet),用于为客户端提供数据查询和数据保存的Web服务。 2.1 导入baas工程 运行“启动WeX5开发工具.bat”; 打开Java透视图,选择菜单“窗口-打开透视图-Java”; 导入baas工程,选择菜单“文件-导入”,选择“常规-现有项目到工作空间中”,“下一步”,“选择根目录-浏览”,选择WeX5目录下“apache-tomcat\webapps\baas”,“完成”。 2.2 JNDI数据源配置 /baas/META-INF/context.xml <?xml version="1.0" encoding="UTF-8"?> <Context reloadable="true"> <Resource name="jdbc/takeout" type="javax.sql.DataSource" maxActive="100" maxIdle="30" driverClassName="com.mysql.jdbc.Driver" url="jdbc:mysql://127.0.0.1:3306/takeout" username="root" password="x5" /> </Context> [...]