实现注册功能
This commit is contained in:
F嘉阳
@@ -1,22 +1,19 @@
|
||||
var Main = {
|
||||
data() {
|
||||
var checkuserName = (rule, value, callback) => {
|
||||
var checkName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('用户名不能为空'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
/* setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('请输入数字值'));
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('必须年满18岁'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);*/
|
||||
};
|
||||
var checkNo = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('学号不能为空'));
|
||||
}
|
||||
};
|
||||
var checkRealName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('真实姓名不能为空'));
|
||||
}
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
@@ -31,7 +28,7 @@ var Main = {
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
} else if (value !== this.ruleForm2.colpassword) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
@@ -39,23 +36,39 @@ var Main = {
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
userName: '',
|
||||
email: ''
|
||||
colname: '',
|
||||
colpassword: '',
|
||||
checkPass:'',
|
||||
colstudentno: '',
|
||||
colrealname: '',
|
||||
colemail: ''
|
||||
},
|
||||
activeName: 'login',
|
||||
rules2: {
|
||||
pass: [
|
||||
{validator: validatePass, trigger: 'blur'}
|
||||
colpassword: [
|
||||
{required: true,validator: validatePass, trigger: 'blur'}
|
||||
],
|
||||
checkPass: [
|
||||
{validator: validatePass2, trigger: 'blur'}
|
||||
{required: true,validator: validatePass2, trigger: 'blur'}
|
||||
],
|
||||
userName: [
|
||||
{validator: checkuserName, trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
colstudentno: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkNo,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colrealname: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkRealName,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colname: [
|
||||
{required: true,validator: checkName, trigger: 'blur'}
|
||||
],
|
||||
},
|
||||
activeName:'login',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -9,9 +9,75 @@ axios.get('http://localhost:8080/cms/download/findall')
|
||||
});*/
|
||||
var Main = {
|
||||
data() {
|
||||
var checkName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('用户名不能为空'));
|
||||
}
|
||||
};
|
||||
var checkNo = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('学号不能为空'));
|
||||
}
|
||||
};
|
||||
var checkRealName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('真实姓名不能为空'));
|
||||
}
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm2.colpassword) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1',
|
||||
ruleForm2: {
|
||||
colname: '',
|
||||
colpassword: '',
|
||||
checkPass:'',
|
||||
colstudentno: '',
|
||||
colrealname: '',
|
||||
colemail: ''
|
||||
},
|
||||
rules2: {
|
||||
colpassword: [
|
||||
{required: true,validator: validatePass, trigger: 'blur'}
|
||||
],
|
||||
checkPass: [
|
||||
{required: true,validator: validatePass2, trigger: 'blur'}
|
||||
],
|
||||
colstudentno: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkNo,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colrealname: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkRealName,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colname: [
|
||||
{required: true,validator: checkName, trigger: 'blur'}
|
||||
],
|
||||
},
|
||||
activeName:'login',
|
||||
fileList: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
@@ -22,87 +88,101 @@ var Main = {
|
||||
DownloadList: []
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.$nextTick(()=>{
|
||||
var that=this;
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
var that = this;
|
||||
axios.get('http://localhost:8080/cms/download/findall')
|
||||
.then(function (response) {
|
||||
console.log(response.data);
|
||||
that.DownloadList = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});})
|
||||
.then(function (response) {
|
||||
console.log(response.data);
|
||||
that.DownloadList = response.data;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClick(row) {
|
||||
console.log(row.colfileid);
|
||||
},
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handleDownload(row){
|
||||
/*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
|
||||
window.open("http://localhost:8080/cms/download/dodownload?fileId="+row.colfileid);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
showMsg(msg) {
|
||||
this.$message({
|
||||
message: msg,
|
||||
type: 'success'
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
notiSuccess(title, value) {
|
||||
this.$notify({
|
||||
title: title,
|
||||
message: value,
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
notiWarning(title, value) {
|
||||
this.$notify({
|
||||
title: title,
|
||||
message: value,
|
||||
type: 'warning'
|
||||
});
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
handleClick(row) {
|
||||
console.log(row.colfileid);
|
||||
},
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handleDownload(row) {
|
||||
/*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
|
||||
window.open("http://localhost:8080/cms/download/dodownload?fileId=" + row.colfileid);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
showMsg(msg) {
|
||||
this.$message({
|
||||
message: msg,
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
notiSuccess(title, value) {
|
||||
this.$notify({
|
||||
title: title,
|
||||
message: value,
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
notiWarning(title, value) {
|
||||
this.$notify({
|
||||
title: title,
|
||||
message: value,
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
notiInfo(title, value) {
|
||||
this.$notify.info({
|
||||
title: title,
|
||||
message: value
|
||||
});
|
||||
},
|
||||
notiInfo(title, value) {
|
||||
this.$notify.info({
|
||||
title: title,
|
||||
message: value
|
||||
});
|
||||
},
|
||||
|
||||
notiError(title, value) {
|
||||
this.$notify.error({
|
||||
title: title,
|
||||
message: value
|
||||
});
|
||||
}
|
||||
notiError(title, value) {
|
||||
this.$notify.error({
|
||||
title: title,
|
||||
message: value
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
var Ctor = Vue.extend(Main)
|
||||
var con = new Ctor().$mount('#app')
|
||||
//con.showMsg('登录成功');
|
||||
|
||||
124
src/main/resources/static/loginTest.html
Normal file
124
src/main/resources/static/loginTest.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>登录</title>
|
||||
<!--
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
-->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<div id="app">
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col
|
||||
:md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<h2>登录系统</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<template>
|
||||
<el-tabs v-model="activeName"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane label="登录"
|
||||
name="login">
|
||||
<el-form :model="ruleForm2" status-icon
|
||||
:rules="rules2" ref="ruleForm2" label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
action="/cms/login/dologin"
|
||||
method="POST" name="login">
|
||||
<el-form-item label="用户名"
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
native-type="submit">提交
|
||||
</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="注册" name="register">
|
||||
<el-form
|
||||
:model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
|
||||
label-width="100px" class="demo-ruleForm"
|
||||
action="/cms/register/doregister"
|
||||
method="POST" name="register">
|
||||
<el-form-item label="用户名"
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input
|
||||
type="password" v-model="ruleForm2.checkPass"
|
||||
auto-complete="off" name="checkPass"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="colemail" label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]">
|
||||
<el-input v-model="ruleForm2.colemail" name="colemail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学号"
|
||||
prop="colstudentno">
|
||||
<el-input
|
||||
v-model="ruleForm2.colstudentno" name="colstudentno"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名"
|
||||
prop="colrealname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colrealname" name="colrealname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
native-type="submit">提交
|
||||
</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<script src="js/loginstyle.js"></script>
|
||||
<script src="js/msg.js"></script>
|
||||
<!--<body>
|
||||
<!–<center>
|
||||
<h1>登录系统</h1>
|
||||
<form action="/cms/login/dologin" method="post">
|
||||
<p>用户名：
|
||||
<input type="text" name="colname"></p>
|
||||
<p>密码：
|
||||
<input type="password" name="colpassword"></p>
|
||||
<input type="submit" value="登录">
|
||||
</center>–>
|
||||
</form>-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,6 +2,7 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:include="dist/thymeleaf/common_head :: header('登录')"></head>
|
||||
<link th:href="@{css/style.css}" rel="stylesheet">
|
||||
<body>
|
||||
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||
<div id="app">
|
||||
@@ -25,16 +26,16 @@
|
||||
:rules="rules2" ref="ruleForm2" label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
action="/cms/login/dologin"
|
||||
method="POST" name="loginTest">
|
||||
method="POST" name="login">
|
||||
<el-form-item label="用户名"
|
||||
prop="userName">
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.userName" name="colname"></el-input>
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="pass">
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.pass" auto-complete="off" name="colpassword"></el-input>
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
@@ -50,28 +51,38 @@
|
||||
:model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
|
||||
label-width="100px" class="demo-ruleForm"
|
||||
action="/cms/register/doregister"
|
||||
method="POST" name="loginTest">
|
||||
method="POST" name="register">
|
||||
<el-form-item label="用户名"
|
||||
prop="userName">
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.userName" name="userName"></el-input>
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="pass">
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.pass" auto-complete="off" name="passWord"></el-input>
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input
|
||||
type="password" v-model="ruleForm2.checkPass"
|
||||
auto-complete="off"></el-input>
|
||||
auto-complete="off" name="checkPass"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" label="邮箱"
|
||||
<el-form-item prop="colemail" label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]">
|
||||
<el-input v-model="ruleForm2.email"></el-input>
|
||||
<el-input v-model="ruleForm2.colemail" name="colemail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学号"
|
||||
prop="colstudentno">
|
||||
<el-input
|
||||
v-model="ruleForm2.colstudentno" name="colstudentno"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名"
|
||||
prop="colrealname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colrealname" name="colrealname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
@@ -87,7 +98,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<script th:src="@{js/LoginStyle.js}"></script>
|
||||
<script th:src="@{js/loginstyle.js}"></script>
|
||||
<!--<body>
|
||||
<!–<center>
|
||||
<h1>登录系统</h1>
|
||||
|
||||
Reference in New Issue
Block a user