基于springboot+vue2+mysql,不能添加重復數據的實現

1.后端代碼的實現：

1.1controller層

@PostMapping("/save")public ResultData saveNotice(@RequestAttribute Long _userId,@RequestBody OperationMaintenance operationMaintenance ) throws IOException {try {operationMaintenanceService.saveData(_userId, operationMaintenance);return ResultData.success();} catch (CustomTitleExistsException e) {// 捕獲自定義異常，并返回錯誤響應return ResultData.fail(e.getMessage());} catch (Exception e) {// 捕獲其他異常，并返回錯誤響應return ResultData.fail("運維標題已存在");}}

1.2serviceimpl層

@Overridepublic void saveData(Long _userId, OperationMaintenance operationMaintenance) throws IOException {if (isTitleExists(operationMaintenance.getTitle())) {throw new CustomTitleExistsException("運維標題已存在，請重新輸入");}else {operationMaintenance.setId(_userId);operationMaintenance.setCreateUserId(_userId);operationMaintenance.setCreateTime(LocalDateTime.now());operationMaintenanceMapper.insert(operationMaintenance);}}
@Overridepublic Boolean isTitleExists(String title) throws IOException {OperationMaintenance existing = operationMaintenanceMapper.findByTitle(title);return existing != null;}

1.3xml中的sql實現

 <select id="findByTitle" resultType="com.todod.model.OperationMaintenance">SELECT * FROM operation_maintenance om WHERE  om.om_title = #{title}</select>

1.4自定義異常類：

public class CustomTitleExistsException extends RuntimeException{public CustomTitleExistsException(String message) {super(message);}
}

1.5返回結果類：

	private static final String OK = "ok";private static final String ERROR = "error";private  static  final String fail = "運維標題存在，請重新輸入";public static final int OK_CODE = 20000; // 成功public static final int ERROR_CODE = 50000; // 系統異常public static final int PARAM_ERROR_CODE = 50002; // 參數錯誤public static final int METHOD_NOT_SUPPORTED = 50003; // 請求方式不正確public static final int REQUEST_INTERFACE_ERROE_CODE = 50004; // 接口請求異常public static final int ESTIMATE_ERROR_CODE = 50100; // 自定義異常public static final int USER_NOT_LOGIN = 50101; // 用戶未登錄public static final int USER_LOGIN_EXPIRED = 50102; // 用戶登陸超時public static final int USER_LOGIN_AcountError = 50103; // 用戶名或密碼錯誤public static final int USER_LOGIN_StateError = 50104; // 用戶狀態禁用public static final int INTERFACE_ERROR = 50105; // 接口請求異常public static final int SINGLE_LOGIN_ERROR = 50106; // 單用戶登陸異常public static final int USER_UPLOAD_PASSWORD = 50107; // 強制用戶修改密碼/*** 響應結果*/private int code;/*** 響應消息*/private String msg;/*** 響應消息*/private Object data;public ResultData() {}public ResultData(int code, String msg) {super();this.code = code;this.msg = msg;}public ResultData(int code, String msg, Object data) {super();this.code = code;this.msg = msg;this.data = data;}public static ResultData fail(String message) {return new ResultData(PARAM_ERROR_CODE, fail);}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public static ResultData success() {return new ResultData(OK_CODE, OK);}public static ResultData success(String msg) {return new ResultData(OK_CODE, msg);}public static ResultData success(String msg, Object data) {return new ResultData(OK_CODE, msg, data);}public static ResultData error() {return new ResultData(ERROR_CODE, ERROR);}public static ResultData error(String msg) {return new ResultData(ERROR_CODE, msg);}public static ResultData error(String msg, Object data) {return new ResultData(ERROR_CODE, msg, data);}public static ResultData error(int code, String msg) {return new ResultData(code, msg);}public static ResultData error(int code, String msg, Object data) {return new ResultData(code, msg, data);}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}

2.前端代碼的實現：

2.1添加數據頁面：

<template><div style="width:100%;height:auto; margin:0 auto;"><el-form :model="form" label-width="100px" label-position="left"><el-row :gutter="20"><el-col :span="24"><el-form-item><div slot="label">項目名稱<font color="red">*</font></div>           <el-select v-model="form.dirId" clearable style="width:100%;" @change="selectGoodsByGroupId($event)"><el-option v-for="item in symbols" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="24"><el-form-item><div slot="label">運維標題<font color="red">*</font></div><el-input v-model="form.title" placeholder="運維標題" /></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item><div slot="label" >運維人員<font color="red">*</font></div><el-select v-model="form.staffId" clearable style="width:100%;" @change="selectGoodsByGroupId($event)"><el-option v-for="item in symbols2" :key="item.id" :label="item.nickName" :value="item.id" /></el-select></el-form-item></el-col>  <el-col :span="12"><el-form-item><div slot="label">運維日期<font color="red">*</font></div><el-date-pickerv-model="form.itemTime"value-format="yyyy-MM-dd"class="filter-item"type="daterange"range-separator="至"start-placeholder="運維開始日期"end-placeholder="運維結束日期"style="width: 100%;":clearable="false"/></el-form-item></el-col></el-row><el-form-item label="內容"><el-input v-model="form.content" type="textarea" :autosize="{ minRows: 3, maxRows: 6}" /></el-form-item><el-form-item label="備注"><el-input v-model="form.message" type="textarea" :autosize="{ minRows: 3, maxRows: 6}" /></el-form-item><el-form-item label="檢測報告" prop="gysId"><el-uploadclass="upload-demo"accept=".jpg,.png,.jpeg,.bmp,.gif,.svg,.mp4,.avi,.wmv,.mpg,.rmvb,.flv,.doc,.docx,.xlsx":on-change="handleChange":action="uploadpath":headers="uoloadheaders":on-success="handleAvatarSuccess":on-remove="handleRemove":on-exceed="handleExceed":file-list="fileList":before-upload="beforeAvatarUpload"name="uploadfile_ant"><el-button size="small" icon="el-icon-upload" type="primary">選擇文件</el-button><span style="color:red;">  上傳文件不超過100MB</span></el-upload></el-form-item><el-form-item label="回復文檔" prop="gysId"><el-uploadclass="upload-demo"accept=".jpg,.png,.jpeg,.bmp,.gif,.svg,.mp4,.avi,.wmv,.mpg,.rmvb,.flv,.doc,.docx,.xlsx":on-change="handleChange2":action="uploadpath2":headers="uoloadheaders":on-success="handleAvatarSuccess2":on-remove="handleRemove2":on-exceed="handleExceed2":file-list="fileList2":before-upload="beforeAvatarUpload2"name="uploadfile_ant"><el-button size="small" icon="el-icon-upload" type="primary">選擇文件</el-button><span style="color:red;">  上傳文件不超過100MB</span></el-upload></el-form-item></el-form><div style="text-align:center;"><el-button type="primary" @click="save()">保存</el-button><el-button type="danger" @click="closePage">取消</el-button></div></div>
</template>
<script>import { saveData } from '@/api/operationMaintenance'import { getAllList ,} from '@/api/maApplicationInfo'
import { Message } from 'element-ui'
import {getUserList,getId} from '@/api/user'
import { getDictListByCode } from '@/api/dict'
import tool from '@/utils/tool'
export default {inject: ['getList'],data() {return {form: {},uploadpath: '',uploadpath2: '',types: [],batchCode:'',symbols: [],symbols2:[],symbols3:[],uoloadheaders: {},fileData: '', // 文件上傳數據（多文件合一）fileList: [],fileList2: [] // upload多文件數組}},created() {     this.getproject()this.getStateList('YW_OPEX_STATUS')},methods: {getStateList(code){getDictListByCode(code).then(response => {if(code === 'YW_OPEX_STATUS'){this.symbols3 = response.data} })},getproject(){getAllList().then(response=> {this.symbols = response.data})getUserList().then(response=>{this.symbols2 = response.data})    this.batchCode = ''getId().then(res => {this.batchCode = res.datalet address = process.env.NODE_ENV == 'development' ? process.env.VUE_APP_URL_RECON : process.env.VUE_APP_BASE_API;var path = '/inspectionReport/uploadFile'var path2 = '/replayDocument/uploadFile' this.uploadpath = address + paththis.uploadpath2 = address + path2this.uoloadheaders = {'X-TOKEN' : tool.getCookie('X-Token'),'client-url':location.href,'applicationId':this.applicationId}})},selectGoodsByGroupId(val) { // 根據設備組id獲取相應的商品if (val != null && val !== '' && val !== undefined) {for (var i = 0; i < this.symbols.length; i++) {if (this.symbols[i].id === val) {this.form.userId = this.symbols[i].customerMid}}}},save(){if (!this.form.dirId) {this.$message.error('項目名稱稱不能為空')return} else if (!this.form.title) {this.$message.error('運維標題不能為空')return} else if (!this.form.staffId) {this.$message.error('運維人員不能為空')return} else if (!this.form.itemTime) {this.$message.error('運維日期不能為空')return} else {this.form.startTime = this.form.itemTime[0]this.form.endTime = this.form.itemTime[1]const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})saveData(this.form).then(response => {console.log(response.code)Message({message: '新增成功',type: 'success',duration: 5 * 1000,})this.$emit('update:visible', false)loading.close()this.getList()}).catch(response => {loading.close()this.getList()})}},handleChange(file, fileList) {let fileName = file.name;let uid = file.uidlet pos = fileName.lastIndexOf(".");let lastName = fileName.substring(pos, fileName.length);var suffix = '.jpg,.png,.jpeg,.bmp,.gif,.svg,.mp4,.avi,.wmv,.mpg,.rmvb,.flv,.doc,.docx,.xlsx'if (suffix.indexOf(lastName.toLowerCase()) === -1) {this.$message.error("文件必須為.jpg,.png,.jpeg,.bmp,.gif,.svg,.mp4,.avi,.wmv,.mpg,.rmvb,.flv,.doc,.docx,.xlsx類型");for(var i = 0;i<fileList.length;i++) {if(fileList[i].uid == uid) {fileList.splice(i,1)}}return;}const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)if (existFile) {this.$message.error('當前文件已經存在!')fileList.pop()}this.fileList = fileList},handleChange2(file, fileList2) {let fileName = file.name;let uid = file.uidlet pos = fileName.lastIndexOf(".");let lastName = fileName.substring(pos, fileName.length);var suffix = '.jpg,.png,.jpeg,.bmp,.gif,.svg,.mp4,.avi,.wmv,.mpg,.rmvb,.flv,.doc,.docx,.xlsx'if (suffix.indexOf(lastName.toLowerCase()) === -1) {this.$message.error("文件必須為.jpg,.png,.jpeg,.bmp,.gif,.svg,.mp4,.avi,.wmv,.mpg,.rmvb,.flv,.doc,.docx,.xlsx類型");for(var i = 0;i<fileList2.length;i++) {if(fileList2[i].uid == uid) {fileList2.splice(i,1)}}return;}const existFile = fileList2.slice(0, fileList2.length - 1).find(f => f.name === file.name)if (existFile) {this.$message.error('當前文件已經存在!')fileList2.pop()}this.fileList2 = fileList2},handleAvatarSuccess(res, file) {this.uploadLoading = falseif (res.code === 20000) {this.form.reportId= res.data.idthis.upVisible = falseMessage({message: '上傳成功',type: 'success',duration: 5 * 1000})} else {this.upVisible = trueMessage({message: res.msg,type: 'error',duration: 5 * 1000})}},handleAvatarSuccess2(res, file) {this.uploadLoading = falseif (res.code === 20000) {this.form.fileId= res.data.idthis.upVisible = falseMessage({message: '上傳成功',type: 'success',duration: 5 * 1000})} else {this.upVisible = trueMessage({message: res.msg,type: 'error',duration: 5 * 1000})}},handleRemove(file, fileList) {this.fileList = fileList},handleExceed(files, fileList) {this.$message.warning(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`)},beforeAvatarUpload(file) {const isLt2M = file.size / 1024 / 1024 < 100if (!isLt2M) {this.$message.error('上傳文件大小不能超過100MB!')}return isLt2M},handleRemove2(file, fileList2) {this.fileList2 = fileList2},handleExceed2(files, fileList2) {this.$message.warning(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList2.length} 個文件`)},beforeAvatarUpload2(file) {const isLt2M = file.size / 1024 / 1024 < 100if (!isLt2M) {this.$message.error('上傳文件大小不能超過100MB!')}return isLt2M},closePage() {this.$emit('update:visible', false)},}
}
</script>

2.2相關js

import request from '@/utils/request'export function getInitialLoading() {return request({url: '/operationMaintenance/getInitialLoading',method: 'post'})
}export function getAgainLoading(data) {return request({url: '/operationMaintenance/getAgainLoading',method: 'post',params: data})
}export function getPage(data) {return request({url: '/operationMaintenance/getPage',method: 'post',data})
}export function saveData(data) {return request({url: '/operationMaintenance/save',method: 'post',data})
}export function edit(data) {return request({url: '/operationMaintenance/edit',method: 'post',data})
}export function remove(data) {return request({url: '/operationMaintenance/delete',method: 'post',params: data})
}export function getInfo(data) {return request({url: '/operationMaintenance/getInfo',method: 'get',params: data})
}export function getXiangMuList(data) {return request({url: '/operationMaintenance/getXiangMuList',method: 'post',data})
}export function getSelectedPage(data) {return request({url: '/operationMaintenance/getSelectedPage',method: 'post',data})
}export function getSelected2Page(data) {return request({url: '/operationMaintenance/getSelected2Page',method: 'post',data})
}export function getAllList() {return request({url: '/operationMaintenance/getAllList',method: 'post'})
}export function downloadFile(paran) {return request({url: '/inspectionReport/downLoad',method: 'post',params: paran,responseType: 'blob'})
}
export function downloadFile2(paran) {return request({url: '/replayDocument/downLoad',method: 'post',params: paran,responseType: 'blob'})
}// 下載文件
export function downloadById(data) {return request({url: '/inspectionReport/downLoad',method: 'post',params: data,responseType: 'blob'})}export function getTreeData() {return request({url: '/operationMaintenance/getTreePartData',method: 'post'})}

3.request.js

import axios from 'axios'
import { Message } from 'element-ui'
import router from '.././router'
import tool from './tool'const otherReq = ['downLoad', 'downloadTemplate','problemTemplate']
let address = process.env.NODE_ENV == 'development' ? process.env.VUE_APP_URL_RECON : process.env.VUE_APP_BASE_API;// create an axios instance
const service = axios.create({baseURL: address, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: -1 // request timeout
})// request interceptor
service.interceptors.request.use(config => {// do something before request is sentlet token = tool.getCookie('X-Token');config.headers['X-TOKEN'] = tokenconfig.headers['client-url'] = location.hrefreturn config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.datavar url = response.request.responseURLvar split = url.split('/')var laststr = split[split.length - 1]var lastUrl = laststr.split('?')[0]if (lastUrl === 'flow') {return response}if (otherReq.indexOf(lastUrl) !== -1) {return response}if (url.indexOf('/data-source/data/') !== -1) {return response.data}// if the custom code is not 20000, it is judged as an error.if (res.code !== 20000) {if (res.code === 50101 || res.code === 50102) {if (url.indexOf('/getFillByTask') !== -1) {let data = JSON.parse(response.config.data)let taskId = data.taskId;router.push({ path: '/loginShare', query: { id: taskId } })} else {// 獲取登錄頁訪問地址let ypt = process.env.NODE_ENV == 'development' ? process.env.VUE_APP_HOME_URL : process.env.VUE_APP_HOME_URL_PROD;// 如果當前路由不是登錄頁，跳轉到登錄頁if (window.location.href.indexOf(ypt) === -1) {window.localStorage.clear();tool.clearAllCookie()localStorage.stop = true;let ypt = process.env.NODE_ENV == 'development' ? process.env.VUE_APP_HOME_URL : process.env.VUE_APP_HOME_URL_PROD;window.location.href = ypt}}}else if (res.code === 50002) { //Message({message: res.msg || 'Error',type: 'error',duration: 5 * 1000})}else if (res.code === 50107) { // 修改密碼router.push({name: 'uploadPassword', params: { token: res.data.token }})} else if (res.code === 99999) { // 未授權router.push({ path: '/empower/empower' })} else if (res.code === 50000) { // 未授權Message({message: res.msg || 'Error',type: 'error',duration: 5 * 1000})}// Message({//   message: res.msg || 'Error',//   type: 'error',//   duration: 5 * 1000// })return Promise.reject(new Error(res.msg || 'Error'))} else {return res}},error => {console.log('err' + error) // for debugMessage({message: error.msg || 'Error',type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service