使用vue3+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'); }, }, ];
列表页
首先把列表页的结构写出来,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 = () => { return axios.get('/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的劣势,在官网中的解释如下:
关于使用vue3+ts实现管理后台问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。