章节文章课程简介:
任何事情都需要时间的沉淀,技术也不例外,今天编写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
简易目录结构
第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0
第二天:Api实战之:vue-composition 我是api调用工程师
下一篇:第五天:如何实现代码优化
🎨 原创不易,支持请点赞、转发和关注我,后续持续更新原创文章,有问题留言给我