Глава Статьи Курс Введение:
Все требует времени, и технологии не являются исключением.Сегодня я пишу главы из серии Vue3.0, но надеюсь, что смогу попробовать некоторые новые технологии раньше других.Ведь Vue3.0 уже в бета-версии ,так что официально здесь.Версия не за горами.Если вы изучите и поймете заранее,у нас будет больше времени,чем у других,чтобы полностью разобраться в особенностях Vue3.0.Только когда вы действительно понимаете технологию,вы можете правильно определить подходит ли он или нет., следует ли его применять к вашему текущему фактическому проекту.
- День 1: Говоря о vue3.0, Проект инициализации: Hello World Vue3.0
- День второй: Апи бой: vue-composition Я инженер апи коллов
- День 3: Как vue3 реализует повторное использование логики
- День 4: Настоящая битва: дизайн сильно развязанного фиктивного API и запроса списка заказов
- День 5: Как реализовать оптимизацию кода
Сегодня четвертый день: настоящий бой: дизайн сильно развязанного макета API и запрос списка заказов
В прошлой статье одноклассник сказал, что он не знает версию пакета, связанного с vue3.0, который я установил, поэтому я сначала опубликовал package.json, который на самом деле является следующей версией плагина вокруг Vue3.0.
{
"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
};
Код остальных частей вебпака, который есть в предыдущей статье, выкладываться не будет.
Запустите команду для запуска службы
yarn dev
отлично работаетhttp://localhost:8081/#/order-list
Простая структура каталогов
День 1: Говоря о vue3.0, Проект инициализации: Hello World Vue3.0
День второй: Апи бой: vue-composition Я инженер апи коллов
День третий: vue3.0 актуальный бой с 0 на 1 реальный бой система управления электронной коммерцией
Далее: День 5. Как реализовать оптимизацию кода
🎨 Оригинальность - это непросто, пожалуйста, ставьте лайк, пересылайте и подписывайтесь на меня для поддержки, и продолжайте обновлять оригинальные статьи в будущем.Если у вас есть какие-либо вопросы, оставьте мне сообщение