SpringBoot réalise l'enregistrement de connexion (avec le code source)

Le front-end de ce projet est composé de html+css+vue (send request), le back-end est traité par springboot, et l'instruction d'opération de base de données pertinente est mybatis-plus

        Jetez un oeil à mon résumé de projet:

Parlons d'abord de la perfection, car l'interface d'enregistrement de connexion frontale est la précédente, donc je l'ai copiée cette fois, et j'ai seulement écrit une vue dans la partie frontale, en utilisant v-model pour lier le nom d'utilisateur et le mot de passe, et en envoyant requête axios, la partie back-end est due au fait que j'utilise mybatis-plus, et que je n'ai pas écrit d'instructions sql. Bien sûr, ces instructions sql ne sont pas très compliquées. Des amis qui ont le temps peuvent essayer de les écrire directement ou de les modifier Pour la couche contrôleur, il s'agit de certaines instructions logiques, par exemple : lors de la connexion, déterminez d'abord si l'utilisateur existe dans la base de données, puis comparez le mot de passe s'il existe ; Dans l'ensemble, ce projet a pris moins de 40 minutes, et il est généralement bon. Pour le novice Xiaobai, je pense que la partie difficile est qu'il existe des différences dans les interactions front-end et back-end, et les formats de données de les deux ne sont pas uniformes.

        L'inconvénient est que l'interface est trop simple, il n'y a pas d'effet js, l'effet est très direct et il faut plus de pratique pour que vue envoie des requêtes.

Regardez d'abord l'effet de l'interface principale après l'exécution du projet :

L'interface de connexion est la suivante :

L'interface d'inscription est la suivante :

 

La structure du répertoire du projet est la suivante :

 

1. La conception de la table dans la base de données

1.1 Créer une table avec deux champs, un nom d'utilisateur (type varcahr, clé primaire) et un mot de passe (type varchar)

1.2 La structure du tableau est la suivante

2. Le package jar (fichier pom.xml) qui doit être importé et les paramètres de configuration associés (informations de base de données et port)

2.1 Le code pertinent spécifique du fichier est le suivant

<?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 Informations et port de la base de données

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. Compilation du code lié au back-end

 3.1 Les informations renvoyées par le backend au frontend sont encapsulées dans la classe R

@Data
public class R<T> {

    private Integer code; //编码：1成功，0和其它数字为失败

    private String msg; //错误信息

    private T data; //数据

    private Map map = new HashMap(); //动态数据

    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 Classe d'entité utilisateur (c'est-à-dire les informations utilisateur (mot de passe du compte))

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

3.3 Contrôleur (code lié à la couche de contrôle, traitant la requête envoyée par le frontal)

@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);
        // 判断前端传来的数据是否正常
        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 Code lié à la couche Mapper

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

3.5 Code d'interface de service défini

public interface UserService extends IService<User> {
}

3.6 Implémentation de la classe d'implémentation de l'interface Service

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

4. Code lié au front-end

4.1 Interface de connexion login.html (y compris la vue d'envoi de la demande)

<!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 Interface d'enregistrement register.html (y compris la vue d'envoi de la demande)

<!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. Résumé de l'achèvement du projet

        Parlons d'abord de la perfection, car l'interface d'enregistrement de connexion frontale est la précédente, donc je l'ai copiée cette fois, et j'ai seulement écrit une vue dans la partie frontale, en utilisant v-model pour lier le nom d'utilisateur et le mot de passe, et en envoyant requête axios, la partie back-end est due au fait que j'utilise mybatis-plus, et que je n'ai pas écrit d'instructions sql. Bien sûr, ces instructions sql ne sont pas très compliquées. Des amis qui ont le temps peuvent essayer de les écrire directement ou de les modifier Pour la couche contrôleur, il s'agit de certaines instructions logiques, par exemple : lors de la connexion, déterminez d'abord si l'utilisateur existe dans la base de données, puis comparez le mot de passe s'il existe ; Dans l'ensemble, ce projet a pris moins de 40 minutes, et il est généralement bon. Pour le novice Xiaobai, je pense que la partie difficile est qu'il existe des différences dans les interactions front-end et back-end, et les formats de données de les deux ne sont pas uniformes.

        L'inconvénient est que l'interface est trop simple, il n'y a pas d'effet js, l'effet est très direct et il faut plus de pratique pour que vue envoie des requêtes.

Les amis dans le besoin peuvent m'envoyer un message privé en arrière-plan pour envoyer le code source, le texte du code n'est pas facile, les amis peuvent l'aimer ! ! !