技術標籤：前端vue前端jsajax

Vue axios_crud純前端練習三 新增+刪除

• 新增
• • mock
  • dao層add()函式
  • html+vue
• 新增測試
• 刪除
• • mock
  • dao層
  • html+vue
• 刪除測試
• 總結

新增

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

由於我們沒有操作資料庫 並沒有真實新增 只是從前臺傳送了一個物件 其實並沒有用它 以下為流程

 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純前端練習二 普通查詢