vue3.0实战电商系统：高解耦式mock 订单列表查询（第四天）

程序员鬼哥
6,524 阅读5分钟

章节文章课程简介：

任何事情都需要时间的沉淀，技术也不例外，今天编写Vue3.0系列的章节文章，只是希望能够比别人更早的去尝鲜一些新的技术，毕竟Vue3.0已经Beta版本了，所以里正式版本也不远了，提前去学习和了解，我们就会比别人有更多的时间去充分理解Vue3.0的特性，只有当你真正理解一门技术的时候，才能够正确的判定它是否合适、是否应该运用到你当前的实际项目当中去。

  • 第一天：浅谈vue3.0、初始化项目之：Hello World Vue3.0
  • 第二天：Api实战之：vue-composition 我是api调用工程师
  • 第三天：vue3如何实现逻辑复用
  • 第四天：实战之：高解耦式mock api的设计与订单列表查询
  • 第五天：如何实现代码优化

今天是第四天：实战之：高解耦式mock api的设计与订单列表查询

上一篇文章有同学说，不知道我安装的vue3.0相关的包的版本，所以先贴下package.json,其实都是Vue3.0周边插件的next版本

{
 "name": "vue_3.0",
 "version": "1.0.0",
 "description": "vue3.0",
 "main": "index.js",
 "scripts": {
   "dev": "webpack-dev-server --config ./config/webpack.config.js",
 },
 "keywords": [],
 "author": "虎克小哥哥",
 "license": "ISC",
 "dependencies": {
   "@vue/compiler-sfc": "^3.0.0-beta.5",
   "css-loader": "^3.5.3",
   "file-loader": "^6.0.0",
   "html-webpack-plugin": "^4.3.0",
   "mini-css-extract-plugin": "^0.9.0",
   "style-loader": "^1.2.1",
   "vue": "^3.0.0-beta.5",
   "vue-loader": "^16.0.0-alpha.3",
   "vue-router": "4.0.0-alpha.10",
   "webpack": "^4.43.0",
   "webpack-cli": "^3.3.11",
   "webpack-dev-server": "^3.10.3"
 }
}

入口文件src/main.js

import{ createApp } from "vue";
import App from "./App.vue";
import router from './router';
const app=createApp(App);
app.use(router);
app.mount("#root")

根视图：src/App.vue

<template>
    <router-view></router-view>
</template>

路由：src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';
import orderList from '../views/order/orderList.vue'
const routes = [
  {path: '/', redirect: '/order-list'},
  {path: '/order-list', component: orderList}
]

// 和react套路一样
export default createRouter({
  //createWebHashHistory createWebHistory()两种模式根据需要选择
  history: createWebHashHistory(),
  routes
})

列表首页(粗糙的页面，不要喷我哈) /src/views/order/orderList.vue

<template>
  <section>
    <!-- 头部from部分 -->
    <div class="box-form">
      <!-- 输入框更新自动节流查询 -->
      <input type="text" v-model="userName">
    </div>
    <!-- 粗糙的table部分 -->
    <div class="box-table">
      <table>
        <thead>
          <tr>
            <th>订单编号</th>
            <th>商品名称</th>
            <th>下单时间</th>
            <th>订单状态</th>
            <th>商品价格</th>
            <th>续费时长</th>
            <th>用户名称</th>
            <th>用户性别</th>
            <th>用户地址</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in page.data" :key="index">
            <td>{{item.orderCode}}</td>
            <td>{{item.userName}}</td>
            <td>{{item.age}}</td>
            <td>{{item.city}}</td>
            <td>{{stateObj[item.state||'0']}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>{{item.createtime}}</td>
            <td>{{item.timeNum}}</td>
          </tr>
        </tbody>
      </table>
      <!-- 分页部分 -->
      <ul class="box-page">
        <li><a>上一页</a></li>
        <li v-for="(item,index) in page.pageList"
            :key="index"><a>{{index+1}}</a>
        </li>
        <li><a>下一页</a></li>
      </ul>
    </div>
  </section>
</template>

<script>
import { ref,onMounted,customRef,watch, onUnmounted } from 'vue';
import user from "../../services/interface/user";//没配相路径需要自己配
/**节流 */
function useThrottle(value, delay = 1000) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track();//必须调用次函数才会触发更新
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()//必须调用次函数才会触发更新
        }, delay)
      }
    }
  })
}
export default {
  setup() {
    const stateObj=ref({0:"未知订单",1:"已收款"});
    const userName=ref(useThrottle(''));//视图更新后节流更新
    const page=ref({pageList:[],total:0,pageSize:10,pageIndex:1});
    //视图初始化
    onMounted(()=>{
      //查询数据源
      const onQuery=()=>{
        user.getOrderList({pageSize:10,pageIndex:1}).then((res)=>{
          page.value={
            data:res.list,
            pageList:new Array(Math.ceil(res.total/res.pageSize)),
            total:res.total,
            pageSize:res.pageSize,
            pageIndex:res.pageIndex
          }
        })
      }
      //http请求数据
      onQuery();
       //监听某个响应对象 
        const stop =  watch(() => userName.value,(userName, prevUserName) => {
          console.log("重新查询数据")
          onQuery();
        }
      )
    })
    //视图销毁后关闭监听对象
    onUnmounted(()=>{
      stop();
    })
    return {
      stateObj,
      userName,
      page
    }
  }
};
</script>

