利用vue3+ts实现管理后台(增删改查)


Posted in Javascript onOctober 30, 2020

 简单的管理后台基本上就是数据的增删改查。主要就是 列表 + 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 页面更改一下接口请求的地址。

最终实现效果

利用vue3+ts实现管理后台(增删改查)

composition API vs Mixin

在vue3之前,代码复用的话一般都是用mixin,但是mixin相比于composition API的劣势,在官网中的解释如下:

  • mixin很容易发生冲突:因为每个特性的属性都被合并到同一个组件中,所以为了避免 property名冲突和调试,你仍然需要了解其他每个特性。
  • 可重用性是有限的:我们不能向mixin传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性

源代码

项目中用到的一些 TS 接口的定义、模拟数据及接口请求本文中没有具体介绍,如果想了解的话可以去看看源码。

戳这里:vue3_ts_admin

到此这篇关于利用vue3+ts实现管理后台(增删改查)的文章就介绍到这了,更多相关vue3 TypeScript 管理后台内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
Javascript之String对象详解
Jun 08 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 #Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
You might like
php smarty函数扩展
2010/03/15 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
基于node.js实现爬虫的讲解
2019/02/18 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python格式化日期时间操作示例
2018/06/28 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python内存动态分配过程详解
2019/07/15 Python
对python中return与yield的区别详解
2020/03/12 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
大学生的创业计划书就该这么写
2014/01/30 职场文书
学校周年庆活动方案
2014/08/22 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