行政单位网站信息建设政策,佛山南海网站建设,网站品牌高端定制,郑州做网站网络公司重构的流程1.新建项目,确定脚手架版本2.项目整体迁移3.重构路由,axios,element-plus等项目所需要的依赖4.迁移组件内容(需要的配置项移步到5目录and6目录)4-1.Login页面4-2. Home页4-3.Students管理内部的页面4-3-1.studentList(学生列表)4-3-2.InfoList(信息列表)4-3-3.InfoLi…
重构的流程1.新建项目,确定脚手架版本2.项目整体迁移3.重构路由,axios,element-plus等项目所需要的依赖4.迁移组件内容(需要的配置项移步到5目录and6目录)4-1.Login页面4-2. Home页4-3.Students管理内部的页面4-3-1.studentList(学生列表)4-3-2.InfoList(信息列表)4-3-3.InfoLists(信息管理)4-3-4.WorkList(作业列表页)4-3-5.WorkMenu(作业管理页)5.迁移到vue3中所用到的组件5-1.面包屑组件(Breadcrumb)5-2.侧边栏 组件(Menu)5-3.头部组件(Header)5-4.分页组件(pageing)5-5.页尾组件(footer)6.迁移到vue3中所用到的模块6-1.setToken.js模块6-2.table.js模块6-3.vaildata.js正则模块7.总结:1.新建项目,确定脚手架版本
1-1.新建项目
npm create vite (filename)1-2.查看脚手架版本是否是3.0.0版本,如果是则安装成功,否则安装失败
2.项目整体迁移
把vue2中所要用到的组件以及文件,图片迁移到vue3的组件内
3.重构路由,axios,element-plus等项目所需要的依赖
3-1.下载依赖可以使用两种方式 3-1-1:将依赖一次性下载完成
npm i axios,element-plus,vue-router,sass-loader,qs,
echarts,font-awesome,vite-aliases3-1-2:使用那个就下载那个的依赖包
npm i //下载依赖
npm i axios //下载请求
npm i element-plus //下载element-plus
npm i vue-router //下载路由
npm i sass-loader //下载sass
npm i qs //下载qs方法
npm i echarts //下载echarts
npm i font-awesome //下载图标库
npm i vite-aliases //下载的依赖文件下载完成移步4目录看修改vue2转换vue3的组件
4.迁移组件内容(需要的配置项移步到5目录and6目录)
4-1.Login页面 templatediv classloginel-card classbox-card!-- 这里的template只是为了承载插槽 #header--template #headerdiv classclearfixspan通用后台管理器/span/div/templateel-form :modelform status-icon refform label-width100px classdemo-ruleForm :rulesrulesel-form-item label用户名 propnameel-input typetext v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modelform.password/el-input/el-form-itemel-form-itemel-button typeprimary clicklogin(form)登录/el-button/el-form-item/el-form/el-card/div
/templatescript
import { login } from /api/api.js
import { nameRule, passRule } from /utils/validate.js
import { setToken } from /utils/setToken.js;
export default {name: Login,data() {return {form: {name: admins,password: Dx1212$,},rules: {name: [{ validator: nameRule, required: true, trigger: blur },],password: [{ validator: passRule, required: true, trigger: blur }],}}},methods: {login(form) {this.$refs[form].validate((valid) {if (valid) {login(this.form).then((res) {if (res.data.status 200) {setToken(token, res.data.token);setToken(username, this.form.name);this.$message({ message: res.data.message, type: success });location.href /Home}})} else {// console.error(this.form)}})},},created() {// 记录url地址栏中路由信息// console.log(this.$route.matched)}
};
/scriptstyle langscss
.login {width: 100%;height: 100%;position: absolute;background: url(../assets/bg.jpg);.box-card {width: 450px;margin: 200px auto;background: #65768557;.clearfix {//标题font-size: 34px;color: white;}.el-button {//按钮width: 100%;}.el-form-item__label {color: white;}}
}
/style4-2. Home页
templatediv classhome!-- 头部 --Header/Header!-- 主体部分 --el-container classcontent!-- 左侧 --Menu/Menu!-- 右侧 --el-containerel-main!-- 面包屑 --Bread/Breaddiv classcountrouter-view/router-view/div/el-main!-- 尾部 --el-footerFooter/Footer/el-footer/el-container/el-container/div
/templatescript
import Header from ./common/Header.vue;
import Bread from ./common/Breadcrumb.vue;
import Menu from ./common/Menu.vue;
import Footer from ./common/Footer.vue;
export default {name: home,props: {msg: String},components: {Header,Bread,Menu,Footer},created() {console.log(this.$route.matched)}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped langscss
.home {width: 100%;height: 100%;.content {position: absolute;width: 100%;top: 60px;bottom: 0;.count {margin: 20px 0px;}}
}
/style
4-3.Students管理内部的页面
4-3-1.studentList(学生列表)
templatediv!-- 查询 --el-form :inlinetrue :modelformInline classdemo-form-inline sizesmall alignleftel-form-item label姓名el-input v-modelformInline.name placeholder请输入姓名/el-input/el-form-itemel-form-itemel-button typeprimary clickfind查询/el-button/el-form-itemel-form-itemel-button typeprimary clickreset重置/el-button/el-form-item/el-form!-- 表格 --!--1:0-9 2:10-19 3:20-29 slice(当前页数-1) *每页的条数,当前页数*当前的条数--el-table v-loadingloading border :datacompData stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propnumber label学号 aligncenter/el-table-columnel-table-column propclass label班级号 aligncenter/el-table-column!-- 判断是否入学 --el-table-column propstate_text label状态 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作 width120px aligncenter!-- 相当于ref --template slot-scopescopeel-button typeprimary sizesmall iconDelete clickdel(scope.row)/el-button/template/el-table-column/el-table!-- 分页 --el-cardel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagecurrentPage:page-sizes[5, 10, 20, 30, 50] :page-sizepageSize layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/el-card
/div
/templatescript setup
import { student, studentDel } from ../../api/api;
import { ref, reactive, computed } from vue
import service from ../../api/service;let tableData reactive([])//表格的总数据
let formInline reactive({//查询name:
})
// console.log(wewe, formInline.name);
let total ref(0) //总条数
let pageSize ref(10)//每页显示的数量
let currentPage ref(1)//当前页
let loading ref(true)//加载遮罩层
getData()let compData computed(() {// console.log(tableData);return tableData.slice((currentPage.value - 1) * pageSize.value,//起点currentPage.value * pageSize.value//终点(数据取在终点的前一个结束))
})function handleSizeChange(val) {//修改每页显示的数量pageSize.value val;currentPage.value 1;//每次修改完成之后,回到当前第一页
}
function handleCurrentChange(val) { //修改当前页currentPage.value val;
}
// 获取数据
function getData(params) {console.log(params);student(params).then((res) {if (res.data.status 200) {tableData.length 0tableData.push(...res.data.data)total.value res.data.total;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 休学中);})loading.value false}})
}
// 删除
function del(row) {studentDel(row.id).then((res) {if (res.data.status 200) {message({ message: 数据删除成功, type: success });// 重新获取数据getData();// console.log(getData())}})
}
// 查询
function find() {//根据姓名显示数据getData(formInline)// console.log(tableData)
}
// 重置
function reset() {formInline reactive({});getData(formInline.name)
}
/scriptstyle langscss scoped
.demo-form-inline {padding-left: 10px;
}.el-card {margin-top: 20px;
}
/style4-3-2.InfoList(信息列表)
templatediv classinfolist!-- 新增按钮 --el-form :inlinetrue classdemo-form-inline sizesmall alignleftel-form-itemel-button typeprimary clickassStudent新增/el-button/el-form-item/el-form!-- 信息列表 --el-table :datacompData border stylewidth: 100% v-loadingloadingel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column proptime label入学时间 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propphone label手机号 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter/el-table-columnel-table-column label操作 width120px aligncenter!-- 相当于ref --template #defaultscopeel-button typeprimary sizesmall :iconEdit clickedit(scope.row)/el-buttonel-button typeprimary sizesmall :iconDelete clickdel(scope.row)/el-button/template/el-table-column/el-table!-- 课堂小练习:完成分页效果,效果详情参考studentList --el-cardel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagecurrentPage:page-sizes[5, 10, 20, 30, 50] :page-sizepageSize layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/el-card!-- 复用提示框 --el-dialog width450px :titlestate ? 添加学生信息 : 修改学生信息 :model-valuedialogFormVisibleel-form :modelform refformRefel-form-item label姓名 propname :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 propsex :label-widthformLabelWidthel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 propage :label-widthformLabelWidthel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-item label联系方式 propphone :label-widthformLabelWidthel-input v-modelform.phone autocompleteoff/el-input/el-form-itemel-form-item label父亲 propfather :label-widthformLabelWidthel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-item label母亲 propmather :label-widthformLabelWidthel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-item label入学时间 proptime :label-widthformLabelWidthel-date-picker v-modelform.time typedate placeholder选择日期 formatyyyy 年 MM 月 dd 日value-formatyyyy-MM-dd/el-date-picker/el-form-itemel-form-item label家庭住址 propaddress :label-widthformLabelWidthel-input v-modelform.address autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickcloseInfo(form)取 消/el-buttonel-button typeprimary clicksure(form)确 定/el-button/div/el-dialog
/div
/templatescript setup
import { Delete, Edit, Search, Share, Upload } from element-plus/icons-vue
import { getInfo, info, infoDel } from ../../api/api;
import { ref, reactive, computed } from vue;
import service from ../../api/service;
import { ElMessage, ElMessageBox } from element-plus// export default {
// data() {
// return {
let tableData reactive([])//信息列表数据
let total ref(0)//总数
let currentPage ref(1)//当前页
let pageSize ref(10)//每页数量/
let state ref(false)//区分新增还是修改
let dialogFormVisible ref(false)//判断提示框显示隐藏
let formLabelWidth ref(80px)//默认宽度
// 对象的setter 可以创建属性,可以去创建属性,再去赋值
// getter 会直接去找该属性,如果没有属性,报错
let form reactive({name: ,age: ,sex: 1,father: ,mather: ,phone: ,time: ,address: ,id: 1
})
let loading ref(true)getData()let compData computed(() {console.log(erer, compData)return tableData.slice((currentPage.value - 1) * pageSize.value,//起点currentPage.value * pageSize.value//终点(数据取在终点的前一个结束))
})function handleSizeChange(val) {//修改每页显示的数量pageSize.value val;currentPage.value 1;//每次修改完成之后,回到当前第一页
}
function handleCurrentChange(val) { //修改当前页currentPage.value val;
}
// 获取信息列表数据
function getData() {getInfo().then((res) {console.log(res)if (res.data.status 200) {tableData.length 0tableData.push(...res.data.data)total.value res.data.totalconsole.log(tableData)tableData.forEach((item) {item.sex 1 ? (item.sex_text 男) : (item.sex_text 女)})loading.value false}})
}
// 新增数据
function assStudent() {//1.弹出 提示框dialogFormVisible.value true;// 修改文字state.value true;let i 0form reactive({name: ,age: ,sex: 1,father: ,mather: ,phone: ,time: ,address: ,id: i})
}
function edit(row) {console.log(row);form reactive({ ...row });state.value false;//切换对话框标题dialogFormVisible.value true
}
const formRef ref(null)
// 取消按钮
function closeInfo() {formRef.value.resetFields();dialogFormVisible.value false;
}
// 确定按钮
function sure() {console.log(1111);dialogFormVisible.value false// 是否复合正则要求formRef.value.validate(valid {if (valid) {// 判断是新增还是修改if (state.value) {//新增info(post, form).then((res) {// console.log(form.value, 111);if (res.data.status 200) {getData()dialogFormVisible.value false;ElMessage({ type: success, message: res.data.message })}})} else {//修改info(put, form).then((res) {if (res.data.status 200) {getData();dialogFormVisible.value false;ElMessage({ type: success, message: res.data.message })}})}}})}
function del(row) {// alert(你确定要删除吗?, 提示, {// confirmButtonText: 确定,// callback: () {// console.log(111)// infoDel(row.id).then(res {// if (res.data.status 200) {// getData()// ElMessage({ type: success, message: res.data.message })// }// })// }// })ElMessageBox.alert(This is a message, Title, {// if you want to disable its autofocus// autofocus: false,confirmButtonText: OK,callback: () {infoDel(row.id).then(res {if (res.data.status 200) {getData()ElMessage({ type: success, message: res.data.message })}})},})
}
/scriptstyle langscss scoped
.demo-form-inline {padding-left: 10px;
}.el-card {margin-top: 20px;
}
/style4-3-3.InfoLists(信息管理) templatediv classinfolist!-- 新增按钮 --el-form :inlinetrue classdemo-form-inline sizesmall alignleftel-form-itemel-button typeprimary clickassStudent新增/el-button/el-form-item/el-form!-- 信息列表 --el-table :datacompData border stylewidth: 100% v-loadingloadingel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column proptime label入学时间 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propphone label手机号 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter/el-table-columnel-table-column label操作 width120px aligncenter!-- 相当于ref --template #defaultscopeel-button typeprimary sizesmall :iconEdit clickedit(scope.row)dfgh/el-buttonel-button typeprimary sizesmall :iconDelete clickdel(scope.row)/el-button/template/el-table-column/el-table!-- 课堂小练习:完成分页效果,效果详情参考studentList --el-cardel-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagecurrentPage:page-sizes[5, 10, 20, 30, 50] :page-sizepageSize layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/el-card!-- 复用提示框 --el-dialog width450px :titlestate ? 添加学生信息 : 修改学生信息 :model-valuedialogFormVisibleel-form :modelform reffromel-form-item label姓名 propname :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 propsex :label-widthformLabelWidthel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 propage :label-widthformLabelWidthel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-item label联系方式 propphone :label-widthformLabelWidthel-input v-modelform.phone autocompleteoff/el-input/el-form-itemel-form-item label父亲 propfather :label-widthformLabelWidthel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-item label母亲 propmather :label-widthformLabelWidthel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-item label入学时间 proptime :label-widthformLabelWidthel-date-picker v-modelform.time typedate placeholder选择日期 formatyyyy 年 MM 月 dd 日value-formatyyyy-MM-dd/el-date-picker/el-form-itemel-form-item label家庭住址 propaddress :label-widthformLabelWidthel-input v-modelform.address autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickcloseInfo(form)取 消/el-buttonel-button typeprimary clicksure(form)确 定/el-button/div/el-dialog
/div
/templatescript setup
import { Delete, Edit, Search, Share, Upload } from element-plus/icons-vue
import { info, infoDel } from ../../api/api;
import { getData, changInfo, delData } from ../../utils/table;
import service from ../../api/service;
import { computed, ref, toRef, reactive } from vue;
let tableData reactive([])//信息列表数据
let total ref(0)//总数
let currentPage ref(1)//当前页
let pageSize ref(10)//每页数量
let state ref(false)//区分新增还是修改
let dialogFormVisible ref(false)//判断提示框显示隐藏
let formLabelWidth ref(80px)//默认宽度
// 对象的setter 可以创建属性,可以去创建属性,再去赋值
// getter 会直接去找该属性,如果没有属性,报错
var i 0
let form reactive({name: ,age: ,sex: 1,father: ,mather: ,phone: ,time: ,address: ,id: i
})
let loading ref(true);
const datas toRef(tableData)._object
let obj {datas,total,loading,service
}
getData(obj, /info);let compData computed(() {return tableData.slice((currentPage.value - 1) * pageSize.value,//起点currentPage.value * pageSize.value//终点(数据取在终点的前一个结束))
})
function handleSizeChange(val) {//修改每页显示的数量pageSize.value val;currentPage.value 1;//每次修改完成之后,回到当前第一页
}
function handleCurrentChange(val) { //修改当前页currentPage.value val;
}
// 获取信息列表数据// 新增数据
function assStudent() {// console.log(ghj);//1.弹出 提示框dialogFormVisible.value true;// 修改文字state.value true;let i 0form reactive({name: ,age: ,sex: 1,father: ,mather: ,phone: ,time: ,address: ,id: i})
}
function edit(row) {// console.log(121212, row);form.value reactive({ ...row });state.value false;//切换对话框标题dialogFormVisible.value true
}
const from ref(null)
// 取消按钮
function closeInfo(form) {from.resetFields();dialogFormVisible.value false;
}
// 确定按钮
function sure() {console.log(11)dialogFormVisible.value false// 是否复合正则要求let method ;const datas toRef(tableData)._objectlet mm {service,dialogFormVisible,datas,total,loading,service}state.value ? method post : method put;changInfo(mm, method, /info, form, getData);}
function del(row) {// console.log(11111, row);const datas toRef(tableData)._objectlet obj3 {row,service,datas,total,loading,}// console.log(1111, row)delData(obj3, /info, row.id, getData);
}/scriptstyle langscss scoped
.demo-form-inline {padding-left: 10px;
}.el-card {margin-top: 20px;
}
/style4-3-4.WorkList(作业列表页) templatediv classworkList!-- 信息列表 --el-table :datatableData v-loadingloading border stylewidth: 100%el-table-column propid label用户id aligncenter/el-table-columnel-table-column propuserId_text label所属班级 aligncenter/el-table-column6el-table-column proptitle label作业名称 aligncenter/el-table-columnel-table-column propcompleted_text label完成情况 aligncenter/el-table-column/el-table!-- 分页 --el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 50, 100] :page-sizesize layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination
/div
/templatescript setupimport service from ../../api/service.js
import { getTableData } from /utils/table.js
import { ref, reactive } from vue;
let tableData reactive([])
let page ref(1)
let size ref(10)
let total ref(0)
let loading ref(false)
// 通过接口,请求数据
// getTable()
// const datas tableData
const obj reactive({service,tableData,total,loading
})
let comp { completed: [已完成, 未完成], suerId: [猪猪侠一班, 猪猪侠二班, 猪猪侠三班, 猪猪侠四班] }
getTableData(obj, /works, { page: page.value, size: size.value }, [completed, userId], comp)
// console.log(getTable())function handleSizeChange(val) {console.log(每页 ${val} 条);size.value valpage.value 1;let comp { completed: [已完成, 未完成], suerId: [猪猪侠一班, 猪猪侠二班, 猪猪侠三班, 猪猪侠四班] }getTableData(obj, /works, { page: page.value, size: size.value }, [completed, userId], comp)
}
function handleCurrentChange(val) {console.log(当前页: ${val});console.log(page);page.value vallet comp { completed: [已完成, 未完成], suerId: [猪猪侠一班, 猪猪侠二班, 猪猪侠三班, 猪猪侠四班] }getTableData(obj, /works, { page: page.value, size: size.value }, [completed, userId], comp)
}// computed: {// compData() {// return this.tableData.slice(// (this.page - 1) * this.size,//起点// this.page * this.size//终点(数据取在终点的前一个结束)// )// }// }/scriptstyle langscss scoped/style4-3-5.WorkMenu(作业管理页) templatediv classworkList!-- 信息列表 --el-table :datatableData v-loadingloading border stylewidth: 100%el-table-column propid label用户id aligncenter/el-table-columnel-table-column propuserId_text label所属班级 aligncenter/el-table-columnel-table-column proptitle label作业名称 aligncenter/el-table-columnel-table-column propcompleted_text label完成情况 aligncenter/el-table-column/el-tablePage :totaltotal :urlurl :objobj/Page
/div
/templatescript setupimport service from /api/service.jsimport Page from ../common/Pageing.vue;
import { ref, reactive } from vue;
// data() {
// return {
let tableData reactive([])
let total ref(0)
let loading ref(true)
let url ref(/works)let obj {tableData,total,loading,url,service
}// }// },// mounted() {// // console.log(this.tableData)// }// computed: {// compData() {// return this.tableData.slice(// (this.page - 1) * this.size,//起点// this.page * this.size//终点(数据取在终点的前一个结束)// )// }// }// }
/scriptstyle langscss scoped/style5.迁移到vue3中所用到的组件
5-1.面包屑组件(Breadcrumb)
templatedivel-cardel-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-item :to{ path: /home }首页/el-breadcrumb-item!-- 课堂小练习:给各级的面包屑,添加路由跳转的功能 --el-breadcrumb-item v-for(item, index) in $route.matched :ueitem :keyindex:to{ name: item.name }{{ item.name }}/el-breadcrumb-item/el-breadcrumb/el-card/div
/templatescript setup
import { ref } from vue
let ue ref()
/scriptstyle langscss scoped/style5-2.侧边栏 组件(Menu)
templatediv classmenuel-aside width203pxel-menu router default-active2 classel-menu-vertical-demo background-color#2578B5text-color#fff active-text-color#ffd04btemplate v-for(item, index) in menusel-sub-menu :indexindex :keyindex v-if!item.hiddentemplate #titlei :classitem.iconClass stylemargin-right:20px/ispan{{ item.name }}/span/templateel-menu-item v-for(child, index) in item.children :keyindex :indexchild.pathel-menu-item :indexchild.pathi :classchild.iconClass stylemargin-right:10px/i{{ child.name }}/el-menu-item/el-menu-item/el-sub-menu/template/el-menu/el-aside/div
/templatescript setup
import { useRouter } from vue-router;
const router useRouter();
const menus router.options.routes;
// 默认展开项
const activePach router.currentRoute.value.path;/scriptstyle langscss scoped
.menu {// 谷歌中的滚动条::-webkit-scrollbar {display: none;}.el-aside {height: 100%;.el-menu {height: 100%;.fa {margin-right: 10px;}}.el-submenu .el-menu-item {min-width: 0;}}
}
/style5-3.头部组件(Header)
templatediv classheaderel-headerdiv classtitle通用管理系统/divdiv{{ name }}/div/el-header/div
/templatescript setup
import { getToken } from /utils/setToken.js;
import { ref, onMounted } from vue;let name ref()name.value getToken(username)/scriptstyle langscss scoped
.header {.el-header {background-color: #2578b5;color: white;line-height: 60px;display: flex;justify-content: space-between;.title {width: 200px;font-size: 24px;// background: #2578b5;}}
}
/style5-4.分页组件(pageing)
!-- 这里整个文件是 组件化封装 --
templatediv!-- 分页 --el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 50, 100] :page-sizesize layouttotal, sizes, prev, pager, next, jumper:totaltotal :urlurl :objobj/el-pagination
/div
/templatescript setup
import { getTableData } from /utils/table.js
import { ref, onMounted } from vue;
const props defineProps({url: String,total: Number,obj: Object
})let page ref(1);
let size ref(10);console.log(props.obj)
onMounted(() {// 通过接口,请求数据// getTable()let comp { completed: [已完成, 未完成], suerId: [猪猪侠一班, 猪猪侠二班, 猪猪侠三班, 猪猪侠四班] }getTableData(props.obj, props.url, { page: page.value, size: size.value }, [completed, userId], comp)
})function handleSizeChange(val) {// console.log(每页 ${val} 条);size.value val;page.value 1;let comp { completed: [已完成, 未完成], suerId: [猪猪侠一班, 猪猪侠二班, 猪猪侠三班, 猪猪侠四班] }getTableData(props.obj, props.url, { page: page.value, size: size.value }, [completed, userId], comp)
}
function handleCurrentChange(val) {// console.log(当前页: ${val});page.value vallet comp { completed: [已完成, 未完成], suerId: [猪猪侠一班, 猪猪侠二班, 猪猪侠三班, 猪猪侠四班] }getTableData(props.obj, props.url, { page: page.value, size: size.value }, [completed, userId], comp)
}/scriptstyle langscss scoped/style5-5.页尾组件(footer)
templatedivel-cardFrontend 2022 Casey/el-card/div
/templatescript setup/scriptstyle langscss scoped/style6.迁移到vue3中所用到的模块
6-1.setToken.js模块 export function setToken(tokenKey, tokenValue) {return localStorage.setItem(tokenKey, tokenValue)
}export function getToken(tokenKey) {return localStorage.getItem(tokenKey)
}export function removeToken(tokenKey) {return localStorage.removeItem(tokenKey)
}6-2.table.js模块
import { ElMessage, ElMessageBox } from element-plus;
// 这个整个文件是 模块化
// 获取表格数据
export function getData(root, url, params) {// console.log(1112345031E481, root);root.service.get(url, { params: params || {} }).then((res) {if (res.data.status 200) {root.datas.length 0root.datas.push(...res.data.data)root.total.value res.data.totalroot.datas.forEach((item) {item.sex 1 ? (item.sex_text 男) : (item.sex_text 女)})root.loading.value false}}).catch((err) {throw err;})
}
// 新增和修改的确定按钮封装
import qs from qs;
export function changInfo(root, method, url, form, callback) {// 判断是新增还是修改// 转换数据类型 后端的数据有问题let data qs.stringify(form)root.service[method](url, data).then((res) {if (res.data.status 200) {callback(root, url);root.dialogFormVisible.value false;ElMessage({ type: success, message: res.data.message })}}).catch(err {// 直接在控制台上弹出错误throw err;})
}
// 删除提示框封装
export function delData(root, url, id, callFun) {ElMessageBox.alert(你确定要删除吗?, 提示, {confirmButtonText: 确定,callback: () {console.log(root.service.delete(${url}/${id}), 2345678);root.service.delete(${url}/${id}).then(res {console.log(11111, res)if (res.data.status 200) {callFun(root, url)console.log(root, url, 111);ElMessage({ type: success, message: res.data.message })}})}})}// 作业列表,获取数据的封装
export function getTableData(root, url, params, arr, text_patams) {root.service.get(url, { params: params || {} }).then(res {// console.log(root);if (res.data.status 200) {root.tableData.length 0root.tableData.push(...res.data.data)root.total.value res.data.total// 外层循环 找到数组中的每一个对象root.tableData.map(item {// 内层循环 找到每一个对象中需要修改的属性arr.map((aItem, index) {// console.log(2, item, item[aItem], aItem, index, text_patams.completed[index])if (aItem completed) {item[aItem] ? item[aItem _text] text_patams.completed[index] : item[aItem _text] text_patams.completed[index 1]} else {if (item.userId 1) {item[aItem _text] 猪猪侠一班return false} else if (item.userId 2) {item[aItem _text] 猪猪侠二班return false} else if (item.userId 3) {item[aItem _text] 猪猪侠三班return false} else if (item.userId 4) {item[aItem _text] 猪猪侠四班return false} else if (item.userId 5) {item[aItem _text] 猪猪侠五班return false} else if (item.userId 6) {item[aItem _text] 猪猪侠六班return false} else if (item.userId 7) {item[aItem _text] 猪猪侠七班return false} else if (item.userId 8) {item[aItem _text] 猪猪侠八班return false} else if (item.userId 9) {item[aItem _text] 猪猪侠九班return false} else if (item.userId 10) {item[aItem _text] 猪猪侠十班return false}}})})// console.log(root.loading);// root.loadingroot.loading.value false}}).catch(err {throw err;})
}
6-3.vaildata.js正则模块
// 用户名匹配
export function nameRule(rule, value, callback) {let reg /(^[a-zA-Z0-9]{4,10}$)/if (value ) {callback(new Error(请输入用户名));} else if (!reg.test(value)) {callback(请输入4-10位的用户名)} else {callback();}
}//密码正则匹配
export function passRule(rule, value, callback) {let reg /^\S*(?\S{6,12})(?\S*\d)(?\S*[A-Z])(?\S*[a-z])(?\S*[!#$%^*? ])\S*$/if (value ) {callback(new Error(请输入密码));} else if (!reg.test(value)) {callback(请输入6-12位带有数字大小写字符以及特殊符号)} else {callback();}
}7.总结:
以上所属都是vue2迁移到vue3所用到的内容,有何不懂评论区问答!!!
