智慧社区管理系统01(登录功能的实现)

怼烎@ 2023-10-11 19:59 8阅读 0赞

**目录**

一、准备工作

数据库

四层架构

执行类

prom依赖导入

application.yml文件的配置

二、后端部分

entity层实体类

mapper层

service层

接口

实现类

Controller层

三、前端部分

效果图

源码:

前端部分补充

--------------------

## 一、准备工作 ##

### 数据库 ###

![db1bc10d80e7460db73ed3304b58b105.png][]

### 四层架构 ###

![bbf6a7230e3f465cbc9a584ff777f27e.png][]

### 执行类 ###

package com.woniu.community;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    @MapperScan("com.woniu.community.mapper")
    public class Demo {
        public static void main(String[] args) {
            SpringApplication.run(Demo.class,args);
        }
    }

###  ###

### prom依赖导入 ###

<dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.5.1</version>
            </dependency>
            
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId> <optional>true</optional>
            </dependency>
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>

### application.yml文件的配置 ###

![85ac37f5ee3a495fb490ff93362278a3.png][]

## 二、后端部分 ##

### entity层实体类 ###

package com.woniu.community.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class User {
        private int id;
        private String username;
        private String password;
        private int type;
        private String remarks;
    }

### mapper层 ###

package com.woniu.community.mapper;
    
    import com.woniu.community.entity.User;
    
    public interface UserMapper {
        User selectByNameAndPwd(String username, String passwd);
    }

### service层 ###

#### 接口 ####

package com.woniu.community.service;
    
    import com.woniu.community.utils.HttpResult;
    
    import javax.servlet.http.HttpServlet;
    
    public interface IUserService {
        /**
         * 用户登录
         * @param userName 用户名
         * @param passwd    密码
         * @return
         */
        HttpResult login(String userName, String passwd);
    }

### 实现类 ###

package com.woniu.community.service.Impl;
    
    import com.woniu.community.entity.User;
    import com.woniu.community.mapper.UserMapper;
    import com.woniu.community.service.IUserService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import javax.servlet.http.HttpServlet;
    
    @Service
    public class UserServiceImpl implements IUserService {
        @Autowired(required = false)
        private UserMapper userMapper;
    
        @Override
        public HttpResult login(String userName, String passwd) {
            User user = userMapper.selectByNameAndPwd(userName, passwd);
            HttpResult result = null;
            if (user!=null){
                result=new HttpResult(user,0,200,"登陆成功");
            }else{
                result=new HttpResult(null,0,500,"登陆失败");
            }
            return result;
        }
    }

### Controller层 ###

package com.woniu.community.controller;
    
    import com.woniu.community.entity.vo.UserVO;
    import com.woniu.community.service.IUserService;
    import com.woniu.community.utils.HttpResult;
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    @RestController
    @RequestMapping("/user")
    @CrossOrigin(origins = "*")
    public class UserController {
        @Autowired
       private IUserService userService;
    
        @RequestMapping("/login")
      //  public HttpResult login(UserVO vo){
        public HttpResult login(@RequestBody UserVO vo){
            return userService.login(vo.getUsername(),vo.getPassword());
        }
    }

之后通过浏览器登录路径查看结果结果如图所示

![d23fb6dee31c4c71941ba0645116199c.png][]

## 三、前端部分 ##

#### 效果图 ####

![62ef73b497584977bcaa3283e4607936.png][]

#### 源码: ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <script src = "assets/jquery-3.5.1.min.js"></script>
        <script src = "assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src = "assets/vue.min-v2.5.16.js"></script>
        <script src = "assets/axios.min.js"></script>
        <meta charset="UTF-8">
        <title>login</title>
    </head>
    <body>
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" style="border: 1px solid black;height: 310px;margin-top: 80px">
                <div class="row">
                    <div class="col-md-5" style="height: 310px;background-color: rgb(43,136,233);font-size: 18px;color: #b9def0;font-weight: bold;text-align: center;line-height: 310px">
                        智慧社区管理系统
                    </div>
                    <div class="col-md-7">
                        <div class="row" style="text-align: center;margin-top: 30px">
                            <h4>登录</h4>
                        </div>
                        <div class = "row" style="margin-top: 20px;height: 60px">
                            <div class="col-md-8 col-md-offset-2">
                                <label>用户名:</label>
                                <input type="text" class="form-control" style="border-radius: 5px" v-model="userName"/>
                            </div>
                        </div>
                        <div class = "row" style="margin-top: 10px;height: 60px" />
                        <div class="col-md-8 col-md-offset-2">
                            <label>密码:</label>
                            <input type="password" class="form-control" style="border-radius: 5px" v-model="password"/>
                        </div>
                    </div>
                    <div class = "row" style="margin-top: 10px;height: 60px ;text-align: center">
                        <div class="col-md-8 col-md-offset-2">
                            <button class="btn btn-primary" style="margin-right: 8px" @click = "doLogin">登录</button>
                            <button class="btn btn-default" @click = "doReset"/>重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el : '#app',
            data : {
                userName : null,
                password : null,
            },
            methods : {
                doLogin(){
                   //通过axios发送请求
                   // axios.get("http://localhost:8080/user/login?username="+this.userName+"&password="+this.password)
                    axios.post("http://localhost:8080/user/login",{
                        username:this.userName,
                        password:this.password,
                    }).then(response=>{
                    if (response.data.code==200){
                        console.log(response.data);
                        window.location.href="main.html";
                    }else{
                        alert(response.data.msg);
                    }
                    });
                },
                doReset(){
                    this.userName = null;
                    this.password = null;
                }
            },
            created : function(){
            }
        })
    </script>
    </body>
    </html>

#### 前端部分补充 ####

![bad804efe4ff4392b5b7fc5744843ee5.png][]

[db1bc10d80e7460db73ed3304b58b105.png]: https://img-blog.csdnimg.cn/db1bc10d80e7460db73ed3304b58b105.png
[bbf6a7230e3f465cbc9a584ff777f27e.png]: https://img-blog.csdnimg.cn/bbf6a7230e3f465cbc9a584ff777f27e.png
[85ac37f5ee3a495fb490ff93362278a3.png]: https://img-blog.csdnimg.cn/85ac37f5ee3a495fb490ff93362278a3.png
[d23fb6dee31c4c71941ba0645116199c.png]: https://img-blog.csdnimg.cn/d23fb6dee31c4c71941ba0645116199c.png
[62ef73b497584977bcaa3283e4607936.png]: https://img-blog.csdnimg.cn/62ef73b497584977bcaa3283e4607936.png
[bad804efe4ff4392b5b7fc5744843ee5.png]: https://img-blog.csdnimg.cn/bad804efe4ff4392b5b7fc5744843ee5.png