【VUE小型网站开发】优化通用配置

1. VUE多环境配置

使用Vue CLI 3+的vue.config.js文件来配置多个环境

1.1 安装Vue CLI

npm install -g @vue/cli

1.2 package.json引入 Vue CLI

{"name": "tool-vue","version": "0.0.0","private": true,"type": "module","scripts": {#修改为vue-cli-service 启动项目"dev": "vue-cli-service serve --mode development","build": "vue-cli-service build --mode production","preview": "vite preview"},"dependencies": {"axios": "^1.7.7","element-plus": "^2.8.6","vue": "^3.5.12","vue-router": "^4.4.5"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.4","vite": "^5.4.8",#引入vue/cli-service"@vue/cli-service": "^4.5.0"}
}

重新install

npm install

1.3 创建多环境配置文件

创建.env.development

# 开发环境配置
ENV = 'development'VUE_APP_BASE_API = 'http://localhost:8888/tool-api'

创建.env.production

# 生产环境配置
ENV = 'production'VUE_APP_BASE_API = '/tool-api'

2. Java 统一封装返回结果和异常情况

2.1 创建返回状态码类HttpStatus

package com.tool.tooladmin.config.result;/*** 返回状态码*/
public class HttpStatus {/*** 操作成功*/public static final int SUCCESS = 200;/*** 对象创建成功*/public static final int CREATED = 201;/*** 请求已经被接受*/public static final int ACCEPTED = 202;/*** 操作已经执行成功，但是没有返回数据*/public static final int NO_CONTENT = 204;/*** 资源已被移除*/public static final int MOVED_PERM = 301;/*** 重定向*/public static final int SEE_OTHER = 303;/*** 资源没有被修改*/public static final int NOT_MODIFIED = 304;/*** 参数列表错误（缺少，格式不匹配）*/public static final int BAD_REQUEST = 400;/*** 未授权*/public static final int UNAUTHORIZED = 401;/*** 访问受限，授权过期*/public static final int FORBIDDEN = 403;/*** 资源，服务未找到*/public static final int NOT_FOUND = 404;/*** 不允许的http方法*/public static final int BAD_METHOD = 405;/*** 资源冲突，或者资源被锁*/public static final int CONFLICT = 409;/*** 不支持的数据，媒体类型*/public static final int UNSUPPORTED_TYPE = 415;/*** 系统内部错误*/public static final int ERROR = 500;/*** 接口未实现*/public static final int NOT_IMPLEMENTED = 501;/*** 系统警告消息*/public static final int WARN = 601;
}

2.2 创建响应信息主体

package com.tool.tooladmin.config.result;import java.io.Serializable;/*** 响应信息主体*/
public class R<T> implements Serializable {private static final long serialVersionUID = 1L;/*** 成功*/public static final int SUCCESS = HttpStatus.SUCCESS;/*** 失败*/public static final int FAIL = HttpStatus.ERROR;private int code;private String msg;private T data;public static <T> R<T> ok() {return restResult(null, SUCCESS, "操作成功");}public static <T> R<T> ok(T data) {return restResult(data, SUCCESS, "操作成功");}public static <T> R<T> ok(T data, String msg) {return restResult(data, SUCCESS, msg);}public static <T> R<T> fail() {return restResult(null, FAIL, "操作失败");}public static <T> R<T> fail(String msg) {return restResult(null, FAIL, msg);}public static <T> R<T> fail(T data) {return restResult(data, FAIL, "操作失败");}public static <T> R<T> fail(T data, String msg) {return restResult(data, FAIL, msg);}public static <T> R<T> fail(int code, String msg) {return restResult(null, code, msg);}private static <T> R<T> restResult(T data, int code, String msg) {R<T> apiResult = new R<>();apiResult.setCode(code);apiResult.setData(data);apiResult.setMsg(msg);return apiResult;}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public T getData() {return data;}public void setData(T data) {this.data = data;}public static <T> Boolean isError(R<T> ret) {return !isSuccess(ret);}public static <T> Boolean isSuccess(R<T> ret) {return R.SUCCESS == ret.getCode();}
}

2.3 创建操作消息提醒AjaxResult

package com.tool.tooladmin.config.result;import java.util.HashMap;
import java.util.Objects;/*** 操作消息提醒*/
public class AjaxResult extends HashMap<String, Object> {private static final long serialVersionUID = 1L;/*** 状态码*/public static final String CODE_TAG = "code";/*** 返回内容*/public static final String MSG_TAG = "msg";/*** 数据对象*/public static final String DATA_TAG = "data";/*** 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。*/public AjaxResult() {}/*** 初始化一个新创建的 AjaxResult 对象** @param code 状态码* @param msg  返回内容*/public AjaxResult(int code, String msg) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一个新创建的 AjaxResult 对象** @param code 状态码* @param msg  返回内容* @param data 数据对象*/public AjaxResult(int code, String msg, Object data) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);if (data != null) {super.put(DATA_TAG, data);}}/*** 返回成功消息** @return 成功消息*/public static AjaxResult success() {return AjaxResult.success("操作成功");}/*** 返回成功数据** @return 成功消息*/public static AjaxResult success(Object data) {return AjaxResult.success("操作成功", data);}/*** 返回成功消息** @param msg 返回内容* @return 成功消息*/public static AjaxResult success(String msg) {return AjaxResult.success(msg, null);}/*** 返回成功消息** @param msg  返回内容* @param data 数据对象* @return 成功消息*/public static AjaxResult success(String msg, Object data) {return new AjaxResult(HttpStatus.SUCCESS, msg, data);}/*** 返回警告消息** @param msg 返回内容* @return 警告消息*/public static AjaxResult warn(String msg) {return AjaxResult.warn(msg, null);}/*** 返回警告消息** @param msg  返回内容* @param data 数据对象* @return 警告消息*/public static AjaxResult warn(String msg, Object data) {return new AjaxResult(HttpStatus.WARN, msg, data);}/*** 返回错误消息** @return 错误消息*/public static AjaxResult error() {return AjaxResult.error("操作失败");}/*** 返回错误消息** @param msg 返回内容* @return 错误消息*/public static AjaxResult error(String msg) {return AjaxResult.error(msg, null);}/*** 返回错误消息** @param msg  返回内容* @param data 数据对象* @return 错误消息*/public static AjaxResult error(String msg, Object data) {return new AjaxResult(HttpStatus.ERROR, msg, data);}/*** 返回错误消息** @param code 状态码* @param msg  返回内容* @return 错误消息*/public static AjaxResult error(int code, String msg) {return new AjaxResult(code, msg, null);}/*** 是否为成功消息** @return 结果*/public boolean isSuccess() {return Objects.equals(HttpStatus.SUCCESS, this.get(CODE_TAG));}/*** 是否为警告消息** @return 结果*/public boolean isWarn() {return Objects.equals(HttpStatus.WARN, this.get(CODE_TAG));}/*** 是否为错误消息** @return 结果*/public boolean isError() {return Objects.equals(HttpStatus.ERROR, this.get(CODE_TAG));}/*** 方便链式调用** @param key   键* @param value 值* @return 数据对象*/@Overridepublic AjaxResult put(String key, Object value) {super.put(key, value);return this;}
}

