当前位置: 首页 > 编程笔记 >

Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

章子航
2023-03-14
本文向大家介绍Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址),包括了Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)的使用技巧和注意事项,需要的朋友参考一下

1、前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下:

首先是加载页面阶段ajax从数据库中获取数据,然后动态的显示在页面中,随后可以点击单个的编辑或删除进行相关操作,可以单击默认地址按钮进行样式切换,默认地址可以没有(单击选中和取消),但是如果设置默认地址则只能设置一个,好,下面我们来一步一步的实现。

2、我这里使用的是Vue.js,页面加载阶段很简单,直接在mounted声明一个方法,然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到html元素中即可,这个就不多说了,直接看代码就行了,这篇文章主要是记录一下如何实现点击选中和取消radio,并实现点击过程中样式的切换。

var vm = new Vue({
 el:"#",
 data:{
 sites:[]
 },
 mounted:function() {
 this.showData();
 },
 methods:{
 showData:function(){
 jQuery.ajax({
 url:"这里写你的访问路径",
 data:"",
 type:"GET",
 dataType:"json",
 success:function(res){
 if(res.code==0){
 for(var i=0;i<res.data.addresses.length;i++){
 //将获取到的数据赋值到data中的site[]
 vm.sites.push(res.data.addresses[i]);
 }
 }else{
 alert("加载失败");
 }
 }
 })
 }
 }
}) 

3、首先实现radio的点击选中和取消,可以看下我单独整理的这篇文章:jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证,由于我这里用到的是Vue.js,那么看下我页面的实现代码:

<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="true" v-if="site.isdefault=='1'" checked="checked" @click="editIsDefault(site, $event)"/>
<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="false" v-else @click="editIsDefault(site, $event)" />

将获取到的addressid通过:id赋值到每个元素,实现每个元素对应它自己的id,为元素添加data-* 属性(点击了解data-*属性),方便获取到checked的信息,然后为每个radio添加class方便我们设置点击以后的图片切换,根据v-if判断该条地址信息是否为默认地址,在元素上添加了点击事件并传入site(每条地址的相关信息),和该地址信息dom对象。

下面是修改默认地址的方法:实现了点击选中和取消,并且点击切换后立即向服务器提交数据实现实时的数据更新。

editIsDefault:function(site,event){
 if($(event.currentTarget).data("waschecked")==true){
 $(event.currentTarget).prop("checked",false);
 $("input:radio[name='defaultAddress']").data('waschecked',false);
 $(event.currentTarget).data("waschecked",false);
 }else{
 $(event.currentTarget).prop("checked",true);
 $("input:radio[name='defaultAddress']").data('waschecked',false);
 $(event.currentTarget).data("waschecked",true);
 }
 var isDefault;
 if($(event.currentTarget).prop("checked")){
 isDefault = "1";
 }else{
 isDefault = "0";
 }
 jQuery.ajax({
 url:"这里写你自己的url",
 data:{
 addressid: site.addressid,
 name: site.name,
 phone: site.phone,
 area: site.area,
 address: site.address,
 isdefault: isDefault 
 },
 type:"GET",
 dataType:"json",
 success:function(res){
 if(res.code=="0"){
 }
 },
 error:function(){
 alert("修改默认地址失败,请刷新后重试");
 }
 })
}

4、使用CSS样式来实现radio点击选中和取消过程中图片样式的切换,我整理了另一篇文章,有兴趣的可以看一下:点击radio实现两个图片间的样式切换

我这里直接将我的代码贴一下供参考:

.address_manager_content-d3-left-img{
 /* 隐藏原有样式 */
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 /* 增加新样式:未选中时 */
 display: inline-block;
 width: 20px;
 height: 20px;
 position: static;
 margin : 15px 5px 0 0!important;
 background: url(未选中时图片的url) no-repeat;
 background-size: cover;
}
.address_manager_content-d3-left-img:checked{/* 选中时 */
 background: url(选中时的图片url) no-repeat;
 background-size: cover;
}

5、实现点击以后编辑地址:(删除的话思路一样)

这个非常简单,因为每一个地址信息我们都是通过v-for循环得来的,那么我们点击修改的时候将我们获取的数组中的site传入到方法中即可,然后访问页面的时候将该条地址信息的id传过去即可,到编辑地址页面可以通过id去后台查到该条地址信息并进行地址回填就可以实现了。

<span @click="editAddress(site)">编辑</span>

editAddress:function(site){
 window.location.href="你的跳转路径(编辑地址信息的页面)?addressid=" rel="external nofollow" +site.addressid;
}

总结

以上所述是小编给大家介绍的Vue.js 实现地址管理页面(地址添加、编辑、删除和设置默认地址),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 类似资料:
  • 地区管理 商家可以在后台添加地址,完善地址库,包括全国省市区等。 添加子地区 商家地址 填写商家的收获地址、收件人地址、电话、邮编等信息,用于买家退货邮寄地址。

  • 介绍 收货地址编辑组件,用于新建、更新、删除收货地址。 引入 import { createApp } from 'vue'; import { AddressEdit } from 'vant'; const app = createApp(); app.use(AddressEdit); 代码演示 基础用法 <van-address-edit :area-list="areaList"

  • 这是我第一次在web上部署应用程序,我成功地在服务器上配置了ubuntu 14.04,安装了java,放置了Jboss 8.1.0。这里是决赛。I'v还提供了wildfly服务。但问题是,我不知道如何将jboss设置为从我的默认地址开始。例如,我有vps555111。卵黄。网络地址如何从该地址开始? /编辑我想出了如何设置它以我的地址开始,但还有一个问题-我正在搁置本教程http://www.it

  • 我在服务器上执行如下命令: netstat -anp | grep 6379 查看redis的6379端口情况,结果如下所示: 上面的192.168.0.11是内网地址,41.92.250.40是公网地址(当然为了安全我这边是随便改了不是真实的地址) 阿某云买的服务器,上面有两个ip 41.92.250.40(公) 192.168.0.11(私有) 现在我对Local Address 本地地址还有

  • 我无法理解为什么这个命令不起作用: 注意:我已经用把上面的链接本地地址弄错了,但我有一些有效的链接本地ipv6地址是端口号。 我得到了一个错误: 我也试着放单引号/双引号,但结果是同样的错误: 我使用的是OpenSSL 1.1.0f版本,它应该支持IPv6。 使用IPv4地址,它可以工作。

  • 7. 回调地址管理 用于管理回调的地址,在该页面可设置相关信息: