前面把页面结构以及页面跳转做完以后，接下来就是数据获取。

首先就是列表数据获取，其次是详情页数据获取。

在前端中我们通过ajax请求java编写的接口获取数据，而今天要记录的就是前端请求接口的方式以及后端服务端数据接口的编写。

一.前端获取数据方式

我们都知道在传统的单例项目中，前端使用JSP，通过ajax以及表单提交，后端通过Struts2或者springMVC的dispatcher拦截这些请求从而返回数据，以往调用接口也是使用java调用远程接口，然后将数据返回到前端，现在问题来了：我们直接在前端中使用ajax去调用远程接口就有跨域问题，因为Ajax是不支持跨域问题的，因此我们是访问不到远程服务接口的。

关于跨域问题有一篇很好的博客推荐：https://segmentfault.com/a/1190000012469713

其实对于一个对前端不太了解的人来说跨域我是真的不太懂的，网上关于HBuilder开发APP解决ajax的跨域问题方案很多，不过许多都不行，你可以写个服务端简单的servlet，然后用官网那个ajax页面调用你的远程servlet，我当初解决方法说一下（我也不知道原理）

将页面引入的mui.js中大概3155行的setHeader('X-Requested-With', 'XMLHttpRequest');这句话注释掉。

当然可如果在真机运行时一般不会出现这个问题的。

请注意：跨域问题报错为：

XMLHttpRequest cannot load http://avst.tv/webAPP/web/index.php.
No 'Access-Control-Allow-Origin' header is present on the 
requested resource. Origin 'http://127.0.0.1:8020' 
is therefore not allowed access

其他可能就是你的请求与返回的数据格式有问题了。

因为是请求的json数据，所以直接使用mui封装的mui.getJSON()。

mui.getJSON(
"http://qcph5j.natappfree.cc/YSJ/cxf/rest/product/List",
 data, 
function(rsp) {});

由于在官网中有一个列表获取数据的例子，所以我将请求地址以及字段修改后就可以了

<script>
var lastId = ''; //最新列表的id
//初始化中包括列表初始数据的获取，采用下拉更新
mui.init({
//下拉初始化
pullRefresh: {
//取得ul容器
    container: '#list',
    down: {
        style: 'circle',
        offset: '0px',
        auto: true,//首次计入自动刷新
        callback: function() {
            //下拉后的回调函数：检查是否联网，若未连接网络不执行下面操作了
            if(window.plus && plus.networkinfo.getCurrentType() ===             plus.networkinfo.CONNECTION_NONE) {
            plus.nativeUI.toast('似乎已断开与互联网的连接', {
            verticalAlign: 'top'
        });
            return;
    }

    //定义需要请求获取的字段名
    var data = {
        column: "id,post_id,title,author_name,cover,published_at"
    }

    if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
        data.lastId = lastId;
        data.time = new Date().getTime() + "";
    }

    //ajax远程调用：请求列表信息流。
        mui.getJSON("http://qcph5j.natappfree.cc/YSJ/cxf/rest/product/List", data,     function(rsp) {
    //调用成功后，下拉容器结束刷新（必须调用）
    mui('#list').pullRefresh().endPulldown();

    //如果返回有数据
    if(rsp && rsp.length > 0) {
        lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
        news.items = news.items.concat(convert(rsp));
    }
    });
  }
}
}
});

//创建vue对象
var news = new Vue({
    el: '#product_list',
    data: {
    banner: {}, //顶部banner数据
    items: [] //列表信息流数据
    }
});

/**
* 1、将服务端返回数据，转换成前端需要的格式
* 2、若服务端返回格式和前端所需格式相同，则不需要改功能
*
* @param {Array} items 
*/
function convert(items) {
    var newItems = [];
    items.forEach(function(item) {
    newItems.push({
    guid: item.post_id,
    title: item.title,
    author: item.author_name,
    cover: item.cover,
    time:dateUtils.format(item.published_at)
    });
    });
    return newItems;
}




