以下部分在eclipse中操作

1、匯入jar包   fastjson

<dependency>

    <groupId>com.alibaba</groupId>

    <artifactId>fastjson</artifactId>

    <version>1.2.47</version>

</dependency>

2、在controller中使用json傳送資料

@ResponseBody  使用這個註解可直接返回字串，而不是地址

使用  JSONObiect.toJSONString() 方法直接把 Object物件轉化為Stirng物件 

亂碼問題解決方式 一

亂碼問題解決方式二

<mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <!-- @ResponseBody亂碼問題，將StringHttpMessageConverter的預設編碼設為UTF-8 -->
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <!-- 配置Fastjson支援 -->
            <bean class="com.neuedu.core.JsonHttpMessageConverter">
                <property name="charset" value="UTF-8"/>
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json</value>
                        <value>text/html;charset=UTF-8</value>
                    </list>
                </property>
                <property name="features">
                    <list>
                        <value>WriteMapNullValue</value>
                        <value>QuoteFieldNames</value>
                        <value>WriteDateUseDateFormat</value>
                        <value>WriteEnumUsingToString</value>
                        <value>WriteNullStringAsEmpty</value>
                        <value>WriteNullListAsEmpty</value>
                        <value>DisableCircularReferenceDetect</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
   </mvc:annotation-driven>
 

3、跨域問題，因為在不用ide中編寫程式碼，所以資料在傳輸過程中需要解決跨域問題

<filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>
 

以下部分在Hbuilder中操作

1、建立相對應的web專案，即介面，引入相關JS

2、知識點

2.1 ajax

2.2 vue.js   需要新增vus.min.js

2.3 引用Vue中定義的資料和方法

2.4 Vue()內部引用變數

2.5 雙向繫結

2.6 獲取URL後面的？傳值

①首先定義URL

②解析URL，獲取變數陣列

function GetRequest() {
                var url = location.search; //獲取url中"?"符後的字串
                var theRequest = new Object();
                if(url.indexOf("?") != -1) {
                     var str = url.substr(1);
                     strs = str.split("&");
                     for(var i = 0; i < strs.length; i++) {
                           theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                     }
                }
                return theRequest;
}

③定義變數接收

var Request = new Object();
Request = GetRequest(); //接收②方法得來的陣列
var id = Request["id"]; //獲得商品id，[]中的id是①中變數名 

2.7 不使用Vue()的賦值方法