gin-vue-admin V2.5手动创建后台API和调用流程

gin-vue-admin V2.5手动创建后台API和调用流程

1. /server/api/目录下创建自定义api myapi 文件夹，myapi package

文件夹中，enter.go定义MyApi 的ApiGroup

package myapi

type ApiGroup struct {
	// Code generated by github.com/flipped-aurora/gin-vue-admin/server Begin; DO NOT EDIT.

	MyApi
	// Code generated by github.com/flipped-aurora/gin-vue-admin/server End; DO NOT EDIT.
}
1
2
3
4
5
6
7
8

另一个文件中定义方法。
/api/enter.go中，加入

MyApiGroup   myapi.ApiGroup
1

2. service中定义相关Service

/service/enter.go中定义MyApiService

package myapi

type ServiceGroup struct {
	// Code generated by github.com/flipped-aurora/gin-vue-admin/server Begin; DO NOT EDIT.

	MyApiService
	// Code generated by github.com/flipped-aurora/gin-vue-admin/server End; DO NOT EDIT.
}
1
2
3
4
5
6
7
8

其他文件加入Service 方法，如果需要的话。

service/enter.go中添加MyApiService

3. router中加入RouterGroup信息和InitMyApiRouter

/server/router/下面创建package myapi

package myapi

type RouterGroup struct {
	// Code generated by github.com/flipped-aurora/gin-vue-admin/server Begin; DO NOT EDIT.

	MyApiRouter
	// Code generated by github.com/flipped-aurora/gin-vue-admin/server End; DO NOT EDIT.
}
1
2
3
4
5
6
7
8

其他文件中，定义InitMyApiRouter

router/enter.go中添加MyApiRouter

4. initialize/router.go中加入MyApiRouter

	MyApiRouter := router.RouterGroupApp.MyApi
 ....

		MyApiRouter.InitMyApiRouter(PrivateGroup)
1
2
3
4

5. 前端调用API

/web/src/api/中创建myapi.js

import service from '@/utils/request'

export const getShellApi = (data) => {
  return service({
    url: '/myapi/getMyApi',
    method: 'get',
    data
  })
}
1
2
3
4
5
6
7
8
9

6. 页面中调用

<script setup>

import {ref} from "vue"

import {getMyApi } from '@/api/myapi.js'


</script>
<script>
export default {
    name: "My",
    created() {
        getMyApi()
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7. 后台管理 - API管理中添加API

8. 后台管理 - 角色管理中勾选api权限-保存

完成以上8个步骤，必要时还要加上model的代码
然后重启server，和web(serve 模式不需要)，才能看到效果

够复杂吧。