/********************************************工具方法***********************************/
/**
* 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
*/
var dateUtils = {
    UNITS: {
        '年': 31557600000,
        '月': 2629800000,
        '天': 86400000,
        '小时': 3600000,
        '分钟': 60000,
        '秒': 1000
},
humanize: function(milliseconds) {
    var humanize = '';
    mui.each(this.UNITS, function(unit, value) {
        if(milliseconds >= value) {
        humanize = Math.floor(milliseconds / value) + unit + '前';
        return false;
    }
    return true;
});
    return humanize || '刚刚';
},
format: function(dateStr) {
    var date = this.parse(dateStr)
    var diff = Date.now() - date.getTime();
    if(diff < this.UNITS['天']) {
        return this.humanize(diff);
    }

var _format = function(number) {
    return(number < 10 ? ('0' + number) : number);
};
return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
},
parse:function (str) {//将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
var a = str.split(/[^0-9]/);
return new Date (a[0],a[1]-1,a[2],a[3],a[4],a[5] );
}
};
</script>

同样的详情页请求数据也是如此。

这里面有vue的影子，它用来将请求数据写入到html的元素中去，如果不喜欢使用它，完全可以使用jquery进行循环插入数据。

下面就是列表打开详情页：

首先在列表中预加载详情页，同时将部分数据传到详情页：

mui.plusReady(function() {
    //预加载详情页
    webview_detail = mui.preload({
	                url: 'product_info.html',
			id: 'news_detail',
			styles: {
				"render": "always",
				"popGesture": "hide",
				"bounce": "vertical",
				"bounceBackground": "#efeff4",
				}
			});
		});

		//打开详情
		function open_detail(item) {
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					guid: item.guid,
					title:item.title,
					author:item.author,
					time:item.time,
					cover:item.cover
				});
				setTimeout(function () {
					webview_detail.show("slide-in-right", 300);
				},150);
			}

这样打开详情页之后就可以将传入过来的数据直接使用例如：{ {guid}}来将guid数据写道html组件中。

之后剩余数据可以再次使用ajax去服务端请求。

二.服务端开发接口

客户端能够请求了，服务端接口就要进行开发了。

这里不讲解和数据库的交互了，主要简单的列出自己开发接口的方式。

采用rest风格的webservice进行接口开发，没错就是使用基于jax-rs风格

首先maven依赖

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <cxf.version>3.0.0</cxf.version>
    <spring.version>4.1.6.RELEASE</spring.version>
    <mybatis.version>3.4.0</mybatis.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <!--cxf-->
      <dependency>
          <groupId>org.apache.cxf</groupId>
          <artifactId>cxf-rt-frontend-jaxws</artifactId>
          <version>${cxf.version}</version>
    </dependency>
    <dependency>
      <groupId>org.apache.cxf</groupId>
      <artifactId>cxf-rt-frontend-jaxrs</artifactId>
      <version>${cxf.version}</version>
    </dependency>
      <dependency>
          <groupId>org.apache.cxf</groupId>
          <artifactId>cxf-rt-transports-http</artifactId>
          <version>${cxf.version}</version>
      </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.jaxrs</groupId>
      <artifactId>jackson-jaxrs-json-provider</artifactId>
      <version>2.4.1</version>
    </dependency>




    <!-- spring核心包 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-oxm</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!--mybatis包-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>

    <!-- mybatis/spring包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.0</version>
    </dependency>

    <dependency>
      <groupId>javax.mail</groupId>
      <artifactId>mail</artifactId>
      <version>1.4</version>
    </dependency>

    <!--fastjson-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.49</version>
    </dependency>

    <!--servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
  </dependencies>

然后是编写接口：

package com.sjyang.webservice.serve;

/**
 * @Author:Yangsaijun
 * @Description:商品管理接口
 * @Date Created in 16:55 2018/9/11
 */

import com.alibaba.fastjson.JSONObject;

import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

/***
 * @Produces注释用来指定将要返回给client端的数据标识类型（MIME）。
 * @Produces可以作为class注释，也可以作为方法注释，方法的@Produces注释将会覆盖class的注释。
 * @Consumes与@Produces相反，用来指定可以接受client发送过来的MIME类型，同样可以用于class或者method，也可以指定多个MIME类型，一般用于@PUT，@POST
 * @Path获取url中指定参数名称，例如@Path("{username"})
 * @QueryParam 获取get请求中的查询参数
 * @FormParam获取post请求中表单中的数据
 * @BeanParam获取请求参数中的数据，用实体Bean进行封装
 *
 */
@Path("/product")
@Produces({MediaType.APPLICATION_JSON})
@Consumes({MediaType.APPLICATION_JSON})
public interface Product {

    //获取商品列表
    @GET
    @Path(value="/List")
    public String getList();

