我，前端，不想卷技術(shù)了……卷下整潔架構(gòu)

     
     

      // 用戶實(shí)體 ./shared/domain/entities/user.ts
import cookie from 'cookie';
export interface IUserService {    getCity(id: string): Promise<City>;}
export class User {    // 用戶Id    public id: string;    // 用戶服務(wù)    private userService: IUserService;        constructor(id: string, name: string, userService: IUserService) {}        // 檢查用戶是否登錄    public isLogin(): boolean {        if (cookie.get('openid') && cookie.get('access_token')) {            return true;        }                return false;    }        // 登錄    public login(): Promise<void> {        if (!this.isLogin()) {            goToURL('https://www.xxx.com/login');        }    }        // 退出登錄    public logout(): Promise<void> {        cookie.remove('openid');        cookie.remove('access_token');        goToURL('https://www.xxx.com/login');    }        // 獲取用戶所在城市    public getCity(): Promise<City> {        return this.userService.getCity(this.id);    }}
     
     

     
     

      // 商品實(shí)體 ./shared/domain/entities/product.ts
export interface IProductService {    getBaseInfoById(id: string): Promise<ProductBaseInfo>;    getStockInfoByIdAndCity(id: string, city: City): Promise<ProductStockInfo>;}
export class Product {  // 商品Id  public id: string;  // 用戶服務(wù)  private productService: ProductService;    constructor(id: string, name: string; productService: IProductService) {}    // 獲取商品詳情  public async getDetail() {      // 獲取商品基本信息和庫(kù)存信息      const baseInfo = await this.productService.getBaseInfoById(this.id);      const stockInfo = await this.productService.getStockInfoById(this.id, city);      // 組合詳情數(shù)據(jù)      const detail = {          id: this.id,          name: baseinfo.name,          images: baseinfo.name,          stockNum: stockInfo.num,      };      return detail;  }
  // 根據(jù)地區(qū)獲取庫(kù)存信息  public addToCart(num：number) {      return this.productService.getStockInfoById(this.id, city);  }};
     
     

     
     

      // 獲取商品詳情用例 ./shared/domain/usercases/get-product-detail.ts
import { User } from './shared/domain/entities/user.ts';import { Product } from './shared/domain/entities/product.ts';// 用戶服務(wù)、產(chǎn)品服務(wù)的具體實(shí)現(xiàn)，見(jiàn)適配器層import { UserService } from './server/services/user-service.ts';import { ProductService } from './server/services/product-service.ts';
export async function getProductDetail(userId: string, productId: string) {    // 示例化用戶實(shí)體和商品實(shí)體，省略部分代碼    const user = new User(userId, UserService);    const product = new Product(productId, ProductService);        // 獲取用戶所在城市    const city: City = await user.getCity();    // 獲取商品基本信息    const productBaseInfo = await product.getBaseInfo();    // 根據(jù)城市獲取商品庫(kù)存    const productStockInfo = await product.getStockInfo(city);    return {        baseInfo: productBaseInfo,        stockInfo: productStockInfo,    };}
     
     

     
     

      // 用戶服務(wù)具體實(shí)現(xiàn) ./server/services/user-service.tsimport { IUserService } from './shared/domain/entities/user.ts';
class UserService implements IUserService {    getCity(userId: string): Promise<City> {        // 通過(guò)后臺(tái)接口獲取用戶所在城市        const resp = get('https://api.xxx.com/queryUserCity', { userId });        if (resp.ret !== 0) {            throw new Error('查詢用戶所在城市失敗');        }                return resp.data.city as City;    }    }
     
     

     
     

      // 商品服務(wù)具體實(shí)現(xiàn) ./server/services/product-service.tsimport { IProductService } from './shared/domain/entities/product.ts';
class ProductService implements IProductService {    getBaseInfoById(id: string): Promise<ProductBaseInfo> {        // 調(diào)用后臺(tái)商品服務(wù)接口，省略具體實(shí)現(xiàn)    }    getStockInfoByIdAndCity(id: string, city: City): Promise<ProductStockInfo> {        // 調(diào)用后臺(tái)商品服務(wù)接口，省略具體實(shí)現(xiàn)    }}
     
     

     
     

      // 商品詳情頁(yè) store ./client/store/product-store.tsimport { getProductDetial } from './shared/domain/usercases/get-product-detail.ts'
export default new Vuex.Store({  state: {    productDetail: ProductDetail,  },  mutations: {    async getProductDetail(state) {        // 用例已包含具體業(yè)務(wù)邏輯，這里直接調(diào)用用例方法        state.productDetail = getProductDetial(userId, productId);    },  },}
     
     

     
     

      // 商品詳情頁(yè) ./client/pages/product-detail.ts
import { defineComponent, ref, onMounted } from 'vue';
export defineComponent({  name: 'ProudctDetailPage',  setup() {         onMounted(() => {         setLoading(true);         await store.getProductDetail();         setLoading(false);      });
    return () => (      <div>        <p> {{ store.productDetail.baseInfo }}</p>        <p> {{ store.productDetail.stockInfo }}</p>      </div>    );  },});
     
     

     
     

      import vue from 'Vue'
vue.render(App);