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()函数

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

---

上代码 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


ok这也没什么难度

总结

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