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

时间 2020-05-09

标签 vue3.0 vue 实战系统 mock 订单列表查询第四繁體版

原文原文链接

章节文章课程简介：

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

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

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

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

{
 "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.jshtml

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.vuevue

<template>
    <router-view></router-view>
</template>
复制代码

路由：src/router/index.jsjava

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.vuereact

<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.jswebpack

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.jsweb

import user from './user'
export default {
    user
}
复制代码

src/services/interface/user.jsvue-router

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

src/services/http.jsjson

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

简易目录结构

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

次日：Api实战之：vue-composition 我是api调用工程师

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

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

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