基于Spring Boot大学生网上兼职管理系统的设计与实现（前端VUe）-优快云博客

本文链接：https://blog.youkuaiyun.com/newlw/article/details/147997552

摘要
大学生兼网站是针对大学生群体专门提供的求职平台，平台上拥有全职、兼职、寒暑假工等，学生在课余时间或者假期时间可以通过该平台寻找合适的兼职或者工作，提高学习以外的收入。学生在平台上可以寻找不同种类的工作：IT互联网、金融等。不同的企业入驻该平台，发布岗位的招聘信息给学生浏览咨询并投递。平台拥有学生用户：登录注册、申请职位、举报信息、个人信息、岗位查看投递等，企业用户：登录注册、招聘管理、员工管理等，管理员用户：企业管理、学生管理、招聘信息管理、举报信息管理等。网站采用MySql关系型数据库、Redis非关系型数据库、Mybatis、Tomcat服务器。该网站不仅可以提高大学生求职能力，而且对学校就业率的提高有着间接的关系。

关键词：兼职，兼职网站，Spring Boot，MyBatis

目录
第一章绪论 1
1.1研究背景及意义 1
1.1.1研究背景 1
1.1.2研究目的 1
1.1.3研究意义 2
1.2国内外研究现状 2
1.2.1国内研究现状 2
1.2.2国外研究现状 4
1.2.3文献评述 5
1.3 网站设计内容 5
1.4 论文结构 6
第二章系统相关技术介绍 7
2.1 Vue框架 7
2.2 Spring框架 7
2.3 MyBatis框架 7
2.4 MySQL关系型数据库 8
2.5 Redis非关系型数据库 8
2.6 Spring Boot框架 8
第三章系统分析 6
3.1 系统可行性分析 6
3.1.1 技术可行性 6
3.1.2 经济可行性 6
3.1.3 操作可行性 7
3.2 系统需求分析 7
3.2.1 功能总体设计 7
3.2.2 登录注册流程 7
3.2.3 职位申请流程 9
3.2.4 举报企业流程 10
3.2.5 企业招聘流程 11
3.2.6 招聘信息发布流程 12
3.2.7 个人信息管理流程 13
3.3 本章小结 16
第四章系统概要设计 17
4.1 功能模块设计 17
4.1.1 功能划分 17
4.1.2 功能模块 17
4.2 数据结构设计 19
4.2.1 概要结构设计 19
4.2.2 数据表结构设计 21
4.3 本章小结 25
第五章系统实现 26
5.1 登录 26
5.2 注册 27
5.3 企业信息管理 28
5.4 企业招聘管理 29
5.5 企业录用人员管理 30
5.6 企业招聘信息管理 31
5.7 企业负责人信息管理 32
5.8 学生招聘信息 35
5.9 学生举报信息 37
5.10 学生申请记录 39
5.11 学生个人信息管理 41
5.12管理员企业管理 44
5.13管理员学生管理 46
5.14管理员招聘信息管理 48
5.15管理员举报信息管理 50
5.16管理员个人信息管理 51
5.17本章小结 53
第六章系统测试 54
6.1系统测试 54
6.2系统模块测试 54
6.2.1登录测试 54
6.2.2注册测试 55
6.2.3企业信息管理测试 56
6.2.4企业招聘管理测试 57
6.2.5录用人员管理测试 59
6.2.6企业招聘信息管理测试 60
6.2.7企业负责人信息管理测试 62
6.2.8学生招聘信息测试 63
6.2.9学生举报信息测试 65
6.2.10学生申请记录测试 65
6.2.11学生个人信息管理测试 66
6.2.12管理员企业管理测试 68
6.2.13管理员学生管理测试 70
6.2.14管理员招聘信息管理测试 72
6.2.15管理员举报信息管理测试 73
6.2.16管理员个人信息管理测试 74
6.3本章小结 75
第七章结论 76
致谢 77
参考文献 78

