vue3 + ts 使用axios this指向問題、帶參請求、pd加密 、icon 引入及跨域問題

當 tsconfig.json 中

"strict": true,

vue中會報錯：
  所有的this后全部飄紅 Property 'XXX' does not exist on type

解決方法： 改為flase

 

引入elementui 和axios

npm install element-plus --save

npm install axios

 

main.ts中配置如下

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import axios from 'axios'


const app = createApp(App)

app.config.globalProperties.$http = axios

app.use(ElementPlus)
app.use(router).mount('#app')

跨域問題：

新增vue.config.js 放在根目錄下，記得重新啟動項目

module.exports = {
    devServer: {                
        port: 9000,
        proxy: {                 
            '/api': {             
                target: 'http://localhost:8080/api',     //接口RestMapper(地址),或者你要寫的模塊的根地址
                changeOrigin: true,              //是否設置同源
                pathRewrite: {                   //路徑重寫
                    '/api': ''                     //選擇忽略攔截器里面的單詞
                }
            }
        }
    }
}

 

帶參請求：

1、此方式並不能作為url的post請求傳到后端，這種傳遞后端顯示是 null 
// var params = {
        //     str: this.search
        // }


2、將參數轉成url,將參數添加進去
        var params = new URLSearchParams();
        params.append('str', this.search);

        axios.post('/api/getbystr',params)
        .then((res) => {
            console.log( res.data)
            this.tableData = res.data
        }).catch(function (error) {
            console.log(error);
            })

 form 密碼加密

npm install js-md5 --save

引入

import md5 from 'js-md5';

app.config.globalProperties.$md5= md5

 

icon引入

https://cloud.tencent.com/developer/article/1764171