प्रौद्योगिकी साझेदारी

vue3 springboot mybatis mysql परियोजना सरलप्रवेशस्य पञ्जीकरणकार्यस्य च अभ्यास-कार्यन्वयनम्

2024-07-12

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

अत्र vue3+springboot+mybatis+mysql इत्यस्य परियोजना कार्यान्वयनम् अस्ति, यत् केवलं अग्रे-अन्त-पृष्ठ-अन्त-पृथक्करणस्य प्रवेश-पञ्जीकरण-कार्यं कार्यान्वितं करोति मुख्यानि साधनानि सन्ति: विचारः, navicat

विषयवस्तुसारणी

1. vue3 परियोजनां प्रारम्भिकविन्यासं च रचयन्तु

vue3 परियोजना रचयन्तु

2. परियोजनासंरचनायाः परिवर्तनं कुर्वन्तु

१) मूलनिर्देशिकासंरचना

२) परिवर्तिता निर्देशिकासंरचना

प्रवेशपञ्जीकरणपृष्ठं सम्पादयित्वा लिखन्तु

1)LoginAndRegister.vue

२)गृहम् ।vue

३)रूटरः

४)प्रवेशः ।css

५) प्रवेशपञ्जीकरणपृष्ठप्रदर्शनम्

2. springboot+mysql+mybatis परियोजनां रचयन्तु तथा च आँकडाधारेण सह सम्बद्धं कुर्वन्तु

3. लॉगिन् तथा पञ्जीकरणपृष्ठ-अन्त-कार्यं लिखन्तु

1. प्रवेश तर्कः

2. पञ्जीकरणतर्कः

3. बैकएण्ड् कोड भाग

4. परियोजनां चालयन्तु

1. vue3 परियोजनां प्रारम्भिकविन्यासं च रचयन्तु

1. vue3 परियोजना रचयन्तु

परियोजनां निर्मातुं भवान् मम एकं लेखं द्रष्टुं शक्नोति:

IDEA_idea vue3-CSDN blog इत्यनेन सह कस्टम् vue3 परियोजनां रचयन्तु

निर्माणानन्तरं प्रारम्भिकनिर्देशिकासंरचना : १.

2. परियोजनासंरचनायाः परिवर्तनं कुर्वन्तु

प्रथमं भवद्भिः मूलनिर्देशिकसंरचना परिवर्तयितुं आवश्यकम्

१) मूलनिर्देशिकासंरचना

संपत्तियांचित्राणि पोस्ट कुर्वन्तु

घटकाःमध्यवर्ती घटकाः, प्रायः पुनः उपयोगयोग्याः

रूटरसर्वेषां मुख्यपृष्ठानां सञ्चिकामार्गाः यस्मिन् मार्गे विन्यस्ताः भवन्ति

संग्रहःसामान्यतया vuex राज्यप्रबन्धनार्थं प्रयुक्तम्, यथा टोकनस्य संग्रहणम् इत्यादि ।

दृश्यानिकेन्द्रं मुख्यपृष्ठम् अस्ति

App.vueइदं Vue अनुप्रयोगस्य मूलघटकम् अस्ति ।

मुख्य.जइयं अनुप्रयोगस्य प्रविष्टिसञ्चिका अस्ति, प्रायः vue, vue router इत्यादीनां आश्रयाणां परिचयार्थं उपयुज्यते ।

२) परिवर्तिता निर्देशिकासंरचना

प्रवेशः पञ्जीकरणकार्यं च कार्यान्वितुं परिवर्तिता निर्देशिकासंरचना अस्ति :


3. प्रवेशपञ्जीकरणपृष्ठं लिखन्तु

1)LoginAndRegister.vue

प्रवेशपञ्जीकरणपृष्ठं कार्याणि च कार्यान्वितुं घटकपुटस्य अधः LoginAndRegister.vue रचयन्तु अत्र, अहं केवलं प्रवेशस्य पञ्जीकरणस्य च कृते .vue सञ्चिकां रचयामि, यस्मिन् v-if इत्यस्य उपयोगः भवति यत् प्रवेशखण्डः पञ्जीकरणखण्डः च तत्त्वानि समाविष्टानि सन्ति वा इति .प्रतिपादनं, तस्मात् तेषां प्रदर्शनं प्रभावितं करोति।

प्रारम्भिकसेटिंग्स्

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

यदा बटनं टोग्ल् कर्तुं क्लिक् भवति तदा सत्यं असत्यं च टॉगलं करोति ।

