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

最新推荐文章于 2022-12-02 12:03:15 发布

朵朵宝

最新推荐文章于 2022-12-02 12:03:15 发布

阅读量445

点赞数

分类专栏：智慧社区管理系统文章标签： mybatis java mysql

本文链接：https://blog.csdn.net/magic_818/article/details/128076193

版权

智慧社区管理系统专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、准备工作

数据库

四层架构

执行类

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依赖导入

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

application.yml文件的配置

二、后端部分

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());
    }
}

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

三、前端部分

效果图

源码:

<!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>