UPD API优化

1：增加封装put|patch|delete
2：分离api统一管理
3：$HTTP 增加第3个参数config

src/api/index.js

@@ -1,162 +1,38 @@
-import config from "@/config";
-import http from "@/utils/request";
-
 /**
  * 所有接口集合
  * 每个接口对象需含有以下字段
- * @url 接口的URL地址
+ * 开发者可将不同的业务模块细化分离处理
- * @name 接口名称
+ * @param  {接口地址} url
- * @get|post 返回请求接口的函数
+ * @param  {接口名称描述} name
+ * @param  {请求类型 get|post|put|patch|delete} type
  */
 
+//公共模块
+import common from './model/common'
+//用户模块
+import user from './model/user'
+//角色模块
+import role from './model/role'
+//字典模块
+import dic from './model/dic'
+//应用模块
+import app from './model/app'
+//菜单模块
+import menu from './model/menu'
+//日志模块
+import log from './model/log'
+//演示模块
+import demo from './model/demo'
+
 const api = {
-	default: {
+	common,
-		upload: {
+	user,
-			url: `${config.API_URL}/upload`,
+	role,
-			name: "文件上传",
+	dic,
-			post: async function(data){
+	app,
-				return await http.post(this.url, data);
+	menu,
-			}
+	log,
-		}
+	demo
-	},
-	user: {
-		login: {
-			url: `${config.API_URL}/login`,
-			name: "登录获取用户菜单和权限,全部权限",
-			get: async function(params={}){
-				return await http.get(this.url, params);
-			}
-		},
-		login_demo: {
-			url: `${config.API_URL}/login_user`,
-			name: "登录获取用户菜单和权限，部分权限",
-			get: async function(params={}){
-				return await http.get(this.url, params);
-			}
-		},
-		list: {
-			url: `${config.API_URL}/user_list`,
-			name: "获取用户列表",
-			get: async function(params={}){
-				return await http.get(this.url, params);
-			}
-		},
-		save: {
-			url: `${config.API_URL}/post`,
-			name: "新增编辑用户",
-			post: async function(params={}){
-				return await http.post(this.url, params);
-			}
-		},
-		del: {
-			url: `${config.API_URL}/post`,
-			name: "删除用户",
-			post: async function(params={}){
-				return await http.post(this.url, params);
-			}
-		}
-	},
-	role: {
-		select: {
-			url: `${config.API_URL}/role`,
-			name: "角色选择列表",
-			get: async function(){
-				return await http.get(this.url);
-			}
-		},
-		list: {
-			url: `${config.API_URL}/role`,
-			name: "角色列表",
-			get: async function(){
-				return await http.get(this.url);
-			}
-		}
-	},
-	dic: {
-		list: {
-			url: `${config.API_URL}/dic_list`,
-			name: "字典列表",
-			get: async function(){
-				return await http.get(this.url);
-			}
-		},
-		info: {
-			url: `${config.API_URL}/dic_info`,
-			name: "字典明细",
-			get: async function(params){
-				return await http.get(this.url, params);
-			}
-		},
-		get: {
-			url: `${config.API_URL}/dic`,
-			name: "获取字典数据",
-			get: async function(params){
-				return await http.get(this.url, params);
-			}
-		}
-	},
-	app: {
-		list: {
-			url: `${config.API_URL}/app`,
-			name: "应用列表",
-			get: async function(){
-				return await http.get(this.url);
-			}
-		}
-	},
-	menu: {
-		list: {
-			url: `${config.API_URL}/login`,
-			name: "菜单管理",
-			get: async function(){
-				// 这里接口对象偷懒重复了登录接口
-				var res = await http.get(this.url);
-					res.data = res.data.menuList;
-				return res;
-			}
-		}
-	},
-	log: {
-		list: {
-			url: `${config.API_URL}/loglist`,
-			name: "日志列表",
-			get: async function(params){
-				return await http.get(this.url, params);
-			}
-		}
-	},
-	demo: {
-		page: {
-			url: `${config.API_URL}/page`,
-			name: "分页列表",
-			get: async function(params){
-				return await http.get(this.url, params);
-			}
-		},
-		upload: {
-			url: `${config.API_URL}/upload`,
-			name: "文件上传接口",
-			post: async function(data){
-				return await http.post(this.url, data);
-			}
-		},
-		select: {
-			url: `${config.API_URL}/json/select.json`,
-			name: "下拉菜单数据",
-			get: async function(data){
-				return await http.get(this.url, data);
-			}
-		},
-		demolist: {
-			list: {
-				url: `${config.API_URL}/json/list.json`,
-				name: "列表数据",
-				get: async function(data){
-					return await http.get(this.url, data);
-				}
-			}
-		}
-	}
 }
 
 export default api;

src/api/model/app.js

@@ -0,0 +1,12 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	list: {
+		url: `${config.API_URL}/app`,
+		name: "应用列表",
+		get: async function(){
+			return await http.get(this.url);
+		}
+	}
+}

src/api/model/common.js

@@ -0,0 +1,12 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	upload: {
+		url: `${config.API_URL}/upload`,
+		name: "文件上传",
+		post: async function(data){
+			return await http.post(this.url, data);
+		}
+	}
+}

src/api/model/demo.js

