传智健康-day1-进度

最新推荐文章于 2024-07-30 20:50:32 发布
最新推荐文章于 2024-07-30 20:50:32 发布
阅读量520 收藏 2
点赞数
文章标签： java junit 开发语言 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvpatient/article/details/127807449
版权

一.准备工作

1.项目介绍

2.原型展示

3.技术架构

 HTML5可以实现在手机端自适应显示

4.功能架构

5.软件开发流程

使用瀑布模型进行开发

二.环境搭建

1.项目结构

使用maven分模块开发方式，将整个项目拆分成几个maven工程，每个maven工程存放特定的一类代码

 2.环境搭建

2.1.health_parent

首先新建一个空工程(empty project）

然后在empty Project工程下新增一个maven模块health_parent

不需要选择架构，在pom文件里修改打包方式为pom，用于统一管理依赖版本

    <packaging>pom</packaging>

将资料中的依赖复制到pom文件中，如果出现依赖版本爆红，而且刷新没用的话

将下图中的标签注释掉，再刷新，就可以下载依赖了。

这个问题的原因是没有导入资料中的jar依赖包。

<dependencyManagement>

dependencyManagement元素提供了一种管理依赖版本号的方式。在dependencyManagement元素中声明所依赖的jar包的版本号等信息，那么所有子项目再次引入此依赖jar包时则无需显式的列出版本号。Maven会沿着父子层级向上寻找拥有dependencyManagement 元素的项目，然后使用它指定的版本号。

简单的说，就是统一锁定子模块中的jar包版本号。

但是设置了此标签后，子模块中想要引用哪个jar包，需要子模块自己单独指定jar包。

因为每个模块使用的jar包都不一样，每个模块都统一继承了父模块的jar包，并不合理。每个模块引入jar包时，列出jar包即可，无需再列出版本号，从而实现版本号控制。

2.2 health_common

子工程，打包方式为jar，存放通用组件，例如工具类、实体类等

<packaging>jar</packaging>

复制资料中的代码即可

2.3 health_interface

子工程，打包方式为jar，存放服务接口

这个子工程只需继承common工程即可

<packaging>jar</packaging>

    <dependencies>
        <dependency>
            <groupId>com.itheima</groupId>
            <artifactId>health_common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

2.4 health_service_provider

子工程，打包方式为war，作为服务单独部署，存放服务类、Dao接口和Mapper映射文件等 

因为打包方式是war包，所以需要创建一个带有webapp架构的maven工程

web工程会自动在pom文件中添加很多不必要的依赖(红色方框)，我们选择删除即可

依赖interface工程，添加一个tomcat插件

<!--依赖interface工程-->
        <dependency>
            <groupId>com.itheima</groupId>
            <artifactId>health_interface</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
                    <!-- 指定端口 -->
                    <port>81</port>
                    <!-- 请求路径 -->
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>

 web工程中没有java源码包，resource目录，需要手动添加

添加log4j日志文件

添加mybatis的配置文件，实际开发中的xml文件，一般都是直接复制，修改即可。

添加Spring的配置文件

  spring-dao:持久层配置文件

  注意修改配置

  创建对应的数据库

  

  spring-tx：事务控制层配置文件

  spring-service：发布相关的配置文件

  web.xml:初始化spring

2.5 healt_backend

创建一个maven的web工程 ，打包方式为war，单独部署，存放Controller、页面等

根据服务提供工程(service_provider)来完成自己的功能。所以需要依赖interface接口

同时需要提供tomcat服务，部署tomcat，注意和health_service_provider模块的端口号不能重复

完善web项目的工程结构

配置日志文件

配置springmvc.xml文件

配置web.xml文件,注意名称的对应，如下图

2.28进度

安装powerdesigner12成功。

创建物理模型（PDM）

3.1进度

三.ElementUI

1.使用ElementUI构建页面，在页面上引入js和css文件即可使用，在ElementUI的官方文档找到引用地址

 注意要引用vue.js,因为ElementUI是基于vue开发的

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

 根据不同的需求，在官方文档上去寻找组件

1.container布局容器：用于布局的容器组件，方便快速搭建页面的基本结构

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入vue.js,因为ElementUI是配置Vue使用-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!--2.定义一个div，id为app-->
<div id="app">
    <el-container>
        <!--外层容器，可以包含以下四种元素-->
        <el-header>Header</el-header>
        <!--顶栏容器-->
        <el-main>Main</el-main>
        <!--主要区域容器-->
    </el-container>

    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
        <!--底栏容器-->
    </el-container>

    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
    </el-container>

    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>

    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>

    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
        </el-container>
    </el-container>

    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</div>
<!--3.为container中的每一个元素定义不同的属性-->
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: left;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 590px;
    }
</style>
<!--1.导入Vue：创建Vue对象，作用对象为app-->
<script>
    new Vue({
        el: '#app'
    });
</script>
</body>
</html>

2.Dropdown下拉菜单

4.2号进度

3.NavMenu导航菜单

