添加一个秘钥参数和后端坐匹配以及修改了首页的图片适配

.env.development

@@ -2,4 +2,5 @@
 NODE_ENV = 'development'
 VITE_APP_BASE_API = '/api'
 VITE_APP_BASE_URL = 'http://192.168.110.13:20002'
-VITE_APP_TITLE = '怀化高新区企业信用分级分类网'
+VITE_APP_TITLE = '怀化高新区企业信用分级分类网'
+VITE_AUTH_KEY = '性与暴力'

.env.production

@@ -2,3 +2,4 @@
 NODE_ENV = 'production'
 VITE_APP_BASE_URL = 'http://42.48.99.5:20002'
 VITE_APP_TITLE = '怀化高新区企业信用分级分类网'
+VITE_AUTH_KEY = '爱与和平'

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.7.2",
         "element-plus": "^2.7.3",
         "file-saver": "^2.0.5",
+        "js-md5": "^0.8.3",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0"
@@ -3988,6 +3989,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-md5": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmmirror.com/js-md5/-/js-md5-0.8.3.tgz",
+      "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "axios": "^1.7.2",
     "element-plus": "^2.7.3",
     "file-saver": "^2.0.5",
+    "js-md5": "^0.8.3",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

src/layout/component/HeadBlock.vue

@@ -135,7 +135,7 @@ init()
 </script>
 
 <template>
-  <div class="headContainer w-99vw" style="background:url('static/首页背景.png');background-size: auto 100%">
+  <div class="headContainer w-99vw" style="background-image:url('/static/首页背景.png');background-size: 100% 100%;object-fit: fill">
     <!-- 标题部分登录跳转 -->
     <div class="headTitle">
       <text>欢迎来到怀化高新区企业信用分级分类网</text>

src/utils/request.ts

@@ -1,10 +1,6 @@
 import axios from 'axios'
-import {
-  ElNotification,
-  ElMessageBox,
-  ElMessage,
-  ElLoading
-} from 'element-plus'
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import { md5 } from 'js-md5'
 // import { saveAs } from 'file-saver'
 
 let downloadLoadingInstance
