vue3登陆注册功能实现，问题记录_vue3注册登录功能-优快云博客

Vue 2.6.0+ 中，引入了 v-slot 指令来替代 slot 属性和 slot-scope 属性。虽然 Vue 3 仍然支持旧的 slot 语法，但推荐使用新的 v-slot 语法。因此，你可以将 <i slot="suffix" ...> 更改为 <template v-slot:suffix><i ...></i></template>

二、前端请求

前置条件：安装依赖

网络请求：axios npm install axios

路由管理：npm install vue-router@4

1、跨域

参考链接：Spring Security环境中的跨域问题_springsecurity解决跨域问题-优快云博客

2、GET，POST请求入参格式区别

get请求用params参数传参

对于GET请求，通常应该将参数作为URL的一部分来传递，这可以通过将参数添加到params对象中实现。params对象中的参数将会被axios库自动转换为URL查询字符串

 http({
          method: "GET",
          url: "/sys/login",
          params: { username: this.username, password: this.password },
         
        })

post 请求用data传参

对于POST、PUT等请求，通常应该将参数放在请求体中传递，这可以通过将参数添加到data对象中实现。data对象中的参数将会被axios库自动转换为请求体，并且默认情况下会使用JSON格式进行编码。

try {
        const response = http({
          method: "POST",
          url: "/sys/user/register",
          data: {
            username: this.username,
            password: this.password,
          },
        })

三、遇到的问题

`1、路由跳转`

地址栏变化，界面没有刷新

解决办法：添加<router-view />

2、界面渲染问题

使用<router-view />标签后界面渲染两次

原因：在路由配置时把默认的“/”设置跳转到 APP组件，

const routes = [
  // { path: '/', component: App, }, //删除即可
  { path: '/login', component: Login, },
]

3、控制台输出数据集

错误： console.log("data:" + response.data);

正确： console.log("data:" , response.data);

原因：用“+”号链接会抢强转为字符串

4、vue组件使用iframe标签嵌入html，界面渲染多次

尝试了很多次，才找到问题。iframe标签的src路径存在问题

名称	路径
vue组件	vue3-codechrono\src\App.vue
嵌入的html	vue3-codechrono\public\json\jsonformatter.html

 <iframe :src="iframeSrc" width="100%" height="720px" frameborder="0" scrolling="no" />  

export default {
  data() {
    return {
      showSearch: false,
      //正确
      iframeSrc:'./json/jsonformatter.html'
      //错误：
      //实际位置，鼠标点击能够跳转html代码界面，但是无法识别
      // iframeSrc: '../public/json/jsonformatter.html' 
    };
  },
}