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

项目前后端分离，后端是基于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>

演示视频