    @GET
    @Path(value="/res1")
    public Response getResponse();

    @GET
    @Path(value="/string/{name}")
    public String getJson(@PathParam("name")String name);

    @POST
    @Path(value="/user")
    public String postJson();
}

其中的注解如果规定Get请求则必须使用get请求，否则不通。然后编写实现类：

package com.sjyang.webservice.serve.impl;

import com.alibaba.fastjson.JSONObject;
import com.sjyang.webservice.serve.Product;

import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.Status;

/**
 * @Author:Yangsaijun
 * @Description
 * @Date Created in 17:13 2018/9/11
 */
public class ProductImp implements Product {

    /**
     * 获取商品列表
     * @return
     */
    @Override
    public String getList() {
        String json = "[{\"id\":69729,\"from_id\":\"36kr\",\"title\":\"自定义标题\",\"summary\":\"不知道\",\"column_id\":\"208\",\"column_name\":\"列明\",\"author_name\":\"作者名\",\"author_email\":\"邮箱\",\"author_avatar\":\"\",\"post_id\":\"5152966\",\"cover\":\"https:\\/\\/pic.36krcnd.com\\/201809\\/12085419\\/1ffhy23bq6acvfxm!heading\",\"content\":\"\",\"views_count\":48,\"comments_count\":0,\"published_at\":\"2018-09-12 17:01:28\",\"store_at\":\"0000-00-00 00:00:00\",\"type\":\"news\",\"created_at\":\"2018-09-12 17:12:05\",\"updated_at\":\"2018-09-12 17:12:05\"}]";
        return json;
    }

    @Override
    public Response getResponse() {
        Response.ResponseBuilder rb = Response.status(Status.OK);
        return rb.entity("Hello").build();
    }

    @Override
    public String getJson(String name) {
        JSONObject json = new JSONObject();
        json.put("name","ysj");
        return json.toJSONString();
    }

    @Override
    public String postJson() {
        JSONObject json = new JSONObject();
        json.put("name","ysj");
        return json.toJSONString();
    }
}

然后就是spring的配置文件配合CXF进行发布服务了：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:jaxrs="http://cxf.apache.org/jaxrs"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://cxf.apache.org/jaxrs
						   http://cxf.apache.org/schemas/jaxrs.xsd">


    <import resource="classpath:META-INF/cxf/cxf.xml" />
    <import resource="classpath:META-INF/cxf/cxf-servlet.xml" />

    <!-- 描述相关服务 -->
    <bean id="demoImpl" class="com.sjyang.webservice.serve.impl.ProductImp"></bean>
    <bean id="repertoryImp" class="com.sjyang.webservice.serve.impl.RepertoryImp"></bean>

    <!--发布第一个类型的服务-->
    <jaxrs:server address="/rest">
        <jaxrs:serviceBeans>
            <ref bean="demoImpl" />
        </jaxrs:serviceBeans>
        <jaxrs:providers>
            <bean class="com.fasterxml.jackson.jaxrs.json.JacksonJsonProvider" />
        </jaxrs:providers>
    </jaxrs:server>

    <!--发布第二个类型的服务-->
    <jaxrs:server address="/newserve">
        <jaxrs:serviceBeans>
            <ref bean="repertoryImp" />
        </jaxrs:serviceBeans>
        <jaxrs:providers>
            <bean class="com.fasterxml.jackson.jaxrs.json.JacksonJsonProvider" />
        </jaxrs:providers>
    </jaxrs:server>

</beans>

这里因为我自己写了两个接口类，所以发布了两个，里面一共10个接口。

最后就是项目启动web.xml该做的事情了：

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>


  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <!-- 容器创建<listener>中的类实例，创建监听器。  -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 用来声明一个servlet,CXFServlet是 -->
  <servlet>
    <servlet-name>cxf</servlet-name>
    <servlet-class>org.apache.cxf.transport.servlet.CXFServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>cxf</servlet-name>
    <url-pattern>/cxf/*</url-pattern>
  </servlet-mapping>

  <session-config>
    <session-timeout>60</session-timeout>
  </session-config>

  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

启动项目，测试一下吧，访问地址是这样的几个部分组成：

http://IP:端口号/项目名/web.xml中cxf应该拦截的名/发布的地址/接口类定义的地址/方法前的地址

以我的为例：

http://localhost:8080/YSJ/cxf/rest/product/List就可以在浏览器里直接获取json数据啦

组合下：