一个完整项目流程（从设计到开发）

目录

1、UML模型

1、域对象之间的4种关系

    1、关联关系

    2、依赖关系

​     3、聚集关系

     4、一般化关系(继承关系)

2、UML图分类

1、静态图

2、动态图

9、Vue

---

1、UML模型

1、域对象之间的4种关系

    1、关联关系

    2、依赖关系

用虚心画，eg：controller依赖service

     3、聚集关系

“整体”方有方块，“部分”方没有，eg：人有2只手，手是人的一部分

     4、一般化关系(继承关系)

一般化指的是类之间的继承关系。eg：小时工(HourlyEmployee)、正式员工类(SalariedEmployee)继承员工类(Employee)

2、UML图分类

UML图分类：静态模型(static model)、动态模型(dynamic model)

1、静态图

    用例图：use cast diagrams

展示系统的核心功能及与其交互的用户。
用户：Actor(活动者)，
用例：使用椭圆表示

画图工具：starUML

工具使用视频：https://www.bilibili.com/video/BV15e411W75G?p=234

    类图：class diagrams

表示类的特征
    类型(类名)、属性、操作

    对象图：object diagrams

表示对象的特征
    展示多个对象的特征、对象之间的交互 

    组件图：component diagrams

表现软件功能组件之间的关系

    部署图：deployment diagrams

2、动态图

    时序图：sequence diagrams

捕捉一段时间范围内多个对象之间的交互信息
强调消息交互的时间顺序

    协作图：collaboration diagrams
    状态图：state chart diagrams

强调一个对象在不同时间触发是，其内部状态的转变过程

    活动图：activity diagrams

描述活动的流程

 

1、准备

开发框架、环境

2、功能模块及使用技术 

4、开发平台部分组件图

9、Vue

https://cn.vuejs.org/ 

1、vue组件的全局注册

任何地方都可以使用

Vue.component(组件名,具体组件的内容);
eg：
        Vue.component("model3",{
            template:"<div><h3>{{title}}</h3><div><button type='button' @click='btnfn'>点我</button></div></div>",
            data:function(){
                return {
                    title: "hello Java"
                }
            },
            methods:{
                btnfn:function(){
                    alert("hello vue!!!");
                }
            }
        });

2、vue组件的本地注册
在new Vue大括号里面写具体内容
new Vue({
    el:'#app',
    components:{
        'model3':{
            template:"<div><div><h3>{{title}}</h3><div><button type='button' @click='btnfn'>点我</button></div></div>",
            data:function(){
                return {
                    title:"hello vue"
                }
            },
            methods:{
                btnfn:function(){
                    alert("hello !!!");
                }
            }
        
        }
    }
});

mount：绑定方法

3、使用Vue-Cli搭建Vue项目
    要使用vue-cli命令，需要先安装node.js

可以把node.js理解成运行前端程序的服务器

nodejs官网下载地址：http://nodejs.cn/download

4、使用Axios发送请求
    Axios是一个可以用在浏览器和NodeJS的异步通信框架，实现AJAX异步通信
gitHub地址：https://github.com/axios/axios

5、如果用post传data需要导入Qs

6、Element-UI组件库

安装Element-UI：npm i element-ui -S

官网地址：https://element.eleme.cn/#/zh-CN/component/layout

7、当刷新页面时将$store中的state数据，存入sessionStorage中

视频的30分钟：https://www.bilibili.com/video/BV15e411W75G?p=368