devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于SpringBoot框架和VUE的求职招聘系统_springboot vue招聘系统 源码下载

作者：羊村懒王 | 2024-04-17 08:12:30

赞

踩

springboot vue招聘系统 源码下载

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

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

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

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

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

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

登陆界面VUE代码设计：

  1. <template>
  2.   <div class="login">
  3.     <vue-particles
  4.       color="#dedede"
  5.       :particleOpacity="0.7"
  6.       :particlesNumber="80"
  7.       shapeType="circle"
  8.       :particleSize="4"
  9.       linesColor="#dedede"
  10.       :linesWidth="1"
  11.       :lineLinked="true"
  12.       :lineOpacity="0.4"
  13.       :linesDistance="150"
  14.       :moveSpeed="3"
  15.       :hoverEffect="true"
  16.       hoverMode="grab"
  17.       :clickEffect="true"
  18.       clickMode="push"
  19.     ></vue-particles>
  20.     <!--    登录框-->
  21.     <div class="login_box">
  22.       <div class="status">
  23.         <el-radio v-model="radio" label="1" >管理员</el-radio>
  24.         <el-radio v-model="radio" label="2" >用户</el-radio>
  25.         <el-radio v-model="radio" label="3" >企业</el-radio>
  26.       </div>
  27.       <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" status-icon class="login_form">
  28.         <!--        用户名-->
  29.         <el-form-item label="账号" label-width="60px" prop="username">
  30.           <el-input placeholder="请输入账号" v-model="loginForm.username"  @keyup.enter.native="login('loginFormRef')"
  31.                     prefix-icon="el-icon-user"></el-input>
  32.         </el-form-item>
  33.         <!--        密码-->
  34.         <el-form-item label="密码" label-width="60px" prop="password">
  35.           <el-input placeholder="请输入密码" v-model="loginForm.password"  show-password @keyup.enter.native="login('loginFormRef')"
  36.                     prefix-icon="el-icon-lock"></el-input>
  37.         </el-form-item>
  38.         <!--        按钮-->
  39.         <el-form-item class="btns">
  40.           <!-- 回车键盘监听 -->
  41.           <!-- @keyup.enter="login('loginFormRef')" -->
  42.           <el-button type="primary"  @click="login('loginFormRef')">登录</el-button>
  43.           <el-button type="info"  @click="reset('loginFormRef')">重置</el-button>
  44.           <el-button @click="openDialog" type="success" >注册</el-button>
  45.         </el-form-item>
  46.       </el-form>
  47.     </div>
  48.  
  49.     <div>
  50.  
  51.       <!--管理员注册表单-->
  52.       <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="adminDialog"
  53.                  @close="closeDialog('registerFormRef')" :append-to-body="true">
  54.         <el-form :model="adminRegisterInfo" ref="registerFormRef"  status-icon >
  55.           <el-form-item label="用户名" prop="username">
  56.             <el-input type="text" v-model="adminRegisterInfo.username"></el-input>
  57.           </el-form-item>
  58.           <el-form-item label="密码" prop="password">
  59.             <el-input show-password v-model="adminRegisterInfo.password"></el-input>
  60.           </el-form-item>
  61.           <el-form-item label="确认密码" prop="rePassword">
  62.             <el-input type="password" v-model="adminRegisterInfo.rePassword"></el-input>
  63.           </el-form-item>
  64.         </el-form>
  65.         <div class="register-button" slot="footer">
  66.           <el-button @click="reset('registerFormRef')">取 消</el-button>
  67.           <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button>
  68.         </div>
  69.       </el-dialog>
  70.       <!--用户注册表单-->
  71.       <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="userDialog"
  72.                  @close="closeDialog('registerFormRef')" :append-to-body="true">
  73.         <el-form status-icon ref="registerFormRef" :model="userRegisterInfo" size="mini">
  74.           <el-form-item label="用户名" prop="username">
  75.             <el-input type="text" v-model="userRegisterInfo.username"></el-input>
  76.           </el-form-item>
  77.           <el-form-item label="密码" prop="password">
  78.             <el-input show-password type="password" v-model="userRegisterInfo.password"></el-input>
  79.           </el-form-item>
  80.           <el-form-item label="确认密码" prop="rePassword">
  81.             <el-input type="password" v-model="userRegisterInfo.rePassword"></el-input>
  82.           </el-form-item>
  83.           <el-form-item label="真实姓名" prop="name">
  84.             <el-input type="text" v-model="userRegisterInfo.name"></el-input>
  85.           </el-form-item>
  86.           <el-form-item label="年龄" prop="age">
  87.             <el-input type="number" v-model="userRegisterInfo.age"></el-input>
  88.           </el-form-item>
  89.           <el-form-item label="性别" prop="gender">
  90.             <el-input type="text" v-model="userRegisterInfo.gender"></el-input>
  91.           </el-form-item>
  92.           <el-form-item label="出生日期" prop="birthday">
  93.             <el-input type="date" v-model="userRegisterInfo.birthday"></el-input>
  94.           </el-form-item>
  95.           <el-form-item label="毕业学校" prop="school">
  96.             <el-input type="text" v-model="userRegisterInfo.school"></el-input>
  97.           </el-form-item>
  98.           <el-form-item label="联系电话" prop="phone">
  99.             <el-input type="tel" v-model="userRegisterInfo.phone"></el-input>
  100.           </el-form-item>
  101.           <el-form-item label="电子邮箱" prop="email">
  102.             <el-input type="email" v-model="userRegisterInfo.email"></el-input>
  103.           </el-form-item>
  104.           <el-form-item label="所学专业" prop="specialty">
  105.             <el-input type="text" v-model="userRegisterInfo.specialty"></el-input>
  106.           </el-form-item>
  107.           <el-form-item label="最高学历" prop="education">
  108.             <el-input type="text" v-model="userRegisterInfo.education"></el-input>
  109.           </el-form-item>
  110.         </el-form>
  111.         <div class="register-button" slot="footer">
  112.           <el-button @click="reset('registerFormRef')">取 消</el-button>
  113.           <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button>
  114.         </div>
  115.       </el-dialog>
  116.       <!--企业注册表单-->
  117.       <el-dialog title="注册" :close-on-click-modal="false" :visible.sync="entrDialog"
  118.                  @close="closeDialog('registerFormRef')" :append-to-body="true">
  119.         <el-form :model="entrRegisterInfo" ref="registerFormRef"  status-icon size="mini">
  120.           <el-form-item label="用户名" prop="username">
  121.             <el-input type="text" v-model="entrRegisterInfo.username"></el-input>
  122.           </el-form-item>
  123.           <el-form-item label="密码" prop="password">
  124.             <el-input show-password v-model="entrRegisterInfo.password"></el-input>
  125.           </el-form-item>
  126.           <el-form-item label="确认密码" prop="rePassword">
  127.             <el-input type="password" v-model="entrRegisterInfo.rePassword"></el-input>
  128.           </el-form-item>
  129.           <el-form-item label="企业名称" prop="name">
  130.             <el-input type="text" v-model="entrRegisterInfo.name"></el-input>
  131.           </el-form-item>
  132.           <el-form-item label="电子邮箱" prop="email">
  133.             <el-input type="email" v-model="entrRegisterInfo.email"></el-input>
  134.           </el-form-item>
  135.           <el-form-item label="联系电话" prop="phone">
  136.             <el-input type="tel" v-model="entrRegisterInfo.phone"></el-input>
  137.           </el-form-item>
  138.           <el-form-item label="从事行业" prop="manage">
  139.             <el-input type="text" v-model="entrRegisterInfo.manage"></el-input>
  140.           </el-form-item>
  141.           <el-form-item label="企业地址" prop="address">
  142.             <el-input type="text" v-model="entrRegisterInfo.address"></el-input>
  143.           </el-form-item>
  144.           <el-form-item label="公司简介" prop="introduce">
  145.             <el-input type="text" v-model="entrRegisterInfo.introduce"></el-input>
  146.           </el-form-item>
  147.         </el-form>
  148.         <div class="register-button" slot="footer">
  149.           <el-button @click="reset('registerFormRef')">取 消</el-button>
  150.           <el-button type="primary" @click="register('registerFormRef')">立即注册</el-button>
  151.         </div>
  152.       </el-dialog>
  153.     </div>
  154.   </div>
  155.  
  156. </template>
  157.  
  158. <script>
  159.   import {mapMutations} from "vuex";
  160.   import Qs from 'qs'
  161.   export default {
  162.     name: 'login',
  163.     data() {
  164.       return {
  165.         // 这是登录表单的数据绑定对象
  166.         loginForm: {
  167.           username: 'admin',
  168.           password: '123456',
  169.           pwdType: "password",
  170.         },
  171.         //管理员注册对话框
  172.         adminDialog:false,
  173.         //用户注册对话框
  174.         userDialog:false,
  175.         //企业注册对话框
  176.         entrDialog:false,
  177.         //管理员注册信息对象
  178.         adminRegisterInfo:{},
  179.         //用户注册信息对象
  180.         userRegisterInfo:{},
  181.         //企业注册信息对象
  182.         entrRegisterInfo:{},
  183.         loginUrl:'',
  184.         userToken: '',
  185.         loginFormRules: {
  186.           username: [
  187.             {required: true, message: '请输入登录账号', trigger: 'blur'},
  188.             {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
  189.           ],
  190.           password: [
  191.             {required: true, message: '请输入登陆密码', trigger: 'blur'},
  192.             {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'},
  193.           ]
  194.         },
  195.         radio:'1'
  196.       };
  197.     },
  198.     methods: {
  199.       ...mapMutations(['changeLogin']),
  200.       //点击重置按钮,重置登录表单
  201.       reset() {
  202.         this.$refs.loginFormRef.resetFields();
  203.       },
  204.  
  205.       //登录方法
  206.       login(formName) {
  207.         let _this = this;
  208.         this.$refs[formName].validate(valid => {
  209.           if (valid) {
  210.             console.log('username:' + _this.username + "  password:" + _this.password);
  211.             console.log(_this.radio)
  212.             this.$store.state.show = _this.radio;
  213.             console.log(this.$store.state.show)
  214.             if (_this.radio==='1'){
  215.               var url='/api/login/admin'
  216.             }else if(_this.radio==='2'){
  217.               url='/api/login/user'
  218.             }else if(_this.radio==='3'){
  219.               url='/api/login/entr'
  220.             }
  221.             this.$axios.post(url, Qs.stringify({
  222.               username:_this.loginForm.username,
  223.               password:_this.loginForm.password,
  224.               headers: {
  225.                 "Authorization": " "
  226.               }
  227.             })).then((response) => {
  228.               console.log(response);
  229.               if (response.status === 200) {
  230.                 _this.userToken =response.data.token;
  231.                 console.log(_this.userToken)//获取到的token
  232.                 // 将用户token保存到vuex中
  233.                 _this.changeLogin({Authorization: _this.userToken});
  234.                 _this.$store.state.username=response.data.data
  235.                 _this.$store.state.status=true;
  236.                 console.log(_this.$store.state.status)
  237.                 _this.$router.push({path: '/index'})
  238.                 return _this.$message.success("登录成功");
  239.                 console.log("登录成功");
  240.               }
  241.             }).catch((err) => {
  242.               console.log("err", err);
  243.               return _this.$message.error("密码或用户名错误");
  244.             });
  245.           } else {
  246.             console.log("参数验证不合法！");
  247.             return false;
  248.           }
  249.         })
  250.       },
  251.  
  252.       //重置表单
  253.       reset(formNameRef) {
  254.         this.$refs[formNameRef].resetFields();
  255.         this.dialogFormVisible = false;
  256.       },
  257.       //右上角X 关闭注册对话框 重置表单
  258.       closeDialog(formNameRef){
  259.         this.$refs[formNameRef].resetFields();
  260.       },
  261.  
  262.       // 打开注册对话框
  263.       openDialog(){
  264.         let open=this.radio
  265.         console.log(open)
  266.         if(open === '1'){
  267.           console.log("我进来了1")
  268.           this.adminDialog=true;
  269.         }else if(open === '2'){
  270.           console.log("我进来了2")
  271.           this.userDialog=true;
  272.         }else if(open === '3'){
  273.           console.log("我进来了3")
  274.           this.entrDialog=true;
  275.         }else{
  276.           this.$message.error("出现未知错误")
  277.         }
  278.       },
  279.  
  280.  
  281.       register(formName){
  282.         this.$refs[formName].validate(async valid => {
  283.           if (!valid) return this.$message.error("参数错误");
  284.           let _this = this;
  285.           let _res;
  286.           if(_this.radio === '1'){
  287.             const {data: res} = await _this.$axios.post("/api/admin/register/", Qs.stringify(_this.adminRegisterInfo))
  288.             _res=res;
  289.           }else if(_this.radio === '2'){
  290.             const {data: res} = await _this.$axios.post("/api/user/register/", Qs.stringify(_this.userRegisterInfo))
  291.             _res=res;
  292.           }else if(_this.radio === '3'){
  293.             const {data: res} = await _this.$axios.post("/api/enterprise/register/", Qs.stringify(_this.entrRegisterInfo))
  294.             _res=res;
  295.           }
  296.           if(_res.code !== 200){
  297.             return _this.$message.error("注册失败")
  298.           }
  299.           this.adminDialog=false;
  300.           this.userDialog=false;
  301.           this.entrDialog=false;
  302.           return _this.$message.success("注册成功,请重新登录!");
  303.         })
  304.     },
  305.     }
  306.   }
  307. </script>
  308.  
  309. <style scoped>
  310.   .login {
  311.     background: url("../assets/image/background.jpg");
  312.     width: 100%;
  313.     height: 100%;
  314.     position: fixed;
  315.     background-size: 100% 100%;
  316.   }
  317.  
  318.   .login_box {
  319.     height: 300px;
  320.     width: 450px;
  321.     background: rgba(126, 180, 180, 0.5);
  322.     border-radius: 3px;
  323.     position: absolute;
  324.     left: 50%;
  325.     top: 50%;
  326.     transform: translate(-50%, -50%);
  327.   }
  328.  
  329.   .login_form {
  330.     position: absolute;
  331.     bottom: 20px;
  332.     width: 100%;
  333.     padding: 0px 30px;
  334.     box-sizing: border-box;
  335.   }
  336.  
  337.   .btns {
  338.     display: flex;
  339.     justify-content: center;
  340.   }
  341.  
  342.   .status {
  343.     position:relative;
  344.     top: 50px;
  345.     bottom: 10px;
  346.     left: 100px;
  347.   }
  348.  
  349.   .register-button {
  350.     text-align: center;
  351.   }
  352.  
  353. </style>

演示视频

基于springboot和vue的求职招聘管理系统

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/439096
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号