2.4 创建web层通用数据处理BaseController

/*** 返回成功*/public AjaxResult success() {return AjaxResult.success();}/*** 返回失败消息*/public AjaxResult error() {return AjaxResult.error();}/*** 返回成功消息*/public AjaxResult success(String message) {return AjaxResult.success(message);}/*** 返回成功消息*/public AjaxResult success(Object data) {return AjaxResult.success(data);}/*** 返回失败消息*/public AjaxResult error(String message) {return AjaxResult.error(message);}/*** 返回警告消息*/public AjaxResult warn(String message) {return AjaxResult.warn(message);}/*** 响应返回结果** @param rows 影响行数* @return 操作结果*/protected AjaxResult toAjax(int rows) {return rows > 0 ? AjaxResult.success() : AjaxResult.error();}/*** 响应返回结果** @param result 结果* @return 操作结果*/protected AjaxResult toAjax(boolean result) {return result ? success() : error();}

2.5 修改testController

package com.tool.tooladmin.algorithm;import com.tool.tooladmin.config.result.BaseController;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.Map;/*** test**/
@RestController
@RequestMapping("/test")
public class testController extends BaseController {@GetMapping("/test")public Map<String, Object> test() {Map<String, Object> map = new HashMap<>();map.put("msg", "test");return success(map);}
}

3. 动态展示网页标题

使用Vue Router 动态设置

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/:pathMatch(.*)*', // 通配符路由name: 'Error404',component: Error404,meta: { title: '404 - 页面未找到' },},{path: '/',name: 'Home',component: Home,meta: { title: '首页' }},{path: '/about',name: 'About',component: About,meta: { title: '关于' }}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});router.beforeEach((to, from, next) => {document.title = to.meta.title || '默认标题';next();
});export default router;

4. 封装消息弹窗

4.1 创建 message.js 文件

// message.js
import { ElMessage } from 'element-plus';export const successMessage = (message) => {ElMessage({message: message,type: 'success',plain: true,});
};export const errorMessage = (message) => {ElMessage({message: message,type: 'error',plain: true,});
};
export const warningMessage = (message) => {ElMessage({message: message,type: 'warning',plain: true,});
}
export const infoMessage = (message) => {ElMessage({message: message,type: 'info',plain: true,});
}

4.2 引用

import {errorMessage, successMessage} from "@/utils/message.js";
errorMessage('请输入错误信息');