<el-menu>
       <!-- 通过el-menu表示menu菜单 -->
       <el-submenu index="1">
            <!-- 通过el-submenu标签表示一级菜单，后面的索引用来区分不同的菜单 -->
          <template slot="title">
            <i class="el-icon-location"></i>
            <!-- 通过i标签来绑定一个class样式，class样式在index.css文件中已经定义好了 -->
            <span slot="title">导航一</span>
          </template>
          <el-menu-item>选项1</el-menu-item>
          <!-- 通过menu-item表示二级菜单 -->
          <el-menu-item>选项2</el-menu-item>
          <el-menu-item>选项3</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </template>
          <el-menu-item>选项1</el-menu-item>
          <el-menu-item>选项2</el-menu-item>
          <el-menu-item>选项3</el-menu-item>
        </el-submenu>
</el-menu>

4.table表格

<el-table stripe>
    <!-- 通过table标签来创建一个表格 -->
    <el-table-column prop="date" label="日期"></el-table-column>
    <!-- 通过table-column创建表格的表头 -->
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" align="center"></el-table-column>
  </el-table>

 数据表格绑定数据对象来展示数据

数据对象：创建vue对象时创建data属性，从而定义数据对象（tableData）

方法对象：VUE对象的method属性

<!-- 通过table标签来创建一个表格，表格中的数据来源绑定了VUE中的模型数据 -->
    <el-table :data="tableData" stripe>
      <el-table-column prop="date" label="日期"></el-table-column>
      <!-- 通过table-column创建表格的表头,如果是属性列，则用prop展示属性-->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <!-- 如果是模板列(作用是展示操作的按钮)，用label表示操作 -->
      <el-table-column label="操作" align="center">
        <!--
      slot-scope：作用域插槽，可以获取表格数据
    	scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
    -->
        <template slot-scope="scope">
          <!-- @click表示按钮绑定的事件,事件对应的方法名在VUE对象中创建 -->
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--1.导入Vue：创建Vue对象，作用对象为app-->
  <script>
    new Vue({
      el: '#app',
      // 定义VUE对象中的模型数据,用于table展示,tableData对象是一个数组对象，对应的数据是json数据
      data: {
        tableData: [
          { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
          { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }
        ]
      },
      // 定义VUE对象的方法，操作scope.row传输过来的数据
      methods: {
        handleUpdate(row) {
          alert(row.date);
        },
        handleDelete(row) {
          alert(row.name);
        }
      }
    });
  </script>

5.Pagination分页

@current-change="handleCurrentChange"事件，事件触发后会自动调用VUE对象中定义的方法

 layout中各属性代表的功能

6.Message消息提示

$message即可作为方法，也可作为对象

type属性对应展示的效果

<!--2.定义一个div，id为app-->
  <div id="app">
    <el-button :plain="true" @click="open1">消息</el-button>
    <el-button :plain="true" @click="open2">成功</el-button>
    <el-button :plain="true" @click="open3">警告</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>
    <!--1.导入Vue：创建Vue对象，作用对象为app-->
    <script>
      new Vue({
        el: '#app',
        methods: {
          open1() {
            // $message可作为一个方法使用,也可以作为一个对象使用
            this.$message('这是一条消息提示');
          },
          open2() {
            this.$message({
              message: '恭喜你，这是一条成功消息',
              // type表示展示出的效果
              type: 'success'
            });
          },
          open3() {
            this.$message({
              message: '警告哦，这是一条警告消息',
              type: 'warning'
            });
          },
          open4() {
            // 作为一个对象使用,调用error方法
            this.$message.error('错了哦，这是一条错误消息');
          }
        }
      });
    </script>
  </div>

7.Tabs标签页

分隔内容上有关联但属于不同类别的数据集合。

el-tabs标签，value指定选中的标签页el-tabs-pane

8.Form表单（重要）

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

表单中的每一个表单域都绑定了VUE对象中的模型对象，两者存在绑定关系

el-form-item：表单项

model：对应VUE对象中的模型对象

rules：表单验证规则，在VUE对象中定义不同规则，表单项通过prop指定具体使用何种规则

 methods方法中，要使用到提交的表单数据，表单数据使用ref来指定了，直接传入ref参数给method中的方法即可。

bobo洁厕灵
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
传智健康产品需求说明书
duanmy的博客
11-07 992
java
传智播客---文件上传于文件下载
java爸爸的专栏
11-08 2886
文件上传和下载技术 一。文件上传： 是指允许客户将本地文件，上传到服务器端 常见的应用：上传照片、上传新闻图片、上传附件 文件上传编程基本步骤：  1、在用户页面中添加上传输入项 （客户端页面操作）也就是编写一个jsp页面里面编写一个表单提交          注意事项：  1) 必须为文件上传input 提供name属性，否则文件上传内容不会被表单提交  2) 表单
传智健康项目总结
qq_43751200的博客
04-17 1581
项目的总结、收获以及后期目标；
传智健康小问题总结
2401_83960681的博客
05-16 194
jdk1.8，idea较老2020版本，MySQL8.0.29，dubbo2.6.0，zoopkeeper3.4.6（tip:项目所引用的jar包依赖为3.4.7的，但实际用的是3.4.6的，目前没有问题）mapper和对应的dao文件，两者的文件路径和文件名必须一样，否则会报无法加载dao文件的错误。
软件测试基础入门-DAY1
weixin_51689029的博客
04-07 278
阶段目标 能独立针对web项目实施功能测试 一、测试介绍 什么是软件测试？ 使用技术手段验证软件是否满足需求 测试主流技能 1、功能测试 2、自动化测试 3、接口测试 4、性能测试 主流方向建议： 1、功能测试+接口测试 2、自动化测试+接口 3、功能+性能 二、测试常用分类 分类 阶段划分（阶段：软件产出过程顺序） 代码可见度 2.1 阶段划分 单元测试 说明：针对程序源代码进行测试（单元：最小独立功能代码段） 提示： 1、国内单元测试一般开发自测 2、单元
day19-下单
qq_41642640的博客
06-25 225
0.学习目标 会调用订单系统接口 实现订单结算功能 实现微信支付功能 1.订单系统接口 我们不做开发，只讲解 1.1.导入订单服务 把课前资料提供的leyou-order复制到D:\heima\code\leyou目录。 然后在工程内导入： 然后导入module： 选择导入module： 选择目录中的 ly-order： 打开父工程leyou的pom文件，添加ly-order模块： ...
php从入门到精通19天笔记,传智播客-PHP从入门到精通（19天）-video
weixin_32098457的博客
03-12 155
教程名称：传智播客-PHP从入门到精通(19天)-video教程目录：├PHP传智社区学习资源.zip├下载必看 .txt├│ ├10目录访问权限(包括分布式权限).wmv│ ├11多站点配置.wmv│ ├12虚拟目录的设置.wmv│ ├1php介绍，php脚本模式.wmv│ ├2web服务运行模式及相关技术(软件).wmv│ ├3php网页运行原理.wmv│ ├4apache的安装...
设计模式-day05
重生之我是泰勒
12-11 276
又被称为发布-订阅（Publish/Subscribe）模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。一般来说，同事类之间的关系是比较复杂的，多个同事类之间互相关联时，他们之间的关系会呈现为复杂的网状结构，这是一种过度耦合的架构，即不利于类的复用，也不稳定。例如在下左图中，有六个同事类对象，假如对象1发生变化，那么将会有4个对象受到影响。如果对象2发生变化，那么将会有5个对象受到影响。
day1-Linux操作系统基础
beyond谚语的博客
09-21 270
1.什么是操作系统（operate system OS） 小议：承上启下作用，向下可以控制硬件，向上能够支持软件的运行。一个可以控制硬件的软件。 小明找小红聊天，小明打开QQ，输入消息，小明的QQ将信息传递---->（小明）操作系统---->网络设备----->（小红）操作系统---->小红的QQ---->小红收到消息。反之亦然 ps：以前的诺基亚没有操作系统，想要用QQ必须装个java虚拟机。缺点：同一时刻不允许运行多个程序。但是，小明想运行A软件又想运行B软件还想运行C软件
Ajax day-02
weixin_44202037的博客
09-25 200
模板引擎 板引擎概述 作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。 官方地址： https://aui.github.io/art-template/zh-cn/index.html 使用步骤 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件<script src="/js/template-web.js"></script...
传智播客_Andorid_植物大战僵尸视频_Day03视频
01-09
在本课程中，“传智播客_Andorid_植物大战僵尸视频_Day03视频”主要聚焦于Android应用开发，通过模拟热门游戏“植物大战僵尸”来教授Android编程的关键概念和技术。这个压缩包包含了Day03的教学视频，旨在帮助学员...
传智播客_Andorid_植物大战僵尸视频_Day02视频
01-09
在本课程"传智播客_Andorid_植物大战僵尸视频_Day02"中，我们将深入探索Android应用开发的基础知识，特别是在构建游戏场景方面的实践。这个课程是针对初学者设计的，旨在帮助他们理解Android平台上的游戏开发过程。...
传智播客_Andorid_智慧北京视频_Day05视频
01-09
在“传智播客_Andorid_智慧北京视频_Day05视频.zip”这个压缩包中，我们聚焦的是Android开发的第五天课程内容，主要针对的是Android应用开发的基础与进阶知识。Android作为全球最广泛使用的移动操作系统，其开发者的...
使用hutool工具判断字符串是否全部是字母(包括大小写)，java判断字符串是否全部是字母(包括大小写)
qq_43700885的博客
07-29 452
1.导入hutool的maven依赖。2.复制一下代码执行。
java判断邮箱地址是否正确，使用hutool工具判断邮箱地址是否正确
qq_43700885的博客
07-29 251
1.导入hutool的maven依赖。2.直接复制一下代码运行。
Swagger使用Map接受参数时，页面如何显示具体参数及说
a1058926697的博客
07-26 622
后端使用Map接受参数，要求在swagger页面上显示具体的参数名称、类型及说明。当Map接受参数数量少时，可以使用Swagger自带的注解。自定义注解 @ApiGlobalModel。编写处理注解对应的插件。
花几千上万学习Java，真没必要！（三十五）
最新发布
wehpd的博客
07-30 283
集合之Map
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值