सफलपञ्जीकरणानन्तरं पुनः प्रवेशविभागे गच्छन्तु ।

सुविधायै उपयोक्तृ-अभ्यासाय च यद्यपि उपयोक्तृ-विशेषणेषु id, username, password, phone, gender च सन्ति तथापि पञ्जीकरणस्य समये केवलं उपयोक्तृनाम गुप्तशब्दं च पूर्यते, तथा च कार्यं केवलं कार्यान्वितं भवति गुप्तशब्दः एन्क्रिप्टेड् नास्ति तथा च अस्ति पर्याप्तं सुरक्षितं नास्ति अहं पुनः लेखं अद्यतनं करिष्यामि यत् सुरक्षितप्रवेशपञ्जीकरणविधिविषये लिखितुं शक्नोमि, तथैव प्रवेशानन्तरं व्यक्तिगतसूचनाः कथं सुधारयितुम्।

LoginAndRegister.vue: 1.1.

  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>

२)गृहम् ।vue

Home.vue इति मुख्यपृष्ठं यत् सफलप्रवेशानन्तरं कूर्दति ।

Home.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>

३)रूटरः

पृष्ठमार्गविन्यासविन्यासः, यदा मार्गः /, /login प्रवेशपृष्ठं, /home च गृहपृष्ठं भवति तदा प्रवेशपृष्ठं प्रति पुनर्निर्देशनं कुर्वन्तु ।

अनुक्रमणिका.ज्स्: .

  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

४)प्रवेशः ।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. }

५) प्रवेशपञ्जीकरणपृष्ठप्रदर्शनम्

हीरकरूपेण खण्डाः यादृच्छिकरूपेण व्यवस्थापिताः भवन्ति, आरम्भे ते एतादृशाः दृश्यन्ते ।

पश्चात् मया कतिपयानि अधिकानि हीरक-आकार-खण्डानि योजयित्वा तेषां स्थानानि वर्णाः च परिवर्तिताः अन्तिमः प्रभावः निम्नलिखितरूपेण अस्ति ।

2. springboot+mysql+mybatis परियोजनां रचयन्तु तथा च आँकडाधारेण सह सम्बद्धं कुर्वन्तु

केवलं पृष्ठ-अन्त-प्रकल्पं निर्मातुं तथा च आँकडाधारेण सह सम्बद्धं कर्तुं springboot, mysql, mybatis इत्येतयोः उपयोगं कुर्वन्तु, सन्दर्भः:

idea, spring boot+MySQL+MyBatis परियोजना जालपुटे आँकडाधारसारणीयाः सामग्रीं निर्माय प्रदर्शयति_idea जालपुटे-CSDN Blog इत्यत्र आँकडाधारं प्रदर्शयति

लेखस्य पूरकम् : १.

यदि भवान् प्रत्येकं एण्टिटी क्लास् निर्माय set इति लिखितुं मेथड् प्राप्तुं च कष्टं अनुभवति तर्हि pom.xml मध्ये निम्नलिखितनिर्भरताः योजयितुं शक्नोति ।

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

ततः सेट् लेखनं त्यक्त्वा मेथड्स् प्राप्तुं entity क्लास् मध्ये @Data एनोटेशनस्य उपयोगं कुर्वन्तु:

प्रक्रिया प्रायः समाना एव, परन्तु अस्मिन् समये मया निर्मितः दत्तांशः भिन्नः अस्ति मुख्यकारणं यत् उपयोक्तृसारणी विशेषताः दत्तांशः च परिवर्तितः (अन्तरं महत् नास्ति, सूपः च औषधं न परिवर्तयति):

समस्यायाः सम्मुखीभूय: maven आश्रयान् अवतरणं कुर्वन् अस्ति, परन्तु दीर्घकालं यावत् प्रतिक्रिया नास्ति

तथापि परियोजनायाः निर्माणकाले किमपि भ्रष्टं जातम् अस्मिन् समये अहं प्रथमवारं मया निर्मितम् आसीत् फलतः Maven इत्यस्य आरम्भस्य अनन्तरं विविधानि आश्रयाणि प्लग् च डाउनलोड् कुर्वन् आसीत् -ins, तथा च दीर्घकालं यावत् प्रतिक्रिया नासीत्:

समाधानं:

अहं सञ्चयं स्वच्छं कृत्वा विचारं पुनः आरब्धवान्, परन्तु तस्य अल्पः प्रभावः अभवत् ।

