后台管理项目重构为vue3.0

前言：

• 我们平常玩的游戏有时需要更新出新的内容，我们的项目也需要更新迭代，这就需要项目的重新构建，这样就能向用户展现更好的，更优秀的项目。

---

为什么要重构项目？

项目重构的理由我觉得应该是下面几个原因：

1、项目代码结构混乱，层次不清，代码风格不统一
2、漏洞多，稳定性差
3、有新的功能需求，但是之前的框架已经不能满足了
4、各种大量接口回调导致内存泄漏严重
5、业务代码和通用代码混合
6、包含大量重复代码
7、参数列表过长，参数太多的话，应该考虑用对象去替换参数列表

其实，重构是一个不断发现问题、解决问题的过程。

重构的目的

使代码更容易理解，方便后期维护，也就是要让每个模块的定位清晰明确
发现隐藏的代码缺陷
代码风格要优雅～，内容质量高，按照合理的设计模式和编程思想去重构
同步新的需求
项目功能交互来个极致体验，功能上要要尽量做到不卡顿 不闪退，要满足产品需求的细节
从长远来看，可以提高编程效率

具体案例

下载项目

• 下载地址
• project-one为vue2.0的后台管理系统
• vue3-project为vue3.0的后台管理系统

下面是我重构后台管理项目的一个组件

一. 为什么要重构后台管理项目

由于vue3.0的推广，vue2.0已经不能满足相应功能，所以需要vue3.0来重构此项目

二. 安装项目所需的vue3.0 插件

1.安装element-plus
	element-plsu是element-ui的vue3.0版本所以需要安装

element-plus官网

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在main.js中引入

import ElementPlus from 'element-plus'
// 引入的是element-plus 的css样式
import 'element-plus/dist/index.css'
// 国际版(翻译)
import local from 'element-plus/es/locale/lang/zh-cn'
//挂载
app.use(ElementPlus, { local })

2. 安装axios 
	npm i axios
在main.js中引入：
	import axios from 'axios'
	//挂载
	app.config.globalProperties.$https = axios

• 安装和在main.js中引入完成之后项目基本就可以使用了

三. 具体代码重构

<template>
  <div class="student">
    <!-- 查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <!-- 1: 0-9 2: 10-19 3: 20-29 slice((当前页数-1)*每页的条数，当前页数*当前的条数) -->
    <el-table :data="compDate" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="class" label="班级号" align="center">
      </el-table-column>
      <el-table-column prop="state_text" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center" width="110">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>

      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" :icon="Delete" @click="del(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script setup>
import { Delete } from '@element-plus/icons-vue'
import { student, studentDel } from "../../api/api.js";
import { ref, reactive, computed } from 'vue'
import { onMounted } from 'vue'

// 表格内的总数据
let tableData = ref([])
// 查询
let formInline = reactive({
  name: "",
})
// 总条数
let total = ref(0)
// 每页显示的数量
let pageSize = ref(10)
// 当前页
let currentPage = ref(1)
onMounted(() => {
  getData();
})

let compDate = computed(() => {
  return tableData.value.slice(// 起点
    (currentPage.value - 1) * pageSize.value,
    // 终点（数据截取在终点的前一个结束）
    currentPage.value * pageSize.value
  )

})
// 修改每页显示的数量
let handleSizeChange = function (val) {
  pageSize.value = val;
  // 每次修改完成后，回到当前第一页
  currentPage.value = 1;
}
// 修改当前页
let handleCurrentChange = function (val) {
  currentPage.value = val;
}
// 获取数据
let getData = function (params) {
  student(params).then((res) => {
    if (res.data.status === 200) {
      // 表格内的总数据
      tableData.value = res.data.data;
      // 总条数
      total.value = res.data.total;
      // 循环遍历
      tableData.value.forEach((item) => {
        // 因有些后台是数组，前端显示时需要改变为汉字
        // 尽量不要去修改原数据，因为后续的使用会造成影响
        item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
        item.state === "1"
          ? (item.state_text = "已入学")
          : item.state === "2"
            ? (item.state_text = "未入学")
            : (item.state_text = "休学中");
      });
    }
  });
}
// 删除
let del = function (row) {
  studentDel(row.id).then((res) => {
    if (res.data.status === 200) {
      $message({ message: "数据删除成功", type: "success" });
      // 重新获取数据
      getData();
    }
  });
  console.log(row);
}
// 查询
let find = function () {
  getData(formInline);
}
// 重置
let reset = function () {
  formInline = {};
  getData(formInline);
}


</script>

四. 在更改中遇到的bug

1.无法读取绝对路径

更改方案：

1.不用绝对路径使用相对路径

2.安装vite-aliases插件: npm i vite-aliases
在vite.config.js中进行配置

2.无法读取文件

解决方案：

找到相应的路由在其后面加上文件后缀名即可

3.element-ui的升级一些语法的警告：

原因：

解决方案：

总结

以上就是后台管理项目重构为vue3.0的小案例以及我在更改的过程中遇见的bug以及更改方法。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog