# service

服务层负责处理发起的请求, 并返回对服务端的响应。程序自动加载 service 下所有的模块。

我们来创建一个简单的用户服务类。

// @/service/system/user.js

import { BaseService, Service, Permission } from "cl-admin";

@Service("sys/user")
class User extends BaseService {
	@Permission("start")
	start(data) {
		return this.request({
			url: "/start",
			method: "POST",
			data
		});
	}
}

export default User;
  • 这是一个基于 BaseService 的基本类,默认包含 page, add, update, delete, info, list 基本请求方式。

  • @Service 处理请求地址 ${baseUrl}/sys/user/${url}

  • @Permission 给接口添加权限。每一个 service 都有对应的 permission 对象,这是一个可控制接口权限的集合。

// 获取所有列表
list(params) {
    return this.request({
        url: '/list',
        params: {
            ...params
        }
    });
}

// 以分页类型获取对应列表
page(params) {
    return this.request({
        url: '/page',
        params: {
            ...params
        }
    });
}

// 获取选中的信息
info(params) {
    return this.request({
        url: '/info',
        params: {
            ...params
        }
    });
}

// 更新选中的信息
update(params) {
    return this.request({
        url: '/update',
        method: 'POST',
        data: {
            ...params
        }
    });
}

// 删除选择的数据,默认使用 ids: string
delete(params) {
    return this.request({
        url: '/delete',
        method: 'POST',
        data: {
            ...params
        }
    });
}

// 添加新数据
add(params) {
    return this.request({
        url: '/add',
        method: 'POST',
        data: {
            ...params
        }
    });
}

# 如何使用

如果文件名是 index,则绑定在上一级目录下,否则绑定为当前文件名。如:

  1. service/common/index.js 作用域到 common
class Common extends BaseService {
	userLogin(params) {
		return this.request({
			url: "/comm/login",
			method: "POST",
			data: {
				...params
			}
		});
	}
}

export default Common;

// 使用
this.$service.common.userLogin({ account: "admin", password: "123456" });
  1. service/system/user.js 作用域到 system.user
class User extends BaseService {
	move(data) {
		return this.request({
			url: "/move",
			method: "POST",
			data
		});
	}
}

export default User;

// 使用
this.$service.system.user.move();

# 代理地址

解决前端需要请求多个服务地址,则配置 proxy 参数。它会以 PROXY_LIST 的目标地址请求

可针对不同 service 层配置不同代理,示例:

// /src/service/task/index.js
import { BaseService, Service } from "cl-admin";

@Service({
	namespace: "sys/task", // url 拼接
	proxy: "/order" // 对应 PROXY_LIST 配置
})
class Task extends BaseService {}

export default Task;
// vue.config.js
const PROXY_LIST = {
	"/dev": {
		target: "http://127.0.0.1:8001",
		changeOrigin: true,
		pathRewrite: {
			"^/dev": ""
		}
	},

	"/order": {
		target: "http://127.0.0.1:8002",
		changeOrigin: true,
		pathRewrite: {
			"^/order": ""
		}
	},

	"/pro": {
		target: "https://show.cool-admin.com",
		changeOrigin: true,
		pathRewrite: {
			"^/pro": "/api"
		}
	}
};

# request

详细看文件@/service/request.js,根据需求处理返回结果。

# --ignore

忽略 文件目录 的引入,如 /service/business/analy--fix.js