前端vue2与后端接口的简单联调步骤

第一步

在控制台上安装axios npm i axios

在main.js里写

import axios from "axios";

Vue.prototype.$axios = axios;

第二

打开Element - The world's most popular Vue UI framework

在控制台上安装npm i element-ui -S

在main.js里写

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第三步

创建俩个包 utlis 和api（不确定谁便起）再在包里创文件夹 request.js impus.js

第四步

在 request.js把axios调过来

import axios from "axios";
const request = axios.create({
    baseURL:"http://localhost:8083",
    timeout:5000
})

request.interceptors.request.use(
    (request) => {
        // let token = localStorage.getItem('token')
        // if (token) {
        //     console.log(request.headers);
        //     // 请求头携带token
        //     request.headers.Authorization = token;
        // }
        return request;
    },
    (error) => {
        Promise.reject(error);
    }
);
// 响应拦截器
// request.interceptors.response.use(
//     (response) => {
//         return response.data
//     },
//     (error) => {
//         Promise.reject(error);
//     }
// );
export default request;

baseURL:"http://localhost:8083",自己后端的端口号

timeout:5000后端传给前端的时间

第五

impus.js里写的是接口

import create from "../utils/request"
    export function selectDisplay(data) {
        return create({
            url: "/api/ck",
            method: "post",
            changeOrigin: true,
            data: data
        })
    }

url:路径

method:请求方式

import create from "../utils/request"把request.js调过来

第六页面

<template>
  <div>
    <!-- 新增按钮 -->
    <el-button type="primary" @click="showAddDialog">新增用户</el-button>
-----------------------------------------------------------------------------------------
    <!-- 新增的表单框 -->
    <el-dialog title="新增用户信息" :visible.sync="addDialogVisible">
      <el-form :model="addForm">
        <el-form-item label="电话">
          <el-input v-model="addForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </div>
    </el-dialog>
-----------------------------------------------------------------------------------------

    <!-- 用户列表展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
-----------------------------------------------------------------------------------------
     <el-table-column label="手机号">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
-----------------------------------------------------------------------------------------
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
-----------------------------------------------------------------------------------------
    <!-- 编辑用户表单框 -->
    <el-dialog title="编辑用户信息" :visible.sync="editDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="电话">
          <el-input v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editUser">确定</el-button>
      </div>
    </el-dialog>
--------------------------------------------------------------------------------------
  </div>
</template>

<script>
import { insert, selectDisplay, updateadd,hytrht} from '@/api/impus';

export default {
  data() {
    return {
---------------------------------------------------------------------------------------
      addForm: {//自己谁便起
        phone: ''
      },//新增的
-----------------------------------------------------------------------------------------
      editForm: {
        id: '',
        phone: ''
      },//修改的
----------------------------------------------------------------------------------------
      htry:{
      id:""
      },//删除
----------------------------------------------------------------------------------------
      tableData: [],//把数据库里的存在数组里
----------------------------------------------------------------------------------------
      addDialogVisible: false,
      editDialogVisible: false
    };
  },
  methods: {
----------------------------------------------------------------------------------------
   // 打开新增表单框
 showAddDialog() {
      this.addDialogVisible = true; 
    },
-----------------------------------------------------------------------------------------
    // 打开修改表单框
    showEditDialog(row) {  //showEditDialog和修改那个边框对应的名字
      this.editForm.id = row.id;//根据id修改
      this.editForm.phone = row.phone;//页面上的数据传到表单里然后进行修改数据
      this.editDialogVisible = true;// 打开表单框
    },
----------------------------------------------------------------------------------------

 // 新增用户
    addUser() {
      insert(this.addForm)//和路径对应得
        .then((res) => {
          console.log('新增成功');
          this.addDialogVisible = false; // 关闭表单框
          // this.refreshTable(); // 刷新表格数据
        })
        .catch((err) => {
          console.log('新增失败');
        });
    },
----------------------------------------------------------------------------------------
    // 编辑用户
    editUser() {
      updateadd(this.editForm)//调参数的时候要和data每个模块的一样
        .then((res) => {
          console.log(res);
          this.editDialogVisible = false; // 关闭对话框
        })
        .catch((err) => {
          console.log('修改失败');
        });
    },
----------------------------------------------------------------------------------------
    // 删除用户
    handleDelete(row) {
     this. htry.id = row.id;
     hytrht(this.htry).then((result) => {
      console.log("删除成功");
     }).catch((err) => {
      console.log("删除失败");
      
     });
    },
----------------------------------------------------------------------------------------
    // 数据库里查询的信息
    refreshTable() {//自定义的名
      selectDisplay({})//查询的要求//路径名
        .then((res) => {
          console.log(res);
          this.tableData = res.data; // 渲染到页面上
        })
        .catch((err) => {
          console.error(err);
        });
    }
  },
-----------------------------------------------------------------------------------------
  created() {//生命周期里的创造后
    this.refreshTable(); //渲染到控制台上
  }
}; created()和 methods: 同级
-----------------------------------------------------------------------------------------
</script>

<style>
</style>