devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

1.Spring Boot + 物业管理项目-配置+登陆_物业管理项目springboot

作者：菜鸟追梦旅行 | 2024-03-20 22:32:05

赞

踩

物业管理项目springboot

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.4.1 导入需要的vue、axios、element-ui组件

  1. <!--
  2.       vue：替代JavaScript
  3.       axios：发请求的工具，作用与$.ajax一样
  4.       elsement-ui：基于vue的组件库
  5. -->
  6.     <script src="js/vue/vue.js"></script>
  7.     <script src="js/vue/axios.min.js"></script>
  8.     <link rel="stylesheet" href="css/vue/element-index.css">
  9.     <script src="js/vue/element-index.js"></script>

2.4.2 设计登录前端界面

        使用v-model给输入框双向绑定某个vue中data定义的值，从而能获取到用户输入的信息；给登录等按钮添加点击事件@click并设置对应的触发函数，函数在vue的method中定义

2.4.2.1 html
  1. <body>
  2. <div id="app">
  3.     <div class="container" id="container">
  4.         <div class="form-container sign-up-container">
  5.             <form action="#">
  6.                 <h1>创建用户</h1>
  7.                 <input type="text" placeholder="用户名" />
  8.                 <input type="email" placeholder="手机号" />
  9.                 <input type="password" placeholder="密码" />
  10.                 <button>确认注册</button>
  11.             </form>
  12.         </div>
  13.         <div class="form-container sign-in-container">
  14.             <form action="#">
  15.                 <h1>登录</h1>
  16.                 <el-input v-model="user.cellphone" placeholder="请输入账号" class="elinput"></el-input>
  17.                 <el-input v-model="user.password" placeholder="请输入密码" class="elinput" show-password></el-input>
  18.                 <a href="#">忘记密码?</a>
  19.                 <el-button  @click="login()" icon="el-icon-ice-cream-square" class="elbutton" round>登录</el-button>
  20.             </form>
  21.         </div>
  22.         <div class="overlay-container">
  23.             <div class="overlay">
  24.                 <div class="overlay-panel overlay-left">
  25.                     <h1>欢迎回来!</h1>
  26.                     <p>只有登录才能访问我们的页面，请输入登录信息</p>
  27.                     <button class="ghost" id="signIn">登录</button>
  28.                 </div>
  29.                 <div class="overlay-panel overlay-right">
  30.                     <h1>你好啊，朋友!</h1>
  31.                     <p>输入你的信息，快来加入我们吧</p>
  32.                     <button class="ghost" id="signUp">注册</button>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </div>
  37. </div>
  38. </body>
