vue-admin-element与swagger ui接口如何连接使用

一、导入vue-admin-element项目

1.打开vscode终端

2.git clone http://192.168.1.19:8929/root/educ_pc_web.git 克隆项目

3.cd  educ_pc_web进入项目目录

4.npm install 安装项目所需依赖

5.npm install --registry=https://registry.npm.taobao.org   

# 可以通过如下操作解决 npm 下载速度慢的问题

6.npm run dev 启动服务，本项目用npm run serve启动服务

##如果npm install 报错！可参考

《npm install 报错解决》 https://blog.csdn.net/qq_32068809/article/details/79513618?utm_source=app&app_version=4.15.0&code=app_1562916241&uLinkId=usr1mkqgl919blen

二、本项目用到的swagger Ui ：http://192.168.1.121:9999/swagger-ui.html?urls.primaryName=hmkj-educ-upms-biz

1.打开地址，找到班级管理模块

2.打开可以看到相关数据字段。

 3.根据swaager ui接口的相关信息，在src/edu/ 下创建class.js文件。

 

4.在class.js文件中配置swagger ui接口地址。

import request from "@/utils/axios";

export function getClasstypeList(params) {

    return request({

      url: "/admin/educ/class/list",

      method: "POST",

      data: params,

    });  }

export function addClasstype(params) {

    return request({

      url: "/admin/educ/class/add",

      method: "POST",

      data: params,

    });

  }

 export function getClasstype(params) {

    return request({

      url: "/admin/educ/class/detail",

      method: "POST",

      data: params,

    });

  }export function deleteClasstype(params) {

    return request({

      url: "/admin/educ/class/delete",

      method: "POST",

      data: params,

    });} export function updateClasstype(params) {

    return request({

      url: "/admin/educ/class/update",

      method: "POST",

      data: params,

    });

  }

三、编写班级信息管理系统

1.在如下位置创建index.vue文件。

 2.index.vue中的代码如下。

 

<template>

  <div class="app-container">

    <el-form

      :model="queryParams