test

web/monit_web/src/view/login/Login.vue

@@ -3,19 +3,20 @@
  <div class="loginBox">
  <div class="ms-login">管理系统平台</div>
  <el-form
- :label-position="labelPosition"
  label-width="100px"
- :model="formLabelAlign"
+ :model="param"
  style="max-width: 460px"
- class="loginForm">
- <el-form-item label="用户名">
- <el-input v-model="formLabelAlign.name" placeholder="请输入用户名"/>
+ class="loginForm"
+ :rules="rules" ref="loginRef"
+ >
+ <el-form-item label="用户名" prop="username">
+ <el-input v-model="param.username" placeholder="请输入用户名"/>
  </el-form-item>
- <el-form-item label="密码">
- <el-input v-model="formLabelAlign.region" placeholder="请输入密码" />
+ <el-form-item label="密码" prop="password">
+ <el-input v-model="param.password" placeholder="请输入密码" />
  </el-form-item>
  <el-form-item class="loginBtn">
- <el-button type="primary" style="margin: 10px">登录</el-button>
+ <el-button type="primary" style="margin: 10px" @click="submitForm(loginRef)">登录</el-button>
  <el-button type="info" style="margin: 10px">取消</el-button>
  </el-form-item>
 
@@ -29,18 +30,57 @@
 
 <script>
 import { reactive, ref } from 'vue'
+import {Login} from "../../api/user";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+const router = useRouter();
 export default {
  name: "Login",
  setup(){
- const labelPosition = ref('right')
- const formLabelAlign = reactive({
- name: '',
- region: '',
- type: '',
- })
+ const param = reactive({
+ username: "李星云2",
+ password: "123456",
+ });
+
+ const rules = {
+ username: [
+ {
+ required: true,
+ message: "请输入用户名",
+ trigger: "blur",
+ },
+ ],
+ password: [
+ { required: true, message: "请输入密码", trigger: "blur" },
+ ],
+ };
+ const loginRef = ref(null);
+ const submitForm = (loginRef) => {
+ if (!loginRef) return
+ loginRef.validate((valid) => {
+ if (valid) {
+ Login(param).then((rep)=>{
+ console.log(rep)
+ if (rep.code===200){
+ router.push("/")
+ }else{
+ ElMessage.error(rep.message);
+ }
+ })
+ } else {
+ ElMessage.error("登录成功");
+ return false;
+ }
+ });
+ };
+
+
+
  return {
- labelPosition,
- formLabelAlign
+ rules,
+ loginRef,
+ submitForm,
+ param
 
  }
 

web/monit_web/vite.config.js

@@ -3,5 +3,6 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+ base: './',
  plugins: [vue()]
 })