vue+springboot+mybatis plus项目小功能实现

这是一个刚刚接触框架的小白记录学习的文章，有的说法可能不正确，就暂且不要深究。

不求高端，只求程序能跑。

前期准备

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>.效果展示