Vue axios增删改查纯前端练习三 添加+删除

添加

mock

由于上面两篇已经把架子搭好了 我们直接开始 还是从我们的后台mock开始下手


ok 在mock文件夹下新建addResp.js 由于原理都是一样的我们快速进行 进入addResp.js

Mock.mock('http://mock.api.com/add','post',{
    "code":200,
    "flag":true,
    "message":"新增成功"
}) 

这里需要说一下 因为增加需要发json method必须要用post方式 也是第一次用post ,ok 后台就完成了

dao层add()函数

由于我们没有操作数据库 并没有真实添加 只是从前台发送了一个对象 其实并没有用它 以下为流程

触发事件
调用
等待
渲染
客户
methods中的add函数
dao层add函数
.then响应
dao层
request.js
mock

上代码 dao层add函数
 add(obj){
        return request({
            url:`/add`,
            method:'post',
        })
    },

request我们也再看一下

const request =axios.create({
    baseURL:'http://mock.api.com',
    timeout:20000,
})

这两个地址baseURL +url = addResp中的url

html+vue

引入js

<script src="../mock/addResp.js"></script>
<button @click="add">添加<button>
data:{
//默认的obj 就是提交它
	obj:{
          id:'1',
          name:'elena',
          pass:'123456',
          gender:'0',   
    }
},
methods:{
	add(){
    	dao.add(this.obj).then(response=>{
    	console.log(response.data)
    	this.result=response.data.message                   					})
    	},
	}

添加测试

在axios_crud.html直接golive
运行结果
F12开发者工具 看看来自addResp.js的response内容
相应内容
ok相应收到大功告成!

删除

删除的原理都一样 我们快点进行 有什么不懂的可以留言

mock

在mock下建立delResp.js 在里面写
请求类型:delete!
请求类型:delete!
请求类型:delete!

Mock.mock(RegExp('http://mock.api.com/delete'+'.*'),'delete',{
    "code": 200,
    "flag": true,
    "message": "删除成功"
})

dao层

增加一个删除函数

 delete(id) {
        return request({
            /* 由于delete不能传递json,所以只能通过
            拼接字符串来向后端发送数据 */
            url: `/delete?id=${id}`,
            method: 'delete',
        })
    },

html+vue

引入js

<script src="./mock/delResp.js"></script>
<button @click="del">删除测试</button>

js

del(){
   dao.delete(this.obj.id)
         .then(response=>{
             console.log(response.data)
             this.result = response.data.message
    })
},

删除测试

在axios_crud直接golive
删除
F12
ok这也没什么难度

总结

总之这两个就主意好请求方式就可以了 后面我们开发项目的时候 肯定用的是真信息 不过流程都是一样的 只要把obj v-model就可以了 下一篇分页查询 上一篇 Vue axios_crud纯前端练习二 普通查询

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值