App端开发:
请求接口方式:
-
import { XXX(js文件里面定义好的请求方式) } from ‘…/…/api/xxx.JS’
-
method:{ getXXX()/index(){ var vm = this //示例 获取收藏列表 getCollect({ limit: this.limit type : this.$route.query.type }).then(res =>{ if(res.status === 200){ this.XXXList = res.data }else{ this.$toast.fail("请求失败"); } }) } }
API里面JS定义请求方法
GET请求 如要带值到接口
格式为:
export function XXX(方法名)(data(参数)){
return request({
url : '(后端controller对应的映射url)'
method:'get',
params : data //将data放进params传给后端
//get请求接口 需要在后面加 params : data
})
}
POST请求 如要带值到接口
格式为:
export function XXX(方法名)(data(参数)){
return request({
url : '对应url',
method:'post',
data //直接将data丢过去
})
}
另外还有将数据放进路径带回给api接口的
格式为:
export function XXX(方法名)(data参数){
return request({
url ; ' 对应url /' +data.id ,
//GetMapping||PostMapping ('url / {id}')
//斜杠结尾 后面接需要的参数 api通过@PathVariable int id 接收
method :'post||get',
data ||
params : data
})
}
常用组件使用方法 (Vant组件)
布局组件
<!--九宫格 van-grid -->
<van-grid :column-num = "3" :border="false"> //:column-num 一行几个
<!--内容放在 item里面 -->
<van-grid-item>
</van-grid-item>
</van-grid>
单元格组件
<!--一般在导航栏下面-->
<van-cell title="" value=""></van-cell> <!--title在左 value在右 单写value会在左-->
多选按钮组件
<!--
使用van-checkbox-group的注意点
ref填写是对全选操作必要属性
全选代码:this.$refs.(ref的值).toggleAll(true/false) true全选/fasle取消全选
全选会返回组里面的所有的checkbox里name的值
v-model 双向绑定全选的值 可以利用一个数组保存
-->
<!--
使用van-checkbox的注意点
name属性必须填写
可以利用点击事件(@click)将name值保存
-->
<van-checkbox-group :ref="checkGroup" v-moder="result">
<van-checkbox :name="item.id" @click="toggle(item.id)">
</van-checkbox>
</van-checkbox-group>
data(){
return{
list:[],
result,[]
}
},
method:{
// 全选取值
toggleAll(flag){
this.$refs.checkGroup.toggleAll(flag)
this.list = this.result
},
//单选取值
toggle(name){
//遍历数组内的值 如果已有则点击取消
for(var i in list){
if(this.list[i] == name){
this.list.splice(i,1)//splice方法 两个参数 从第i个位置 删除1个元素
name == null
return
}
}
//如果数组内不存在值 则直接添加进去
this.list.push(name)
}
}
侧边栏组件
<van-siderbar v-model="activeKey"> <!--默认选中下标为activeKey的siderbar-item-->
<van-siderbar-item :title="item.cateName" :key="index" v-for="(item,index) in ListData">
</van-siderbar-item>
</van-siderbar>
PC端开发:
请求接口方式
导入Api接口请求方法 import api from '../../api'
let param = {
url:api.xxx (url映射好的地址),
method:"get/post" (restcontroller里定义的get或post mapping请求),
data:{} //填写数据按 键值对方式 post请求 参数写进data
payload:{} //这种方式也行 get请求 参数写进payload
this.sendReq(param , (res)=>{
//回调函数res里保存了后端返回的数据
if(res.status === 200){
this.list = res.data
}
})
}
常用按钮
<el-upload
:on-success=“(res,file) =>{return handleSuceess(res,file,index)}”
:on-remove="(file,fileList) =>{return handleSuceess(file,fileList,index)}"
>
</el-upload>
组成九宫格的组件搭配
<el-row :gutter="20"> <!--gutter属性设置栅格之间的间隔-->
<el-col :span="4"> <!--span设置 栅格列数 -->
<!--从上到下的类宫格组件-->
<el-card>
<el-image></el-image>
</el-card>
</el-col>
</el-row>
特定常用的请求方式
APP:
imgUrl : this.$baseApi // api地址 ~= 后端地址
PC:
imgurl : $api.BASEURL