本文详细描述了一个基于SpringBoot和Vue的大学生兼职网站的设计过程，涉及系统可行性分析、需求分析、数据库设计、功能模块开发、系统测试等内容，重点讨论了技术选型、安全性保障和用户体验提升的技术应用.
目 录
第一章 绪论 1
1.1 开发背景 1
1.2 开发意义 1
1.3 相关现状 1
1.4 网站设计内容 2
1.5 论文结构 2
第二章 系统相关技术介绍 4
2.1 Vue框架 4
2.2 Spring框架 4
2.3 MyBatis框架 4
2.4 MySQL关系型数据库 5
2.5 Redis非关系型数据库 5
2.6 Spring Boot框架 5
第三章 系统分析 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
附录 80
附录A：软件使用说明书 80
附录B：主要源程序 82
目前，国内已经涌现出许多兼职网站，如“58同城”、“猪八戒”、“BOSS直聘”等。这些网站通过互联网和大数据推荐，将求职者与相符的工作岗位进行匹配，提高了求职的准确性。此外，还有一些手机应用程序（APP）专门提供兼职服务，如“兼职猫”、“高德淘金”、“蚂蚁微客”、“腾讯搜活帮”等。移动端APP带来更多便利，这些兼职网站和移动端兼职APP能够及时发布兼职信息，对于大学生在校求职而言，相较于传统的求职方式确实更加便捷。然而，这些兼职网站和移动端兼职APP也面临着一些问题和挑战。这典型的问题就是，求职信息的真实性难以保证，有些兼职信息发布者发布一些虚假不存在的兼职信息，使得大学生上当受骗。而且这些平台和APP针对的群体并不是唯一的，各类人群都会有，并不能够真正完全满足某一个群体。大学生兼职市场的用户主要是在校大学生和应届毕业生，他们在寻找兼职信息时主要关注兼职岗位的数量、薪资待遇、工作时间和工作地点等因素，同时也关注兼职平台的可靠性和安全性。随着互联网技术的不断升级和创新，兼职网站的技术应用也在不断升级，包括智能化招聘、人工智能筛选、在线面试等方面。这些技术应用，不仅提高了兼职网站的效率和准确性，也为用户提供了更便捷的兼职招聘和求职体验。
1.4 网站设计内容
采用Java语言，基于Spring Boot [1]+ Vue[2]的后端和前端框架。使用了关系型数据库MySql和非关系型数据库Redis[3]，利用了阿里druid连接池技术[4]和MybatisPlus半自动ORM（对象关系映射）框架。该平台实现了学生查看职位信息，申请职位信息，企业发布职位信息以及审核申请信息，管理员对学生和企业用户进行相关管理。系统前期通过网络查询资料进行相关调研和对需求功能的分析，中期对数据库所需要的字段进行设计、相关功能接口的设计，然后进入代码实现阶段，对相关接口进行实现，前端页面的功能流程设计和页面布局。后期进行相关模块功能接口的测试，修复bug。
1.5 论文结构
本论文针对基于Spring Boot + Vue 的大学生兼职网站的设计与实现进行了详细说明，首先对该网站进行可行性分析以及需求分析，其次对网站数据库结构和相关模块功能以及功能接口进行设计，然后进入网站编码阶段，实现各个功能模块和相关接口，最后进行系统测试和模块功能测试。
论文章节：
第一章绪论。网站主题的发展背景、意义、现状和网站设计内容。
第二章系统分析。网站的可行性。对网站需求进行分析，确定网站相关设计。
第三章系统相关技术介绍。对网站开发过程中所用到的技术进行阐述。
第四章系统概要设计。对网站的数据库结构进行设计。
第五章软件开发与实现。实现系统功能模块。
第六章系统测试。针对该网站的设计，通过测试用例验证网站相关功能。
第七章结论。针对网站开发从设计到编码最后测试的过程进行总结和归纳。
<template>
<main>
<div class="top"></div>
<div id="container">
<!-- 左边标语 -->
<div id="c-1">
<p style="font-size: 60px;font-weight: 500;">招人才 好平台 新机遇</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>
扫一扫
1210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