<template>
  <main>
    <div class="top"></div>
    <div id="container">
      <!-- 左边标语 -->
      <div id="c-1">
        <p style="font-size: 60px;font-weight: 500;">招人才&nbsp;&nbsp;好平台&nbsp;&nbsp;新机遇</p>
        <p style="font-size: 32px;">简直网企业版</p>

      </div>
      <!-- 登录界面 -->
      <div id="c-2">
        <button :class="[ isLogin?'bt2':'bt1' ]" @click="isLogin=true">登录</button>
        <button :class="[ isLogin?'bt1':'bt2' ]" @click="isLogin=false">注册</button>
        <br/>
        <br/>
        <div v-show="isLogin" id="login">
          <el-input
              v-model="user.userName"
              :placeholder="userPlace"
              id="userName"
              name="userName"
              type="text"
          />
          <el-input show-password v-model="user.password" :placeholder="passPlace" style="margin-top: 30px" name="pwd" type="password"/>

          <br>
          <br><br>
          <div id="remember">
            <span id="forget" @click="$router.push('rePwd')">忘记密码?</span>
            <!-- 用户端，管理员端 -->
            <span id="forget" @click="$router.push('StudentLogin')">我要求职</span>
            <!-- <span id="forget" @click="$router.push('adminLogin')">管理员端</span> -->
          </div>
          <br>
          <!--          滑动验证码-->
          <div v-show="captchaShow" id="captcha">
            <div style="display: flex;justify-content: space-around;width: 100%">
              <h4>请滑动到正确位置</h4><i @click="captchaShow=false" style="cursor: pointer" class="el-icon-error">关闭</i>
            </div>
            <drag-verify-rotate ref="dragVerify"
                                :imgsrc="require('@/assets/img/cap.jpg')"
                                :isPassing.sync="yanzheng"
                                text="请按住滑块拖动"
                                successText="验证通过"
                                handlerIcon="el-icon-d-arrow-right"
                                successIcon="el-icon-circle-check"
                                @refresh="onRefresh"
                                @passcallback="onSuccess"
            >
            </drag-verify-rotate>
            <p style="font-size: 13px">{{ msg }}</p>
          </div>
          <button @click="login()" id="loginBt">登录<i v-if="loading" class="el-icon-loading"></i></button>
        </div>
        <div v-show="!isLogin" id="register">
            <el-input
                v-model="registerUser.userName"
                placeholder="企业名称"
                name="userName"
                type="text" style="margin-bottom: 10px;"/>
            <el-input show-password v-model="registerUser.password" :placeholder="passPlace" name="pwd" type="password"/>
            <el-input  v-model="registerUser.tel" name="tel" placeholder="输入手机号" maxlength="11" style="margin-top: 10px;"/>
            <br>
            <el-input style="margin-bottom: 10px;margin-top: 10px;" v-model="registerUser.firmName" name="captcha" :placeholder="firmName"/>
            <el-input v-model="registerUser.captcha" style="width:160px" name="captcha" placeholder="输入验证码"/>
                <el-button :disabled="this.showNum" style="height:40px;width:35%;" type="info" plain  @click="send" class="btn_number" v-bind:class="{gray:wait_timer>0}">
                  <span class="num_green" v-show="showNum" v-bind:class="{num:wait_timer>0}">{{ this.wait_timer + "s " }}</span>
                  <span class="span_number" v-bind:class="{gray_span:wait_timer>0}">{{ getCodeText() }}</span>
                </el-button>
            
          <br>
          <button @click="toRegister()" id="registerBtn">注册<i v-if="loading" class="el-icon-loading"></i></button>
        </div>
      </div>
    </div>
  </main>
</template>


