1. elementplus中form表单的简单使用 快速上手

2.vue3---axios基础使用教程

3.Vue3和springboot前后端跨域问题

以上不会的小伙伴自取 会的大佬可以跳过

目录

 前端设置

      1.设置axions的默认参数 

     2.在api文件夹 新建login.js 封装登录请求方法   

     3.在vue登录界面中写入

后端设置 ​​​​​​​

• 在准备好以上的前提之后 就可以开始咱们的登录操作啦

首先因为是前后端分离 所以前后端的端口不能用同一个所以在后端设置一个其他端口

//yaml写法
server:
  port: 8082

 前端设置

      1.设置axions的默认参数 

•         在main.js填入以下内容 URL为自己的后台端口号

//默认参数设置 
axios.defaults.baseURL = 'http://localhost:8082/';

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

---

     2.在api文件夹 新建login.js 封装登录请求方法   

//request为我封装的axios的js文件 
import request from './request'

export const login = (data) => {
  return request({
      method:'post',
      url:'login',
      data
  })
}

 method为后端请求所需的方法

 url为后端请求的url地址

 data为后端所需的数据

     3.在vue登录界面中写入

//注意这里的路径可能会跟我的有所不同
import { login } from '@/api/login'


  // 定义model
      const ruleform = ref({
        username: '',
        password: ''
      })
 
 // 定义ref
      const ruleForms = ref(null)
 
//点击事件
     const onSubmit = () => {
        ruleForms.value.validate(async (valid) => {
          if (valid) {
            await login(ruleform.value)
          } else {
            ElMessage.error('error submit !')
            return false
          }
        })
      }

---

后端设置 

这是我后端的login方法 很简单

  @RequestMapping(value = "/login")
    public String login(@RequestBody Map data) {
        String username = data.get("username");
        String password = data.get("password");
        if(username.equals("admin@qq.com")&&password.equals("123456")){
            return username;
        }
        return password;
    }

这里接受的参数必须前面必须有一个@RequestBody注解或者@RequestParam注解

贴一个他们之间的区别 真的很详细哦

(46条消息) @RequestParam和@RequestBody的区别_Yoga0301的博客-CSDN博客_@requestparam和@requestbody的区别