<style>
body {
  padding: 50px;
  color: #42b983;
  background-color: #282c34;
  text-align: center;
}
.box-form{
  padding: 20px;
}
.box-form input{
  border: none;
  padding: 4px;
}
.box-table{
  width: 100%;
}
.box-table table{
  display: inline-table;
}
.box-page li{
 list-style: none;
 display: inline-block;
 border: 1px #fff solid;
 border-radius: 6px;
 min-width: 32px;
 padding: 0 6px;
 color: #fff;
 cursor: pointer;
}
table tr>th{
  text-align: left;
  padding: 0px 16px;
}
tbody>tr>td{
 padding: 16px;
 overflow-wrap: break-word;
}
</style>

src/mock/user.js

export default {
  "getOrderList":{
    "mock": true,
    "status": 200,
    "msg": "",
    "data":{
      list:new Array(10).fill({}).map((item,index)=>{
        return {
          orderCode:`SH_${new Date().getTime()}_${index}`,
          title:"掘金会员",
          createtime:"2020-05-03",
          state:1,
          price:19.8,
          timeNum:12,
          userName:"虎克小哥哥",
          age:18",
          city:"上海"
       }
      }),
     total:20,
     pageSize:10,
     pageIndex:1
    }
  },
}

src/mock/mockFactory.js

import user from './user'
export default {
    user
}

src/services/interface/user.js

import http from "../http";
// 函数生产
const userFuns = {
  getOrderList: "/api/getOrderList"
};
//生成函数实例
export default Object.assign(
  http.packageNewFuns({funs:userFuns},http.post,"user"),
);

src/services/http.js

import mockFactory from '../mock/mockFactory';
/**
 * 直接根据空间名称很函数名称直接返回mock数据源
 * @param {}} namespace 
 * @param {}} funName 
 */
const mockRequest=(namespace,funName,parent)=>{
    return new Promise((resolve)=>{
     //模拟装个逼
     let time=setTimeout(()=>{
       clearTimeout(time);
       resolve(mockFactory[namespace][funName].data);
     },500)
    })
}
/**
 * 根据每个模块生产函数
 * @param {*} option     接口服务对应的实例配置
 * @param {*} request    接口服务请求实例
 * @param {*} namespace  服务所属空间名称(就是scope隔离下)
 */
const packageNewFuns = (option,request,namespace) => {
    const packageS = {};
    Object.keys(option.funs).forEach((funName) => {
        packageS[funName] = (parent) => {
            //如果是mock接口 
            if(mockFactory[namespace][funName].mock){
                return mockRequest(namespace,funName,parent);
            }else{
              // 真实请求
            }
        };
    });
    return packageS;
};

export default {
    packageNewFuns,
    post
};

其他webpack部分的代码，上一篇文章中有，就不贴了

运行命令，启动服务

yarn dev

完美运行 http://localhost:8081/#/order-list

alt vue3.0

简易目录结构

alt vue3.0

第一天：浅谈vue3.0、初始化项目之：Hello World Vue3.0

第二天：Api实战之：vue-composition 我是api调用工程师

第三天：vue3.0实战从0到1实战电商管理系统

下一篇：第五天：如何实现代码优化

🎨 原创不易，支持请点赞、转发和关注我，后续持续更新原创文章，有问题留言给我

avatar
文章
阅读
粉丝

友情链接：