技術共有

vue3 springboot mybatis mysql プロジェクトの実践 - 簡単なログインおよび登録機能の実装

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

これは vue3+springboot+mybatis+mysql のプロジェクト実装です。これは、フロントエンドとバックエンドの分離のログインおよび登録機能を実装するだけです。主なツールは、idea、navicat です。

目次

1.vue3プロジェクトの作成と初期設定

vue3プロジェクトを作成する

2. プロジェクト構造を変更する

1) 元のディレクトリ構造

2) ディレクトリ構造の変更

ログイン登録ページの編集と書き込み

1）ログインと登録.vue

2）ホーム.vue

3）ルーター

4）ログイン.css

5) ログイン登録ページ表示

2. springboot+mysql+mybatisプロジェクトを作成し、データベースに接続します

3. ログインおよび登録のバックエンド関数を作成する

1. ログインロジック

2. 登録ロジック

3. バックエンドコード部分

4. プロジェクトを実行する

1.vue3プロジェクトの作成と初期設定

1.vue3プロジェクトを作成する

プロジェクトを作成するには、私の記事のいずれかを参照してください。

IDEA を使用してカスタム vue3 プロジェクトを作成する_idea vue3-CSDN ブログ

作成後の初期ディレクトリ構造:

2. プロジェクト構造を変更する

まず、元のディレクトリ構造を変更する必要があります

1) 元のディレクトリ構造

資産写真を投稿する

コンポーネント中間コンポーネント (通常は再利用可能)

ルーターすべてのメイン ページのファイル パスが設定されるルートです

店通常、トークンの保存など、vuex の状態管理に使用されます。

ビュー中央がメインページです

アプリ.vueこれは、Vue アプリケーションのルート コンポーネントです。

メイン.jsこれはアプリケーションのエントリ ファイルであり、通常、vue や vue router などの依存関係を導入するために使用されます。

2) ディレクトリ構造の変更

ログインおよび登録機能を実装するために、変更されたディレクトリ構造は次のようになります。


3. ログイン登録ページを作成する

1）ログインと登録.vue

ログイン登録ページと機能を実装するために、Components フォルダーの下に LoginAndRegister.vue を作成します。ここでは、ログインと登録用の .vue ファイルのみを作成します。このファイルには、ログイン ブロックと登録ブロックの要素が含まれるかどうかを決定するために v-if が使用されます。 . レンダリングが行われるため、表示に影響を与えます。

初期設定

v-if="loginShow"为true, v-if="registerShow"为false

ボタンをクリックして切り替えると、true と false が切り替わります。

登録が成功したら、ログインセクションに戻ります。

利便性とユーザーの習慣のため、ユーザー属性には ID、ユーザー名、パスワード、電話番号、性別が含まれますが、登録時に入力されるのはユーザー名とパスワードのみであり、パスワードは暗号化されずに単純に機能が実装されます。安全性が十分ではありませんので、より安全なログインと登録方法、ログイン後の個人情報の改善方法について改めて記事を更新します。

