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