建设网站对服务器有什么要求吗商标设计软件

当前位置： 首页 > news >正文

建设网站对服务器有什么要求吗,商标设计软件,征婚网站怎么做,wordpress 首页预览文章目录 #x1f4cb;前言#x1f3af;demo 介绍#x1f3af;功能分析#x1f9e9;数据的展示与分页功能#x1f9e9;编辑功能#x1f9e9;删除功能 #x1f3af;部分代码分析#x1f3af;完整代码#x1f4dd;最后 #x1f4cb;前言 这篇文章介绍一下基于 Vue3 和… 文章目录 前言demo 介绍功能分析数据的展示与分页功能编辑功能删除功能 部分代码分析完整代码最后 前言 这篇文章介绍一下基于 Vue3 和 ElementPlus 的小 demo 是一个模拟的联系人列表管理后台的功能包括了数据的展示、编辑功能、删除功能以及列表分页功能。这篇文章是为了下一篇做基础和学习因此列表的数据使用的是死数据。下一篇预告 Node.js Vue3 ElementPlus 实现联系人列表管理后台。 demo 介绍 上面我也说到了这个联系人列表管理后台的功能包括了数据的展示、编辑功能、删除功能以及列表分页功能。接下来我们来分析每个功能具体要做什么、以及如何实现。首先我们可以看到最终效果图如下。 功能分析 接下来我们逐步分析这个 demo 要实现的功能。其中包括了数据的展示、编辑功能、删除功能以及列表分页功能。 数据的展示与分页功能 首先项目运行后展示出的效果如上图列表包括了 id 、姓名、电话以及相关操作操作又包括了编辑功能和删除功能的按钮。 注意 id 是从小到大排列其中数据中的 id 是没有排序的如下图。 最后是数据列表的分页这里用到的是 el-pagination 实现分页的功能五条数据为一页。
编辑功能 然后是编辑功能通过点击编辑按钮然后出现弹窗对数据进行修改和保持这里使用到了 el-dialog 和 ElMessage 实现窗口的出现、隐藏以及一些交互效果消息框。 交互效果包括了取消编辑、保存编辑的内容通过 ElMessage 来实现交互后的消息框效果如下图。
删除功能 然后是编辑功能通过点击删除按钮然后出现是否确认删除的弹窗这里使用到了 ElMessageBox 实现弹窗的出现以及确认、取消的交互效果。 点击确认后数据就会被删除了。然后通过 ElMessage 来实现交互后的消息框比如删除成功的消息框。 部分代码分析 首先我们分析一下这个 demo 用的组件有 el-button 、el-form 、el-card 、el-dialog 、el-table 、el-pagination 等等。 这个 demo 的 template 部分结构很简单只包括了数据列表和弹窗通过 el-card 、el-table 、el-button 实现数据列表el-dialog 、el-form 、el-button 实现弹窗的部分。 因为这个 demo 的数据是写死的了没有后台数据以及 axios 获取 所以通过以下的方法实现数据列表的渲染。 其中默认数据如下。
弹窗部分的代码如下 然后还包括一些交互功能的代码如弹窗的显示与隐藏。 然后就是显示弹窗以后对应的交互功能如取消就是隐藏关闭掉弹窗、保存的功能。 // 保存联系人信息const saveContact () {const index sortedContactList.value.findIndex((item) item.id editForm.value.id);if (index 0) {const oldItem contactList.value.find((item) item.id editForm.value.id);contactList.value.splice(contactList.value.indexOf(oldItem), 1, {…oldItem,…editForm.value,});sortedContactList.value.splice(index, 1, {…oldItem,…editForm.value,});displayedData.value.splice(index - pageSize.value * (currentPage.value - 1),1,editForm.value);editFormVisible.value false;ElMessage({message: 编辑成功,grouping: true,type: success,});}};这里我来分析一下如何实现保存编辑内容的功能。首先这段代码的运行逻辑是在编辑联系人信息时从 contactList 中找到对应的联系人数据项并用 editForm 中的新数据来更新它然后同步更新 sortedContactList 和 displayedData。最后将编辑框关闭并提示用户编辑成功。 具体逻辑如下。 首先通过 findIndex() 方法查找 sortedContactList 中是否存在 id 和 editForm 中的 id 相同的联系人数据项。id 是联系人对象的唯一标识符如果能够找到该联系人数据就从 contactList 中找到对应的旧联系人数据项并用新的 editForm 数据来更新它。同时也更新 sortedContactList 中对应索引上的数据项。接着根据当前页码和每页显示数量还需要更新 displayedData 中对应位置的数据项。最后将编辑框的 visible 属性设置为 false关闭编辑框。并使用 ElMessage 组件显示一条“编辑成功”的成功提示信息。 当然这个 demo 还有其他功能这里就不过多描述了代码的具体功能了详情还得是自己去编写了才能体验的到了最后附上完整代码供大家参考和学习。 完整代码 templatediv!– 编辑联系人dialog窗口 –el-dialog title编辑 v-modeleditFormVisible width30%el-form :modeleditForm :rulesformRules refeditFormRefel-form-item label姓名 propnameel-input v-modeleditForm.name/el-input/el-form-itemel-form-item label电话 proptelel-input v-modeleditForm.tel/el-input/el-form-item/el-formtemplate #footerel-button clickcloseEditForm取消/el-buttonel-button typeprimary clicksaveContact保存/el-button/template/el-dialogel-card classlist-cardel-table :datadisplayedData empty-text暂无联系人el-table-columnpropidlabelidwidth80aligncenter/el-table-columnel-table-columnpropnamelabel姓名aligncenter/el-table-columnel-table-columnproptellabel电话aligncenter/el-table-columnel-table-column label操作 width150 aligncentertemplate #default{ row }el-button sizesmall clickshowEditForm(row)编辑/el-buttonel-button typedanger sizesmall clickdeleteContact(row)删除/el-button/template/el-table-column/el-tablediv classpaginationel-paginationlayoutprev, pager, next:totalcontactList.length:page-sizepageSizev-model:current-pagecurrentPagecurrent-changehandleCurrentChange//div/el-card/div /templatescript import { defineComponent, ref } from vue; import { ElMessage, ElMessageBox } from element-plus; export default defineComponent({name: ContactList,setup() {const contactList ref([{ id: 3, name: 王五, tel: 15833333333 },{ id: 5, name: 钱七, tel: 17755555555 },{ id: 2, name: 李四, tel: 13922222222 },{ id: 1, name: 张三, tel: 13811111111 },{ id: 7, name: 周九, tel: 16577777777 },{ id: 6, name: 孙八, tel: 15066666666 },{ id: 10, name: 马二, tel: 13000000000 },{ id: 4, name: 赵六, tel: 18844444444 },{ id: 18, name: 高静, tel: 13888888888 },{ id: 17, name: 鲁阳, tel: 13777777777 },{ id: 16, name: 贾钢, tel: 13666666666 },{ id: 15, name: 金莉, tel: 13555555555 },{ id: 14, name: 胡伟, tel: 13444444444 },{ id: 13, name: 陈红, tel: 13333333333 },{ id: 12, name: 史琳, tel: 13222222222 },{ id: 11, name: 祖维, tel: 13111111111 },{ id: 9, name: 郑一, tel: 15999999999 },{ id: 8, name: 吴十, tel: 17688888888 },{ id: 19, name: 马超, tel: 13999999999 },{ id: 20, name: 周涛, tel: 14000000000 },]);const sortedContactList ref([]);const displayedData ref([]);const pageSize ref(5);const currentPage ref(1);const editFormVisible ref(false);const editForm ref({ id: , name: , tel: });const formRules ref({name: [{ required: true, message: 请输入姓名, trigger: blur }],tel: [{required: true,message: 请输入电话号码,trigger: blur,},{pattern: /^1[3456789]\d{9}/,message: 请输入有效的手机号码,trigger: blur,},],});// 获取所有联系人列表const getContactList () {sortedContactList.value contactList.value.slice().sort((a, b) a.id - b.id);displayedData.value sortedContactList.value.slice(0, pageSize.value);};// 显示编辑弹窗const showEditForm (row) {editFormVisible.value true;editForm.value Object.assign({}, row);};// 关闭编辑弹窗const closeEditForm () {editFormVisible.value false;ElMessage({message: 已取消编辑。,grouping: true,type: info,});};// 保存联系人信息const saveContact () {const index sortedContactList.value.findIndex((item) item.id editForm.value.id);if (index 0) {const oldItem contactList.value.find((item) item.id editForm.value.id);contactList.value.splice(contactList.value.indexOf(oldItem), 1, {…oldItem,…editForm.value,});sortedContactList.value.splice(index, 1, {…oldItem,…editForm.value,});displayedData.value.splice(index - pageSize.value * (currentPage.value - 1),1,editForm.value);editFormVisible.value false;ElMessage({message: 编辑成功,grouping: true,type: success,});}};// 删除联系人const deleteContact (row) {const index sortedContactList.value.findIndex((item) item.id row.id);ElMessageBox.confirm(确定要删除联系人${row.name}吗, Warning, {confirmButtonText: 确认,cancelButtonText: 取消,type: warning,}).then(() {if (index 0) {const oldItem contactList.value.find((item) item.id row.id);contactList.value.splice(contactList.value.indexOf(oldItem), 1);sortedContactList.value.splice(index, 1);displayedData.value.splice(index - pageSize.value * (currentPage.value - 1),1);ElMessage({message: 删除成功,grouping: true,type: success,});}});};// 处理页码改变事件const handleCurrentChange (val) {currentPage.value val;const start pageSize.value * (currentPage.value - 1);const end pageSize.value * currentPage.value;displayedData.value sortedContactList.value.slice(start, end);};// 初始化获取所有联系人列表getContactList();return {contactList,sortedContactList,displayedData,pageSize,currentPage,editFormVisible,editForm,formRules,getContactList,showEditForm,closeEditForm,saveContact,deleteContact,handleCurrentChange,};}, }); /scriptstyle .pagination {margin-top: 20px;text-align: center; } /style最后 通过这篇文章的实战学习学会实现的思路和基本的逻辑为了下一篇内容做基础和学习以及实现更多其他功能。下一篇预告 Node.js Vue3 ElementPlus 实现联系人列表管理后台基于这篇文章的内容学习来实现敬请期待。