利用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'); }, }, ];
列表页
首先把列表页的结构写出来,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的劣势,在官网中的解释如下:
- mixin很容易发生冲突:因为每个特性的属性都被合并到同一个组件中,所以为了避免 property名冲突和调试,你仍然需要了解其他每个特性。
- 可重用性是有限的:我们不能向mixin传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性
源代码
项目中用到的一些 TS 接口的定义、模拟数据及接口请求本文中没有具体介绍,如果想了解的话可以去看看源码。
戳这里:vue3_ts_admin
到此这篇关于利用vue3+ts实现管理后台(增删改查)的文章就介绍到这了,更多相关vue3 TypeScript 管理后台内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧...2021-10-15
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了使用TS来编写express服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-29
- 这篇文章主要介绍了你不知道的 TypeScript 高级类型(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-29
- 与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,需要的小伙伴可续看下文具体介绍...2021-09-15
- 这篇文章主要给大家介绍了关于TypeScript中条件类型精读与实践的相关资料,,条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型,需要的朋友可以参考下...2021-10-05
- 这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-10-12
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏,对TypeScript感兴趣的同学,一定要看一下...2021-04-16
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 本文主要介绍了webpack搭建脚手架打包TypeScript代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30