@@ -0,0 +1,35 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	page: {
+		url: `${config.API_URL}/page`,
+		name: "分页列表",
+		get: async function(params){
+			return await http.get(this.url, params);
+		}
+	},
+	upload: {
+		url: `${config.API_URL}/upload`,
+		name: "文件上传接口",
+		post: async function(data){
+			return await http.post(this.url, data);
+		}
+	},
+	select: {
+		url: `${config.API_URL}/json/select.json`,
+		name: "下拉菜单数据",
+		get: async function(data){
+			return await http.get(this.url, data);
+		}
+	},
+	demolist: {
+		list: {
+			url: `${config.API_URL}/json/list.json`,
+			name: "列表数据",
+			get: async function(data){
+				return await http.get(this.url, data);
+			}
+		}
+	}
+}

src/api/model/dic.js

@@ -0,0 +1,26 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	list: {
+		url: `${config.API_URL}/dic_list`,
+		name: "字典列表",
+		get: async function(){
+			return await http.get(this.url);
+		}
+	},
+	info: {
+		url: `${config.API_URL}/dic_info`,
+		name: "字典明细",
+		get: async function(params){
+			return await http.get(this.url, params);
+		}
+	},
+	get: {
+		url: `${config.API_URL}/dic`,
+		name: "获取字典数据",
+		get: async function(params){
+			return await http.get(this.url, params);
+		}
+	}
+}

src/api/model/log.js

@@ -0,0 +1,12 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	list: {
+		url: `${config.API_URL}/loglist`,
+		name: "日志列表",
+		get: async function(params){
+			return await http.get(this.url, params);
+		}
+	}
+}

src/api/model/menu.js

@@ -0,0 +1,15 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	list: {
+		url: `${config.API_URL}/login`,
+		name: "菜单管理",
+		get: async function(){
+			// 这里接口对象偷懒重复了登录接口
+			var res = await http.get(this.url);
+				res.data = res.data.menuList;
+			return res;
+		}
+	}
+}

src/api/model/role.js

@@ -0,0 +1,19 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	select: {
+		url: `${config.API_URL}/role`,
+		name: "角色选择列表",
+		get: async function(){
+			return await http.get(this.url);
+		}
+	},
+	list: {
+		url: `${config.API_URL}/role`,
+		name: "角色列表",
+		get: async function(){
+			return await http.get(this.url);
+		}
+	}
+}

src/api/model/user.js

@@ -0,0 +1,40 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	login: {
+		url: `${config.API_URL}/login`,
+		name: "登录获取用户菜单和权限,全部权限",
+		get: async function(params={}){
+			return await http.get(this.url, params);
+		}
+	},
+	login_demo: {
+		url: `${config.API_URL}/login_user`,
+		name: "登录获取用户菜单和权限，部分权限",
+		get: async function(params={}){
+			return await http.get(this.url, params);
+		}
+	},
+	list: {
+		url: `${config.API_URL}/user_list`,
+		name: "获取用户列表",
+		get: async function(params={}){
+			return await http.get(this.url, params);
+		}
+	},
+	save: {
+		url: `${config.API_URL}/post`,
+		name: "新增编辑用户",
+		post: async function(params={}){
+			return await http.post(this.url, params);
+		}
+	},
+	del: {
+		url: `${config.API_URL}/post`,
+		name: "删除用户",
+		post: async function(params={}){
+			return await http.post(this.url, params);
+		}
+	}
+}

src/components/scEditor/index.vue

@@ -72,7 +72,7 @@
 						const data = new FormData();
 						data.append("file", blobInfo.blob() ,blobInfo.filename());
 						try {
-							const res = await API.default.upload.post(data)
+							const res = await API.common.upload.post(data)
 							success(res.data.src)
 						}catch (error) {
 							failure("Image upload failed")

src/config/upload.js

@@ -3,7 +3,7 @@ import API from "@/api";
 //上传配置
 
 export default {
-	apiObj: API.default.upload,			//上传请求API对象
+	apiObj: API.common.upload,			//上传请求API对象
 	maxSize: 10,						//最大文件大小 默认10MB
 	parseData: function (res) {
 		return {

src/utils/request.js

@@ -64,35 +64,100 @@ var http = {
 	/** get 请求
 	 * @param  {接口地址} url
 	 * @param  {请求参数} params
+	 * @param  {参数} config
 	 */
-	get: function(url, params={}, headers={}) {
+	get: function(url, params={}, config={}) {
 		return new Promise((resolve, reject) => {
-			axios.get(url, {
+			axios({
+				method: 'get',
+				url: url,
 				params: params,
-					headers: headers
+				...config
-				})
+			}).then((response) => {
-				.then((response) => {
 				resolve(response.data);
-				})
+			}).catch((error) => {
-				.catch((error) => {
 				reject(error);
-				});
+			})
 		})
 	},
 
 	/** post 请求
 	 * @param  {接口地址} url
-	 * @param  {请求参数} params
+	 * @param  {请求参数} data
+	 * @param  {参数} config
 	 */
-	post: function(url, params={}, headers={}) {
+	post: function(url, data={}, config={}) {
 		return new Promise((resolve, reject) => {
-			axios.post(url, params, {headers: headers})
+			axios({
-				.then((response) => {
+				method: 'post',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
 				resolve(response.data);
-				})
+			}).catch((error) => {
-				.catch((error) => {
 				reject(error);
-				});
+			})
+		})
+	},
+
+	/** put 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	put: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'put',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** patch 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	patch: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'patch',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** delete 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	delete: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'delete',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
 		})
 	}
 }