第04項目：淘淘商城(SpringMVC+Spring+Mybatis) 的學習實踐總結【第五天】

時間  2019-11-11
標籤 項目 淘淘 商城 springmvc+spring+mybatis springmvc spring mybatis 學習 實踐 總結 第五天 欄目 MyBatis 简体版
原文   原文鏈接

https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040html

第04項目：淘淘商城(SpringMVC+Spring+Mybatis) 的學習實踐總結【第四天】前端

第04項目：淘淘商城(SpringMVC+Spring+Mybatis) 的學習實踐總結【第五天】java

 

開發環境：web

Eclipse IDE for Enterprise Java Developers
OS: Windows 10, v.10.0, x86_64 / win32
Java version: 1.8.0_221ajax

05.第五天（前臺工程搭建、首頁商品類目顯示）

 

taotao-rest項目spring

web.xml數據庫

    <!-- springmvc的前端控制器 -->
    <servlet>
        <servlet-name>taotao-rest</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- contextConfigLocation不是必須的， 若是不配置contextConfigLocation， 
        springmvc的配置文件默認在：WEB-INF/servlet的name+"-servlet.xml" -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>taotao-rest</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>

由於springMVC在web.xml裏配置的前端控制器的url-pattern攔截的不是：/json

因此在開發時resources目錄下的springmvc.xml裏就不須要配置靜態資源的映射，由於這些靜態資源在瀏覽器發送請求時沒有被攔截。跨域

 03.服務層工程搭建

 1、跳過測試的Maven命令：install -DskipTests

install -DskipTests

 

2、 放置靜態資源的目錄是 webapp目錄

taotao-portal項目模塊瀏覽器

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>taotao-portal-web</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>

    <!-- 加載spring容器，注意修改通配符 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/applicationContext-*.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- 解決post亂碼 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <!-- <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param> -->
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>


    <!-- springmvc的前端控制器 -->
    <servlet>
        <servlet-name>taotao-portal</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- contextConfigLocation不是必須的， 若是不配置contextConfigLocation， 
        springmvc的配置文件默認在：WEB-INF/servlet的name+"-servlet.xml" -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>taotao-portal</servlet-name>
        <!-- 僞靜態化給搜索引擎看的 -->
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
</web-app>
View Code

 

5  商品分類展現

首頁左側有一個商品分類。當鼠標分類上，須要展現出此分類下的子分類。

當鼠標滑動到鏈接上觸發mousemove事件。頁面作一個ajax請求，請求json數據包含分類信息，獲得json數據後初始化分類菜單，展現。

 Eclipse快捷鍵：Ctrl+L，這樣直接彈出Go to line對話框，在裏面輸入要跳轉到的行號，按回車或者單擊‘肯定’。

或者找到Eclipse界面下的狀態欄，找到行號列，雙擊它，也會彈出Go to line對話框，也是輸入行號，而後按回車鍵。

而後在webapp目錄下copy一個category.json

使用JSON Viewer能夠Format這個json而後方便查看分析其結構組成。

第一層：u、n（包含a標籤）、i

第二層：u、n、i

第三層：字符串

使用ajax訪問本工程的json數據(jQuery的方式)

 本項目調試前端頁面用FireFox火狐瀏覽器正常顯示，但使用搜狗瀏覽器訪問不顯示左側的商品分類。

數據須要從taotao-rest中調用服務得到。

將category.json移動到taotao-rest模塊下的webapp目錄下，瀏覽器訪問能夠請求到該json文件。

http://localhost:8081/category.json

 

5.3   Ajax跨域請求

ajax是不能跨域請求。出於安全考慮，js設計時不能夠跨域。

什麼是跨域：

一、域名不一樣時。

二、域名相同，端口不一樣。

 

只有域名相同、端口相同時，才能夠訪問。

 

可使用jsonp解決跨域問題。

Jsonp其實就是一個跨域解決方案。js跨域請求數據是不能夠的，可是js跨域請求js腳本是能夠的。能夠把數據封裝成一個js語句，作一個方法的調用。跨域請求js腳本能夠獲得此腳本。

獲得js腳本以後會當即執行。

能夠把數據作爲參數傳遞到方法中。就能夠得到數據。從而解決跨域問題。

 

 

 

 

 

5.4   從數據庫中取商品分類列表

