0004章：留言板功能 vue3+ts+element-puls(前端)

1.路径 ：src  /  request  / indexs.ts     //   axios封装     前提安装好:npm install axios 

import axios from 'axios'

import { ElNotification } from 'element-plus' // 消息提示
//创建axios实例
const service = axios.create({
    baseURL: '/api',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json;charset=utf-8' }

});

//请求拦截
service.interceptors.request.use((config) => {
    config.headers = config.headers || {}
    if (localStorage.getItem('token')) {
        config.headers.token = localStorage.getItem('token') || ''
    }
    return config
})
//响应拦截
service.interceptors.response.use((res) => {
    const code: number = res.data.code
    if (code != 200) {
        ElNotification({
            title: '请求失败了看提示',
            message: res.msg,
            type: 'warning',
        })
        return Promise.reject(res.data)
    }
    return res.data
}, (error) => {
    console.log(error)
})

export default service

 2. 路径 ：src  /  request  / apis.ts      留言板api接口  

import service from "./indexs";
// 参数
interface commetData {
    name: string  
    iphone: string
    words:string
}
// 留言api
export function commetInfo(data:commetData) {
    return service({
        url: '/add',
        method: 'post',
        data
    })
}

 3. 跨域解决： vite.config.ts

 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import  { resolve } from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:[
        // 路径@替换./src
      {
        find:'@',
        replacement:resolve(__dirname,"./src")
      },
        //国际化
      {
        find: 'vue-i18n',
        replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
      }
    ]
  }, 
  // 留言跨域
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:9999/message', // 实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  // 不跨域的写法
  /*   server: {
      host: '192.168.1.195'
      // 0.0.0.0
    }, */
  
})

4.contact / index.vue  视图层

      
</template>   

 <!-- 留言板 -->
    <el-row>
        <el-col :span="12" :offset="6">
            <div class="grid-content ep-bg-purple">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
                    <el-row>
                        <el-col>
                            <el-form-item :label="t('Name')" prop="name" required>
                                <el-input v-model="ruleForm.name" :placeholder="t('Enter')" />
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-form-item :label="t('TL')" prop="iphone" required>
                                <el-input v-model="ruleForm.iphone" :placeholder="t('TLnum')" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item :label="t('Con')" prop="words" required>
                        <el-input v-model="ruleForm.words" type="textarea" :placeholder="t('Nr')" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btnss" type="primary" @click="comment(ruleFormRef)">
                            {{ t('Sub') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>


<script lang="ts" >
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { commetInfo } from "@/request/apis";
import { CommetData } from "@/type/param"
import type { FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'
import useLocale from '../../hook/useLocale' // 国际化hook

export default defineComponent({
    setup() {

        const url = 'http://47.119.202.183:8081/static/images/contactUs.jpg'
        const ruleFormRef = ref<FormInstance>()
        const data = reactive(new CommetData())
        // 国际化语言
        const {
            i18n: { t }, // 解构实例用具t 访问语言变量
        } = useLocale()
        const rules = reactive<FormRules>({
            name: [
                {
                    required: true,
                    message: "姓名未填写",
                    trigger: "change",
                },
            ],
            iphone: [
                {
                    required: true,
                    message: "电话未填写",
                    trigger: "change",
                },
            ],
            words: [
                {
                    required: true,
                    message: "内容未填写",
                    trigger: "change",
                },
            ],
        })
        const comment = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    commetInfo(data.ruleForm).then((res) => {
                        console.log("-------", res);
                        ElNotification({
                            message: res.message,
                            type: 'success',
                        })
                    })
                } else {
                    return false
                }
            })
        }

        return {
            ...toRefs(data),
            rules,
            ruleFormRef,
            t,
            url,
            comment

        }
    },
});
</script>