ログインと登録.vue:

  1. <template>
  2.   <div class="container">
  3.     <div class="login-box" v-if="loginShow">
  4. <!--      菱形群-->
  5.       <div class="decoration1 decoration"></div>
  6.       <div class="decoration2 decoration"></div>
  7.       <div class="decoration3 decoration"></div>
  8.       <div class="decoration4 decoration"></div>
  9.       <div class="decoration5 decoration"></div>
  10.       <div class="decoration decoration4 decoration6"></div>
  11.       <div class="decoration decoration7 decoration2"></div>
  12.       <div class="decoration decoration8 decoration3"></div>
  13.       <div class="login-title">
  14.         <h1>Login</h1>
  15.       </div>
  16.       <div class="login-part">
  17.         <input class="login-input" v-model="username" placeholder="Username" />
  18.         <input class="login-input" type="password" v-model="password" placeholder="Password" />
  19.         <button class="login-button" @click="login">Login</button>
  20.         <div>
  21.           还未注册？点击<a class="change-link" @click="changeToRegister">这里</a>注册
  22.         </div>
  23.       </div>
  24.     </div>
  25.     <div class="login-box" v-if="registerShow">
  26.       <!--      菱形群-->
  27.       <div class="decoration1 decoration"></div>
  28.       <div class="decoration2 decoration"></div>
  29.       <div class="decoration3 decoration"></div>
  30.       <div class="decoration4 decoration"></div>
  31.       <div class="decoration5 decoration"></div>
  32.       <div class="decoration decoration4 decoration6"></div>
  33.       <div class="decoration decoration7 decoration2"></div>
  34.       <div class="decoration decoration8 decoration3"></div>
  35.       <div class="login-title">
  36.         <h1>Register</h1>
  37.       </div>
  38.       <div class="login-part">
  39.         <input class="login-input" v-model="username" placeholder="Username" />
  40.         <input class="login-input" type="password" v-model="password" placeholder="Password" />
  41.         <button class="login-button" @click="register">Register</button>
  42.         <span class="change-link" @click="changeToLogin">返回登录</span>
  43.       </div>
  44.     </div>
  45. <!--    <div class="decoration decoration1"></div>-->
  46. <!--    <div class="decoration decoration2"></div>-->
  47. <!--    <div class="decoration decoration3"></div>-->
  48. <!--    <div class="decoration decoration4"></div>-->
  49.   </div>
  50. </template>
  51.  
  52. <script>
  53. import { ref } from 'vue'
  54. import { useRouter } from 'vue-router' // 导入 useRouter
  55.  
  56. import '../style/Login.css' // 导入css
  57. export default {
  58.   name: 'LoginVue',
  59.   setup () {
  60.     const username = ref('')
  61.     const password = ref('')
  62.     const phone = ref('')
  63.     const loginShow = ref(true)
  64.     const registerShow = ref(false)
  65.     const router = useRouter()
  66.  
  67.     const changeToRegister = async () => {
  68.       loginShow.value = false
  69.       registerShow.value = true
  70.     }
  71.  
  72.     const changeToLogin = async () => {
  73.       loginShow.value = true
  74.       registerShow.value = false
  75.     }
  76.  
  77.     const login = async () => {
  78.       console.log('Login with:', username.value, password.value)
  79.       try {
  80.         const formData = new FormData()
  81.         formData.append('username', username.value)
  82.         formData.append('password', password.value)
  83.         const response = await fetch('http://localhost:8081/api/user/login', {
  84.           method: 'POST',
  85.           body: formData
  86.         })
  87.         const data = await response.json()
  88.         if (response.ok) {
  89.           console.log('Link success', data)
  90.           if (data.code === 200) {
  91.             // 登录成功
  92.             alert('登录成功！')
  93.             await router.push('/home')
  94.           } else {
  95.             alert(data.msg)
  96.           }
  97.         } else {
  98.           console.error('Link failed', data)
  99.         }
  100.       } catch (error) {
  101.         console.error('Error login', error)
  102.       }
  103.     }
  104.  
  105.     const register = async () => {
  106.       console.log('Register with:', username.value, password.value)
  107.       try {
  108.         const formData = new FormData()
  109.         formData.append('username', username.value)
  110.         formData.append('password', password.value)
  111.         const response = await fetch('http://localhost:8081/api/user/register', {
  112.           method: 'POST',
  113.           body: formData
  114.         })
  115.         const data = await response.json()
  116.         if (response.ok) {
  117.           if (data.code === 200) {
  118.             console.log('Register success', data)
  119.             alert('注册成功！')
  120.             await changeToLogin()
  121.           } else {
  122.             console.log('Register failed', data)
  123.             alert(data.msg)
  124.           }
  125.         } else {
  126.           console.error('Register failed', data)
  127.         }
  128.       } catch (error) {
  129.         console.error('Error during register', error)
  130.       }
  131.     }
  132.  
  133.     return { username, password, phone, login, loginShow, registerShow, changeToRegister, register, changeToLogin }
  134.   }
  135. }
  136. </script>
  137.  
  138. <style>
  139.  
  140. </style>

