12.JavaWeb-Spring Boot + 物业管理项目

1.Spring Boot 概念      

        自动处理应用程序幕后的各种杂事（Spring框架的应用程序的配置和部署过程），让你专注于做那些使应用程序独特的工作

1.1 Spring Boot的核心功能

1.1.1 自动配置

        Spring Boot根据应用程序的依赖和配置信息，自动进行各种功能的配置，如数据源、缓存、安全等。开发者只需要添加相应的依赖和配置，即可轻松使用这些功能。

1.1.2 起步依赖

        Spring Boot提供了一系列预定义的"起步依赖"（Starter Dependencies），这些依赖项封装了特定功能的依赖和配置，简化了项目的依赖管理。

1.1.3 命令行界面

        Spring Boot提供了一个命令行界面（CLI）工具，用于在命令行中快速创建、运行和管理Spring Boot应用程序。CLI是Spring Boot的非必要组成部分

1.1.4 Actuator

        Spring Boot的Actuator模块提供了对应用程序运行时的监控和管理功能，包括健康检查、性能指标、日志查看等，方便开发者进行运维和监控。

1.1.5 内嵌服务器

        Spring Boot可以将应用程序打包为可执行的JAR文件，并内置了多个常用的服务器（如Tomcat、Jetty等），使得应用程序可以独立运行，不需要外部服务器的支持。

1.2 初始化Spring Boot项目

1.2.1 用IDEA创建Spring Boot项目

        Server URL是Initializr Web服务的位置，默认为spring官网提供的，国内使用可能会慢些，可以使用阿里提供的 http://start.aliyun.com/

         选择next后会让你选择需要添加的项目依赖

2.用Spring Boot创建一个物业管理项目

2.1 项目功能

        登录功能、主页、费用管理、住户管理、商铺管理、车位管理、保修管理、投诉建议

2.2 根据需求创建需要的数据库

2.3 开始搭建项目结构

2.4 登录页面

        index.html是启动页面，作为登录页面，获取用户的数据利用axios向controller发送请求，再根据controller的响应决定是否登录成功，是否跳转页面

2.5 主页

首先确定主页布局，要有上边栏侧边栏跟主体

2.5.1 上边栏

        放一个logo在左侧，右侧放一个头像和注销的按钮（利用:offset、position和边框调整）

<上边栏>
    
        
            
                
                
                    
                

                
                
                    
                    
                    注销
                

            
        

 2.5.2 侧边栏

        实现几个功能页面的导航

<侧边栏>
        
            
                
                    
                        
                    
                    
                        
                        住户管理
                    
                
            

2.5.3 主体

        用iframe实现动态显示不同页面

<主体>
            
                
                
            
        
    

2.5.4 实现动态改变页面的函数

change:function (val){
    console.log(val)
    this.page=val;
}

2.6 Info页面

        主体默认显示的页面，分三个部分，上面三个色块，下面两个表格，一个为近期收费情况，一个为近期车位情况

2.6.1 住户总数

        定义一个数据作为住户总数

new Vue({
    el:"#app",
    data:{
        householdCount:0,
    },
})

        运用{{ }}将这个数据绑定到页面中某个元素上

    
    
住户总数：{{householdCount}}

        定义函数获取该数据，

mounted:function (){
//只要页面加载就执行这个方法
    console.log("mounted")
    //发请求获取住户数量
    axios.get("/household/count").then(res=>{
        this.householdCount = res.data.data
        console.log(res.data)
    }),
}