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

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

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>

帐号		自动登录	找回密码
密码			加入黑马

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

1 个回复

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