目录
中文摘要 I
ABSTRACT II
1 绪论 1
1.1 选题背景和意义 1
1.2 药品销售的现状 1
2 关键技术的分析与抉择 2
2.1 技术路线 2
2.1.1 技术可行性分析 2
2.1.2 操作可行性分析 3
2.2 Node技术及其Vue框架介绍 3
2.3 MongoDB 数据库的介绍 5
3 系统分析 5
3.1 需求分析 5
3.1.1 功能需求 5
3.2 数据流程图 6
4 系统设计 7
4.1 系统结构设计 7
4.2 系统功能设计 8
4.3 数据库设计 9
4.3.1 数据库设计概述 9
4.3.2 数据库的选择 9
4.3.3 数据库集合设计 10
5 系统实现 11
5.1 前台页面的原型设计 11
5.2 组件化的开发思想 13
5.3 响应式布局的实现 13
5.4 购物车操作实现 13
6 结论与展望 14
参考文献 15
致 谢 16
附录1 组件化开发、全面路由主要代码 17
附录2 响应式布局设计实现代码 19
附录3 购物车功能实现代码 23
本次系统开发过程及其存储数据所使用的是MongoDB 数据库,MongoDB数据库也被称之为 NoSQL 数据库[4],相比于MySQL数据库,不需要编写复杂的SQL查询语句,本文转载自http://www.biyezuopin.vip/onews.asp?id=14643其最大亮点是使用JSON风格语法。同时前后端的数据交互也都使用的JSON形式来传输,大大方便了数据的存储与查询。
3 系统分析
3.1 需求分析
需求分析作为软件工程中的一个关键的部分,主要任务是确定系统所要完成的功能,对整个系统提出完整、准确、规范、清晰、具体的要求[5]。需求分析师和软件工程师需要从用户提出的需求出发,分析提炼,挖掘用户内心真实想要的,并将其转换为产品需求。必要的需求分析有利于提早发现错误,避免在系统开发过程中需求不断变化,提高技术人员的开发效率,降低开发成本,保证软件质量。
3.1.1 功能需求
本系统在功能设计上遵循模块化开发实现,将整体系统分为六大的功能模块,如图所示
根据需求分析,系统在大体上分为前、后台两大部分,具体 功能可分为药品展示、药品信息管理、用户操作、用户信息管理、购物车管理和订单信息管理六个模块。
<template>
<div class="main">
<el-tabs v-model="activeName" id="bs-login-modal">
<el-tab-pane name="first" class="bs-login-tab">
<div class="tab-title">用户注册</div>
<el-form :model="registerForm" status-icon ref="registerForm" :rules="rulesFirstForm" class="tab-form">
<el-form-item prop="mobile">
<el-input v-model.number="registerForm.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="pass">
<el-input type="password" v-model="registerForm.pass" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="registerForm.checkPass" auto-complete="off"
placeholder="请输入确认密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('registerForm')" plain>确定</el-button>
</el-form-item>
</el-form>
<div class="more-btn">
<el-button type="text" v-on:click="tabShow('second')"><i class="iconfont icon-xiangyou"></i>用户登录</el-button>
<el-button type="text" v-on:click="tabShow('third')">忘记密码</el-button>
</div>
</el-tab-pane>
<el-tab-pane name="second" class="bs-login-tab">
<div class="tab-title">密码登录</div>
<el-form ref="loginForm" status-icon :model="loginForm" class="tab-form" :rules="rulesSecondForm">
<el-form-item prop="mobile">
<el-input v-model="loginForm.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="pass">
<el-input v-model="loginForm.pass" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="submitForm('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<div class="more-btn">
<el-button type="text" v-on:click="tabShow('first')"><i class="iconfont icon-xiangzuo"></i>立即注册</el-button>
<el-button type="text" v-on:click="tabShow('third')">忘记密码<i class="iconfont icon-xiangyou"></i></el-button>
</div>
</el-tab-pane>
<el-tab-pane name="third" class="bs-login-tab">
<div class="tab-title">忘记密码</div>
<el-form :model="modifyForm" status-icon ref="modifyForm" class="tab-form" :rules="rulesThirdForm">
<el-form-item prop="mobile">
<el-input v-model="modifyForm.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="pass">
<el-input type="password" v-model="modifyForm.pass" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="modifyForm.checkPass" auto-complete="off"
placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="submitForm('modifyForm')">确定</el-button>
</el-form-item>
</el-form>
<div class="more-btn">
<el-button type="text" v-on:click="tabShow('second')"><i class="iconfont icon-xiangzuo"></i>登录</el-button>
<el-button type="text" v-on:click="tabShow('first')">立即注册</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
let validaMobile = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入手机号码'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
let mPattern = /^1[34578]\d{9}$/;
if (!mPattern.test(value)) {
callback(new Error('手机号码格式错误'));
} else {
callback();
}
}
}, 1000);
};
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.registerForm.checkPass !== '') {
this.$refs.registerForm.validateField('checkPass');
}
callback();
}
};
let validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.registerForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
let validateSecondPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
let validateThirdPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.modifyForm.checkPass !== '') {
this.$refs.modifyForm.validateField('checkPass');
}
callback();
}
};
let validateThirdPass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.modifyForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
activeName: 'second',
registerForm: {
mobile: '',
pass: '',
checkPass: ''
},
loginForm: {
mobile: '',
pass: '',
},
modifyForm: {
mobile: '',
pass: '',
checkPass: ''
},
rulesFirstForm: {
mobile: [
{validator: validaMobile, trigger: 'blur'}
],
pass: [
{validator: validatePass, trigger: 'blur'}
],
checkPass: [
{validator: validatePass2, trigger: 'blur'}
]
},
rulesSecondForm: {
mobile: [{validator: validaMobile, trigger: 'blur'}],
pass: [{validator: validateSecondPass, trigger: 'blur'}]
},
rulesThirdForm: {
mobile: [
{validator: validaMobile, trigger: 'blur'}
],
pass: [
{validator: validateThirdPass, trigger: 'blur'}
],
checkPass: [
{validator: validateThirdPass2, trigger: 'blur'}
]
}
};
},
methods: {
submitForm(formName) {
console.log(formName);
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
//提交表单
} else {
return false;
}
});
},
tabShow(tabName) {
this.activeName = tabName;
}
}
}
</script>
<style scoped>
body{
overflow: hidden;
}
.main {
position: relative;
display: block;
min-height: 100%;
overflow: hidden;
background: url("../../../static/login-bg.png") no-repeat fixed;
background-size: cover;
}
.main:before {
padding-bottom: 62.5%;
content: "";
display: block;
width: 100%;
}
#bs-login-modal {
position: absolute;
width: 400px;
height: 420px;
top: 200px;
left: 50%;
margin-left: -200px;
background-color: #ffffff;
}
#bs-login-modal .el-tabs__header{
display: none;
}
.bs-login-tab {
width: 100%;
padding: 10px 8%;
}
.bs-login-tab .tab-title {
text-align: center;
font-size: 20px;
color: #666;
margin: 0 0 20px;
}
.bs-login-tab .tab-form {
}
.tab-form button {
width: 100%;
}
.bs-login-tab .more-btn {
display: flex;
justify-content: space-between;
}
</style>