简单获取和追加数据铺页面

一、在api中新建该页面的js文件用于存放该页面的所有接口

二、引用所需组件，调用接口（已经全局配置了接口地址）

import axios from 'axios'// 首页-我的展台
export function getQueryMyBooth(data) {return request({url: '/booth/query',method: 'post',data})
}// 需要传id时
export function getModelMsg(id) {return request({url: '/template/get/' + id,method: 'get'})
}

三、在该页面导入，在create中将获取到的数据传给data

import { getQueryMyBooth } from '@/api/model'。。。。data() {return {// 展台卡片boothCard: [{id: 0,idView: require('@/assets/img/download.png'),title: '这里是个名称1',finish: 0,// 是否显示已完成角标release: 1,choose: false,showChoose: false,// 展台轮播图是否显示showBannerOrNo: false},{id: 1,idView: require('@/assets/img/download.png'),title: '这里是个名称2',finish: 0,// 是否显示已完成角标release: 0,choose: false,showChoose: false,// 展台轮播图是否显示showBannerOrNo: false}]}
}。。。。created() {getQueryMyBooth({}).then((res) => {console.log(res)// 循环追加数据this.boothCard = res.data.map((item) => {item.choose = falseitem.showBannerOrNo = false// 右下角完成进度角标item.finish = falseif (item.progress < 31) {item.finish = true}return item})this.newData = res.data// 筛选出已发布的展台，赋给上方轮播图this.modelList = res.data.filter((item) => item.isPublish)// console.log(this.modelList)// console.log(this.boothCard)}).catch()
}

四、在html中使用

<div v-for="(item, index) in boothCard" :key="index" class="booth-card"><div><div class="booth-title"><p>{{ item.modelName }}</p><p v-if="item.finish">{{ item.progress }}/{{ item.medioListLength }}</p><div v-else class="finish"><img src="@/assets/img/finish.png" alt=""></div></div><div/>
</div>

用 post 给接口传值

一、封装接口

// 条件分页查询活动表
export function queryManualTable(data) {return request.service({url: '/xxx/xxx',method: 'POST',data})
}

二、导入api

// 导入api
import {queryManualTable } from '../../../src/api/dashboard'

三、逻辑

// 将接口封装一下，谁调这个方法，谁传值
queryManualdata(data) {queryManualTable(data).then(res => {// this.manualData 是接口返回的值this.manualData = res.data.datasconsole.log(res.data.datas)})},// 调用接口方法，给接口传值
// 如果调用的是一个接口，传一样的值则直接调用这个方法即可
queryManual() {this.queryManualdata({searchText: this.searchText,// 因为后端规定如果等于0则传空字符串，所以用了三元表达式manualSize: this.curCategory === 0 ? '' : this.curCategory + ''})},

post 用 url 问号拼接数据

状态（字符串）只有一个，id（数组）有未知个，需要手动拼接

功能：点击上线下线按钮，来调整卡片状态

html

<div class="operation"><span>操作功能：</span><p style="cursor:pointer" :style="{'color' :click_edit === true ? '#E82929' : '#B6B6B6'}" @click="onlineState(1)">上线</p><p style="cursor:pointer" :style="{'color' :click_edit === true ? '#E82929' : '#B6B6B6'}" @click="onlineState(2)">下线</p><p style="cursor:pointer" :style="{'color' :click_edit === true ? '#666' : '#B6B6B6'}">复制</p><p style="cursor:pointer" :style="{'color' :click_edit === true ? '#666' : '#B6B6B6'}">删除</p></div>

逻辑

data(){return{manualData: [], // 手册数据表}
}。。。。。。// 是否上线  上线：1      下线：2onlineState(type) {var id = []var manualType = ''if (type === 1) {this.manualData.map(item => {if (item.select === true) {item.manualType = 1id.push(item.manualId)manualType = item.manualType + ''}})this.$message.success('已上线')} else {this.manualData.map(item => {if (item.select === true) {item.manualType = 2id.push(item.manualId)manualType = item.manualType + ''}})this.$message.success('已下线')}this.updateProductItem({manualType, id})console.log(manualType, id)},// 调用上下线接口updateProductItem(data) {updateProduct(data).then((res) => {this.gitManualTableData()})},。。。。。。// 更新手册上下线状态
export function updateProduct(params) {const { manualType, id } = paramslet str = '?'str += 'manualType=' + manualType + '&'id.forEach(item => {str += 'id=' + item + '&'})str = str.substring(0, str.length - 1)return request.service({url: `/XXX/XXX${str}`,method: 'POST'})
}

或者可以直接用

determine() {let aa = {phone: this.phone,email: this.Email,captcha: this.code,id: this.id};// 更改（调用接口）setUpdateOwner(aa).then((response) => {console.log(JSON.stringify(aa))  // 这里JSON.stringify(aa)用法是转换成json格式if (response.status == "SUCCESS") {this.$message.success("添加成功");this.$emit("closeClick");this.$emit("getData");} else {this.$message.error(response.responseMsg);}}).catch((e) => {});},// 更改租户所有者
export function setUpdateOwner(params) {console.log(params)return request.service({url: `/tenantinfo/updateOwner`,method: "post",params});}

vue中的then方法和catch方法

1、then()里写两个参数,第一个是成功时的回调方法,默认给这个方法传递了成功的数据,
另一个是失败的方法,以及失败的数据

<script>
export default {name: 'demo',data() {return {}},methods: {testDemo(data) {// ajax请求testAjax(url, params).then(data => {// 处理成功console.log(data)}, data => {// 处理失败console.log(data)})}}
}
</script>

2、一般情况下,为了不报错,会在then()后面调用.catch()，相当于类似try{}catch(e){} ，可以理解为省略了try()

<script>
export default {name: 'demo',data() {return {}},methods: {testDemo(data) {// ajax请求testAjax(url, params).then(data => {// 处理成功console.log(data)}).catch(err => {// 报错console.log(err)})}}
}
</script>

3、在catch中可以 let data = e.toString(); ，用 toString 方法改为字符串

catch中捕捉的错误格式：