领域驱动设计在前端中的应用

// 切换到不规范写法的分支下git checkout feature/normal
// 启动 mock 数据npm run server
// 启动页面npm run start

    // goods API    'GET /goods/list' // 获取商品列表    // user API    'GET /user/detail' // 获取用户信息详情    // ponit API    'GET /interest/point' // 获取用户剩余积分    'GET /interest/pointRecord' // 获取用户积分记录数据    'GET /interest/gift' // 获取积分兑换奖品    // lottery API    'GET /lottery/detail' // 获取该抽奖活动的详情    'GET /lottery/prizeList' // 获取奖品列表    'POST /lottery/play' // 触发抽奖    'POST /lottery/address' // 填写奖品收货地址

├── common│   └── util│       └── http.js // 统一axios库└── page    ├── index // 商城主页目录    │   ├── App.js    │   ├── apis // 商城页面用到的api    │   │   ├── goods.js    │   │   └── user.js    │   ├── components    │   │   ├── GoodsItem.js    │   │   ├── GoodsItem.scss    │   │   ├── Nav.js    │   │   └── Nav.scss    │   └── index.js    ├── interest // 积分权益页面目录    │   ├── App.js    │   ├── App.scss    │   ├── apis // 商城页面用到的api    │   │   ├── interest.js    │   │   └── user.js    │   ├── components    │   │   ├── GiftItem.js    │   │   ├── GiftItem.scss    │   │   ├── PointRecordItem.js    │   │   └── PointRecordItem.scss    │   └── index.js    ├── ....

return(    <div className="goods-item">        <div className="main-info">            <img className="goods-img" src={mainPic} alt=""/>                        <div className="goods-name">{goodsName}</div>            {/* 当 status 为2时，表示无货 */}            {status === 2            ? <span className="out-stock">已无货</span>            : null}        </div>        <div className="detail-info">            {/* 当 activityType 为 3 表示该商品正在参与活动，为特价商品 */}            {activityType === 3            ? <span className="price discount">特价：{price / 100} 元</span>            : <span className="price">价格：{price / 100} 元</span>}            <div className="tag-wrap">                {filterTag.map(v=>{                    return (                        <span className="tag">{v.title}</span>                    )                })}            </div>        </div>    </div>)

<div className="user">    <img className={`${userInfo.vip ? 'vip' : ''}`} src={userInfo.avatar} alt=""/>    <span>{userInfo.userType === 2 ? '尊敬的签约客户：' : null}{userInfo.userName}</span></div>

<div>{userType === 2 ? '尊敬的签约客户：' : null}{userName}</div>

import axios from '@common/util/http';
export function getUserInfo() {    return axios('/user/detail');}

