此項目前端由html+css+vue(發(fā)送請求)組成，后端由springboot進(jìn)行處理請求,相關(guān)數(shù)據(jù)庫操作語句選用的是mybatis-plus

? ? ? ? 先看看我的項目總結(jié)吧：

先說完美的吧，因為前端登陸注冊界面是之前的，這次就復(fù)制了一下，在前端部分僅書寫了一些vue，使用v-model綁定username以及password，發(fā)送axios請求，后端那部分因為使用的是mybatis-plus，也沒有編寫一些sql語句，當(dāng)然，這些sql語句也不是很復(fù)雜的，有時間的小伙伴可以直接試著編寫，或在我這基礎(chǔ)上進(jìn)行修改，controller層的話，就是一些邏輯語句，例如：登陸時先判斷數(shù)據(jù)庫中是否存在該用戶，若存在再進(jìn)行密碼比對，注冊時則是先判斷用戶是否已經(jīng)注冊，存在數(shù)據(jù)庫中，若不存在再讓其進(jìn)行注冊。總而言之，此項目花費不到四十分鐘，總體還是不錯對于新手小白來說，我認(rèn)為困難的部分則是在前后端交互那個地方，存在一些差異，二者的數(shù)據(jù)格式不統(tǒng)一。

? ? ? ? 不足的地方，就是界面過于簡單，沒有啥js效果，效果非常直接，以及vue發(fā)送請求需要多加練習(xí)。

先看項目運(yùn)行后主界面效果：

登陸界面如下：

注冊界面如下：

?

項目目錄結(jié)構(gòu)如下：

?

1.數(shù)據(jù)庫中表的設(shè)計

1.1 創(chuàng)建一個表其中有兩個字段一個用戶名(varcahr類型,primary key)一個密碼(varchar類型)

1.2 表結(jié)構(gòu)如下所示

2.需要導(dǎo)入的jar包(pom.xml文件)以及相關(guān)配置設(shè)置(數(shù)據(jù)庫信息以及端口)

2.1文件具體相關(guān)代碼如下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wz</groupId>
    <artifactId>LogAndRegister</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>LogAndRegister</name>
    <description>LogAndRegister</description>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.2數(shù)據(jù)庫信息以及端口

server:
  port: 81
spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/logandregister
      username: root
      password: 111111

3.后端相關(guān)代碼的編寫

?3.1 后端返回給前端的信息封裝在R類中

@Data
public class R<T> {

    private Integer code; //編碼：1成功，0和其它數(shù)字為失敗

    private String msg; //錯誤信息

    private T data; //數(shù)據(jù)

    private Map map = new HashMap(); //動態(tài)數(shù)據(jù)

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }

}

3.2 User實體類(即用戶的信息(賬號密碼))

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

3.3 Controller(控制層相關(guān)代碼，處理前端發(fā)送的請求)

@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {

    @Autowired
    private UserService userService;
    @PostMapping("/login")
    public R<String> login(@RequestBody User user){
        log.info("user:{}",user);
        LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();
        lqw.eq(User::getUsername,user.getUsername());
        User one = userService.getOne(lqw);
        System.out.println(one);
        // 查詢不到用戶
        if (one == null){
            return R.error("用戶賬號不存在");
        }
        // 密碼錯誤
        if(!one.getPassword().equals(user.getPassword())){
            return R.error("密碼錯誤");
        }
        return R.success("登陸成功");
    }
    @PostMapping("/register")
    public R<String> register(@RequestBody User user){
        log.info("user:{}",user);
        // 判斷前端傳來的數(shù)據(jù)是否正常
        if (user==null){
            return R.error("請輸入注冊信息");
        }
        // 判斷賬號是否存在
        String username = user.getUsername();
        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(User::getUsername,username);
        User one = userService.getOne(lambdaQueryWrapper);
        if (one!=null){
            return R.error("用戶賬號已注冊");
        }
        // 二者都滿足則以下
        userService.save(user);
        return R.success("注冊成功");

    }

}

