编程技术 2023-03-06 15:40:39 评论:0    浏览:31    

今天给大家介绍的是一个求职招聘系统,话不多说,先看图:

项目前后端分离,后端是基于springboot框架,前端是Vue。

系统分为三种角色:管理员、求职者和企业用户。

管理员:实现了对求职者和企业用户的信息管理

求职者:可以发布简历信息、修改个人信息、和企业用户在线交流

企业用户:可以发布招聘信息、修改企业信息、和求职者在线交流。

登陆界面VUE代码设计:

<template> <div class="login"> <vue-particles color="#dedede" :particleOpacity="0.7" :particlesnumber="80" shapeType="circle" :particleSize="4" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" ></vue-particles> <!-- 登录框--> <div class="login_box"> <div class="status"> <el-radio v-model="radio" label="1" >管理员</el-radio> <el-radio v-model="radio" label="2" >用户</el-radio> <el-radio v-model="radio" label="3" >企业</el-radio> </div> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" status-icon class="login_form"> <!-- 用户名--> <el-form-item label="账号" label-width="60px" prop="username"> <el-input placeholder="请输入账号" v-model="loginForm.username" @keyup.enter.native="login('loginFormRef')" prefix-icon="el-icon-user"></el-input> </el-form-item> <!-- 密码--> <el-form-item label="密码" label-width="60px" prop="password"> <el-input placeholder="请输入密码" v-model="loginForm.password" show-password @keyup.enter.native="login('loginFormRef')" prefix-icon="el-icon-lock"></el-input> </el-form-item> <!-- 按钮--> <el-form-item class="btns"> <!-- 回车键盘监听 --> <!-- @keyup.enter="login('loginFormRef')" --> <el-button type="primary" @click="login('loginFormRef')">登录</el-button> <el-button type="info" @click="reset('loginFormRef')">重置</el-button> <el-button @click="openDialog" type="success" >注册</el-button> </el-form-item> </el-form> </div> <div> <!--管理员注册表单--> <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="adminDialog" @close="closeDialog('registerFormRef')" :append-to-body="true"> <el-form :model="adminRegisterInfo" ref="registerFormRef" status-icon > <el-form-item label="用户名" prop="username"> <el-input type="text" v-model="adminRegisterInfo.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input show-password v-model="adminRegisterInfo.password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="rePassword"> <el-input type="password" v-model="adminRegisterInfo.rePassword"></el-input> </el-form-item> </el-form> <div class="register-button" slot="footer"> <el-button @click="reset('registerFormRef')">取 消</el-button> <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button> </div> </el-dialog> <!--用户注册表单--> <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="userDialog" @close="closeDialog('registerFormRef')" :append-to-body="true"> <el-form status-icon ref="registerFormRef" :model="userRegisterInfo" size="mini"> <el-form-item label="用户名" prop="username"> <el-input type="text" v-model="userRegisterInfo.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input show-password type="password" v-model="userRegisterInfo.password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="rePassword"> <el-input type="password" v-model="userRegisterInfo.rePassword"></el-input> </el-form-item> <el-form-item label="真实姓名" prop="name"> <el-input type="text" v-model="userRegisterInfo.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input type="number" v-model="userRegisterInfo.age"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-input type="text" v-model="userRegisterInfo.gender"></el-input> </el-form-item> <el-form-item label="出生日期" prop="birthday"> <el-input type="date" v-model="userRegisterInfo.birthday"></el-input> </el-form-item> <el-form-item label="毕业学校" prop="school"> <el-input type="text" v-model="userRegisterInfo.school"></el-input> </el-form-item> <el-form-item label="联系电话" prop="phone"> <el-input type="tel" v-model="userRegisterInfo.phone"></el-input> </el-form-item> <el-form-item label="电子邮箱" prop="email"> <el-input type="email" v-model="userRegisterInfo.email"></el-input> </el-form-item> <el-form-item label="所学专业" prop="specialty"> <el-input type="text" v-model="userRegisterInfo.specialty"></el-input> </el-form-item> <el-form-item label="最高学历" prop="education"> <el-input type="text" v-model="userRegisterInfo.education"></el-input> </el-form-item> </el-form> <div class="register-button" slot="footer"> <el-button @click="reset('registerFormRef')">取 消</el-button> <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button> </div> </el-dialog> <!--企业注册表单--> <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="entrDialog" @close="closeDialog('registerFormRef')" :append-to-body="true"> <el-form :model="entrRegisterInfo" ref="registerFormRef" status-icon size="mini"> <el-form-item label="用户名" prop="username"> <el-input type="text" v-model="entrRegisterInfo.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input show-password v-model="entrRegisterInfo.password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="rePassword"> <el-input type="password" v-model="entrRegisterInfo.rePassword"></el-input> </el-form-item> <el-form-item label="企业名称" prop="name"> <el-input type="text" v-model="entrRegisterInfo.name"></el-input> </el-form-item> <el-form-item label="电子邮箱" prop="email"> <el-input type="email" v-model="entrRegisterInfo.email"></el-input> </el-form-item> <el-form-item label="联系电话" prop="phone"> <el-input type="tel" v-model="entrRegisterInfo.phone"></el-input> </el-form-item> <el-form-item label="从事行业" prop="manage"> <el-input type="text" v-model="entrRegisterInfo.manage"></el-input> </el-form-item> <el-form-item label="企业地址" prop="address"> <el-input type="text" v-model="entrRegisterInfo.address"></el-input> </el-form-item> <el-form-item label="公司简介" prop="introduce"> <el-input type="text" v-model="entrRegisterInfo.introduce"></el-input> </el-form-item> </el-form> <div class="register-button" slot="footer"> <el-button @click="reset('registerFormRef')">取 消</el-button> <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button> </div> </el-dialog> </div> </div></template><script> import {mapMutations} from "vuex"; import Qs from 'qs' export default { name: 'login', data() { return { // 这是登录表单的数据绑定对象 loginForm: { username: 'admin', password: '123456', pwdType: "password", }, //管理员注册对话框 adminDialog:false, //用户注册对话框 userDialog:false, //企业注册对话框 entrDialog:false, //管理员注册信息对象 adminRegisterInfo:{}, //用户注册信息对象 userRegisterInfo:{}, //企业注册信息对象 entrRegisterInfo:{}, loginUrl:'', userToken: '', loginFormRules: { username: [ {required: true, message: '请输入登录账号', trigger: 'blur'}, {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}, ], password: [ {required: true, message: '请输入登陆密码', trigger: 'blur'}, {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}, ] }, radio:'1' }; }, methods: { ...mapMutations(['changeLogin']), //点击重置按钮,重置登录表单 reset() { this.$refs.loginFormRef.resetFields(); }, //登录方法 login(formName) { let _this = this; this.$refs[formName].validate(valid => { if (valid) { console.log('username:' _this.username " password:" _this.password); console.log(_this.radio) this.$store.state.show = _this.radio; console.log(this.$store.state.show) if (_this.radio==='1'){ var url='/api/login/admin' }else if(_this.radio==='2'){ url='/api/login/user' }else if(_this.radio==='3'){ url='/api/login/entr' } this.$axios.post(url, Qs.stringify({ username:_this.loginForm.username, password:_this.loginForm.password, headers: { "Authorization": " " } })).then((response) => { console.log(response); if (response.status === 200) { _this.userToken =response.data.token; console.log(_this.userToken)//获取到的token // 将用户token保存到vuex中 _this.changeLogin({Authorization: _this.userToken}); _this.$store.state.username=response.data.data _this.$store.state.status=true; console.log(_this.$store.state.status) _this.$router.push({path: '/index'}) return _this.$message.success("登录成功"); console.log("登录成功"); } }).catch((err) => { console.log("err", err); return _this.$message.error("密码或用户名错误"); }); } else { console.log("参数验证不合法!"); return false; } }) }, //重置表单 reset(formNameRef) { this.$refs[formNameRef].resetFields(); this.dialogFormVisible = false; }, //右上角X 关闭注册对话框 重置表单 closeDialog(formNameRef){ this.$refs[formNameRef].resetFields(); }, // 打开注册对话框 openDialog(){ let open=this.radio console.log(open) if(open === '1'){ console.log("我进来了1") this.adminDialog=true; }else if(open === '2'){ console.log("我进来了2") this.userDialog=true; }else if(open === '3'){ console.log("我进来了3") this.entrDialog=true; }else{ this.$message.error("出现未知错误") } }, register(formName){ this.$refs[formName].validate(async valid => { if (!valid) return this.$message.error("参数错误"); let _this = this; let _res; if(_this.radio === '1'){ const {data: res} = await _this.$axios.post("/api/admin/register/", Qs.stringify(_this.adminRegisterInfo)) _res=res; }else if(_this.radio === '2'){ const {data: res} = await _this.$axios.post("/api/user/register/", Qs.stringify(_this.userRegisterInfo)) _res=res; }else if(_this.radio === '3'){ const {data: res} = await _this.$axios.post("/api/enterprise/register/", Qs.stringify(_this.entrRegisterInfo)) _res=res; } if(_res.code !== 200){ return _this.$message.error("注册失败") } this.adminDialog=false; this.userDialog=false; this.entrDialog=false; return _this.$message.success("注册成功,请重新登录!"); }) }, } }</script><style scoped> .login { background: url("../assets/image/background.jpg"); width: 100%; height: 100%; position: fixed; background-size: 100% 100%; } .login_box { height: 300px; width: 450px; background: rgba(126, 180, 180, 0.5); border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .login_form { position: absolute; bottom: 20px; width: 100%; padding: 0px 30px; box-sizing: border-box; } .btns { display: flex; justify-content: center; } .status { position:relative; top: 50px; bottom: 10px; left: 100px; } .register-button { text-align: center; }</style>

获取源码请关注后私信“招聘“

以上内容为【基于SpringBoot框架和VUE的求职招聘系统,附源码(招聘 求职管理系统代码)】的相关内容。

 
免责声明:

本文内容来自用户上传并发布或网络新闻客户端自媒体,本站点仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系删除。

 
0相关评论
打赏