myspace/src/views/RegisterView.vue

<template>
  <ContentBase>
    <div class="row justify-content-md-center">
      <div class="col-3">
        <form @submit.prevent="register">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input
              v-model="username"
              type="text"
              class="form-control"
              id="username"
            />
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input
              v-model="password"
              type="password"
              class="form-control"
              id="password"
            />
          </div>

          <div class="mb-3">
            <label for="password_confirm" class="form-label">确认密码</label>
            <input
              v-model="password_confirm"
              type="password"
              class="form-control"
              id="password"
            />
          </div>
          <div class="error-msg">{{error_msg}}</div>
          <button type="submit" class="btn btn-primary">注册</button>
        </form>
      </div>
    </div>
  </ContentBase>
</template>

<script>
import ContentBase from "@/components/ContentBase.vue";
import { ref } from "vue";
import {useStore} from "vuex";
import router from "@/router/index";
import $ from "jquery";
export default {
  name: "RegisterView",
  components: {
    ContentBase,
  },

  setup() {
    const store = useStore();
    let username = ref("");
    let password = ref("");
    let password_confirm = ref("");
    let error_msg = ref("");
    const register = ()=> {
        // 注册前先清空error_msg
        error_msg.value = "";
        $.ajax({
            url: "https://app165.acapp.acwing.com.cn/myspace/user/",
            type: "POST",
            data: {
                username: username.value,
                password: password.value,
                password_confirm: password_confirm.value,
            },
            success(resp) {
                // 注册成功
                if(resp.result == "success"){
                    // 进入登录界面
                    store.dispatch("login",{
                    username: username.value,
                    password: password.value,
                    success() { 
                        router.push({name: "userlist"});
                    },
                    error () { 
                        error_msg.value = "系统异常，请稍后重试!";
                    }
                });
                }
                else {
                    // 出现错误
                    error_msg.value = resp.result;
                }
            }
        });

    };

    return {
      username,
      password,
      error_msg,
      password_confirm,
      register,
    };
 },
};
</script>

<style scoped>
button {
  width: 100%;
}
.error-msg {
    font-weight: bold;
    color: red;
    margin-bottom: 20px;
}
</style>