这是一个刚刚接触框架的小白记录学习的文章,有的说法可能不正确,就暂且不要深究。
不求高端,只求程序能跑。
前期准备
1.几个写好的后端接口,框架当然就是springboot+mybatis plus,至于后端接口的实现或者是与数据库连接进行基本的增查改功能,可以参考我的前几篇文章有所涉及。
2.一个前端vue框架的模板,毕竟是后端出身,咱就不论前端好不好看,能用就行,初步认识vue的部分也可以参考之前的文章。
正片
1.将后端接口访问的方式放到前端工程中
一般通常放到api文件夹中,说是放后端接口,其实说白了就是声明一个函数来返回url来连接后端的接口(我理解的),下文统称为前端接口。这里暂且不讨论跨域的问题,因为都是在同一本机操作。
项目呈现:
http是提前写好的,代码如下
import request from './request'
const http = {
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url, params, exconfig = {}) {
const config = {
method: 'get',
url: url,
headers: {
token: localStorage.getItem("token"),
},
...exconfig
}
if (params) config.params = params
return request(config)
},
post(url, params, exconfig = {}) {
const config = {
method: 'post',
url: url,
headers: {
token: localStorage.getItem("token"),
},
...exconfig
}
if (params) config.data = params
return request(config)
}
}
//导出
export default http
2.在进行前后端交互的地方调用“前端接口”
在调用前,记得先把前端接口import进来,否则程序都找不到哪来的接口
例如,我们需要往数据库里添加,我们在添加那个组件的地方绑定一个函数addSalerTeam
<1>.在method中添加addSalerTeam方法来将路由推过去添加页面
<2>.在提交处绑定函数
代码如下:
//新增部门
onSubmit(formName) {
let that = this;
this.$refs[formName].validate((value)=>{
console.log(value)
if(value){
console.log(that.form)
let formData = new FormData();
formData.append("deptname",that.form.deptname);
formData.append("deptusername",that.form.deptusername);
formData.append("deptstate",that.form.deptstate);
formData.append("deptdesc",that.form.deptdesc);
formData.append("deptuserid",that.form.deptuserid);
addSalerTeam(formData).then((res)=>{
// console.log(res)
if(res.data.code == 1){
that.$message({
message:"添加成功",
type:"success",
})
that.$router.push("/SalerTeam")
}else{
this.$message({
message:"添加失败",
type:"info"
});
}
})
}
})
}
可以看到方法里调用了addSalerTeam方法并且执行了带参请求
<3>.效果展示