पश्चात् मया आविष्कृतं यत् एतत् भवितुं शक्नोति यतोहि Maven पूर्वनिर्धारितरूपेण विदेशीयस्य केन्द्रीयगोदामस्य उपयोगं करोति, अहं च विचारे maven प्लग-इन् इत्यस्य उपयोगं कुर्वन् आसीत्, अतः डाउनलोड् गतिः अतीव मन्दः भविष्यति

अतः अहं maven स्थानीयरूपेण डाउनलोड् कृतवान्, पाठ्यक्रमं पश्यन्तु:

Maven डाउनलोड् तथा संस्थापन पाठ्यक्रम (सुपर विस्तृत)_maven संस्थापन-CSDN ब्लॉग

पाठ्यक्रमानुसारं डाउनलोड् कुर्वन्तु तथा च maven संस्थापनमार्गे-&gt;conf-&gt;settings.xml इत्यस्मिन् चित्रस्य URL परिवर्तयन्तु तथापि, अहं प्रत्यक्षतया file-&gt;settings-&gt; इत्यस्मिन् विचारे सेट् न कृतवान् Build, Execution, Deployment-&gt;Build Tools-&gt; Maven इत्यस्मिन् Maven गृहमार्गं स्थानीयमार्गे परिवर्तयन्तु:

परिवर्तनानन्तरं डाउनलोड् वेगः खलु बहु द्रुततरः भवति ।

अन्तिमपृष्ठभागप्रकल्पस्य निर्देशिकासंरचना निम्नलिखितरूपेण अस्ति ।

3. लॉगिन् तथा पञ्जीकरणपृष्ठ-अन्त-कार्यं लिखन्तु

1. प्रवेश तर्कः

अग्रभागेन पारितां पूरितां सूचनां प्राप्नुवन्तु, यत्र उपयोक्तृनाम गुप्तशब्दः च सन्ति, तथा च दत्तांशकोशे उपयोक्तृनाम गुप्तशब्दाधारितं प्रश्नं कुर्वन्तु यदि उपयोक्ता लभ्यते तर्हि उपयोक्ता अस्ति इति अर्थः .प्रवेशः सफलः भवति, अन्यथा विफलः भवति ।

2. पञ्जीकरणतर्कः

अग्रभागेन पारितां पूरणसूचनाः प्राप्नुवन्तु, यत्र उपयोक्तृनाम गुप्तशब्दः च सन्ति इति निर्णयानन्तरं प्रथमं दत्तांशकोशे उपयोक्तृनामनुसारं उपयोक्तारं अन्वेष्टुम् विफलतां प्राप्नोति तथा च विफलतायाः सूचना प्रत्यागच्छति तर्हि उपयोक्तारः पञ्जीकरणं कृत्वा अभिलेखं सफलपञ्जीकरणानन्तरं प्रवेशखण्डं प्रदर्शितं भविष्यति तथा च पञ्जीकरणखण्डः गोपनीयः भविष्यति।

3. बैकएण्ड् कोड भाग

तेषु संसाधनं-&gt;mapper-&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>

जावा-&gt; कॉम.उदाहरण.डेमो-&gt; मैपर-&gt; यूजरमैपर.जावा:

  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. }

जावा-&gt; कॉम.उदाहरण.डेमो-&gt; सेवा-&gt;उपयोक्तृसेवा.जावा:

  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. }

जावा-&gt; कॉम.उदाहरण.डेमो-&gt; सेवा-&gt;उपयोक्तृसेवाइम्पल.जावा:

  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. }

जावा-&gt; कॉम.उदाहरण.डेमो-&gt; नियंत्रक-&gt; उपयोक्तृनियंत्रक.जावा:

  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 ब्राउजर् मध्ये , विकासकसाधनानाम् संजाले तस्य जाँचं कुर्वन्तु, पृष्ठभागे सफलतया संयोजयन्तु, तथा च परीक्षणनिवेशार्थं प्रवेशं कुर्वन् पञ्जीकरणं कुर्वन्तः भिन्नाः प्रॉम्प्ट् सूचनाः पॉप-अप-प्रोम्प्ट् च सफलतया प्रत्यागच्छन्तु:

सफलप्रवेशानन्तरं : १.

व्यक्तिगत प्रोफाइल

सः त्रिंशत् वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधार्थं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, तथा च सः स्थापिते मुक्तस्रोतक्षेत्रे बहु योगदानं कृतवान् भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं विकासकदस्तावेजीकरणस्थानकम्

मम सम्पर्कसूचना

मेल