getUserInfo().then(data => {    this.setState({        userInfo: data      })    })}getUserPonitCount = () => {    getUserPointCount().then(count => {      this.setState({        pointCount: count      })    })}render() {    const { userInfo, pointCount } = this.state;    // vip 单从字面上难以辨别出是一个bool类型，更规范的命名应该是 isVip    // avatar 是一个 url 类型的字段，更规范的写法应该是 avatarUrl 会更直观    const { avatar, userName, userType, tel, vip, email, vipValidityDate } = userInfo;

git checkout masternpm run server // 启动 mock 接口npm run start // 启动前端服务

├── common│   ├── components // 公用组件│   ├── constants // 全局变量│   │   ├── goods│   │   │   └── index.js│   │   ├── ...│   ├── data-source // 数据接口层│   │   ├── goods│   │   │   ├── requestApis.js│   │   │   └── translators.js│   │   ├── ...│   ├── domains // 领域层│   │   ├── goods-domain│   │   │   ├── entities // 实体│   │   │   │   └── goods.js│   │   │   └── goodsService.js // 领域Service服务│   │   ├── ...│   └── util // 公用函数│       └── http.js└── page // 页面视图层    ├── index    │   ├── App.js    │   ├── components    │   │   ├── GoodsItem.js    │   │   ├── GoodsItem.scss    │   │   ├── Nav.js    │   │   └── Nav.scss    │   ├── index.js    │   └── services // 该页面需要用到的Service    │       └── index.js    ├── ...

import axios from '@common/util/http';src/common/data-source/interest/requestApis.jsimport { pointRecordTranslator, pointGiftTranslator } from './translators'
export function getUserPointRecordList() {    return axios('/interest/pointRecord').then(data => {        return data.map(item => pointRecordTranslator(item));    })}
export function getInterestGiftList() {    return axios('/interest/gift').then(data => {        return data.map(item => pointGiftTranslator(item))    })}

export function goodsTranslator({    id,    goodsName,    price,    status,    activityType,    desc,    brand,    relatedModelId,    mainPic,    tag,    relatedModelImg}) {    return {        id,        name: goodsName,        price: (price / 100).toFixed(2),        status,        activityType,        description: desc,        brandName: brand,        mainPicUrl: mainPic,        tags: tag    }}

/** * 抽奖活动实体 */import dayjs from 'dayjs'import { lotteryTypeMap } from '@constants/lottery'class Lottery {    constructor(lottery={}) {        this.id = lottery.id        this.name = lottery.name        this.type = lottery.type        this.startDate = lottery.startDate        this.endDate = lottery.endDate    }    // 获取活动时间范围    getLotteryTimeScope() {        return `${dayjs(this.startDate).format("M月D日")} - ${dayjs(this.endDate).format("M月D日")}`    }
    // 获取活动类型描述    getLotteryType() {        return this.type && lotteryTypeMap[this.type].title    }}
export default Lottery

import {    getLotteryDetail,    getPrizeList,    playLottery,    savePrizeAddress} from '@data-source/lottery/requestApis';
import Prize from './entities/prize';import Lottery from './entities/lottery';

class LotteryService {    /**     * 获取本次抽奖活动详情     * @param {string} id 活动id     */    static getLotteryDetail(id) {        return getLotteryDetail(id).then(lottery => new Lottery(lottery))    }
    /**     * 获取本次抽奖活动的奖品列表     * @param {string} id 抽奖活动id     */    static getPrizeList(id) {        return getPrizeList(id).then(list => {            return list.map(item => new Prize(item));        })    }
    /**     * 进行抽奖     * @param {string} id 抽奖活动id     */    static playLottery(id) {        return playLottery(id).then(result => {            const { recordId, prize } = result;            return {                recordId,                prize: new Prize(prize)            }        })    }
    /**     * 填写中奖的收货地址信息     * @param {Object} param0 中奖记录id以及地址信息     */    static savePrizeAddress({ recordId, name, phoneNumber, address }) {        const data = {            recordId,            name,            phoneNumber,            address        }        return savePrizeAddress(data)    }}
export default LotteryService

import React from 'react';
import { UserService, InterestService } from './services';import User from '@domain/user-domain/entities/user';import { SIGN_USER_TYPE } from '@constants/user';
import "./App.scss"
class App extends React.Component {  state = {    pointCount: null,    user: new User()  }  componentDidMount() {    this.getUserInfo();    this.getUserPonitCount();  }  // 获取用户信息  getUserInfo = () => {    UserService.getUserDetail().then(user => {      this.setState({        user      })    });  }  // 获取用户积分  getUserPonitCount = () => {    InterestService.getUserPointCount().then(count => {      this.setState({        pointCount: count      })    })  }  render() {    const { pointCount, user } = this.state;    return (      <div className="user-page">        <h3>个人中心</h3>        <div className="user">          <div className="info">            <div>{user.type === SIGN_USER_TYPE ? `尊敬的${user.getUserTypeTitle()}：` : null}{user.name}</div>            <div>绑定手机号： {user.phoneNumber}</div>            <div>绑定email： {user.email}</div>          </div>          <div className="avatar">            <img className={`${user.isVip ? 'vip' : ''}`} src={user.avatarUrl} alt=""/>            { user.isNeedRemindUserVipLack() && user.isVip              ? <div>会员还有{user.getVipRemainDays()}天</div>              : ''            }          </div>        </div>
        <div className="lottery-tips">          <div>剩余积分：{pointCount} 分</div>          <a href="/interest.html">前往积分权益中心 ></a>        </div>      </div>    );  }}
export default App;

  render() {    const { userInfo, pointCount } = this.state;    const { avatar, userName, userType, tel, vip, email, vipValidityDate } = userInfo;    // console.log()    const remainDay = dayjs(vipValidityDate).diff(new Date(), 'day');    return (      <div className="user-page">        <h3>个人中心</h3>        <div className="user">          <div className="info">            <div>{userType === 2 ? '尊敬的签约客户：' : null}{userName}</div>            <div>绑定手机号： {tel}</div>            <div>绑定email： {email}</div>          </div>          <div className="avatar">            <img className={`${vip ? 'vip' : ''}`} src={avatar} alt=""/>            { remainDay < 6 && vip            ? <div>会员还有{remainDay}天</div>            : ''            }          </div>        </div>
        <div className="lottery-tips">          <div>剩余积分：{pointCount} 分</div>          <a href="/interest.html">前往积分权益中心 ></a>        </div>      </div>    );  }