SpringBoot+React+Mysql+Mybatis+Restful风格接口，前后端分离的健康管理系统详细剖析（一）

写在前面

不知不觉大学四年就要过去了，在放寒假之后我准备着手毕业设计软件的开发，由于对健康管理系统了解不多，在阅读了一些相关的文献期刊之后，我决定在github上面寻找类似的项目进行学习。在学习过程中，我也想把其中比较关键的技术点记录下来，如上，如果各位看官发现有啥问题的，还请不吝指出！

项目介绍

简单介绍

在github上面找了很久，我选择了这位老哥做的一个前后端分离的健康管理系统，这里贴上github地址：SpringBoot+React+Mysql+Mybatis+Restful风格接口，前后端分离的健康管理系统
不得不说这位老哥的ReadMe写得还是比较简单的，只罗列了所用的技术和简单的前后端启动步骤。所以我们的第一步就是在本地把这个项目给运行起来。

准备工作

首先第一步当然是把项目拉到自己本地上来，我们在平时放置Java项目的文件夹中新建一个文件夹用于存放项目，然后进入到该文件夹中，右键->Git Bash Here（当然你需要先安装Git），并在弹出的命令行中输入git init进行初始化。

在成功之后，我们利用git clone [email protected]:SunShiFu/health.git命令将整个项目拉到本地，接下来就可以使用IDEA去打开了。

项目结构

这里是用IDEA打开后的项目结构，我们可以看到这个项目分为了前后端两个部分，前端代码是code-front-end，后端代码是lesson，其中的images是作者的运行截图。我们需要把前后端代码分别跑起来。

项目运行

前端代码的运行

第一步是把前端代码跑起来，要运行前端代码需要以下四步：
1. 安装node.js

2. 修改镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安装依赖包 cnpm install
注意在修改镜像源之后，我们需要进入到前端代码所在的文件夹中去安装依赖包

4. 启动 npm start
最后键入npm start命令，就可以启动前端代码了，在启动完成后，项目会在浏览器自动打开前端页面。

在一开始打开这个页面的时候，我发现在控制台有一个关于js文件的报错，如下图所示：

通过报错信息我们可以直接定位到具体的文件中，是因为传入的参数出错了，进入admin.js中，用ctrl+鼠标左键进入Header中的代码，在70行我们只要将col标签中传入的span的值从’4’修改为{4}，刷新页面，就发现报错消失了！

后端代码的运行

运行后端代码我们必须先构建数据库，然后再进行连接，作者在项目中附了sql文件，我们直接运行即可。
由于作者是把mapper接口和xml文件放在了同一个文件夹下面，按理说是可以运行的，但还是报了BindingException，造成这一错误的无非就是以下这篇博文所提及的原因。
BindingException:Invalid bound statement (not found)如何解决
在简单的看了看编译生成的target文件夹之后，发现xml文件并没有被编译加载，这就是造成报错的原因，对于mapper接口和xml映射文件在同一文件夹下但却加载不到xml文件这一问题我们有两种解决方式：
第一种是在resources文件夹下建立与mapper接口完全一致的文件夹，并把xml文件放进去，重新编译运行即可。（注意这里的文件夹要一级一级地创建！）

第二种是在application.properties文件和pom文件中加上以下配置即可

//application.properties
mybatis.mapper-locations=classpath*:com/shiyanlou/lesson10/mapper/*.xml
mybatis.type-aliases-package=com.shiyanlou.lesson10.domain

//pom文件中在build标签中加入resources标签
<resources>
       <resource>
          <directory>src/main/java</directory>
          <includes>
              <include>**/*.xml</include>
          </includes>
       </resource>
</resources>

运行效果