基于微信公众号的图书借阅平台设计与实现

目录
摘要 1
Abstract 2
1 引言 1
1.1项目研究背景 2
1.2 项目研究内容 4
1.3 项目研究意义 6
2 技术选型与开发环境 8
2.1 技术选型 8
2.1.1Node.js介绍 8
2.1.2 异步编程介绍 9
2.1.3 阻塞和非阻塞介绍 10
2.1.4 MySQL数据库介绍 11
2.1.5 Nginx服务器介绍 13
2.1.6StrongLoop进程管理器介绍 13
2.1.7微信公众号平台介绍 13
3 需求分析 15
3.1 技术需求 15
3.2 功能需求 17
3.3 系统操作流程 17
3.3.1 关注微信图书借阅平台 17
3.3.2 功能菜单 17
3.3.3 扫码 18
3.3.4 确认操作 18
4.系统设计 19
4.1概要设计 19
4.2详细设计 20
4.2.1 微信公众号设置 20
4.2.2 获取图书信息 20
4.2.3 存储图书信息 21
4.2.4 展示图书信息 21
5数据库设计 23
5.1概念结构设计 23
5.2物理结构设计 23
6.图书借阅平台的实现 26
6.1配置 26
6.2主界面 26
6.2添加图书 27
6.3借阅图书 28
6.4归还图书 29
6.5浏览图书 30
参考文献 32
1.2 项目研究内容
本课题所要研究的是长久以来Web研发领域前、后端耦合的问题，进而提出一个全新的解决方案，并通过开发一个基于微信的图书借阅系统展示新方案的可行性。在此以前，我们所面临的耦合问题的广义层面含义包含很多中，下面逐一分析这些问题的具体内容。
从代码的耦合来看，Web研发领域在初始时期由于代码规模较小，并不注重代码分离。导致出现了不区分前后端的混合式编程模式。比如页面数据从数据库获取之后直接写入到页面当中输出给浏览器端展示。衍生出的问题包括代码糅杂和混乱不堪，难以区分服务端代码和客户端代码，不容易做分离，代码的灵活性不强，不利于代码复用和拓展。业界要想实现中到大型规模的软件产品，与团队协作的重要性不可分。需要由不同的团队负责不同的模块代码开发，所以解耦的第一步就是要解开代码层面的耦合，以适应大规模的代码量。
从业务的耦合来看，以电商网站为例，用户完成一个完整的购物流程包括浏览商品，搜索商品，购物车下单，支付，等待收货，完成评价。既然作为一个整体的流程，那么每个环节之间必然会出现耦合，比如搜索功能依赖展示功能呈现结果，支付功能依赖购物车功能计算总价，评价系统依赖用户信息系统。安装业务的属性来分，展示功能属于浏览器端，搜索和支付属于服务器端，但脱离前、后任何一端，任何功能都无法完成。传统Web研发领域由于前后端耦合的问题，导致前后端的职责并没有很好地区分开来，虽然从业务职责上各个模块是分离的，但是前后端确实耦合的，这就给开发带来了难度，依旧不能解决随着业务规模扩展带来的开发压力。
从服务的耦合来看，随着目前移动互联网的火热，用户接入互联网的方式不再局限于电脑。使用安卓智能手机、苹果智能手机、各类平板电脑、所占据的用户比例甚至已经超过了传统使用PC浏览器的上网比例。这又给Web研发提出了新的要求，如果统一提供跨平台的服务。传统Web研发由于后端服务与前端服务耦合，不方便做统一地跨平台支持。同样的，随着用户设备多样性的增加，需要提供越来越多的服务需求，开发压力也将陡增。
本课题通过研究Web领域历史以来的演变过程中所诞生的各种技术的优缺，通过探索新的模式，提出新的方案来解决耦合这个历史问题。以达到让前后端的代码更分离、职责更清晰、服务更统一、分工更合理高效的目的。
要解决问题需要首先分析问题出现的原因，传统Web开发带来的制约源于后端没有纯粹地负责数据处理和存取功能，而是过度耦合了前端呈现和用户交互。后端应该不区分端，只负责提供统一地服务，本文转载自http://www.biyezuopin.vip/onews.asp?id=14741然后各个端之间负责利用后端提供的服务接口完成与用户的交互和业务逻辑。这样就找到了解决问题的方法。
所尝试探索的途径是通过引入Node.js中间层技术，在Web服务器上同时部署服务器程序和Node.js中间层，当用户请求前端页面时，前端首先访问Node.js中间层进行页面关键数据的渲染，当后续需要数据时即可跳过Node.js中间层直接请求后端。当用户进行页面跳转时，使用Node.js中间层和前端同步页面路由，对于用户的状态管理等与业务逻辑不是强相关的服务也由Node.js来提供。依然会依赖Ajax技术来处理大量的数据依赖，除了引入Node.js之外，其他的前后端技术依然保持不变，变的是它们之间的组合关系。本课题所要实现的，也正是这样一种合理利用Node.js中间层解决前后端耦合的研发模式。

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
    <p>
      Welcome to your Vue.js app!
    </p>
    <p>
      To get a better understanding of how this boilerplate works, check out
      <a href="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
      It is also recommended to go through the docs for
      <a href="http://webpack.github.io/" target="_blank">Webpack</a> and
      <a href="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
      If you have any issues with the setup, please file an issue at this boilerplate's
      <a href="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
    </p>
    <p>
      You may also want to checkout
      <a href="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
      <a href="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
    </p>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
</style>