<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style lang="less" scoped> .body { margin-left: 70%; margin-bottom: 16%; } .login-form { border-radius: 6px; background: #ffffff; width: 385px; padding: 25px 25px 5px 25px; } body { width:100%; height: 100%; background-image: url(./imges/ba.jpg); background-repeat: no-repeat; background-size: 100% 100%; } </style> </head> <body > <div id="app"> <template> <div class="body"> <el-form :model="loginForm" ref="loginForm" label-position="left" class="login-form" style="box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5); margin-top:125px; "> <!-- 标题 --> <h3 class="title">登录</h3> <el-form-item prop="loginForm" label="账号"> <el-input placeholder="请输入用户名/账号" v-model="loginForm.username" clearable style="width: 330px"> </el-input> </el-form-item> <el-form-item prop="loginForm" label="密码"> <el-input placeholder="请输入密码" v-model="loginForm.password" show-password clearable style="width: 330px"> </el-input> </el-form-item> <el-form-item prop="loginForm" label="类型"> <el-select v-model="loginForm.type" placeholder="请选择类别" style="width: 150px"> <el-option label="企业" value="企业"></el-option> <el-option label="用户" value="用户"></el-option> </el-select> </el-form-item> <el-form-item style="width: 100%;" > <el-button class="btn-login" size="medium" type="primary" style="width:150px;margin-left: 25%" @click="login" > <span>登 录</span> </el-button> <el-button class="btn-login" size="medium" type="primary" style="margin-left: 60px" @click="dialogVisible=true" > <span>注 册</span> </el-button> </el-form-item> </el-form> </div> </template> <el-dialog title="选择注册用户还是企业" :visible.sync="dialogVisible" width="30%"> <span style="margin-left: 120px"> <el-button type="primary" @click="register1(1)">企 业</el-button> <el-button type="primary" @click="register1(0)">用 户</el-button> </span> </el-dialog> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/axios-0.18.0.js"></script> <script> new Vue({ el: "#app", methods: { register1(index) { if(index==0) location.href="peopleRegister.html" else location.href="companyRegister.html" // this.$confirm('选择注册用户还是企业', '提示', { // confirmButtonText: '用户', // cancelButtonText: '企业', // }).then(() => { // location.href="peopleRegister.html" // }).catch(() => { // location.href="companyRegister.html" // }); }, login() { console.log(this.loginForm) var _this = this; if (this.loginForm.type == '用户') { axios({ method: "post", url: "http://localhost:8080/notes/seeker/loginSeeker", data: _this.loginForm }).then(function (resp) { if (resp.data == "error") { _this.$message({ showClose: true, message: '失败', type: 'error' }); } else { localStorage.setItem("password", _this.loginForm.password); localStorage.setItem("username", _this.loginForm.username); window.location.href = 'peoNotes.html'; } }) } else if (this.loginForm.type == '企业') { axios({ method: "post", url: "http://localhost:8080/notes/company/loginCompany", data: _this.loginForm }).then(function (resp) { if (resp.data === "error") { _this.$message({ showClose: true, message: '失败', type: 'error' }); } else { localStorage.setItem("companypassword", _this.loginForm.password); localStorage.setItem("companyname", _this.loginForm.username); localStorage.setItem("companyId", resp.data.id); window.location.href = 'companySeeker.html'; } }) } }, }, data() { return { dialogVisible:false, loginForm: { username: "", //账号 password: "", //密码 type:""//种类 }, } } }) </script> </body> </html>
今日完成:
完成的登录页面的实现
1.登陆后的跳转,验证密码账户
2.注册,用户名,密码
3.企业端与用户端进行分开处理
4.数据库的基本建立
主要在于三个表(求职者,公司,消息(收藏,应聘,面试等等))
明日目标:
1.另个不同人群的注册页面的分开处理
2.数据库的具体列的建立,取决于注册和个人页面所展示的数据
3.基本完成个人主页的创建