Vue2.0项目重构到Vue3.0
发布时间
阅读量：
阅读量
1.新建Vue3.0项目，确定使用的脚手架
****第一种：在终端输入：npm init vue@latest
注： 选择项目功能时： 除了第一项的项目名字外，其他可以暂时No
cd
npm install
npm run dev ：运行
npm run build: 打包 (生成一个dist文件夹)
第二种：在终端输入：npm init vite-app < project-name>
**** cd
**** npm install
npm run dev
3.所用到的插件具体引用：
npm i axios echarts element-plus font-awesome node-sass@6 sass-loader@10 qs echarts -s
4.我们在main.js中需要引入的插件有：
vue2.0代码块如下：
<template>
<div class="studentList">
<!-- 查询 -->
<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="compData" 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="联系方式" width="110" align="center">
</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="el-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>
import { ElMessage } from "element-plus";
import { student, studentDel } from "../../api/api.js";
export default {
data() {
return {
tableData: [], // 表格内的总数量
formInline: {
// 查询
name: "",
},
total: 0, // 总条数
pageSize: 10, //每页显示的数量
currentPage: 1, // 当前页
};
},
created() {
this.getData();
},
computed: {
compData() {
return this.tableData.slice(
(this.currentPage - 1) * this.pageSize, //起点
this.currentPage * this.pageSize //终点（数据截取在终点的前一个结束）
);
},
},
methods: {
handleSizeChange(val) {
//修改每页显示的数量
this.pageSize = val;
this.currentPage = 1; // 回到修改完成后，回到当前第一页
},
handleCurrentChange(val) {
//修改当前页
this.currentPage = val;
},
// 获取数据
getData(params) {
student(params).then((res) => {
if (res.data.status === 200) {
this.tableData = res.data.data;
this.total = res.data.total;
this.tableData.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 = "休学中");
});
}
});
},
// 删除
del(row) {
studentDel(row.id).then((res) => {
if (res.data.status === 200) {
ElMessage({ message: "数据删除成功", type: "success" });
// 重新获取数据
this.getData();
}
});
},
// 查询
find() {
// 根据姓名显示数据
this.getData(this.formInline);
},
// 重置
reset() {
this.formInline = {};
this.getData(this.formInline);
},
},
};
</script>
<style lang="scss">
.studentList {
.demo-form-inline,
.el-form-inline {
text-align: left;
}
}
</style>vue3.0代码块：
<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>5.总结：
（1）什么是项目重构：
所谓重构(refactoring)是这样一个过程：在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构。重构是一种经千锤百炼形成的有条不紊的程序整理方法，可以最大限度地减少整理过程中引入错误的概率。本质上说，重构就是在代码写好之后改进它的设计。
“在代码写好之后改进它的设计”这种说法有点儿奇怪。在软件开发的大部分历史时期，大部分人相信应该先设计而后编码：首先得有一个良好得设计，然后才能开始编码。但是，随着时间流逝，人们不断修改代码，于是根据原先设计所得的系统，整体结构逐渐衰弱。代码质量慢慢沉沦，编码工作从严谨的工程堕落为胡砍乱劈的随性行为。
“重构”正好与此相反。哪怕手上有一个糟糕的设计，甚至是一堆混乱的代码，我们也可以借由重构将它加工成设计良好的代码。重构的每个步骤都很简单，甚至显得有些过于简单：只需要把某个字段从一个类移到另一个类，把某些代码从一个函数拉出来构成另一个函数，或是在继承体系中把某些代码推上推下就行了。但是聚沙成塔，这些小小的修改累积起来就可以根本上改善设计质量。这和一般常见的“软件会慢慢腐烂”的观点恰恰相反。
（2）项目重构有点：
重构 是一种有条理的清理代码的方式，可以最大程度地减少引入 bug 的机会。有了重构以后，工作的平衡点开始发生变化。我发现设计不是在一开始完成的，而是在整个开发过程中逐渐浮现出来。在系统构筑过程中，我学会了如何不断改进设计。这个“构筑 - 设计”的反复互动，可以让一个程序在开发过程中持续保有良好的设计。
全部评论 (0)
还没有任何评论哟~