订单结算页

收件地址分析#

用户从购物车页面点击结算，跳转到订单结算页，结算页需要加载用户对应的收件地址，如下图：

表结构分析：

CREATE TABLE `tb_address` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) DEFAULT NULL COMMENT '用户名',
  `provinceid` varchar(20) DEFAULT NULL COMMENT '省',
  `cityid` varchar(20) DEFAULT NULL COMMENT '市',
  `areaid` varchar(20) DEFAULT NULL COMMENT '县/区',
  `phone` varchar(20) DEFAULT NULL COMMENT '电话',
  `address` varchar(200) DEFAULT NULL COMMENT '详细地址',
  `contact` varchar(50) DEFAULT NULL COMMENT '联系人',
  `is_default` varchar(1) DEFAULT NULL COMMENT '是否是默认 1默认 0否',
  `alias` varchar(50) DEFAULT NULL COMMENT '别名',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=66 DEFAULT CHARSET=utf8;

我们可以根据用户登录名去tb_address表中查询对应的数据。

实现用户收件地址查询#

代码实现#

(1)业务层

业务层接口

修改changgou-service-user微服务，需改com.changgou.user.service.AddressService接口，添加根据用户名字查询用户收件地址信息，代码如下：

/***
 * 收件地址查询
 * @param username
 * @return
 */
List<Address> list(String username);

业务层接口实现类

修改changgou-service-user微服务，修改com.changgou.user.service.impl.AddressServiceImpl类，添加根据用户查询用户收件地址信息实现方法，如下代码：

/***
 * 收件地址查询
 * @param username
 * @return
 */
@Override
public List<Address> list(String username) {
    Address address = new Address();
    address.setUsername(username);
    return addressMapper.select(address);
}

(2)控制层

修改changgou-service-user微服务，修改com.changgou.user.controller.AddressController，添加根据用户名查询用户收件信息方法，代码如下：

@Autowired
private TokenDecode tokenDecode;
​
/****
 * 用户收件地址
 */
@GetMapping(value = "/list")
public Result<List<Address>> list(){
    //获取用户登录信息
    Map<String, String> userMap = tokenDecode.getUserInfo();
    String username = userMap.get("username");
    //查询用户收件地址
    List<Address> addressList = addressService.list(username);
    return new Result(true, StatusCode.OK,"查询成功！",addressList);
}

(3)创建TokenDecode

在changgou-user-service的com.changgou.UserApplication中创建TokenDecode,代码如下：

@Bean
public TokenDecode tokenDecode(){
    return  new TokenDecode();
}

测试#

Postman访问 http://localhost:8001/api/address/list

页面模板渲染#

购物车这块也使用的是模板渲染，用户先请求经过微服务网关，微服务网关转发到订单购物车模板渲染服务，模板渲染服务条用用户微服务和订单购物车微服务查询用户收件地址和购物车清单，然后到页面显示。

准备工作#

(1)静态资源导入

将资料中的order.html拷贝到changgou-web-order工程的templates中。

(2)页面跳转实现

在changgou-web-order中创建com.changgou.order.controller.OrderController实现页面跳转，代码如下：

(3)网关配置

修改changgou-gateway-web的application.yml文件，将订单的路由过滤地址添加上去，代码如下：

同时不要忘了把该地址添加到登录过滤地址中，修改com.changgou.filter.URLFilter，在orderFilterPath里添加/api/worder/**过滤，代码如下：

 

信息查询#

因为一会儿要调用changgou-service-user查询用户的收件地址信息，调用changgou-service-order查询购物车清单信息，所以我们需要创建Feign。购物车的Feign之前已经创建过了，所以只需要创建用户地址相关的即可。

(1)用户地址信息查询

在changgou-service-user-api中创建AddressFeign，代码如下：

@FeignClient(name="user")
@RequestMapping("/address")
public interface AddressFeign {
​
    /***
     * 查询用户的收件地址信息
     * @return
     */
    @GetMapping(value = "/list")
    Result<List<Address>> list();
}

(2)查询购物车和用户收件地址信息

修改changgou-web-order中的com.changgou.order.controller.OrderController的readyOrder方法，在该方法中，使用feign调用查询收件地址信息和用户购物车信息，代码如下：

(3)数据回显

修改order.html，回显收件地址信息和购物车信息，代码如下：

收件地址信息：

购物车清单：

测试效果：

(4)默认收件地址选中

上面所有数据都查询出来了，但是用户的收件地址全部选中了，这里应该只有默认收件地址选中。修改order.html代码如下：

效果如下：

记录选中收件人#

用户每次点击收件人的时候，我们需要记录收件人信息。我们可以使用Vue，定义一个订单变量，并且每次点击的时候，将该收件人信息传给Vue的一个方法在订单变量中记录选中的用户信息即可。

(1)引入vue

我们要先引入Vue,在order.html中引入vue，代码如下：

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

同时在72行左右添加一个id="app"作为Vue入口标签。

 

(2)定义记录用户信息方法

 

修改地址列表，每次点击的时候调用上面的方法，代码如下：

将选中的地址收件人信息回显到页面输出，代码如下：

测试效果如下：

(3)默认收件人加载

用户没有手动选择收件人信息的时候，收件人信息没有初始化。

我们可以在后台加载找出默认的收件人信息，前台通过Vue直接绑定给变量即可。

修改com.changgou.order.controller.OrderController,添加默认收件人信息判断，代码如下：

修改order.html，代码如下：

此时页面可以正常显示用户信息了。

支付方式选中#

支付方式为线上支付和货到付款，我们可以在order变量中定义一个属性payType,点击线上支付让他的值为1，点击货到付款，让他的值为0即可。

定义变量:

修改页面，添加点击事件：

购物车页面对接，修改cart.html页面的结算地址，代码如下：