api数据对接
一般拥有api链接后可以现在单独一个文件夹中写下来,文件格式也是vue格式(题主是用vue写的前端)
view文件一般写的是页面内容,就是前端的东西,样式模板;
api主要写的是对接数据的链接,一般分写在几个文档里,如果链接发生改变容易修改;
get方法
export function aaa(params) {
return request({
url: /*链接*/,
method: 'get',
params
})
}
写好api后,在要展示数据的模板中,需要根据相对路径来引入,格式如下:
import {aaa} from "../../api/duty"
然后需要再处理这些数据,vue写的话,需要先created里面,写明一下要写的方法,这与vue的生命周期有关。
created () {
this.bbb( );
},
之后在methods方法区里面详细写一下这个方法所获取的数据
bbb(){
aaa({/*里面可以写对于获取到的数据的筛选条件*/}).then(res=>{
const data=res.data;
console.log(data);//目的是检验是否获取到数据,给自己看的
setTimeout(()=>{
this.list=data;//list是前面定义的数组,把想要的数据放在里面
},1000);//设置定时器
});
},
get方法也可以这样写(某种程度上可以不引用api文档里面的内容)
url = Config.baseUrl+/*链接*/
}
axios.get(url).then(res => {
console.log(res);
setTimeout(()=>{
this.lList=res.data.data;
},500);
}
但是前提也要在config里面写上baseurl,一般就是固定不变的链接写在这里引用起来方便很多;
但是在想要使用的文件中也需要引入进来;
import Config from '../../config'
config文件中,所写内容如下:
//首先全局配置
/**
* @description 系统全局配置
*/
let baseUrl = '/*链接*/';
post方法
api文档中的内容大致差不多,把方法method改为post;
引用方式和get一样,但是不需要create,(有时候也可以不在模板中引入直接使用,和上方所写的get不引用的方法一致,但是这样做的弊端就是后期维护不太方便);
具体如下:
axios.post(Config.baseUrl+'/*链接*/;JSESSIONID='+sessionid,this.datax).then(res=>{//jessionid一般是筛选条件,根据sessionid进行控制,逗号后面的this.datax是要上传到数据库的数据
console.log(res);
const data=res.data.data;
setTimeout(()=>{
this.accidentInformation=data;
},500);
});
说一下sessionid,一般情况下,访问一个网友,如果需要登陆的话,服务器端会传一个cookie到你的电脑并存储起来,然后对应的服务器端也会有session,下次再访问可以通过对照来实现自动登录,或者在一定时间内实现自动登录(一般可以设置时间),但是往往这边得APP不能获取session和cookie,所以就需要一些特定的服务器来控制(具体还不太清楚,只是听老师讲过),老师用的这个服务器会在用户登录后下显示一个sessionid用来标记用户,然后我们可以使用getStore来获取这个数据,获取到这个匹配用户的id,我们在获取数据和上传数据的时候就可以有一个筛选条件了,比如医院我们只获取一个主治医生的患者信息,我们就可以通过医生登录系统所分配到的id来获取数据和上传数据。
还有一件事就是icon图标,我们使用的是vant组件,但是组件内部的图标数量比较少且比较单调(毕竟有赞是做电商行业的),所以往往很多时候都需要使用外来的图标,所以就需要从网站上下载使用,这些很多博客都有写到,所以在这里我就不赘述了。
但是要注意的一点就是,一定要记得把图标的文档在main.vue文件里面引用一下,当然对于图标的大小和颜色都可以进行修改,全局的掌控一般都是需要借助于main.vue文件的。(这点很重要)
最后还想说的一点就是,登录验证这个过程,其实就是把用户写的东西拿到后端再拿去和数据库里面的内容做匹配。
还有就是上传数据的时候记得,数据里面的内容是和后端代码(也就是和数据库对接的代码相关的)而不是数据库里面的字段是什么,你前端也写什么,所以有时候上传数据的时候,需要上传id来匹配数据,一般情况下是会报错sql缺乏某某数据,这时候需要去和后端比对,而不是直接使用表中的字段。