项目开发API

App端开发:

请求接口方式:

1. import { XXX(js文件里面定义好的请求方式) } from ‘…/…/api/xxx.JS’

2. 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