<script>
import dragVerifyRotate from 'vue-drag-verify-img-rotate'
import {sendCaptcha} from "@/network/companyUser";
import {register} from "@/network/companyUser";
import {login} from "../../network/companyUser";
import {Message} from "element-ui";
export default {
  name: "Login",
  components: {
    dragVerifyRotate,
  },
  data() {
    return {
      checked: false,
      loading: false,
      user: {
        userName: "", //用户名
        password: "" //密码
      },
      registerUser: {
        userName: "",
        password: "",
        tel: "",
        firmName: "",
        captcha:'',
      },
      yanzheng: false,
      token: '',
      userPlace: "企业账号",
      passPlace: "密码",
      firmName:"企业负责人",
      submitTxt: "登录",
      register: false,
      msg: '',
      captchaShow: false,
      isLogin: true,
      wait_timer: false,
      showNum: false,
    };
  },
  methods: {

    onSuccess() {
      this.msg = '验证通过~你的手速比99%的人都快'
      this.onRefresh();
      this.yanzheng = false;
      const useInfo = {
        userName: this.user.userName,
        password: this.user.password,
      }
      //登录
      this.$store.dispatch("user/login", useInfo)
      this.captchaShow = false;
    },
    onRefresh() {
      this.msg = ''
    },
    login() {
      var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if (!this.user.userName) {
        this.$message.error("账号不能为空")
      } else if (!this.user.password) {
        this.$message.error("请填写密码")
      }else if(reg.test(this.user.userName)){
        // this.captchaShow = true;
        //登录到首页
        login(this.user).then(res => {
          const code = res.data.code
          if (code != 200) {
            Message.warning(res.data.msg)
          }else{
            Message.success(res.data.msg)
        
            localStorage.setItem("company_companyName",res.data.data.fiName)
            localStorage.setItem("fiAccount",res.data.data.fiAccount)
            localStorage.setItem("fiId",res.data.data.fiId)
            this.$router.push({path:'/Home'})
          }
        })
      }else{
        this.$message.warning("非法手机号")
      }
    },
    toRegister() {
      if (!this.registerUser.userName) {
        this.$message.error("企业名称不能为空")
      } else if (!this.registerUser.password) {
        this.$message.error("请填写密码")
      } else if(!this.registerUser.tel){
        this.$message.error("请填写手机号")
      }else if(!this.registerUser.firmName){
        this.$message.error("请填写负责人姓名")
      }else if(!this.registerUser.captcha){
        this.$message.error("请输入验证码")
      } else{
        var  userName=this.registerUser.userName;
         var password= this.registerUser.password;
        var  tel= this.registerUser.tel;
        var  firmName= this.registerUser.firmName;
        var captcha = this.registerUser.captcha;
        //注册
       register(userName,password,tel,firmName,captcha).then(res=>{
         if(res.data.code!==200){
           this.$message.error(res.data.msg)
         }else{
           //注册成功
           this.$message.success(res.data.msg);
           this.user.userName = this.registerUser.tel
           this.registerUser.captcha='';
           this.registerUser.userName='';
           this.registerUser.tel='';
           this.registerUser.password='';
           this.isLogin=true;
         }
       });
      }
    },
    send() {
      var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if(reg.test(this.registerUser.tel)){
        sendCaptcha(this.registerUser.tel).then(res=>{
          if(res.data!==undefined){
            this.$message.success(res.data.msg);
          }
        });
        this.showNum = true;
        this.wait_timer = 120;
        var that = this;
        var timer_interval = setInterval(function() {
          if (that.wait_timer > 0) {
            that.wait_timer--;
          } else {
            clearInterval(timer_interval);
          }
        }, 1000);
      }else{
        this.$message.warning("非法手机号");
      }
    },
    getCodeText: function() {
      if (this.wait_timer > 0) {
        return "已发送";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "重新发送验证码！";
      }
      if (this.wait_timer === false) {
        return "发送验证码！";
      }
    },
  }
};
</script>

<style lang="stylus" scoped>
color = rgb(187, 187, 187)
*
  padding 0
  margin 0

main
  width 100%
  height 100vh
  display flex
  justify-content center
  background-image: url(../../assets/img/login.png)
  background-repeat: no-repeat
  background-size: 100%

#container
  width 80%
  display flex
  justify-content space-between
  box-sizing border-box
  padding 100px 0

#c-2
  position relative
  width 388px
  height 480px
  padding 60px
  box-sizing border-box
  background-color #fff
  box-shadow 0px 0px 16px rgb(180, 166, 166)

  & input
    border none
    background-color #fff
    width 100%
    height 40px
    margin-top 10px
    outline none
    border-bottom 0.5px rgb(216, 204, 204) solid

.bt1
  width 48%
  background-color #fff
  border none
  outline none
  cursor pointer
  font-size 20px
  color rgb(184, 177, 166)


.bt2
  width 48%
  background-color #fff
  border none
  outline none
  cursor pointer
  font-size 20px
  border-bottom orange 2px solid
  color black

#loginBt
  margin-top 25px
  width 103%
  height 40px
  background-color rgb(255, 102, 68)
  border none
  outline none
  color white
  cursor pointer

#registerBtn
  margin-top 25px
  width 103%
  height 40px
  background-color rgb(255, 102, 68)
  border none
  outline none
  color white
  cursor pointer

#forget
  color blue
  font-size 14px
  cursor pointer

#captcha
  z-index 3
  width 72%
  height 70%
  background #edf392
  box-shadow 0 0 2px black
  position absolute
  top 100px
  display flex
  flex-direction column
  align-items center
  justify-content center

#remember
  display flex
  justify-content space-between

  & > p
    font-size 13px
    color color
</style>

在这里插入图片描述