2.4.2.2 css

        设置前端元素的样式、动画效果，这里复制的网上的资源做了些点修改

  1. <style>
  2.         @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
  3.  
  4.         * {
  5.             box-sizing: border-box;
  6.         }
  7.         body {
  8.             background: #f6f5f7;
  9.             display: flex;
  10.             justify-content: center;
  11.             align-items: center;
  12.             flex-direction: column;
  13.             font-family: 'Montserrat', sans-serif;
  14.             height: 100vh;
  15.             margin: -20px 0 50px;
  16.         }
  17.         h1 {
  18.             font-weight: bold;
  19.             margin: 0;
  20.         }
  21.         h2 {
  22.             text-align: center;
  23.         }
  24.         p {
  25.             font-size: 14px;
  26.             font-weight: 100;
  27.             line-height: 20px;
  28.             letter-spacing: 0.5px;
  29.             margin: 20px 0 30px;
  30.         }
  31.         span {
  32.             font-size: 12px;
  33.         }
  34.         a {
  35.             color: #333;
  36.             font-size: 14px;
  37.             text-decoration: none;
  38.             margin: 15px 0;
  39.         }
  40.         button {
  41.             border-radius: 20px;
  42.             border: 1px solid #FF4B2B;
  43.             background-color: #FF4B2B;
  44.             color: #FFFFFF;
  45.             font-size: 12px;
  46.             font-weight: bold;
  47.             padding: 12px 45px;
  48.             letter-spacing: 1px;
  49.             text-transform: uppercase;
  50.             transition: transform 80ms ease-in;
  51.         }
  52.         .elbutton {
  53.             border-radius: 20px;
  54.             border: 1px solid #FF4B2B;
  55.             background: linear-gradient(to right, #fd545c,#FF65A7);
  56.             color: #FFFFFF;
  57.             font-size: 12px;
  58.             font-weight: bold;
  59.             padding: 12px 45px;
  60.             letter-spacing: 1px;
  61.             text-transform: uppercase;
  62.             transition: transform 80ms ease-in;
  63.         }
  64.         button:active {
  65.             transform: scale(0.95);
  66.         }
  67.         button:focus {
  68.             outline: none;
  69.         }
  70.         button.ghost {
  71.             background-color: transparent;
  72.             border-color: #FFFFFF;
  73.         }
  74.         form {
  75.             background-color: #FFFFFF;
  76.             display: flex;
  77.             align-items: center;
  78.             justify-content: center;
  79.             flex-direction: column;
  80.             padding: 0 50px;
  81.             height: 100%;
  82.             text-align: center;
  83.         }
  84.         input {
  85.             background-color: #eee;
  86.             border: none;
  87.             padding: 12px 15px;
  88.             margin: 8px 0;
  89.             width: 100%;
  90.         }
  91.         .container {
  92.             background-color: #fff;
  93.             border-radius: 10px;
  94.             box-shadow: 0 14px 28px rgba(0,0,0,0.25),
  95.             0 10px 10px rgba(0,0,0,0.22);
  96.             position: relative;
  97.             overflow: hidden;
  98.             width: 768px;
  99.             max-width: 100%;
  100.             min-height: 480px;
  101.         }
  102.         .form-container {
  103.             position: absolute;
  104.             top: 0;
  105.             height: 100%;
  106.             transition: all 0.6s ease-in-out;
  107.         }
  108.         .sign-in-container {
  109.             left: 0;
  110.             width: 50%;
  111.             z-index: 2;
  112.         }
  113.         .container.right-panel-active .sign-in-container {
  114.             transform: translateX(100%);
  115.         }
  116.         .sign-up-container {
  117.             left: 0;
  118.             width: 50%;
  119.             opacity: 0;
  120.             z-index: 1;
  121.         }
  122.         .container.right-panel-active .sign-up-container {
  123.             transform: translateX(100%);
  124.             opacity: 1;
  125.             z-index: 5;
  126.             animation: show 0.6s;
  127.         }
  128.         @keyframes show {
  129.             0%, 49.99% {
  130.                 opacity: 0;
  131.                 z-index: 1;
  132.             }
  133.  
  134.             50%, 100% {
  135.                 opacity: 1;
  136.                 z-index: 5;
  137.             }
  138.         }
  139.         .overlay-container {
  140.             position: absolute;
  141.             top: 0;
  142.             left: 50%;
  143.             width: 50%;
  144.             height: 100%;
  145.             overflow: hidden;
  146.             transition: transform 0.6s ease-in-out;
  147.             z-index: 100;
  148.         }
  149.         .container.right-panel-active .overlay-container{
  150.             transform: translateX(-100%);
  151.         }
  152.         .overlay {
  153.             background: #FF416C;
  154.             background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
  155.             background: linear-gradient(to right, #FF4B2B, #FF416C);
  156.             background-repeat: no-repeat;
  157.             background-size: cover;
  158.             background-position: 0 0;
  159.             color: #FFFFFF;
  160.             position: relative;
  161.             left: -100%;
  162.             height: 100%;
  163.             width: 200%;
  164.             transform: translateX(0);
  165.             transition: transform 0.6s ease-in-out;
  166.         }
  167.         .container.right-panel-active .overlay {
  168.             transform: translateX(50%);
  169.         }
  170.         .overlay-panel {
  171.             position: absolute;
  172.             display: flex;
  173.             align-items: center;
  174.             justify-content: center;
  175.             flex-direction: column;
  176.             padding: 0 40px;
  177.             text-align: center;
  178.             top: 0;
  179.             height: 100%;
  180.             width: 50%;
  181.             transform: translateX(0);
  182.             transition: transform 0.6s ease-in-out;
  183.         }
  184.         .overlay-left {
  185.             transform: translateX(-20%);
  186.         }
  187.         .container.right-panel-active .overlay-left {
  188.             transform: translateX(0);
  189.         }
  190.         .overlay-right {
  191.             right: 0;
  192.             transform: translateX(0);
  193.         }
  194.         .container.right-panel-active .overlay-right {
  195.             transform: translateX(20%);
  196.         }
  197.         .social-container {
  198.             margin: 20px 0;
  199.         }
  200.         .social-container a {
  201.             border: 1px solid #DDDDDD;
  202.             border-radius: 50%;
  203.             display: inline-flex;
  204.             justify-content: center;
  205.             align-items: center;
  206.             margin: 0 5px;
  207.             height: 40px;
  208.             width: 40px;
  209.         }
  210. </style>
2.4.2.3 vue

        定义需要的属性,定义函数,使用axios带着属性向后台Controller层发起请求,根据的到的响应数据决定是否登陆成功跳转页面

  1. <script>
  2.     //创建vue对象
  3.     new Vue({
  4.         el:"#app",  //vue作用于指定的元素及其子元素
  5.         data:{      //用来声明vue的属性，页面上需要的东西
  6.             user:{
  7.                 cellphone:"",
  8.                 password:""
  9.             }
  10.         },
  11.         methods:{
  12.             login: function (){
  13.                 console.log("登录")
  14.                 console.log("账号"+this.user.cellphone)
  15.                 console.log("密码"+this.user.password)
  16.                 //利用axios发送请求
  17.                 // then等于ajax的success
  18.                 axios.post("employee/login",this.user).then(res =>{
  19.                     //res后台返回的结果
  20.                     console.log(res)
  21.                     if(res.data.code == 200){
  22.                         window.location.href = "html/main.html"
  23.                     }else{
  24.                         this.$message.error(res.data.message);
  25.                     }
  26.                 })
  27.             }
  28.         }
  29.     })
  30.     const signUpButton = document.getElementById('signUp');
  31.     const signInButton = document.getElementById('signIn');
  32.     const container = document.getElementById('container');
  33.     signUpButton.addEventListener('click', () => {
  34.         container.classList.add("right-panel-active");
  35.     });
  36.     signInButton.addEventListener('click', () => {
  37.         container.classList.remove("right-panel-active");
  38.     });
  39. </script>

2.4.3 搭建后端处理业务

2.4.3.1 Controller层
        1.添加所需的注解
  1. @Controller
  2. @RequestMapping("/employee")
  3. @Slf4j
  4. public class EmployeeController {}
        2.处理前端请求（其实大部分业务逻辑应该在service层处理）

        获取响应service层对象，定义map存储用户登录数据，定义方法，添加方法所需的注解，接收前端所传的数据，设置单态登录

  1. @Resource
  2.     private EmployeeService employeeService;
  3.     //记录当前登录的用户有哪些
  4.     //ConcurrentHashMap是一个线程安全的Map，效率比hashmap低，比hashtable高
  5.     private static final ConcurrentHashMap<String,HttpSession> sessions = new ConcurrentHashMap<>();
  6.  
  7.     @RequestMapping("/login")   //  employee/login
  8.     @ResponseBody
  9.     //在处理请求的方法中如果想要request、response、session只需在形参指定
  10.     public ResponseResult<Boolean> login(@RequestBody EmployeeVo employee, HttpSession session){
  11.         log.debug("处理登录请求");
  12.         log.debug(employee.toString());
  13.         Employee byCellphone = employeeService.findByCellphone(employee.getCellphone());
  14.         if(byCellphone!=null&&byCellphone.getPassword().equals(employee.getPassword())) {
  15.             log.debug(byCellphone.toString());
  16.             session.setAttribute("eid",byCellphone.getId());
  17.             // 查看当前账号是否在其他地方登录过，有登录则让之前的下线
  18.             log.debug("session:"+session.isNew());
  19.             if(sessions.containsKey(byCellphone.getCellphone())){
  20.                 log.debug(byCellphone.getCellphone());
  21.                 //获取之前的session
  22.                 HttpSession old = sessions.get(byCellphone.getCellphone());
  23.                 try {
  24.                     old.removeAttribute("eid");
  25.                     session.setAttribute("eid",byCellphone.getId());
  26.                 }catch (IllegalStateException e){
  27.                     sessions.put(byCellphone.getCellphone(),session);
  28.                     return new ResponseResult<>(200,"登录成功",true);
  29.                 }
  30.             }
  31.             //将当前的session放入map
  32.             sessions.put(byCellphone.getCellphone(),session);
  33.             return new ResponseResult<>(200,"登录成功",true);
  34.         }else{
  35.             return new ResponseResult<>(500,"账号或密码有误",false);
  36.         }
  37.     }
2.4.3.2 service层
  1. @Data
  2. @Slf4j
  3. @Service
  4. public class EmployeeServiceimpl implements EmployeeService {
  5.     @Resource
  6.     private EmployeeMapper employeeMapper;
  7.     @Override
  8.     public Employee findByCellphone(String cellphone) {
  9.         log.info("调用 mapper执行sql");
  10.         return employeeMapper.findByCellphone(cellphone);
  11.     }
  12. }
2.4.3.3 mapper层（dao层）
  1. @Mapper
  2. public interface EmployeeMapper {
  3.     Employee findByCellphone(String cellphone);
  4. }

        mapper.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper
  3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  4.         "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <!--namespace：命名空间，用来避免id相同的sql语句冲突
  6.     一般使用一个完整的类名
  7. -->
  8. <mapper namespace="com.woniuxy.property1002.mapper.EmployeeMapper">
  9.     <select id="findByCellphone" resultType="com.property.entity.Employee">
  10.         select * from employee where cellphone = #{cellphone}
  11.     </select>
  12. </mapper>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/276420
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号