黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第九章四 [打印本页]

作者: 我是楠楠 时间: 2020-6-4 10:40
标题: 【郑州校区】品优购电商系统开发第九章四

【郑州校区】品优购电商系统开发第九章四

4.品优购-关键字搜索
4.1 需求分析
打开搜索页面，在搜索框输入要搜索的关键字，点击搜索按钮即可进行搜索，展示搜索结果

4.2 后端代码
4.2.1 服务接口层
（1）创建 pinyougou-search-interface 模块（搜索服务接口），依赖 pinyougou-pojo
（2）创建 com.pinyougou.search.service 包，创建业务接口

[AppleScript] 纯文本查看 复制代码

public interface ItemSearchService {

/**

* 搜索

* @param keywords

* @return

*/

public Map<String,Object> search(Map searchMap);

}

4.2.2 服务实现层
（1）创建 war 工程 pinyougou-search-service ，引入 pinyougou-search-interface springdubbox 等相关依赖（参加其它服务工程）Tomcat 运行端口 9004
（2）添加 web.xml （参加其它服务工程）
（3）在 src/main/resources/spring 下 applicationContext-service.xml （参见其它服务工程）dubbo 端口 20884
（4）在 src/main/resources/spring 下创建 spring 配置文件 applicationContext-solr.xml（同demo 工程）
（5）编写服务实现类 ItemSearchServiceImpl.java

[AppleScript] 纯文本查看 复制代码

@Service(timeout=3000)

public class ItemSearchServiceImpl implements ItemSearchService{

@Autowired

private SolrTemplate solrTemplate;

@Override

public Map<String, Object> search(Map searchMap) {

Map<String,Object> map=new HashMap<>();

Query query=new SimpleQuery();

//添加查询条件

Criteria criteria=new

Criteria("item_keywords").is(searchMap.get("keywords"));

query.addCriteria(criteria);

ScoredPage<TbItem> page = solrTemplate.queryForPage(query, TbItem.class);

map.put("rows", page.getContent());

return map;

}

}

4.2.3 控制层
（1）创建 pinyougou-search-web 工程，引入依赖（参见其它 web 模块），tomcat 运行端口 9104
（2）添加 web.xml （参加其它 web 工程）
（3）添加配置文件（内容参加其它 web 工程）
（4）创建包 com.pinyougou.search.controller 编写控制器类

[AppleScript] 纯文本查看 复制代码

@RestController

@RequestMapping("/itemsearch")

public class ItemSearchController {

@Reference

private ItemSearchService itemSearchService;

@RequestMapping("/search")

public Map<String, Object> search(@RequestBody Map searchMap ){

return itemSearchService.search(searchMap);

}

}

4.3 前端代码
4.3.1 拷贝资源
将下列资源拷贝至 pinyougou-search-web

将 angularJS 拷贝到插件文件夹
拷贝 base.js 到 js 文件夹

4.3.2 服务层

[AppleScript] 纯文本查看 复制代码

pinyougou-search-web 工程创建 searchService.js

//搜索服务层

app.service("searchService",function($http){

this.search=function(searchMap){

return $http.post('itemsearch/search.do',searchMap);

}

});

4.3.3 控制层

[AppleScript] 纯文本查看 复制代码

pinyougou-search-web 工程 searchController.js

app.controller('searchController',function($scope,searchService){

//搜索

$scope.search=function(){

searchService.search( $scope.searchMap ).success(

function(response){

$scope.resultMap=response;//搜索返回的结果

}

);

}

});

4.3.4 页面
pinyougou-search-web 工程 search.html

引入 js

[AppleScript] 纯文本查看 复制代码

<script type="text/javascript" src="plugins/angularjs/angular.min.js"> </script>

<script type="text/javascript" src="js/base.js"> </script>

<script type="text/javascript" src="js/service/searchService.js"> </script>

<script type="text/javascript" src="js/controller/searchController.js"> </script>

指定控制器

[AppleScript] 纯文本查看 复制代码

<body ng-app="pinyougou" ng-controller="searchController">

绑定搜索框

[AppleScript] 纯文本查看 复制代码

<div class="input-append">

<input type="text" id="autocomplete" ng-model="searchMap.keywords" type="text"

class="input-error input-xxlarge" />

<button class="sui-btn btn-xlarge btn-danger" ng-click="search()" type="button">

搜索</button>

</div>

循环显示数据

[AppleScript] 纯文本查看 复制代码

<li class="yui3-u-1-5" ng-repeat="item in resultMap.rows">

<div class="list-wrap">

<div class="p-img">

<a href="item.html" target="_blank"><img src="{{item.image}}" /></a>

</div>

<div class="price">

<strong>

<em>¥</em>

<i>{{item.price}}</i>

</strong>

</div>

<div class="attr">

<em>{{item.title}}</em>

</div>

<div class="cu">

<em><span>促</span>满一件可参加超值换购</em>

</div>

<div class="commit">

<i class="command">已有 2000 人评价</i>

</div>

<div class="operate">

<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered

btn-danger">加入购物车</a>

<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>

<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>

</div>

</div>

</li>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2