@@ -23,6 +19,9 @@ const service = axios.create({
 // request拦截器
 service.interceptors.request.use(
   (config) => {
+    //sex and violence md5加密
+    //添加一个验证参数给请求头
+    config.headers.Loveandpeace = md5(import.meta.env.VITE_AUTH_KEY+new Date().getDate());
     // 是否需要设置 token
     // const isToken = (config.headers || {}).isToken === false
     // 是否需要防止数据重复提交

src/views/complaint/index.vue

@@ -2,12 +2,14 @@
 import { reactive, ref, toRaw } from 'vue'
 import { ElMessage, type FormProps, type UploadFile, type FormRules, type FormInstance } from 'element-plus'
 import { type complaintData, delFileById, getDict, saveComplaint } from '@/views/complaint/type'
+import { useRouter } from 'vue-router'
 
 const labelPosition = ref<FormProps['labelPosition']>('right')
 const fileList = ref([])
 const complaintFormRef = ref<FormInstance>();
 const dickArr = ref<any>([]);
 const dickMap = new Map();
+const router = useRouter()
 const complaintForm = reactive<complaintData>({
   name: '',
   phone: '',
@@ -51,6 +53,9 @@ const uploadComplaint = (formEl: FormInstance | undefined)=>{
       if(res.code == 200){
         ElMessage.success(res.msg)
         complaintFormRef.value?.resetFields()
+        setTimeout(() => {
+          router.push('/home')
+        }, 1000)
       }
     }
   })

src/views/message/index.vue

@@ -3,98 +3,107 @@ import { getDict, type messageData, saveMessage } from '@/views/message/type'
 import { reactive, ref, toRaw, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { saveComplaint } from '@/views/complaint/type'
-  const dickArr = ref<{dictValue:string,dictLabel:string}[]>([{dictLabel:'',dictValue:''}]);
-  const dickMap = ref();
-  const messageFormRef = ref();
+import { useRouter } from 'vue-router'
 
-  const messageForm = reactive<messageData>({
-    card: '',
-    content: '',
-    enterpriseName: '',
-    name: '',
-    phone: '',
-    type: 'personal_message',
-    unifiedSocialCreditCode: ''
-  })
-  const unifiedSocialCreditCodeRuleValid = (rule: any, value: any, callback: any) => {
-    if(messageForm.type == 'personal_message') callback();
-    if (value == '') {
-      callback(new Error('请输入企业统一社会信用代码'))
-    }
-    if (value.length != 15 && value.length != 18) {
-      callback(new Error('请输入正确的企业统一社会信用代码'))
-    }
-    callback()
+const dickArr = ref<{ dictValue: string, dictLabel: string }[]>([{ dictLabel: '', dictValue: '' }])
+const dickMap = ref()
+const messageFormRef = ref()
+const router = useRouter()
+const messageForm = reactive<messageData>({
+  card: '',
+  content: '',
+  enterpriseName: '',
+  name: '',
+  phone: '',
+  type: 'personal_message',
+  unifiedSocialCreditCode: ''
+})
+const unifiedSocialCreditCodeRuleValid = (rule: any, value: any, callback: any) => {
+  if (messageForm.type == 'personal_message') callback()
+  if (value == '') {
+    callback(new Error('请输入企业统一社会信用代码'))
+  }
+  if (value.length != 15 && value.length != 18) {
+    callback(new Error('请输入正确的企业统一社会信用代码'))
   }
+  callback()
+}
 const enterpriseNameRuleValid = (rule: any, value: any, callback: any) => {
-  if(messageForm.type == 'personal_message') callback();
+  if (messageForm.type == 'personal_message') callback()
   if (value === '') {
     callback(new Error('请输入企业名称'))
   }
   callback()
 }
-  const rules = reactive<FormRules<typeof messageForm>>({
-    type: [
-      { required: true, message: '请选择投诉类型', trigger: 'change' }
-    ],
-    name: [
-      { required: true, message: '请输入姓名', trigger: 'blur' }
-    ],
-    phone: [
-      { required: true, message: '请输入手机号码', trigger: 'blur' },
-      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
-    ],
-    content: [
-      { required: true, message: '请输入投诉内容', trigger: 'blur' }
-    ],
-    card: [
-      { required: true, message: '请输入身份证号码', trigger: 'blur' },
-      { pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号码', trigger: 'blur' }
-    ],
-    unifiedSocialCreditCode: [
-      { required: true, message: '请输入企业统一社会信用代码', trigger: 'blur' },
-      { validator: unifiedSocialCreditCodeRuleValid, trigger: 'blur' }
-    ],
-    enterpriseName: [
-      { required: true, message: '请输入企业名称', trigger: 'blur' },
-      { validator: enterpriseNameRuleValid, trigger: 'blur' }
-    ]
-  })
-  const uploadMessage = (formEl:FormInstance | undefined)=>{
-    // console.log(messageForm)
-    // console.log(formEl)
-    if (!formEl) return
-    formEl.validate(async (valid) => {
-      if (valid) {
-        const res = await saveMessage(toRaw(messageForm));
-        if(res.code == 200){
-          ElMessage({
-            message: res.msg,
-            type: 'success'
-          })
-          formEl.resetFields()
-        }else {
-          ElMessage({
-            message: res.msg,
-            type: 'error'
-          })
-        }
+const rules = reactive<FormRules<typeof messageForm>>({
+  type: [
+    { required: true, message: '请选择投诉类型', trigger: 'change' }
+  ],
+  name: [
+    { required: true, message: '请输入姓名', trigger: 'blur' }
+  ],
+  phone: [
+    { required: true, message: '请输入手机号码', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  ],
+  content: [
+    { required: true, message: '请输入投诉内容', trigger: 'blur' }
+  ],
+  card: [
+    { required: true, message: '请输入身份证号码', trigger: 'blur' },
+    {
+      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+      message: '请输入正确的身份证号码',
+      trigger: 'blur'
+    }
+  ],
+  unifiedSocialCreditCode: [
+    { required: true, message: '请输入企业统一社会信用代码', trigger: 'blur' },
+    { validator: unifiedSocialCreditCodeRuleValid, trigger: 'blur' }
+  ],
+  enterpriseName: [
+    { required: true, message: '请输入企业名称', trigger: 'blur' },
+    { validator: enterpriseNameRuleValid, trigger: 'blur' }
+  ]
+})
+const uploadMessage = (formEl: FormInstance | undefined) => {
+  // console.log(messageForm)
+  // console.log(formEl)
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      const res = await saveMessage(toRaw(messageForm))
+      if (res.code == 200) {
+        ElMessage({
+          message: res.msg,
+          type: 'success'
+        })
+        formEl.resetFields()
+        setTimeout(() => {
+          router.push('/home')
+        }, 1000)
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: 'error'
+        })
       }
-    })
-  }
-  const resetForm = (formEl: FormInstance | undefined)=>{
-    if (!formEl) return
-    formEl.resetFields()
-  }
-  const init =async ()=>{
-    let res = await getDict('message_type');
-    dickArr.value = res.data;
-    dickMap.value = dickArr.value.reduce((acc:any,cur:{dictValue:string,dictLabel:string})=>{
-      acc.set(cur.dictValue,cur.dictLabel);
-      return acc;
-    },new Map());
-  }
-  init();
+    }
+  })
+}
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+const init = async () => {
+  let res = await getDict('message_type')
+  dickArr.value = res.data
+  dickMap.value = dickArr.value.reduce((acc: any, cur: { dictValue: string, dictLabel: string }) => {
+    acc.set(cur.dictValue, cur.dictLabel)
+    return acc
+  }, new Map())
+}
+init()
 </script>
 
 <template>
@@ -129,7 +138,8 @@ const enterpriseNameRuleValid = (rule: any, value: any, callback: any) => {
         <el-form-item label="身份证号" prop="card">
           <el-input v-model="messageForm.card" placeholder="请输入身份证号" />
         </el-form-item>
-        <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" v-if="messageForm.type == 'company_message'" >
+        <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode"
+                      v-if="messageForm.type == 'company_message'">
           <el-input v-model="messageForm.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" />
         </el-form-item>
         <el-form-item label="企业名称" prop="enterpriseName" v-if="messageForm.type == 'company_message'">