尚品汇-H5移动端整合系统（五十五）

（1）运行前端页面

（2）启动前端页面

（3）添加搜索分类接口

（4）购物车模块修改

（5）登录模块

（6）订单模块

（7）支付系统

（8）查看我的订单

（1）运行前端页面

将页面放入nginx中配置nginx.conf

server {listen       8989;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   h5;index  index.html index.htm;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}     }

前面用的8086，这里新添加一个server

重要！ 访问首页之后点击我的设置修改 base路径改为当前网关地址 http://localhost

（2）启动前端页面

ServerGatewayApplication :80/

ServiceProductApplication [devtools] :8206/

ServiceListApplication [devtools] :8203/

ServiceItemApplication [devtools] :8202/

查看首页，

商品检索：

在Nacos网关配置中添加配置

- id: service-list

uri: lb://service-list

predicates:

- Path=/*/list/** # 路径匹配

商品详情

需要项目启动，启动成功后就行获取数据列表

其次需要修改配置：

（3）添加搜索分类接口

这个分类接口不同需要修改：

service-product

代码跟原来写的一样，只是路经不同，新建一个conttroller

/*** date:2022/6/21 10:34* 描述：**/
@RestController
@RequestMapping("/api/product/")
public class IndexApiController {@Autowiredprivate ManageService manageService;@GetMapping("getBaseCategoryList")public Result getBaseCategoryList(){//  调用服务层方法List<JSONObject> list = manageService.getBaseCategoryList();return Result.ok(list);}
}

（4）购物车模块修改

实现选择清空状态保存：

购物车控制器：


@GetMapping("/allCheckCart/{isChecked}")
public Result allCheckCart(@PathVariable Integer isChecked,HttpServletRequest request){//  获取用户IdString userId = AuthContextHolder.getUserId(request);//  判断用户Id 为空if (StringUtils.isEmpty(userId)){userId = AuthContextHolder.getUserTempId(request);}//  调用方法this.cartService.allCheckCart(userId,isChecked);//  默认返回return Result.ok();
}

接口：


/*** 选中购物车列表* @param userId* @param isChecked*/
void allCheckCart(String userId, Integer isChecked);

实现类：


@Override
public void allCheckCart(String userId, Integer isChecked) {//  获取到购物车keyString cartKey = this.getCartKey(userId);List<CartInfo> cartInfoList = this.redisTemplate.opsForHash().values(cartKey);//  声明一个Map 集合HashMap<String, Object> hashMap = new HashMap<>();//  循环遍历for (CartInfo cartInfo : cartInfoList) {cartInfo.setIsChecked(isChecked);hashMap.put(cartInfo.getSkuId().toString(),cartInfo);}//  将数据存储到购物车中this.redisTemplate.opsForHash().putAll(cartKey,hashMap);
}

选中后，再刷新页面也可以选中：

清空: /api/cart/clearCart

@GetMapping("clearCart")
public Result clearCart(HttpServletRequest request){// 如何获取userIdString userId = AuthContextHolder.getUserId(request);if (StringUtils.isEmpty(userId)) {// 获取临时用户IduserId = AuthContextHolder.getUserTempId(request);}cartService.clearCart(userId);return Result.ok();
}

/*** 清空购物车* @param userId*/
void clearCart(String userId);

@Override
public void clearCart(String userId) {//  获取购物车keyString cartKey = getCartKey(userId);//  删除数据redisTemplate.delete(cartKey);
}

点击清空：

清空后刷新页面就没了

（5）登录模块

点击结算，判断是否登录，进行跳转登录页面

登录模块信息发生变化：

将原来的接收对象UserInfo 改为LoginVo

@Data
@ApiModel(description="登录对象")
public class LoginVo {@ApiModelProperty(value = "手机号")private String phone;@ApiModelProperty(value = "密码")private String password;@ApiModelProperty(value = "IP")private String ip;
}

这里可以改登录的接口实体类，先进行演示，但是已改就不能通用了，我们可以吧这个接口改成通用的接口，或者重新写一个登录的接口

@PostMapping("login")
public Result login(@RequestBody LoginVo loginVo, HttpServletRequest request){控制器内容不变
}

接口：

UserInfo login(LoginVo loginVo);

实现类：


@Override
public UserInfo login(LoginVo loginVo) {//  select * from user_info where login_name = ? and passwd = ?QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();//  adminuserInfoQueryWrapper.eq("login_name",loginVo.getPhone());//  111111 ---> 加密之后的数据。 对其进行了md5加密String passwd = loginVo.getPassword();String newPassword = DigestUtils.md5DigestAsHex(passwd.getBytes());//  96e79218965eb72c92a549dd5a330112userInfoQueryWrapper.eq("passwd",newPassword);UserInfo info = userInfoMapper.selectOne(userInfoQueryWrapper);//  判断if (info!=null){return info;}return null;
}

登录成功跳转到订单页面：

（6）订单模块

点击去结算：

收货地址列表

控制器：http://localhost/api/user/userAddress/auth/findUserAddressList

//  http://localhost/api/user/userAddress/auth/findUserAddressList
@GetMapping("userAddress/auth/findUserAddressList")
public Result findUserAddressList(HttpServletRequest request){String userId = AuthContextHolder.getUserId(request);return Result.ok(userAddressService.findUserAddressListByUserId(userId));
}

（7）支付系统

这里我们现为了演示，先修改部分代码，到时候需要提供两个接口

生成二维码：要替换掉原来的对象AlipayTradeWapPayRequest alipayRequest = new AlipayTradeWapPayRequest();
bizContent.put("product_code", "QUICK_WAP_WAY");

（8）查看我的订单

添加一个状态查询参数：

@GetMapping("/auth/{page}/{limit}")public Result getOrderPage(@PathVariable Long page,@PathVariable Long limit,HttpServletRequest request){//  获取到用户IdString userId = AuthContextHolder.getUserId(request);String orderStatus = request.getParameter("orderStatus");//  声明一个 page 对象Page<OrderInfo> orderInfoPage = new Page<>(page, limit);//  调用服务层方法查询数据：第二个参数？IPage<OrderInfo> infoIPage = this.orderService.getOrderPage(orderInfoPage,userId,orderStatus);//  返回数据return Result.ok(infoIPage);}

    @Overridepublic IPage<OrderInfo> getOrderPage(Page<OrderInfo> orderInfoPage, String userId, String orderStatus) {IPage<OrderInfo> infoIPage = orderInfoMapper.selectUserOrderPage(orderInfoPage,userId,orderStatus);//  获取到订单状态：中文infoIPage.getRecords().stream().forEach(orderInfo -> {orderInfo.setOrderStatusName(OrderStatus.getStatusNameByStatus(orderInfo.getOrderStatus()));});//  返回数据。return infoIPage;}

IPage<OrderInfo> selectUserOrderPage(Page<OrderInfo> orderInfoPage, @Param("userId") String userId, @Param("orderStatus")String orderStatus);

<select id="selectUserOrderPage" resultMap="OrderInfoMap">SELECToi.id,oi.consignee,oi.consignee_tel,oi.total_amount,oi.order_status,oi.user_id,oi.payment_way,oi.delivery_address,oi.order_comment,oi.out_trade_no,oi.trade_body,oi.create_time,oi.expire_time,oi.process_status,od.id detail_id,od.order_id,od.sku_id,od.sku_name,od.img_url,od.order_price,od.sku_num,od.create_timeFROMorder_info oiINNER JOIN order_detail od ON od.order_id = oi.id<where>AND user_id = #{userId}AND oi.order_status NOT IN ('CLOSED', 'SPLIT')<if test="orderStatus != null and orderStatus != ''">and oi.order_status = #{orderStatus}</if></where>ORDER BYoi.id DESC
</select>