# 黑马传智健康

**Repository Path**: insectmk/itheima-health

## Basic Information

- **Project Name**: 黑马传智健康
- **Description**: 大四上专周项目，黑马传智健康，项目偏后端，采用SpringBoot开发，适合Java新手入门
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://czhealth.insectmk.top
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 3
- **Created**: 2023-09-12
- **Last Updated**: 2025-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: SpringBoot, MyBatis, Spring-MVC, Vue, Element-UI

## README

# 黑马传智健康

### 介绍
大四上学期专周，由[黑马程序员](https://www.itheima.com/)张刘栋老师带领下完成的项目。

项目分为两个项目，一个是移动端的前台一个是桌面端的后台，都为Web服务。

采用了常用的技术SpringBoot+SpringMVC+Mybatis，适合Java新手程序员入门及练手。

后台项目已更新为前后分离项目，但缺少大部分功能，随缘更新。

本仓库只用于记录后台管理部分的代码。

### 软件架构
软件为BS项目，采用经典的MVC架构，项目使用Maven进行管理。

后端采用SpringBoot+MyBatisPlus。

前端采用Vue2+ElementUI。

### 项目演示

#### 后台

项目演示地址：[http://czhealth.insectmk.top](http://czhealth.insectmk.top)

账号：admin，密码：admin

![image-20231027124437181](README.assets/image-20231027124437181.png)

#### 前台

项目演示地址：[http://czhealthfront.insectmk.top/pages/login.html](http://czhealthfront.insectmk.top/pages/login.html)

账号：任意手机号

![image-20230923113216503](README.assets/image-20230923113216503.png)

### 文件详解

- **czhealth**： 后台项目后端的源码根目录
- **czhealth_front**：前台项目的源码根目录
- **czhealth-forntend**：后台项目前端的源码根目录
- **document**： 用于存放一些文档，列入教案、SQL与设计文档
  - **传智健康项目资源**：项目设计与原型
  - **教程**：老师布置的任务
  - **health.sql**：自带建库的sql脚本
  - **itheima-health.sql**：不带建库的sql脚本

- **README.assets**： 本篇文章的图片存放路径

### 安装步骤

1. 软件准备

   1. JDK1.8
   2. MySQL5.7
   3. Maven3.6
   4. Intellij IDEA
   5. Node 16.20.x

2. 数据库导入

   脚本文件为仓库根目录下的`document/itheima-health.sql`，需自行创建database。

3. 运行项目

   前台项目为`czhealth_front`文件夹，后台项目为`czhealth`文件夹，运行方式都一样，以下只说明后台项目的运行方式。

   项目源码位于仓库根目录下的`czhealth`文件夹，将此文件夹拖入到Intellij IDEA中并识别为Maven项目。

   识别完成后修改配置文件`czhealth/src/main/resources/application-dev.yml`中数据库的内容与阿里云OSS的配置即可运行。

   由于`application-dev.yml`包含隐私内容，这里就取消了Git的追踪，你需要新建`application-dev.yml`配置文件，配置内容如下：
   
   ```yaml
   server:
     port: 9001
   spring:
     application:
       name: czhealth
     datasource:
       driver-class-name: com.mysql.jdbc.Driver
       url: jdbc:mysql://<数据库服务器IP地址>:<数据库服务端口号>/<数据库名称>?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
       username: <数据库用户账号>
       password: <数据库用户密码>
   mybatis-plus: # 作用：可以看到sql语句得执行
     configuration:
       log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #仅控制台输出的日志
   
   # 阿里云OSS相关配置
   # 自定义的实现，可以参考别人的实现来修改代码
   aliyun:
     oss:
       endpoint: 'https://oss-cn-chengdu.aliyuncs.com' # 与阿里云存储桶的位置相关，这里是成都的
       access-key-id: '<用户KEY>'
       access-key-secret: '<用户密钥>'
       bucket-name: '<存储桶名称>'
       url: '<图片URL外联前缀>'
       path-set-meal: 'itheima-health/set-meal/' # 图片存放在存储桶中的路径
   
   ```
   
   
   
   启动成功后浏览器访问`http://localhost:9001/login.html`即可进入首页。

### 项目中遇到的问题

解决方案来自网络搜索

1. 远程数据库

   - 开发时远程数据库账户权限不够。

       ```sql
       -- 先选择mysql数据库的user表
       use mysql;
       -- 再修改登录的ip 
       update user set host = '%' where user = '用户名';
       ```

       

   - 远程数据库多次访问失败IP被拒绝。

       ```sql
       flush hosts;
       ```

       

2. 图片的上传

   - 原本图片的上传是直接上传到上传到本地的，考虑到部署后，服务器的带宽以及服务器压力，改用阿里云OSS。

     [Java中使用阿里云OSS官方文档](https://help.aliyun.com/zh/oss/developer-reference/getting-started)

3. Excel文件

   - 预约设置要上传的Excel文件，如果日期列有空的日期格式单元格，则会报错。

     ```java
     // 设置导入参数，主键设置,如何这个cell没有值,就跳过 或者认为这个是list的下面的值 大家不理解，去掉这个
     importParams.setKeyIndex(1);
     ```

     

   - 导出表格时，非法设置单元格的问题。

4. 预约列表的条件查询

   - 预约的详细信息由三张表组成，而查询条件在不同的表中，用QueryWrapper不好实现。（采用ResultMap+链表查询的方式）

     ```xml
     <resultMap id="orderResultMap" type="com.itheima.pojo.Order">
         <association property="member" column="member_id" javaType="com.itheima.pojo.Member" select="selectMemberById"/>
         <association property="setmeal" column="setmeal_id" javaType="com.itheima.pojo.Setmeal" select="selectSetMealById"/>
     </resultMap>
     
     <!-- 用于多表关联 -->
     <select id="selectSetMealById" resultType="com.itheima.pojo.Setmeal">
         select * from t_setmeal
         where id = #{id}
     </select>
     
     <!-- 用于多表关联 -->
     <select id="selectMemberById" resultType="com.itheima.pojo.Member">
         select * from t_member
         where id = #{id}
     </select>
     
     <select id="selectDetailPage" resultMap="orderResultMap">
         select
         o.id as id,
         o.member_id as member_id,
         o.order_date as order_date,
         o.order_status as order_status,
         o.setmeal_id as setmeal_id
         from t_order as o
         inner join t_member as m on o.member_id = m.id
         inner join t_setmeal as s on o.setmeal_id = s.id
         <where>
             <if test="condition.fileNumber != null">
                 m.file_number like "%" #{condition.fileNumber} "%"
             </if>
             <if test="condition.name != null">
                 or m.name like "%" #{condition.name} "%"
             </if>
             <if test="condition.phoneNumber != null">
                 or m.phone_number like "%" #{condition.phoneNumber} "%"
             </if>
         </where>
         order by order_date desc
     </select>
     ```
     
     ```java
     IPage<Order> selectDetailPage(IPage<Order> page,@Param("condition") Map<String, ?> condition);
     ```
     
     

5. 前后端数据格式

   - 预约设置的展示所需数据。

   - [ECharts饼图](https://echarts.apache.org/examples/zh/editor.html?c=pie-simple)所需数据。

     ```js
     option = {
       title: {
         text: 'Referer of a Website',
         subtext: 'Fake Data',
         left: 'center'
       },
       tooltip: {
         trigger: 'item'
       },
       legend: {
         orient: 'vertical',
         left: 'left'
       },
       series: [
         {
           name: 'Access From',
           type: 'pie',
           radius: '50%',
           data: [
             { value: 1048, name: 'Search Engine' },
             { value: 735, name: 'Direct' },
             { value: 580, name: 'Email' },
             { value: 484, name: 'Union Ads' },
             { value: 300, name: 'Video Ads' }
           ],
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
           }
         }
       ]
     };
     ```

     

6. 本地VS部署

   - 文件路径

     ```java
     // 问题代码
     String currentDirectory = Objects.requireNonNull(getClass().getResource("/static/template/report_template.xlsx")).getPath();
     XSSFWorkbook excel =new XSSFWorkbook(Files.newInputStream(new File(currentDirectory).toPath()));
     ```

     ```java
     // 解决代码
     InputStream resourceAsStream = getClass().getClassLoader().getResourceAsStream("static/template/report_template.xlsx");
     XSSFWorkbook excel =new XSSFWorkbook(resourceAsStream);
     ```
     
   - 前端项目编译后放到Nginx服务器中，重复访问路由地址会出现404

     在nginx中添加以下配置即可：

     ```ngxin
     location / {
     	# 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
         try_files $uri $uri/ @router;
         index  index.html index.htm;
     }
     # 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
     # 因此需要rewrite到index.html中，然后交给路由在处理请求资源
     location @router {
         rewrite ^.*$ /index.html last;
     }
     ```

     参考文章：[解决 nginx部署vue刷新、访问路由页面404](https://blog.csdn.net/qq_43059674/article/details/110296807)

   - SpringBoot项目打成的jar包，运行报错`xxx.jar中没有主清单属性`，只需修改`pom.xml`文件，将`skip`改为`false`即可（非通用方法）

     ```xml
     错误配置
     <build>
         <plugins>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-compiler-plugin</artifactId>
                 <version>3.8.1</version>
                 <configuration>
                     <source>1.8</source>
                     <target>1.8</target>
                     <encoding>UTF-8</encoding>
                 </configuration>
             </plugin>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
                 <version>${spring-boot.version}</version>
                 <configuration>
                     <mainClass>com.itheima.HealthApplication</mainClass>
                     <skip>true</skip>
                 </configuration>
                 <executions>
                     <execution>
                         <id>repackage</id>
                         <goals>
                             <goal>repackage</goal>
                         </goals>
                     </execution>
                 </executions>
             </plugin>
         </plugins>
     </build>
     ```

     

     ```xml
     正确配置
     <build>
         <plugins>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-compiler-plugin</artifactId>
                 <version>3.8.1</version>
                 <configuration>
                     <source>1.8</source>
                     <target>1.8</target>
                     <encoding>UTF-8</encoding>
                 </configuration>
             </plugin>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
                 <version>${spring-boot.version}</version>
                 <configuration>
                     <mainClass>com.itheima.HealthApplication</mainClass>
                 </configuration>
                 <executions>
                     <execution>
                         <id>repackage</id>
                         <goals>
                             <goal>repackage</goal>
                         </goals>
                     </execution>
                 </executions>
             </plugin>
         </plugins>
     </build>
     ```

     

7. 前端路由

   - 路由嵌套问题。

     由于前端知识的匮乏，导致使用Vue的路由时，不明白路由的跳转原理，使得页面的跳转不符合预期。

     [嵌套路由官方文档](https://router.vuejs.org/zh/guide/essentials/nested-routes.html)

8. 前端读取属性

   - 根据字符串读取属性

     正常情况下，传递属性的字符串来获取某个对象对应的属性的值，可以通过`object['field']`来获取，但是这个**field**是`'field.field.field'`的多层字段时就没法使用了，可以通过导入**lodash**包来解决这个问题

     首先使用`npm install lodash`导包，使用案例如下：

     ```vue
     <template>
       <div>
         <p>{{ getNestedProperty('member.phoneNumber.value') }}</p>
       </div>
     </template>
     
     <script>
     import get from 'lodash/get'
     
     export default {
       data() {
         return {
           member: {
             phoneNumber: {
               value: '1234567890'
             }
           }
         }
       },
       methods: {
         getNestedProperty(propertyString) {
           return get(this.$data, propertyString)
         }
       }
     }
     </script>
     ```