2）ホーム.vue

Home.vue は、ログインに成功した後にジャンプするメイン ページです。

ホーム.vue:

  1. <template>
  2. 首页<br><br>
  3.   <button class="login-button" @click="signOut">退出登录</button>
  4. </template>
  5.  
  6. <script>
  7. import { useRouter } from 'vue-router'
  8.  
  9. export default {
  10.   name: 'HomeVue',
  11.   setup () {
  12.     const router = useRouter()
  13.     const signOut = async () => {
  14.       await router.push('/')
  15.     }
  16.     return { signOut }
  17.   }
  18. }
  19. </script>
  20.  
  21. <style scoped>
  22.  
  23. </style>

3）ルーター

ページ ルーティング設定。パスが /、/login がログイン ページ、/home がホームページの場合、ログイン ページにリダイレクトされます。

index.js：

  1. import { createRouter, createWebHistory } from 'vue-router'
  2. import Login from '../components/LoginAndRegister.vue'
  3. import Home from '../views/Home.vue'
  4.  
  5. const routes = [
  6.   {
  7.     path: '/',
  8.     redirect: '/login'
  9.   },
  10.   {
  11.     path: '/login',
  12.     name: 'Login',
  13.     component: Login
  14.   },
  15.   {
  16.     path: '/home',
  17.     name: 'Home',
  18.     component: Home
  19.   }
  20. ]
  21.  
  22. const router = createRouter({
  23.   history: createWebHistory(process.env.BASE_URL),
  24.   routes
  25. })
  26.  
  27. export default router

4）ログイン.css

ログイン登録ページのCSSデザインです。

