基于Node.js的药品商城购物系统设计与实现

目录
中文摘要 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>