Vue3+TypeScript项目（用户管理模块）

一、页面静态搭建

src\views\acl\user\index.vue

<template>
  <el-card style="height: 80px;margin:20px 0 ">
    <el-form :inline="true" class="user_form">
      <el-form-item label="用户名:">
        <el-input placeholder="请你输入搜索用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default">搜索</el-button>
        <el-button type="default" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0px">
    <el-button type="primary" size="default">添加用户</el-button>
    <el-button type="danger" size="default">批量删除</el-button>
    <!-- table展示用户信息 -->
    <el-table style="margin: 10px 0px" border>
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column label="#" align="center" type="index"></el-table-column>
      <el-table-column label="ID" align="center"></el-table-column>
      <el-table-column
        label="用户名字"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="用户名称"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="用户角色"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="操作"
        width="300px"
        align="center"
      >
        <template #="{row,$index}">
          <el-button type="primary" icon="User" size="small">分配角色</el-button>   
          <el-button type="primary" icon="Edit" size="small">编辑</el-button>   
          <el-button type="primary" icon="Delete" size="small">删除</el-button>   
        </template>
</el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[5, 7, 9, 11]"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="400"
    />
  </el-card>
</template>

<script setup lang="ts">
import {ref} from 'vue'
//存储当前页码
let pageNo = ref<number>(1);
//存储一页有几个数据
let pageSize = ref<number>(5);
</script>

<style scoped lang="scss">
.user_form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

二、用户管理基本信息展示

2.1 API

src\api\acl\user\index.ts

//用户模块接口管理
import request from '@/utils/request'
import type{UserResponseData} from "./type.ts"
//枚举地址
enum API {
    //获取全部已有用户账号信息
    ALLUSER_URL = 'http://114.115.179.162:8022/prod-api/admin/acl/user/',
  
}
//获取用户账号信息的接口
export const reqUserInfo = (page: number, limit: number) => {
    return request.get<any, UserResponseData>(
      API.ALLUSER_URL + `${page}/${limit}`,
    )
  }

2.2 ts类型

src\api\acl\user\type.ts

//账号信息的ts类型
export interface ResponseData {
    code: number
    message: string
    ok: boolean
  }
  //代表一个账号信息的ts类型
  export interface User {
    id?: number
    createTime?: string
    updateTime?: string
    username?: string
    password?: string
    name?: string
    phone?: null
    roleName?: string
  }
  //数组包含全部的用户信息
  export type Records = User[]
  //获取全部用户信息接口返回的数据ts类型
  export interface UserResponseData extends ResponseData {
    data: {
      records: Records
      total: number
      size: number
      current: number
      pages: number
    }
  }

2.3 发送请求（onMounted）

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqUserInfo } from "@/api/acl/user/index.ts";
import type { UserResponseData } from "@/api/acl/user/type.ts";
//存储当前页码
let pageNo = ref<number>(1);
//存储一页有几个数据
let pageSize = ref<number>(5);
//用户总个数
let total = ref<number>(0);
//存储全部用户的数组
let userArr = ref<Records>([]);
onMounted(() => {
  getHasUser();
});
//获取全部已有的用户信息
const getHasUser = async (pager = 1) => {
  //收集当前页码
  pageNo.value = pager;
  let result: UserResponseData = await reqUserInfo(
    pageNo.value,
    pageSize.value
  );
  console.log(result);
  
  if (result.code == 200) {
    total.value = result.data.total;
    userArr.value = result.data.records;
  }
};


</script>

 2.4 模板展示数据

截图修改一下，用户名字改为username，用户名称改为name

 2.5 分页器俩个函数回调 

const sizeChange = ()=>{
  getHasUser()
}

 三、添加与修改用户的静态搭建

<!-- 抽屉结构:完成添加新的用户账号|更新已有的账号信息 -->
<el-drawer v-model="drawer">
  <!-- 头部标题:将来文字内容应该动态的 -->
  <template #header>
    <h4>添加用户</h4>
  </template>
  <!-- 身体部分 -->
  <template #default>
    <el-form>
      <el-form-item label="用户名字">
        <el-input placeholder="请您输入用户名字"></el-input>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input placeholder="请您输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input placeholder="请您输入用户密码"></el-input>
      </el-form-item>
    </el-form>
  </template>
  <template #footer>
    <div style="flex: auto">
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </div>
  </template>
</el-drawer>

//存储抽屉组件
let drawer = ref<boolean>(false);

.......


//添加用户按钮的回调
const addUser = ()=>{
  //
  drawer.value = 1
}

//更新用户按钮的回调
const updateUser = (row:User)=>{
  //显示抽屉
  drawer.value = 1
}

四、新账号添加业务

4.1 api

添加和修改的请求封装成一个。

//添加一个新的用户账号
ADDUSER_URL = '/admin/acl/user/save',
//更新已有的用户账号
UPDATEUSER_URL = '/admin/acl/user/update',
//添加用户与更新已有用户的接口
export const reqAddOrUpdateUser = (data: User) => {
  //携带参数有ID更新
  if (data.id) {
    return request.put<any, any>(API.UPDATEUSER_URL, data)
  } else {
    return request.post<any, any>(API.ADDUSER_URL, data)
  }
}

4.2 type

//代表一个账号信息的ts类型
export interface User {
  id?: number
  createTime?: string
  updateTime?: string
  username?: string
  password?: string
  name?: string
  phone?: null
  roleName?: string
}

4.3 组件收集数据

//收集用户信息的响应式数据
let userParams = reactive<User>({
  username: '',
  name: '',
  password: '',
})

4.4 发起请求 

//保存按钮的回调
const save = async () => {
  //保存按钮:添加新的用户|更新已有的用户账号信息
  let result: any = await reqAddOrUpdateUser(userParams)
  //添加或者更新成功
  if (result.code == 200) {
    //关闭抽屉
    drawer.value = false
    //提示消息
    ElMessage({
      type: 'success',
      message: userParams.id ? '更新成功' : '添加成功',
    })
    //获取最新的全部账号的信息
    getHasUser(userParams.id ? pageNo.value : 1)
  } else {
    //关闭抽屉
    drawer.value = false
    //提示消息
    ElMessage({
      type: 'error',
      message: userParams.id ? '更新失败' : '添加失败',
    })
  }
}

4.5 添加用户按钮&&取消按钮

添加用户按钮：我们在点击添加用户按钮的时候，先把之前的用户数据清空

//添加用户按钮的回调
const addUser = () => {
  //抽屉显示出来
  drawer.value = true
  //清空数据
  Object.assign(userParams, {
    id: 0,
    username: '',
    name: '',
    password: '',
  })
  
}

4.6 取消按钮

点击取消按钮之后：关闭抽屉

 

//取消按钮的回调
const cancel = () => {
  //关闭抽屉
  drawer.value = false
}