Vue框架应用实战项目式教程 实训指导书 实训指导11 Axios库的使用——留言板岗位发布功能.pdf

实训指导11Axios库的使用

——留言板岗位发布功能

【任务陈述】

本任务实现在“留言板”项目中必威体育精装版岗位的本地数据改写为mock数据，并通过Axios

异步获取数据并渲染至页面中。同时将点赞数据通过Axios上传至服务器端数据接口中并渲

染。【任务分析】发

分为六步骤完成本任务。开

战

图4-7任务实施流程图

【任务实施】实

步骤三.完成岗位发布功能模块

1.定义提交必威体育精装版岗位数据方法postComments()用

在MessageBoard.vue中定义postComments方法，通过Axios的post方法将数据提交至

服务器接口应

//上传岗位发布数据

functionpostComments(data){

return$Axios.post(http://localhost:3000/messageList,

架

data)

}框

e

2.定义岗位发布方法submit()

u

在submit()中定义提交岗位发布的程序逻辑，messageInfo为需要上传的新数据，使用

postComments方法将messageInfo上传至接口，再通过getComments方法请求更新后的全

V

部数据，并在页面中渲染。

//提交方法

functionsubmit(){

if(.trim()||message.email.trim()

||

message.content.trim()){

alert(信息输入不全，请输入完整信息！)

return

}

//定义数据

letmessageInfo{

id:Date.now(),

email:message.email,

name:,

content:message.content,

scale:message.scale,

support:0,//点赞数量

has_sup:false,//点赞状态

}unnamed:message.unnamed//匿名状态发

//上传数据

postComments(messageInfo).then(postResult{开

if(postResult.status201){

message.id战

message.email

message.content实

message.scale0

message.support0用

message.has_supfalse

message.unnamedfalse