利⽤vue3+ts实现管理后台（增删改查）
简单的管理后台基本上就是数据的增删改查。主要就是列表 + form 表单。每个页⾯的逻辑基本上都相同。不同的地⽅就是每个页⾯需要调⽤的具体 API 及参数。
以前 vue2 的时候最简单的做法是写出来⼀个页⾯的逻辑，然后直接 copy 到各个页⾯中，修改 API 及参数即可。⾼级⼀点的是利⽤ mixin 函数，将可复⽤逻辑抽离，每个页⾯引⼊ mixin。
vue3 之后新增了composition API。本⽂就是利⽤composition API，将可复⽤的逻辑抽离到composition API中，并引⼊ts，实现⼀个简单的管理后台功能。
利⽤@vue/cli创建项⽬
⾸先需要将 @vue/cli 升级到最新版。本⽂⽤的是4.5.6版本。
vue create admin
cd admin
npm run serve
create选择⼿动选择Manually select features，会有⼀些交互性的选择，是否要安装router、vuex等选项，空格可以切换是否选中。我们选中TypeScript、Router、Vuex、CSS Pre-processors。
我们利⽤axios + axios-mock-adapter + mockjs来进⾏接⼝请求、接⼝模拟及假数据⽣成，接下来再安装这⼏个包。
npm install axios
npm install -D axios-mock-adapter mockjs
项⽬整体框架
假设我们的项⽬包含⼀个 Header，Header 的作⽤是切换页⾯。两个页⾯，分别为 List 和 About，这两个页⾯都是简单的列表+增删改查的操作。
路由
需要在 router 中增加⼀个 list 的路由信息。
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: () => { return import(/* webpackChunkName: "about" */ '../views/About.vue'); },
},
{
path: '/list',
name: 'List',
component: () => { return import(/* webpackChunkName: "list" */ '../views/List.vue'); },
},
];
列表页
vue中reactive⾸先把列表页的结构写出来，List 和 About 的结构⼤体相似。
<template>
<div class='content_page'>
<div class='content_body'>
<div class='content_button'>
<button class='add primary' @click='addItem' title='添加'>添加</button>
</div>
<div class='content_table'>
<table>
<thead>
<tr>
<th v-for='item in thead' :key='item'>{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for='(item, index) in list' :key='item.id'>
<td>
<span :title='item.id'>{{item.id}}</span>
</td>
<td>
<div v-if='index === currentIndex'>
<input
v-model='item.name'
title='name'
/>
</div>
<span :title='item.name' v-else>{{item.name}}</span>
</td>
<td :title='item.sex'>
<div v-if='index === currentIndex'>
<input
v-model='item.sex'
title='sex'
/>
</div>
<span :title='item.sex' v-else>{{item.sex ? '男' : '⼥'}}</span>
</td>
<td :title='item.birth'>
<div v-if='index === currentIndex'>
<input
v-model='item.birth'
title='birth'
/>
</div>
<span :title='item.birth' v-else>{{item.birth}}</span></td>
<td :title='item.address'>
<div v-if='index === currentIndex'>
<input
v-model='item.address'
title='birth'
/>
</div>
<span :title='item.address' v-else>{{item.address}}</span>
</td>
<td>
<div v-if='index === currentIndex'>
<button
class='primary confirm'
@click='confirm(item)'
>确定</button>
<button
@click='cancel(item)'
>取消</button>
</div>
<span v-else>
<span @click='editItem(index)'>
edit
</span>
<span @click='deleteItem(index, item)'>delete</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
其中⽤到了addItem、editItem、deleteItem、confirm、cancel这⼏个⽅法，每个列表页的这⼏个⽅法功能都是相同的，唯⼀的不同就是请求的 API，我们可以将这⼏个 API 做为参数，将增删改查的⽅法提取到setup函数中，做到复⽤。接下来就来到重点的composition API。
composition API具体实现
import { ref, onMounted } from 'vue';
import {ItemType, FetchType, DeleteType, AddType, EditType} from '../../types/index';
export const compositionApi = (
fetchApi: FetchType,
deleteApi: DeleteType,
confirmAddApi: AddType,
confirmEditApi: EditType,
itemData: ItemType,
) => {
const currentIndex = ref<number | null>(null);
const list = ref([{}]);
const getList = () => {
fetchApi().then((res: any) => {
list.value = res.data.list;
});
};
const addItem = () => {
list.value.unshift(itemData);
currentIndex.value = 0;
};
const editItem = (index: number) => {
currentIndex.value = index;
};
const deleteItem = (index: number, item: ItemType) => {
deleteApi(item).then(() => {
list.value.splice(index, 1);
//  getList();
});
};
const cancel = (item: ItemType) => {
currentIndex.value = null;
if (!item.id) {
list.value.splice(0, 1);
}
};
const confirm = (item: ItemType) => {
const api = item.id ? confirmEditApi : confirmAddApi;
api(item).then(() => {
getList();
cancel(item);
});
};
onMounted(() => {
getList();
});
return {
list,
currentIndex,
getList,
addItem,
editItem,
deleteItem,
cancel,
confirm,
};
};
export default compositionApi;
接下来就是在 List 和 About 页⾯中的setup⽅法中引⼊即可。<script lang='ts'>
import axios from 'axios';
import { defineComponent, reactive } from 'vue';
import { compositionApi } from '../components/composables/index'; import {ItemType} from '../types/index';
const ListComponent = defineComponent({
name: 'List',
setup() {
const state = reactive({
itemData: {
id: '',
name: '',
sex: 0,
birth: '',
address: '',
},
});
const fetchApi = () => {
('/users');
};
const deleteApi = (item: ItemType) => {
return axios.post('/users/delete', { id: item.id });
};
const confirmAddApi = (item: ItemType) => {
return axios.post('/users/add', {
name: item.name,
birth: item.birth,
address: item.address,
});
};
const confirmEditApi = (item: ItemType) => {
return axios.post('/users/edit', {
id: item.id,
name: item.name,
birth: item.birth,
address: item.address,
});
};
const localPageData = compositionApi(fetchApi, deleteApi, confirmAddApi, confirmEditApi, state.itemData);
return {
state,
...localPageData,
};
},
data() {
return {
thead: [
'id',
'name',
'sex',
'birth',
'address',
'option',
],
};
}
});
这样 List 页⾯的逻辑基本上就完成了。同样，About 页⾯的逻辑也就完成了，不同的就是在 About 页⾯更改⼀下接⼝请求的地址。
最终实现效果
composition API vs Mixin
在vue3之前，代码复⽤的话⼀般都是⽤mixin，但是mixin相⽐于composition API的劣势，在官⽹中的解释如下：
mixin很容易发⽣冲突：因为每个特性的属性都被合并到同⼀个组件中，所以为了避免 property名冲突和调试，你仍然需要了解其他每个特性。
可重⽤性是有限的：我们不能向mixin传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑⽅⾯的灵活性
源代码
项⽬中⽤到的⼀些 TS 接⼝的定义、模拟数据及接⼝请求本⽂中没有具体介绍，如果想了解的话可以去看看源码。
戳这⾥：
到此这篇关于利⽤vue3+ts实现管理后台（增删改查）的⽂章就介绍到这了，更多相关vue3 TypeScript 管理后台内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。