3.4 Mapper層相關(guān)代碼

@Mapper
public interface UserMapper extends BaseMapper<User> {
}

3.5 定義的Service接口代碼

public interface UserService extends IService<User> {
}

3.6實現(xiàn)Service接口的實現(xiàn)類

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

4.前端相關(guān)代碼

4.1 登陸界面login.html(包含vue發(fā)送請求)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form  id="form" >
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text" v-model="userName"></p>
        <p>Password:<input id="password" name="password" type="password" v-model="passWord"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up" @click="login">
            <input type="reset" class="button" value="reset" >
            <a href="register.html">沒有賬號？點擊注冊</a>
        </div>
    </form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#loginDiv",
        data: {
            userName: "",
            passWord: "",
        },
        methods: {
            login:function (){
                console.log(this.userName,this.passWord);
                axios.post('http://localhost:81/user/login',
                    {
                    username: this.userName,
                    password: this.passWord,
                }).then( resp=> {
                    console.log(resp)
                    if (resp.data.code == '1') {
                        window.location.href = 'loginSuccess.html';
                    }else {
                        alert("賬號或密碼錯誤");
                        this.userName='';
                        this.passWord='';
                        }
                    })
                }
        }
    })
</script>
</body>
</html>

4.2 注冊界面register.html(包含vue發(fā)送請求)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歡迎注冊</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>歡迎注冊</h1>
        <span>已有帳號？</span> <a href="login.html">登錄</a>
    </div>
    <form id="reg-form">

        <table>

            <tr>
                <td>用戶名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" v-model="userName">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用戶名不太受歡迎</span>
                </td>

            </tr>

            <tr>
                <td>密碼</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" v-model="passWord">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密碼格式有誤</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 冊" type="submit" id="reg_btn" @click="register">
        </div>
        <br class="clear">
    </form>

</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#reg-form",
        data: {
            userName: "",
            passWord: "",
        },
        methods: {
            register: function () {
                console.log(this.userName, this.passWord);
                axios.post('http://localhost:81/user/register',
                    {
                        username: this.userName,
                        password: this.passWord,
                    }).then(resp => {
                    console.log(resp)
                    if (resp.data.code == '1') {
                        alert(resp.data.data);
                        window.location.href = 'login.html';
                    } else {
                        console.log(resp.data.data);
                        alert(resp.data.data);
                        this.userName = '';
                        this.passWord = '';
                    }
                })
            }
        }
    })
</script>
</body>
</html>

5.項目完畢總結(jié)

? ? ? ? 先說完美的吧，因為前端登陸注冊界面是之前的，這次就復(fù)制了一下，在前端部分僅書寫了一些vue，使用v-model綁定username以及password，發(fā)送axios請求，后端那部分因為使用的是mybatis-plus，也沒有編寫一些sql語句，當(dāng)然，這些sql語句也不是很復(fù)雜的，有時間的小伙伴可以直接試著編寫，或在我這基礎(chǔ)上進(jìn)行修改，controller層的話，就是一些邏輯語句，例如：登陸時先判斷數(shù)據(jù)庫中是否存在該用戶，若存在再進(jìn)行密碼比對，注冊時則是先判斷用戶是否已經(jīng)注冊，存在數(shù)據(jù)庫中，若不存在再讓其進(jìn)行注冊?？偠灾?，此項目花費不到四十分鐘，總體還是不錯對于新手小白來說，我認(rèn)為困難的部分則是在前后端交互那個地方，存在一些差異，二者的數(shù)據(jù)格式不統(tǒng)一。

? ? ? ? 不足的地方，就是界面過于簡單，沒有啥js效果，效果非常直接，以及vue發(fā)送請求需要多加練習(xí)。

有需要的小伙伴可以后臺私信我發(fā)源碼哦，碼文不易，小伙伴可以點個贊哦?。?！

? ? ? ??文章來源地址http://www.zghlxwxcb.cn/news/detail-679191.html

到了這里，關(guān)于SpringBoot實現(xiàn)登陸注冊(附源碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！