不動産コミュニティ管理システムのログインページとロジックの実装

vue3とspringbootを学ぶにはプロジェクトを書くことが絶対に必要で、各プロジェクトではログインと登録が切り離せないものであり、これもプロジェクト開始の必須条件です。

次に、開始について書いたプロジェクトを見てみましょう。まず、vue3 と springboot のプロジェクト環境を構築します。これらの構築は自分で完了できます。シェルフを用意したら、そこに物をロードし始めます。

1 つ目はログインページのレンダリングです。独自のデザインに従ってログインページのスタイルを実装できます。以下は参考資料です。

コードも参照用です。

<template>
  <div class="bgc">
    <div class="modalbox">
        <h2 style="text-align: center;font-family: '宋体';">系统登录</h2>
        <el-input prefix-icon="User" class="name" v-model="input" placeholder="请输入用户登录账号" />
        <el-input
          class="password"
          prefix-icon="Lock"
          v-model="password"
          type="password"
          placeholder="请输入用户密码"
          show-password
        />
        <el-input prefix-icon="CircleCheck" class="verificationcode" v-model="verificationcode" placeholder="请输入验证码" />
        <el-input class="code" v-model="code" placeholder="1569" disabled/>
        <div class="register">
          <el-text @click="register" class="mx-1" type="success">注册账号</el-text>
        </div>
        <el-button class="login" type="success" @click="login">登录</el-button>
    </div>
  </div>
</template>

//如果只考虑样式，那么script代码可以删掉
<script setup>
import { ref , onMounted} from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();
const input = ref('');
const password = ref('');
const code = ref('');
const verificationcode = ref("");
import { ElMessage } from 'element-plus';
import axios from 'axios';
onMounted(()=>{
  code.value = parseInt(Math.random()*10000);
})
const register = () => {
  router.push('/register');
}
//下面这里的是登录验证，在只考虑样式的情况下，下面的代码可以不要
const login = () => {
    axios({
         url:`http://localhost:8080/user`,
         method:"post", 
         data:{
            username : input.value,
            password : password.value
         }
    }).then(res=>{
        let arr = res.data;
        let flg = false;
        console.log(res.data);
        for(let i = 0 ; i < arr.length ; i++){
          if(arr[i].username == input.value && arr[i].password == password.value && verificationcode.value == code.value){
              ElMessage({
                  message: '登录成功',
                  type: 'success',
                });
                return ;
          }
        };
        if(flg == false){
          ElMessage.error('账号密码不正确，请重新输入');
          return ;
        }
    })
  
}
</script>

<style scoped>
.bgc{
    
    width: 100%;
    height: 100%;
    background-image: url(../assets/bj.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.modalbox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 35%;
    height: 50%;
    border-radius: 10px;
    background-color: #fff;
}
.name{
    margin-top: 5%;
    margin-left: 10%;
    width: 80%;
    height: 40px;
}
.password{
    margin-top: 5%;
    margin-left: 10%;
    width: 80%;
    height: 40px;
}
.verificationcode{
    margin-top: 5%;
    margin-left: 10%;
    width: 40%;
    height: 45px;
}
.code{
    margin-top: 5%;
    margin-left: 4%;
    width: 35%;
    height: 40px;
}
.register{
    width: 15%;
    height: 5%;
    cursor: pointer;
    margin-top: 5%;
    margin-left: 10%;
}
.login{
    width: 80%;
    height: 10%;
    margin-top: 2%;
    margin-left: 10%;
}
</style>

スタイルが利用可能になった後も、ロジックが必要です。フロントエンドロジックの上のコードは既に示されています。次に、バックエンドの処理とデータベースのいくつかの状況について説明します。

コントロールクラス:

package com.example.vue3spring.controller;

import com.example.vue3spring.entity.User;
import com.example.vue3spring.mapper.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class Users {
    @Autowired
    private user user;

   @RequestMapping(value = "/user",method = RequestMethod.POST)
   @CrossOrigin
    public List<User> user(@RequestBody User users){
       System.out.println(users.getUsername());
       System.out.println(users.getPassword());
       List<User> list = user.users();

//       for (int i = 0; i < list.size(); i++) {
//           System.out.println(list.get(i));
//       }
//       System.out.println(list);
       return list ;
    }
}

エンティティクラス:

package com.example.vue3spring.entity;

public class User {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

mybatis-plus インターフェース:

package com.example.vue3spring.mapper;

import com.example.vue3spring.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface user {
    @Select("select * from login")
    public List<User> users();
}

springboot で mybatis-plus を使用するには、使用する前に次の依存関係を pom に追加する必要があります。

        </dependency>
        <!--        mybatis-plus依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <!--        mysql驱动依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>
        <!--        数据连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.23</version>
        </dependency>

プロパティファイル内のデータベース接続の構成は次のとおりです。

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useSSL=false
spring.datasource.username=root
spring.datasource.password=w123456789
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

大丈夫。上記はすべての構成であり、参照のみを目的としています。

不動産コミュニティ管理システムのログイン ページとロジックの実装

おすすめ

不動産コミュニティ管理システムのログインページとロジックの実装