5.4.1   Dao層

可使用逆向工程生成的代碼。

5.4.2   Service層

查詢全部商品分類生成前臺頁面要求的json數據格式。返回一個pojo。

須要建立兩個pojo

一、分類列表的節點。包含u、n、i屬性。

package com.taotao.rest.pojo;

import java.util.List;

import com.fasterxml.jackson.annotation.JsonProperty;

public class CatNode {
    
    // @JsonProperty此註解用於pojo成員屬性上，做用是把該屬性的名稱序列化爲另一個名稱
    @JsonProperty("n")
    private String name;
    @JsonProperty("u")
    private String url;
    @JsonProperty("i")
    private List<?> item;
    
    //Shift+Alt+S 快捷鍵
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public List<?> getItem() {
        return item;
    }
    public void setItem(List<?> item) {
        this.item = item;
    }
    

}
//@JsonProperty此註解用於pojo成員屬性上

 

二、返回值pojo。包含data屬性是一個list類型。

放到taotao-rest工程中。其餘的項目不用到。

package com.taotao.rest.pojo;

import java.util.List;

public class CatResult {
    private List<?> data;

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
    
    
}
View Code

 

Service層

//門戶左側商品分類服務
@Service
public class ItemCatServiceImpl implements ItemCatService {

    @Autowired
    private TbItemCatMapper ibItemCatMapper;

    @Override
    public CatResult getItemCatList() {
        CatResult catResult = new CatResult();
        // 查詢商品分類列表
        // 調用類中私有方法
        catResult.setData(getCatList(0));
        return catResult;
    }

    // 查詢商品分類列表的私有方法
    private List<?> getCatList(long parentId) {
        // 建立查詢條件
        TbItemCatExample example = new TbItemCatExample();
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);

        // 執行Example查詢
        List<TbItemCat> list = ibItemCatMapper.selectByExample(example);
        // 返回值list
        List resultList = new ArrayList<>();

        // 向list中添加節點
        // 遞歸
        for (TbItemCat tbItemCat : list) {

            // 判斷是否爲父節點
            if (tbItemCat.getIsParent()) {

                CatNode catNode = new CatNode();
                if (parentId == 0) {
                    catNode.setName(
                            "<a href='/products/" + tbItemCat.getId() + ".html'>" + tbItemCat.getName() + "</a>");
                } else {
                    catNode.setName(tbItemCat.getName());
                }
                catNode.setUrl("/products/" + tbItemCat.getId() + ".html");
                catNode.setItem(getCatList(tbItemCat.getId()));

                resultList.add(catNode);
                // 若是是葉子節點
            } else {
                resultList.add("/products/" + tbItemCat.getId() + ".html|" + tbItemCat.getName());
            }

        }
        return resultList;
    }
}

 Controller層

接收頁面傳遞過來的參數。參數就是方法的名稱。返回一個json數據，須要把json數據包裝成一句js代碼。返回一個字符串。

參數：回調方法名稱

返回值：字符串

爲了防止頁面請求到的JSON中文亂碼，須要添加,produces="MediaType.APPLICATION_JSON_VALUE"+";charset=utf-8"

//商品分類列表
@Controller
public class ItemCatController {
    
    @Autowired
    private ItemCatService itemCatService;

    @RequestMapping(value="/itemcat/list", produces="MediaType.APPLICATION_JSON_VALUE"+";charset=utf-8")
    @ResponseBody
    public String getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();
        //把pojo轉換成字符串
        String json = JsonUtils.objectToJson(catResult);
        //拼裝返回值
        String result = callback + "(" + json + ");";
        return result;
    }
}

 

 

taotao-rest的查詢商品分類列表Controller

//商品分類列表
@Controller
public class ItemCatController {
    
    @Autowired
    private ItemCatService itemCatService;

    @RequestMapping("/itemcat/list")
    @ResponseBody
    public Object getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();        
        
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
        
        mappingJacksonValue.setJsonpFunction(callback);        
        return mappingJacksonValue;
    }

}

 

http://localhost:8081/rest/itemcat/list?callback=myfunction

修改lib-v1.js

 

 

============================================

參考資料：

Java：關於List類中的add、addAll和set方法

produces在@requestMapping中的使用方式

Java集合與泛型中的陷阱

end

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程