1. 用户中心 132
2. 展示基本数据实现 132
2.1 业务接口 132
实体类UserAccountInfo
micr-api
package com.bjpowernode.api.pojo;
import com.bjpowernode.api.model.User;
import java.math.BigDecimal;
/**
* 用户中心基本数据和资金的实体类 132
*/
public class UserAccountInfo extends User {
private BigDecimal availableMoney;
public BigDecimal getAvailableMoney() {
return availableMoney;
}
public void setAvailableMoney(BigDecimal availableMoney) {
this.availableMoney = availableMoney;
}
}micr-api
UserService
//用户中心基本数据和资金信息 132
UserAccountInfo queryUserAllInfo(Integer uid);2.2 业务接口实现类 132
micr-dataservice
UserServiceImpl
//用户中心基本数据和资金信息 132
@Override
public UserAccountInfo queryUserAllInfo(Integer uid) {
UserAccountInfo info = null;
if(uid != null && uid >0){
info = userMapper.selectUserAccountById(uid);
}
return info;
}2.3 在mapper中定义方法 132
micr-dataservice
UserMaper
//获取用户中心基本数据和资金信息 132
UserAccountInfo selectUserAccountById(Integer uid);2.4 编写sql
micr-dataservice
UserMapper.xml
<resultMap id="UserAccountMap" type="com.bjpowernode.api.pojo.UserAccountInfo">
<id column="id" jdbcType="INTEGER" property="id" />
<result column="phone" jdbcType="VARCHAR" property="phone" />
<result column="login_password" jdbcType="VARCHAR" property="loginPassword" />
<result column="name" jdbcType="VARCHAR" property="name" />
<result column="id_card" jdbcType="VARCHAR" property="idCard" />
<result column="add_time" jdbcType="TIMESTAMP" property="addTime" />
<result column="last_login_time" jdbcType="TIMESTAMP" property="lastLoginTime" />
<result column="header_image" jdbcType="VARCHAR" property="headerImage" />
<result column="available_money" jdbcType="DECIMAL" property="availableMoney" />
</resultMap>
<!--获取用户中心基本数据和资金信息 132-->
<select id="selectUserAccountById" resultMap="UserAccountMap">
SELECT
u.*,
a.available_money
FROM
u_user u
JOIN u_finance_account a ON u.id = a.uid
WHERE
u.id = #{uid}
</select>2.5 消费controller 133
micr-web
UserController
//获取用户中心的基本数据和资金信息 133
@ApiOperation(value = "用户中心")
@GetMapping("/usercenter") //@RequestHeader表示从用户的请求头中获取数据 133
public RespResult userCenter(@RequestHeader("uid") Integer uid){
RespResult result = RespResult.fail();
if( uid != null && uid > 0 ){
UserAccountInfo userAccountInfo = userService.queryUserAllInfo(uid);
if( userAccountInfo != null ){
result = RespResult.ok();
Map<String,Object> data = new HashMap<>();
data.put("name",userAccountInfo.getName());
data.put("phone",userAccountInfo.getPhone());
data.put("headerUrl",userAccountInfo.getHeaderImage());
data.put("money",userAccountInfo.getAvailableMoney());
if( userAccountInfo.getLastLoginTime() != null){
data.put("loginTime", DateFormatUtils.format(
userAccountInfo.getLastLoginTime(),"yyyy-MM-dd HH:mm:ss"));
} else {
data.put("loginTime","-");
}
result.setData(data);
}
}
return result;
}3. 展示最近充值 134
3.1 业务接口 134
micr-api
RechargeService
package com.bjpowernode.api.service;
import com.bjpowernode.api.model.RechargeRecord;
import java.util.List;
//充值业务接口 134
public interface RechargeService {
//根据userId查询充值记录 134
List<RechargeRecord> queryByUid(Integer uid, Integer pageNo, Integer pageSize);
}3.2 业务接口实现类 134
micr-dataservice
package com.bjpowernode.dataservice.service;
import com.bjpowernode.api.model.RechargeRecord;
import com.bjpowernode.api.service.RechargeService;
import com.bjpowernode.common.util.CommonUtil;
import com.bjpowernode.dataservice.mapper.RechargeRecordMapper;
import org.apache.dubbo.config.annotation.DubboService;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
//充值业务实现类 134
@DubboService(interfaceClass = RechargeService.class,version = "1.0")
public class RechargeServiceImpl implements RechargeService {
@Resource
private RechargeRecordMapper rechargeMapper;
/*根据userID查询它的充值记录 134*/
@Override
public List<RechargeRecord> queryByUid(Integer uid, Integer pageNo, Integer pageSize) {
List<RechargeRecord> records = new ArrayList<>();
if( uid != null && uid > 0 ){
pageNo = CommonUtil.defaultPageNo(pageNo);
pageSize = CommonUtil.defaultPageSize(pageSize);
int offset = (pageNo -1 ) * pageSize;
records = rechargeMapper.selectByUid(uid, offset, pageSize);
}
return records;
}
}3.3 在mapper中定义方法 134
micr-dataservice
RechargeRecordMapper
//根据userID查询它的充值记录 134
List<RechargeRecord> selectByUid(@Param("uid") Integer uid, @Param("offset") int offset, @Param("rows") Integer rows);3.4 编写sql 134
micr-dataservice
RechargeRecordMapper.xml
<!--按userId查询充值记录 134-->
<select id="selectByUid" resultMap="BaseResultMap">
select <include refid="Base_Column_List" />
from b_recharge_record
where uid= #{uid}
order by recharge_time desc
limit #{offset},#{rows}
</select>3.5 消费者 controller 135
micr-web
在BaseController中暴露业务 135
//充值操作 135
@DubboReference(interfaceClass = RechargeService.class,version = "1.0")
protected RechargeService rechargeService;充值记录流水的返回实体类ResultView 135
micr-web
package com.bjpowernode.front.view.recharge;
import com.bjpowernode.api.model.RechargeRecord;
import org.apache.commons.lang3.time.DateFormatUtils;
import java.math.BigDecimal;
/**
* 充值记录流水的返回实体类 135
*/
public class ResultView {
private Integer id;
private String result = "未知";
private String rechargeDate = "-";
private BigDecimal rechargeMoney;
public ResultView(RechargeRecord record) {
this.id = record.getId();
this.rechargeMoney = record.getRechargeMoney();
if (record.getRechargeTime() != null) {
rechargeDate = DateFormatUtils.format(record.getRechargeTime(), "yyyy-MM-dd");
}
switch (record.getRechargeStatus()) {
case 0:
result = "充值中";
break;
case 1:
result = "成功";
break;
case 2:
result = "失败";
}
}
public Integer getId() {
return id;
}
public String getResult() {
return result;
}
public String getRechargeDate() {
return rechargeDate;
}
public BigDecimal getRechargeMoney() {
return rechargeMoney;
}
}RechargeController 135
micr-web
package com.bjpowernode.front.controller;
import com.bjpowernode.api.model.RechargeRecord;
import com.bjpowernode.front.view.RespResult;
import com.bjpowernode.front.view.recharge.ResultView;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
//充值的控制类 135
@Api(tags = "充值业务")
@RestController
public class RechargeController extends BaseController{
// 用户中心 查询充值流水 135
@ApiOperation(value = "查询某个用户的充值记录")
@GetMapping("/v1/recharge/records")
public RespResult queryRechargePage(@RequestHeader("uid") Integer uid,
@RequestParam(required = false,defaultValue = "1") Integer pageNo,
@RequestParam(required = false,defaultValue = "6") Integer pageSize){
RespResult result = RespResult.fail();
if( uid != null && uid > 0 ){
List<RechargeRecord> records = rechargeService.queryByUid(uid, pageNo, pageSize);
result = RespResult.ok();
result.setList( toView(records));
//没有做分页。
}
return result;
}
//将用户中心 查询的充值记录的结果 转换为们们需要的 ResultView 类 135
//因为前端不需要这么多属性，所以我们需要做个优化
private List<ResultView> toView(List<RechargeRecord> src){
List<ResultView> target = new ArrayList<>();
//遍历
src.forEach( record -> {
target.add( new ResultView(record));
});
return target;
}
}4. 用户中心前端 115、136
4.1 前端 116
4.1.1 添加路由 116
index.js
{
path: '/page/user/usercenter',
name: 'UserCenterView',
component: () => import('../views/UserCenterView.vue')
}4.1.2 在拦截器中添加路径 136
4.1.2 创建页面 116、125、135-136
UserCenterView.vue
<template>
<div>
<Header></Header>
<div class="content clearfix">
<!--个人信息-->
<div class="user-head">
<div class="user-head-left fl">
<div class="user-head-img">
<img src="@/assets/image/user-head.png" alt="">
</div>
<p>上传头像</p>
</div>
<div class="user-head-right fl">
<ul class="user-head-name fl">
<li><b>{{userBaseInfo.name}}</b></li>
<li>{{ userBaseInfo.phone }}</li>
<li>最近登录：{{userBaseInfo.loginTime}}</li>
</ul>
<div class="user-head-money fr">
<p>可用余额：<span>￥{{ userBaseInfo.money }}元</span></p>
<a href="user_pay.html" style="color: red" class="user-head-a1">充值</a>
<a href="details.html" style="color: red" class="user-head-a2">投资</a>
</div>
</div>
</div>
<!--记录-->
<div class="user-record-box clearfix">
<div class="user-record user-record-1">
<h3 class="user-record-title">最近投资</h3>
<table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
<thead class="datail_thead">
<tr>
<th>序号</th>
<th>投资产品</th>
<th>投资金额</th>
<th>投资时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>新手宝</td>
<td>1500.0</td>
<td>2021-08-19 </td>
</tr>
<tr>
<td>2</td>
<td>新手宝</td>
<td>1500.0</td>
<td>2021-08-19 </td>
</tr>
<tr>
<td>3</td>
<td>新手宝</td>
<td>1500.0</td>
<td>2021-08-19 </td>
</tr>
<tr>
<td>4</td>
<td>新手宝</td>
<td>1500.0</td>
<td>2021-08-19 </td>
</tr>
<tr>
<td>5</td>
<td>新手宝</td>
<td>1500.0</td>
<td>2021-08-19 </td>
</tr>
<tr>
<td>6</td>
<td>新手宝</td>
<td>1500.0</td>
<td>2021-08-19 </td>
</tr>
</tbody>
</table>
<!--无记录-->
<p class="user-record-no">还没有投资记录，请投资：<a href="user_center.html" target="_blank">投资</a></p>
</div>
<div class="user-record user-record-2">
<h3 class="user-record-title">最近充值</h3>
<table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
<thead class="datail_thead">
<tr>
<th>序号</th>
<th>充值结果</th>
<th>充值金额</th>
<th>充值时间</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in rechargeList" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.result}}</td>
<td>{{item.rechargeMoney}}</td>
<td>{{item.rechargeDate}}</td>
</tr>
</tbody>
</table>
<!--无记录-->
<p class="user-record-no">还没有充值记录，请充值：<a href="user_pay.html" target="_blank">充值</a></p>
</div>
<div class="user-record user-record-3">
<h3 class="user-record-title ">最近收益</h3>
<table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
<thead class="datail_thead">
<tr>
<th>序号</th>
<th>项目名称</th>
<th>投资日期</th>
<th>收益金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>新手宝</td>
<td>2021-08-19 </td>
<td>0.46 </td>
</tr>
<tr>
<td>2</td>
<td>新手宝</td>
<td>2021-08-19 </td>
<td>0.46 </td>
</tr>
<tr>
<td>3</td>
<td>新手宝</td>
<td>2021-08-19 </td>
<td>0.46 </td>
</tr>
<tr>
<td>4</td>
<td>新手宝</td>
<td>2021-08-19 </td>
<td>0.46 </td>
</tr>
<tr>
<td>5</td>
<td>新手宝</td>
<td>2021-08-19 </td>
<td>0.46 </td>
</tr>
<tr>
<td>6</td>
<td>新手宝</td>
<td>2021-08-19 </td>
<td>0.46 </td>
</tr>
</tbody>
</table>
<!--无记录-->
<p class="user-record-no">还没有收益记录</p>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
import {doGet} from "@/api/httpRequest";
export default {
name: "UserCenterView",
components: {
// eslint-disable-next-line vue/no-unused-components
Header,
// eslint-disable-next-line vue/no-unused-components
Footer
},
data() {
return {
userBaseInfo: {
loginTime: "",
money: 0.0,
phone: "",
name: "",
headerUrl: ""
},
rechargeList:[
{
id: 0,
result: "",
rechargeDate: "",
rechargeMoney: 0
}
]
}
},
mounted() {
doGet('/v1/user/usercenter').then(resp => { //用户中心基本数据 136
if (resp && resp.data.code == 1000) {
this.userBaseInfo = resp.data.data;
}
});
doGet('/v1/recharge/records',{pageNo:1,pageSize: 6}).then(resp=>{//用户中心 投资记录
if(resp && resp.data.code == 1000){
this.rechargeList = resp.data.list;
}
})
}
}
</script>
<style scoped>
</style>测试 136
登录张无忌
5. 处理前端菜单栏 137
Header.vue
<template>
<!--头部-->
<div class="public-head">
<div class="public-head-nav">
<div class="public-head-left">
<h1 class="public-head-logo"><a href="javascript:;">
<img src="@/assets/image/logo.png" alt="">
</a></h1>
<ul class="public-head-list">
<li><a href="javascript:void(0)" @click="goLink('/')">主页</a></li>
<li class="public-head-hover">
<a href="javascript:void(0);">我要投资</a>
<!--二级导航-->
<div class="two-title">
<a href="javascript:void(0);" @click="goLink('/page/product/list',{ptype:1})">优选类产品</a>
<a href="javascript:void(0);" @click="goLink('/page/product/list',{ptype:2})">散标类产品</a>
</div>
</li>
<li><a href="javascript:void(0);">借款人信息</a></li>
<li><a href="javascript:void(0);">信息披露</a></li>
<li><a href="javascript:void(0);">安全计划</a></li>
</ul>
</div>
<div class="public-head-right" v-if="logined">
<a href="javascript:void(0);" @click="goLink('/page/user/realname',)">实名认证</a>
<a href="javascript:void(0);" @click="goLink('/page/user/usercenter',)">用户中心</a>
</div>
<div class="public-head-right" v-else>
<a href="javascript:void(0);" @click="goLink('/page/user/login',)">登录</a>
<a href="javascript:void(0);" @click="goLink('/page/user/register',)">注册</a>
</div>
</div>
</div>
<!--end-->
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Header",
data(){
return {
logined:false
}
},
mounted() {
//判断是否登录了
if(window.localStorage.getItem("userinfo")){
this.logined = true;
}
},
methods: {
goLink(url, params) {
//使用router做页面跳转， vue中的对象
this.$router.push({
path: url,
query: params
})
},
}
}
</script>
<style scoped>
</style>测试 137
登陆后只显示实名认证和用户中心
6. 修改首页中我要投资的bug 137
测试 137
在主页点击次按钮
在产品列表页面点击一个产品
成功进入产品详情页面
