master

分支 (1)

管理

管理

master

vue3-admin
/
index2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>测试001</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <!--<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>-->
	<!-- Import style -->
	<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
	<!-- Import component library -->
	<script src="https://unpkg.com/element-plus"></script>
	<!--<link rel="stylesheet" href="./css/css.css">-->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
	body{
		margin: 0;
		padding: 0;
	}
	#app{
		margin: 0;
		padding: 0;
		position: relative;
		overflow: hidden;
		width: 100vw;
		height:100vh;
	}
	[v-cloak] {
		display: none;
	}
	.el-container {
		height: 100%;
	}
	.el-menu-type{
		height: 100%;
	}
	.login-center{
		overflow: hidden;
		position: absolute;
		width: 350px;
		top: 36%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.login-center p{
		display: block;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		font-weight: bold;
	}
	.login-buttons{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction:row;
		flex-wrap: nowrap;
		justify-content: space-around;
		text-align: center;
	}
	.login-buttons button{
		display: block;
	}
</style>
<body>
	<div id="app" v-cloak>
		<el-container v-show="loginInfo!=null">
		  <el-header>公司标题</el-header>
		  <el-container>
			<el-aside width="200px">
			  <el-menu
				active-text-color="#ffd04b"
				background-color="#545c64"
				class="el-menu-type"
				default-active="2"
				text-color="#fff"
				@open="handleOpen"
				@close="handleClose"
			  >
				<div style="height:70px;"></div>
				<el-sub-menu v-for="(item,index) in navArr" :index="index">
					<template #title>
						<span>{{item.n}}</span>
					</template>
					<el-menu-item v-for="(type,i) in item.c" :index="index+'-'+i">{{type}}</el-menu-item>
				</el-sub-menu>
			  </el-menu>
			</el-aside>
			<el-main>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="date" label="Date" width="180" ></el-table-column>
					    <el-table-column prop="name" label="Name" width="180" ></el-table-column>
					    <el-table-column prop="address" label="Address" ></el-table-column>
				</el-table>
			</el-main>
		  </el-container>
		</el-container>
		<div class="login-center">
			<p>公司名称</p>
			<el-form
				ref="ruleFormRef"
				style="max-width: 600px"
				:model="ruleForm"
				status-icon
				:rules="rules"
				label-width="auto"
				class="demo-ruleForm"
				v-show="loginInfo==null"
			  >
				<el-form-item label="用户名" prop="username">
				  <el-input v-model="ruleForm.username" type="text" autocomplete="off" maxlength="32"/>
				</el-form-item>
				<el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
				  <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password maxlength="32"/>
				</el-form-item>
				<el-form-item label="验证码" prop="code">
					<div style="width:100%;display:flex;flex-direction:row;justify-content:flex-start;">
						<div style="width:140px;"><el-input v-model.number="ruleForm.code" type="text" maxlength="6"/></div>
						<div style="overflow:hidden;width:140px;height:100%;margin-left:20px;margin-top:2px;">
							<el-image style="width:100%;height:100%;cursor:pointer;" :src="validateCodeImgage" :fit="none" v-on:click="loadCodeImg"/></div>
					</div>
				</el-form-item>
				<el-form-item>
					<div style="width:100%;display:flex;flex-direction:row;justify-content:space-around;">
					  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
					  <el-button @click="resetForm(ruleFormRef)">忘记密码</el-button>
					</div>
				</el-form-item>
			  </el-form>
		  </div>
	</div>
</body>
</html>
<script>
  const { createApp, ref , reactive } = Vue

  createApp({
    setup() {
		const tableData = [
		    {
		        date: '2016-05-03',
		        name: 'Tom',
		        address: 'No. 189, Grove St, Los Angeles',
		      },
		      {
		        date: '2016-05-02',
		        name: 'Tom',
		        address: 'No. 189, Grove St, Los Angeles',
		      },
		      {
		        date: '2016-05-04',
		        name: 'Tom',
		        address: 'No. 189, Grove St, Los Angeles',
		      },
		      {
		        date: '2016-05-01',
		        name: 'Tom',
		        address: 'No. 189, Grove St, Los Angeles',
		      },
		];
	  const loginInfo = ref(null)
	  const msg = ref("asdf")
	  const validateCodeImgage = ref("")
	  const navAction = ref(null)
	  const navArr = ref([{n:"大类001",c:["小丽","消防"]},{n:"大类002",c:["范德萨","官方店"]},{n:"大类003",c:["测试测试01","测试测试02"]}])

	  function navClickHander(itemNo, event) {
	    // 这里可以访问原生事件
	    if (event) {
	      console.log(event)
	    }
		if(navAction.value == itemNo){
			navAction.value = null
		}else{
			navAction.value = itemNo
		}
	  }

	  const ruleFormRef = ref()

	  const checkCode = (rule, value, callback) => {
	    if (!value) {
	      return callback(new Error('请输入验证码'))
	    }
	    callback()
	  }

	  const validateUsername = (rule, value, callback) => {
	    if (value === '') {
	      callback(new Error('请输入用户名'))
	    } else {
	      callback()
	    }
	  }
	  const validatePassword = (rule, value, callback) => {
	    if (value === '') {
	      callback(new Error('请输入密码'))
	    } else if (value !== ruleForm.pass) {
	      callback()
	    } else {
	      callback()
	    }
	  }

	  const ruleForm = reactive({
	    username: '',
	    password: '',
	    code: '',
	  })

	  const rules = reactive({
	    username: [{ validator: validateUsername, trigger: 'blur' }],
	    password: [{ validator: validatePassword, trigger: 'blur' }],
	    code: [{ validator: checkCode, trigger: 'blur' }],
	  })

	  const submitForm = (formEl) => {
	    if (!formEl) return
	    formEl.validate((valid) => {
	      if (valid) {
			console.log(ruleForm)
	        axios({
				method: 'post',
				url: 'http://localhost:8080/login',
				params: {
					username:ruleForm.username,
					password:ruleForm.password,
					code:ruleForm.code
				},
			}).then(function(response) {
			   console.log(response.data.err)
			}).catch(function (error) {
				console.log(error);
			});
	      } else {
	        console.log('error submit!')
	      }
	    })
	  }

	  const resetForm = (formEl) => {
	    if (!formEl) return
	    formEl.resetFields()
	  }

	  function loadCodeImg(){

		  axios.get('http://localhost:8080/captcha?sid=123', {

			}).then(function(response) {
			   validateCodeImgage.value = response.data.data
			}).catch(function (error) {
				console.log(error);
			});
	  }
	  loadCodeImg()


      return {
        msg,navArr,navAction,navClickHander,tableData,resetForm,submitForm,rules,ruleForm,validatePassword,validateUsername,checkCode,ruleFormRef,validateCodeImgage,loadCodeImg
      }
    }
  }).use(ElementPlus).mount('#app')
</script>