目录
1系统概述 1
1.1 研究背景 1
1.2研究目的 1
1.3系统设计思想 1
2相关技术 2
2.1 MYSQL数据库 2
2.2 B/S结构 3
2.3 Spring Boot框架简介 4
3系统分析 4
3.1可行性分析 4
3.1.1技术可行性 4
3.1.2经济可行性 5
3.1.3操作可行性 5
3.2系统性能分析 5
3.2.1 系统安全性 5
3.2.2 数据完整性 6
3.3系统界面分析 6
3.4系统流程和逻辑 7
4系统概要设计 8
4.1概述 8
4.2系统结构 9
4.3.数据库设计 9
4.3.1数据库实体 9
4.3.2数据库设计表 11
5系统详细实现 15
5.1 管理员模块的实现 15
5.1.1 顾客信息管理 15
5.1.2 员工信息管理 15
5.2 店主模块的实现 16
5.2.1 员工信息管理 16
5.2.1 门店信息管理 16
5.2 员工模块的实现 17
5.2.2 门店信息管理 17
5.2.3 订单信息管理 18
6系统测试 18
6.1概念和意义 18
6.2特性 19
6.3重要性 19
6.4测试方法 19
6.5 功能测试 20
6.6可用性测试 20
6.7性能测试 21
6.8测试分析 21
6.9测试结果分析 22
结论 22
致谢语 22
参考文献 23
1.3系统设计思想
一个成功的网站应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的策划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。同时，一个大型的计算机网站系统，必须有一个正确的设计指导思想，通过合理选择数据结构、网络结构、操作系统以及开发环境，构成一个完善的网络体系结构，才能充分发挥计算机信息管理的优势。根据现实生活中网民的实际需求，本系统的设计按照下述原则进行。
1.有效性：实际上这里的有效性包括两个方面的意思：有用性和可用性。有用性是指站点潜在的能满足用户需求的功能，而可用性是指能够通过站点的操作实现特定的目标。可以看出一个站点如果不能恰当运行或设计得非常槽糕就不是一个好站点。可用站点的效益应该非常高，并易于学习，在实现用户目标时令人满意而不出错。
2.高可靠性：一个实用的网站同时必须是可靠的，本设计通过合理而先进的网络设计以及软、硬件的优化选型，可保证网站的可靠性与容错性。
3.高安全性：在设计中，将充分利用网络软、硬件提供的各种安全措施，既可以保证用户共享资源，充分考虑系统及数据资源的容灾、备份、恢复的要求。为系统提供强大的数据库备份工具。可以保证关键数据的安全性。操作权限级，设置不同的角色确保每一步的操作权限，可以由管理员进行设置。
4.先进性：采用目前国际上最先进的开发技术，使用JSP开发技术，MYSQL作为网站后台数据库。采用这些技术降低了以后的系统运营成本，提高了系统的稳定性和易维护性。
5.采用标准技术：本网站的所有设计遵循国际上现行的标准进行，以提高系统的开放性。
6.外观和技术平衡：系统采用Web风格的界面设计，界面友好、美观，使用方便，易学易用。网站设计的关键问题是外观和技术的平衡。外现不好的网站令人厌烦，站点可以运行很好，但却不能带动用户积极性，相反，如果外观非常有表现力，但技术有限，用户则会感到非常失望。在外观与技术之间需要确定一个清晰而连续的关系，即外观与站点的意图相关，对不同类型的网站处理方法不同。
<template>
<div>
<div class="container">
<div class="login-form" style="backgroundColor:rgba(229, 238, 229, 0.07);borderRadius:10px">
<h1 class="h1" style="color:rgba(24, 103, 228, 1);fontSize:28px;">智能物流管理系统注册</h1>
<el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">账号</div>
<div class="input-container">
<input v-model="ruleForm.zhanghao" class="input" type="text" placeholder="账号">
</div>
</div> -->
<el-form-item label="账号" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.zhanghao" autocomplete="off" placeholder="账号" />
</el-form-item>
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />
</el-form-item>
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">顾客姓名</div>
<div class="input-container">
<input v-model="ruleForm.gukexingming" class="input" type="text" placeholder="顾客姓名">
</div>
</div> -->
<el-form-item label="顾客姓名" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.gukexingming" autocomplete="off" placeholder="顾客姓名" />
</el-form-item>
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">手机</div>
<div class="input-container">
<input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
</div>
</div> -->
<el-form-item label="手机" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" />
</el-form-item>
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">邮箱</div>
<div class="input-container">
<input v-model="ruleForm.youxiang" class="input" type="text" placeholder="邮箱">
</div>
</div> -->
<el-form-item label="邮箱" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.youxiang" autocomplete="off" placeholder="邮箱" />
</el-form-item>
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">身份证</div>
<div class="input-container">
<input v-model="ruleForm.shenfenzheng" class="input" type="text" placeholder="身份证">
</div>
</div> -->
<el-form-item label="身份证" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证" />
</el-form-item>
<!-- <div v-if="tableName=='guke'" class="input-group">
<div class="label">地址</div>
<div class="input-container">
<input v-model="ruleForm.dizhi" class="input" type="text" placeholder="地址">
</div>
</div> -->
<el-form-item label="地址" class="input" v-if="tableName=='guke'">
<el-input v-model="ruleForm.dizhi" autocomplete="off" placeholder="地址" />
</el-form-item>
<!-- <div v-if="tableName=='yuangong'" class="input-group">
<div class="label">工号</div>
<div class="input-container">
<input v-model="ruleForm.gonghao" class="input" type="text" placeholder="工号">
</div>
</div> -->
<el-form-item label="工号" class="input" v-if="tableName=='yuangong'">
<el-input v-model="ruleForm.gonghao" autocomplete="off" placeholder="工号" />
</el-form-item>
<!-- <div v-if="tableName=='yuangong'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='yuangong'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />
</el-form-item>
<!-- <div v-if="tableName=='yuangong'" class="input-group">
<div class="label">员工姓名</div>
<div class="input-container">
<input v-model="ruleForm.yuangongxingming" class="input" type="text" placeholder="员工姓名">
</div>
</div> -->
<el-form-item label="员工姓名" class="input" v-if="tableName=='yuangong'">
<el-input v-model="ruleForm.yuangongxingming" autocomplete="off" placeholder="员工姓名" />
</el-form-item>
<!-- <div v-if="tableName=='yuangong'" class="input-group">
<div class="label">门店名称</div>
<div class="input-container">
<input v-model="ruleForm.mendianmingcheng" class="input" type="text" placeholder="门店名称">
</div>
</div> -->
<el-form-item label="门店名称" class="input" v-if="tableName=='yuangong'">
<el-input v-model="ruleForm.mendianmingcheng" autocomplete="off" placeholder="门店名称" />
</el-form-item>
<!-- <div v-if="tableName=='yuangong'" class="input-group">
<div class="label">手机</div>
<div class="input-container">
<input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
</div>
</div> -->
<el-form-item label="手机" class="input" v-if="tableName=='yuangong'">
<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" />
</el-form-item>
<!-- <div v-if="tableName=='yuangong'" class="input-group">
<div class="label">身份证</div>
<div class="input-container">
<input v-model="ruleForm.shenfenzheng" class="input" type="text" placeholder="身份证">
</div>
</div> -->
<el-form-item label="身份证" class="input" v-if="tableName=='yuangong'">
<el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证" />
</el-form-item>
<!-- <div v-if="tableName=='dianzhu'" class="input-group">
<div class="label">店主账号</div>
<div class="input-container">
<input v-model="ruleForm.dianzhuzhanghao" class="input" type="text" placeholder="店主账号">
</div>
</div> -->
<el-form-item label="店主账号" class="input" v-if="tableName=='dianzhu'">
<el-input v-model="ruleForm.dianzhuzhanghao" autocomplete="off" placeholder="店主账号" />
</el-form-item>
<!-- <div v-if="tableName=='dianzhu'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='dianzhu'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"#elsetype="text" />
</el-form-item>
<!-- <div v-if="tableName=='dianzhu'" class="input-group">
<div class="label">店主姓名</div>
<div class="input-container">
<input v-model="ruleForm.dianzhuxingming" class="input" type="text" placeholder="店主姓名">
</div>
</div> -->
<el-form-item label="店主姓名" class="input" v-if="tableName=='dianzhu'">
<el-input v-model="ruleForm.dianzhuxingming" autocomplete="off" placeholder="店主姓名" />
</el-form-item>
<!-- <div v-if="tableName=='dianzhu'" class="input-group">
<div class="label">联系电话</div>
<div class="input-container">
<input v-model="ruleForm.lianxidianhua" class="input" type="text" placeholder="联系电话">
</div>
</div> -->
<el-form-item label="联系电话" class="input" v-if="tableName=='dianzhu'">
<el-input v-model="ruleForm.lianxidianhua" autocomplete="off" placeholder="联系电话" />
</el-form-item>
<!-- <div v-if="tableName=='dianzhu'" class="input-group">
<div class="label">邮箱</div>
<div class="input-container">
<input v-model="ruleForm.youxiang" class="input" type="text" placeholder="邮箱">
</div>
</div> -->
<el-form-item label="邮箱" class="input" v-if="tableName=='dianzhu'">
<el-input v-model="ruleForm.youxiang" autocomplete="off" placeholder="邮箱" />
</el-form-item>
<!-- <div v-if="tableName=='dianzhu'" class="input-group">
<div class="label">身份证</div>
<div class="input-container">
<input v-model="ruleForm.shenfenzheng" class="input" type="text" placeholder="身份证">
</div>
</div> -->
<el-form-item label="身份证" class="input" v-if="tableName=='dianzhu'">
<el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证" />
</el-form-item>
<div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: center;">
<el-button class="btn" type="primary" @click="login()">注册</el-button>
<el-button class="btn close" type="primary" @click="close()">取消</el-button>
</div>
</el-form>
</div>
<!-- <div class="nk-navigation">
<a href="#">
<div @click="login()">注册</div>
</a>
</div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
},
tableName:"",
rules: {}
};
},
mounted(){
let table = this.$storage.get("loginTable");
this.tableName = table;
},
methods: {
// 获取uuid
getUUID () {
return new Date().getTime();
},
close(){
this.$router.push({ path: "/login" });
},
// 注册
login() {
if((!this.ruleForm.zhanghao) && `guke` == this.tableName){
this.$message.error(`账号不能为空`);
return
}
if((!this.ruleForm.mima) && `guke` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if((!this.ruleForm.gukexingming) && `guke` == this.tableName){
this.$message.error(`顾客姓名不能为空`);
return
}
if(`guke` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
this.$message.error(`手机应输入手机格式`);
return
}
if(`guke` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
this.$message.error(`邮箱应输入邮件格式`);
return
}
if(`guke` == this.tableName && this.ruleForm.shenfenzheng&&(!this.$validate.checkIdCard(this.ruleForm.shenfenzheng))){
this.$message.error(`身份证应输入身份证格式`);
return
}
if((!this.ruleForm.gonghao) && `yuangong` == this.tableName){
this.$message.error(`工号不能为空`);
return
}
if((!this.ruleForm.mima) && `yuangong` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if((!this.ruleForm.yuangongxingming) && `yuangong` == this.tableName){
this.$message.error(`员工姓名不能为空`);
return
}
if(`yuangong` == this.tableName && this.ruleForm.bumen&&(!this.$validate.isEmail(this.ruleForm.bumen))){
this.$message.error(`部门应输入邮件格式`);
return
}
if(`yuangong` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
this.$message.error(`手机应输入手机格式`);
return
}
if(`yuangong` == this.tableName && this.ruleForm.shenfenzheng&&(!this.$validate.checkIdCard(this.ruleForm.shenfenzheng))){
this.$message.error(`身份证应输入身份证格式`);
return
}
if((!this.ruleForm.dianzhuzhanghao) && `dianzhu` == this.tableName){
this.$message.error(`店主账号不能为空`);
return
}
if((!this.ruleForm.mima) && `dianzhu` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if((!this.ruleForm.dianzhuxingming) && `dianzhu` == this.tableName){
this.$message.error(`店主姓名不能为空`);
return
}
if(`dianzhu` == this.tableName && this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){
this.$message.error(`联系电话应输入手机格式`);
return
}
if(`dianzhu` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
this.$message.error(`邮箱应输入邮件格式`);
return
}
if(`dianzhu` == this.tableName && this.ruleForm.shenfenzheng&&(!this.$validate.checkIdCard(this.ruleForm.shenfenzheng))){
this.$message.error(`身份证应输入身份证格式`);
return
}
this.$http({
url: `${this.tableName}/register`,
method: "post",
data:this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "注册成功",
type: "success",
duration: 1500,
onClose: () => {
this.$router.replace({ path: "/login" });
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.h1 {
margin-top: 10px;
}
body {
padding: 0;
margin: 0;
}
// .container {
// min-height: 100vh;
// text-align: center;
// // background-color: #00c292;
// padding-top: 20vh;
// background-image: url(../assets/img/bg.jpg);
// background-size: 100% 100%;
// opacity: 0.9;
// }
// .login-form:before {
// vertical-align: middle;
// display: inline-block;
// }
// .login-form {
// max-width: 500px;
// padding: 20px 0;
// width: 80%;
// position: relative;
// margin: 0 auto;
// .label {
// min-width: 60px;
// }
// .input-group {
// max-width: 500px;
// padding: 20px 0;
// width: 80%;
// position: relative;
// margin: 0 auto;
// display: flex;
// align-items: center;
// .input-container {
// display: inline-block;
// width: 100%;
// text-align: left;
// margin-left: 10px;
// }
// .icon {
// width: 30px;
// height: 30px;
// }
// .input {
// position: relative;
// z-index: 2;
// float: left;
// width: 100%;
// margin-bottom: 0;
// box-shadow: none;
// border-top: 0px solid #ccc;
// border-left: 0px solid #ccc;
// border-right: 0px solid #ccc;
// border-bottom: 1px solid #ccc;
// padding: 0px;
// resize: none;
// border-radius: 0px;
// display: block;
// width: 100%;
// height: 34px;
// padding: 6px 12px;
// font-size: 14px;
// line-height: 1.42857143;
// color: #555;
// background-color: #fff;
// }
// }
// }
.nk-navigation {
margin-top: 15px;
a {
display: inline-block;
color: #fff;
background: rgba(255, 255, 255, .2);
width: 100px;
height: 50px;
border-radius: 30px;
text-align: center;
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
padding: 0 20px;
}
.icon {
margin-left: 10px;
width: 30px;
height: 30px;
}
}
.register-container {
margin-top: 10px;
a {
display: inline-block;
color: #fff;
max-width: 500px;
height: 50px;
border-radius: 30px;
text-align: center;
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
padding: 0 20px;
div {
margin-left: 10px;
}
}
}
.container {
background-image: url("http://codegen.caihongy.cn/20201110/8f9e1d94bb6243aba9de49b67bc3b5a7.jpg");
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
.login-form {
right: 50%;
top: 50%;
height: auto;
transform: translate3d(50%, -50%, 0);
border-radius: 10px;
background-color: rgba(255,255,255,.5);
width: 420px;
padding: 30px 30px 40px 30px;
font-size: 14px;
font-weight: 500;
.h1 {
margin: 0;
text-align: center;
line-height: 54px;
font-size: 24px;
color: #000;
}
.rgs-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.input {
width: 100%;
& /deep/ .el-form-item__label {
line-height: 40px;
color: rgba(30, 144, 255, 1);
font-size: #606266;
}
& /deep/ .el-input__inner {
height: 40px;
color: rgba(42, 102, 221, 1);
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #606266;
border-radius: 4px;
background-color: #fff;
}
}
.btn {
margin: 0 10px;
width: 88px;
height: 45px;
color: #fff;
font-size: 14px;
border-width: 0px;
border-style: solid;
border-color: #409EFF;
border-radius: 4px;
background-color: rgba(24, 144, 255, 1);
}
.close {
margin: 0 10px;
width: 88px;
height: 44px;
color: #409EFF;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #409EFF;
border-radius: 4px;
background-color: #FFF;
}
}
}
}
</style>