ログイン.css:

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .container{
  6.     height: 100vh;
  7.     display: flex;
  8.     justify-content: center;
  9.     align-items: center;
  10.     overflow: hidden;
  11.     position: relative;
  12. }
  13. .login-box{
  14.     background-color: white;
  15.     padding: 40px 100px;
  16.     border-radius: 8px;
  17.     box-shadow: 0 0 5px 1px gainsboro;
  18.     position: relative;
  19. }
  20. .login-part{
  21.     display: flex;
  22.     flex-direction: column;
  23.     justify-content: center;
  24.     margin-top: 20px;
  25.     gap: 20px;
  26. }
  27. .login-input{
  28.     width: 250px;
  29.     height: 30px;
  30.     border-radius: 8px;
  31. }
  32. .login-button{
  33.     height: 40px;
  34.     border-radius: 8px;
  35.     background-color: #2c3e50;
  36.     color: white;
  37.     transition: 0.5s;
  38. }
  39. .login-button:hover{
  40.     background-color: darkcyan;
  41.     font-size: 15px;
  42.     transition: 0.5s;
  43. }
  44. .login-button:active{
  45.     background-color: darkslateblue;
  46. }
  47. .change-link{
  48.     color: #00BFFF;
  49.     text-decoration: underline;
  50. }
  51. .change-link:hover{
  52.     color: cornflowerblue;
  53. }
  54.  
  55. .decoration {
  56.     position: absolute;
  57.     width: 200px;
  58.     height: 200px;
  59.     background: linear-gradient(to left, #FDF5E6, #96CDCD );
  60.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  61.     z-index: 1;
  62. }
  63. .decoration1 {
  64.     top: 150px;
  65.     left: -210px;
  66. }
  67. .decoration2 {
  68.     top: 20px;
  69.     right: -20px;
  70.     width: 100px; /* 第二个菱形的大小 */
  71.     height: 100px;
  72.     background: linear-gradient(to right, #FFF5EE, #E6E6FA);
  73. }
  74. .decoration3 {
  75.     top: 50px;
  76.     right: -180px;
  77.     width: 200px; /* 第三个菱形的大小 */
  78.     height: 200px;
  79.     background: linear-gradient(to right, #7FFFD4, cadetblue);
  80. }
  81. .decoration4 {
  82.     top: 200px;
  83.     right: -200px;
  84.     width: 500px; /* 第三个菱形的大小 */
  85.     height: 500px;
  86.     z-index: -1;
  87.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  88.     background: linear-gradient(to right, #FFFACD, #00BFFF);
  89. }
  90. .decoration5 {
  91.     top: -100px;
  92.     right: 200px;
  93.     width: 400px; /* 第三个菱形的大小 */
  94.     height: 400px;
  95.     z-index: -1;
  96.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  97.     background: linear-gradient(to right, #AFEEEE, #00BFFF);
  98. }
  99. .decoration6 {
  100.     top: 10px;
  101.     right: -680px;
  102. }
  103.  
  104. .decoration7 {
  105.     top: -170px;
  106.     right: -500px;
  107. }
  108.  
  109. .decoration8 {
  110.     top: -140px;
  111.     right: -655px;
  112. }

5) ログイン登録ページ表示

ひし形のブロックはランダムに配置されており、最初は次のようになります。

その後、さらにいくつかのひし形のブロックを追加し、その位置と色を変更しました。最終的な効果は次のとおりです。

2. springboot+mysql+mybatisプロジェクトを作成し、データベースに接続します

springboot、mysql、mybatis を使用してバックエンド プロジェクトを構築し、データベースに接続するだけです。参照:

アイデア、Spring Boot+MySQL+MyBatis プロジェクトがデータベース テーブルの内容を Web ページに作成して表示する_idea が Web ページにデータベースを表示する - CSDN ブログ

記事の補足:

エンティティ クラスを作成するたびに set メソッドと get メソッドを記述するのが面倒な場合は、pom.xml に次の依存関係を追加できます。

  1. 		<dependency>
  2. 			<groupId>org.projectlombok</groupId>
  3. 			<artifactId>lombok</artifactId>
  4. 		</dependency>

次に、エンティティ クラスで @Data アノテーションを使用して、set メソッドと get メソッドの記述を省略します。

プロセスはほぼ同じですが、今回作成したデータは異なります。主な理由は、ユーザー テーブルの属性とデータが変更されたことです (違いは大きくなく、スープは薬を変更しません)。

問題が発生しました: Maven は依存関係のダウンロードを続けますが、長時間応答がありません

ただし、今回は、新しいコンピューターを使用してバックエンド プロジェクトを作成しました。その結果、Maven が起動された後、さまざまな依存関係とプラグインがダウンロードされ続けました。 -ins、そして長い間応答がありませんでした:

解決：

キャッシュをクリアしてアイデアを再起動しましたが、効果はほとんどありませんでした。

後で、Maven がデフォルトで外部の中央ウェアハウスを使用し、アイデアで Maven プラグインを使用していたため、ダウンロード速度が非常に遅くなったことが原因である可能性があることがわかりました。

そこで、mavenをローカルにダウンロードしました。チュートリアルを参照してください。

Maven のダウンロードとインストールのチュートリアル (超詳細)_Maven のインストール - CSDN ブログ

チュートリアルに従ってダウンロードし、Mavenのインストールパス-&gt;conf-&gt;settings.xmlにあるイメージのURLを変更します。ただし、環境変数は設定せず、file-&gt;settings-&gt;で直接設定しました。 [ビルド、実行、デプロイ] -&gt; [ビルド ツール] -&gt; Maven で、Maven ホーム パスをローカル パスに変更します。

変更後、ダウンロード速度は確かに大幅に速くなりました。

最終的なバックエンド プロジェクトのディレクトリ構造は次のとおりです。

3. ログインおよび登録のバックエンド関数を作成する

1. ログインロジック

フロントエンドから渡されたユーザー名とパスワードを含む入力情報を取得し、データベース内のユーザー名とパスワードに基づいてクエリを実行します。ユーザーが見つかった場合は、そのユーザーが存在し、ユーザー名とパスワードが一致していることを意味します。ログインは成功しますが、それ以外の場合は失敗します。

2. 登録ロジック

フロントエンドから渡されたユーザー名とパスワードを含む入力情報を取得します。入力情報が空でないことを確認した後、まずユーザー名に従ってデータベースを検索します。見つかった場合は、そのユーザー名が登録されています。失敗し、失敗情報が返されます。登録が成功すると、ユーザーはレコードを登録してデータベースに挿入できます。ログイン ブロックは表示され、登録ブロックは非表示になります。

3. バックエンドコード部分

その中で、リソース -&gt; マッパー -&gt; UserMapper.xml:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  3.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  4.  
  5. <mapper namespace="com.example.demo.mapper.UserMapper" >
  6.     <resultMap id="result" type="com.example.demo.entity.User">
  7.         <result property="id" column="id" />
  8.         <result property="username" column="username" />
  9.         <result property="password" column="password" />
  10.         <result property="phone" column="phone" />
  11.         <result property="gender" column="gender"/>
  12.     </resultMap>
  13.  
  14.     <!--    通过用户名和密码查找对应用户，用于登录-->
  15.     <select id="findUserByNameAndPwd" resultMap="result" parameterType="User">
  16.         select * from user
  17.         where username = #{username}
  18.         and password = #{password}
  19.     </select>
  20.  
  21.  
  22.     <!--    通过用户名查找对应用户，用于注册检验用户名是否已存在-->
  23.     <select id="findUserByName" resultMap="result" parameterType="User">
  24.         select * from user
  25.         where username = #{username}
  26.     </select>
  27.  
  28.     <!--    添加用户-->
  29.     <insert id="addUser" parameterType="User">
  30.         insert into user (username, password)
  31.         values ( #{username}, #{password} )
  32.     </insert>
  33.  
  34. </mapper>

java-&gt;com.example.demo-&gt;mapper-&gt;UserMapper.java:

  1. package com.example.demo.mapper;
  2.  
  3. import com.example.demo.entity.User;
  4. import org.apache.ibatis.annotations.Mapper;
  5.  
  6. @Mapper
  7. public interface UserMapper {
  8.     // 通过用户名和密码查找对应用户
  9.     public User findUserByNameAndPwd(User user);
  10.     // 通过用户名查找用户
  11.     public User findUserByName(User user);
  12.     // 添加用户
  13.     public void addUser(User user);
  14. }

java-&gt;com.example.demo-&gt;service-&gt;UserService.java:

  1. package com.example.demo.service;
  2.  
  3. import com.example.demo.entity.User;
  4.  
  5. public interface UserService {
  6.     // 通过用户名和密码查找对应id
  7.     public User findUserByNameAndPwd(User user);
  8.     // 通过用户名查找用户
  9.     public User findUserByName(User user);
  10. //     添加用户
  11.     public void addUser(User user);
  12. }

java-&gt;com.example.demo-&gt;service-&gt;UserServiceImpl.java:

  1. package com.example.demo.service;
  2.  
  3. import com.example.demo.entity.User;
  4. import com.example.demo.mapper.UserMapper;
  5. import jakarta.annotation.Resource;
  6. import org.springframework.stereotype.Service;
  7.  
  8. @Service
  9. public class UserServiceImpl implements UserService {
  10.     @Resource
  11.     private UserMapper userMapper;
  12.  
  13.     // 通过用户名和密码查找对应id
  14.     @Resource
  15.     public User findUserByNameAndPwd(User user){
  16.         return userMapper.findUserByNameAndPwd(user);
  17.     }
  18.  
  19.     // 通过用户名查找用户
  20.     @Resource
  21.     public User findUserByName(User user){
  22.         return userMapper.findUserByName(user);
  23.     }
  24.  
  25. //     添加用户
  26.     @Resource
  27.     public void addUser(User user){
  28.         userMapper.addUser(user);
  29.     }
  30. }

java-&gt;com.example.demo-&gt;コントローラ-&gt;UserController.java:

  1. package com.example.demo.controller;
  2.  
  3.  
  4. import com.example.demo.entity.User;
  5. import com.example.demo.result.Result;
  6. import com.example.demo.service.UserService;
  7. import jakarta.annotation.Resource;
  8. import org.springframework.web.bind.annotation.*;
  9.  
  10.  
  11. @RestController
  12. @RequestMapping("/api/user")
  13. public class UserController {
  14.     @Resource
  15.     UserService userService;
  16.  
  17.     // 登录
  18.     @CrossOrigin
  19.     @PostMapping(value = "/login")
  20.     public Result login(@ModelAttribute("user") User user){
  21.         String username=user.getUsername();
  22.         String password=user.getPassword();
  23.         System.out.println("Login received username: " + username);
  24.         System.out.println("Login received password: " + password);
  25.         User userCheck = new User();
  26.         userCheck.setUsername(username);
  27.         userCheck.setPassword(password);
  28.         System.out.println(userCheck.getUsername() + " " + userCheck.getPassword());
  29.         try{
  30.             User findUser = userService.findUserByNameAndPwd(userCheck);
  31.             if(findUser != null){
  32.                 return Result.success(findUser);
  33.             }else {
  34.                 return Result.failure(401,"用户名或密码错误");
  35.             }
  36.         }catch (Exception e){
  37.             return Result.failure(500,"服务器异常");
  38.         }
  39.     }
  40.  
  41.     // 注册
  42.     @CrossOrigin
  43.     @PostMapping(value = "/register")
  44.     public Result register(@ModelAttribute("user") User user){
  45. //        String username = "222";
  46. //        String password = "222";
  47.         User userCheck = new User();
  48.         userCheck.setUsername(user.getUsername());
  49.         userCheck.setPassword(user.getPassword());
  50.         if(userCheck.getUsername() == null || userCheck.getUsername().isEmpty() || userCheck.getPassword() == null || userCheck.getPassword().isEmpty()){
  51.             System.out.println("用户名或密码不可为空");
  52.             return Result.failure(201,"用户名和密码不可为空");
  53.         }else {
  54.             System.out.println("Register received username: " + userCheck.getUsername());
  55.             System.out.println("Register received password: " + userCheck.getPassword());
  56.             try{
  57.                 // 先在数据库中查找是否已有用户名相同的用户
  58.                 User findUser = userService.findUserByName(userCheck);
  59.                 if(findUser != null){
  60.                     // 用户名已存在
  61.                     return Result.failure(202,"用户名已存在!");
  62.                 }
  63.                 else {
  64.                     // 新用户，数据库添加记录
  65.                     userService.addUser(userCheck);
  66.                     return Result.success(userCheck);
  67.                 }
  68.             }catch (Exception e) {
  69.                 return Result.failure(500, "服务器异常");
  70. //            }
  71.             }
  72.         }
  73.     }
  74. }

4. プロジェクトを実行する

フロントエンドとバックエンドは別々に実行および開始されます。ここでは、application.properties でバックエンドのポートを 8081 に変更し、フロントエンドはデフォルトの 8080 です。そのため、フロントエンドとバックエンドのプロジェクトが正常に実行されたら、http:/ と入力します。ブラウザーで /localhost:8080 を確認し、開発者ツールのネットワークで確認し、バックエンドに正常に接続し、ログインしてテスト入力を登録するときに別のプロンプト情報とポップアップ プロンプトを正常に返します。

ログインに成功した後:

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、Java、Linux、JavaScript、PHP、CSS などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便