Technology sharing

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

Hic est propositum exsequendum vue3+springboot+mybatis+mysql, quod solum ad functiones login et adnotationes ante-finitionis et posterioris separationis perficit

Tabula contentorum

1. crea vue3 project ac initialis configuratione

Create vue3 project

2. Mutare project structuram

I) Originale structuram Directory

II) Modified Directory compages

Recensere et scribe in pagina adnotatione login

1）LoginAndRegister.vue

2）Home.vue

3）iter

4）Login.css

V) Login adnotatione pagina ostentationem

2. Create springboot+mysql+mybatis project et coniungere ad database

3. Write login et adnotatione tergum-finis munera

1. Login logica

2. Adnotatione logica

3. Backend codice partem

4. Curre ad project

---

1. crea vue3 project ac initialis configuratione

1. crea vue3 project

Ad consilium creare potes unum ex articulis meis referre:

Facere consuetudinem vue3 exertus cum IDEA_idea vue3-CSDN blog

Coepi directorium structurae post creationem;

2. Mutare project structuram

Primum opus est originale directorium structuram mutare

I) Originale structuram Directory

bonorumpost imaginibus

componentsMedium, plerumque reusable

iterest via qua tabella semitae omnium paginarum principalium configurantur

copiaVulgo ponitur pro vuex publica administratione, ut signa accommoda, etc.

viewsCentrum est principalis pagina

App.vueRadix est pars Vue applicationis.

main.jsEst fasciculus vestibuli applicationis, plerumque clientelas introducere ut vue et vue iter itineris.

II) Modified Directory compages

Ad munus login et adnotationem deducendi, structura directorii mutatio est:

3. scribe login adnotatione pagina

1）LoginAndRegister.vue

Create LoginAndRegister.vue sub elementis folder ad efficiendum paginae adnotationes et functiones login. Hic, ego tantum crea tabellam .vue pro login et adnotatione, in qua v-si adhibetur, utrum clausus login et adnotatione clausus includatur. .

Coepi occasus

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

Toggles verum et falsum est cum puga pyga ut toggle premetur.

Post prospere adnotatione, ad sectionem login transibit.

Commoditatis causa et habitus usoris, quamvis attributa usoris id, username, password, phone et genus includunt, usoris tantum et tesserae in adnotatione insunt, et munus simpliciter impletur non satis secure. Articulum denuo renovabo ut de tutiore login et adnotatione methodo scribatur, itemque quomodo notitias personales emendare post colligationem in.

LoginAndRegister.vue:

<template>
  <div class="container">
    <div class="login-box" v-if="loginShow">
<!--      菱形群-->
      <div class="decoration1 decoration"></div>
      <div class="decoration2 decoration"></div>
      <div class="decoration3 decoration"></div>
      <div class="decoration4 decoration"></div>
      <div class="decoration5 decoration"></div>
      <div class="decoration decoration4 decoration6"></div>
      <div class="decoration decoration7 decoration2"></div>
      <div class="decoration decoration8 decoration3"></div>
      <div class="login-title">
        <h1>Login</h1>
      </div>
      <div class="login-part">
        <input class="login-input" v-model="username" placeholder="Username" />
        <input class="login-input" type="password" v-model="password" placeholder="Password" />
        <button class="login-button" @click="login">Login</button>
        <div>
          还未注册？点击<a class="change-link" @click="changeToRegister">这里</a>注册
        </div>
      </div>
    </div>
    <div class="login-box" v-if="registerShow">
      <!--      菱形群-->
      <div class="decoration1 decoration"></div>
      <div class="decoration2 decoration"></div>
      <div class="decoration3 decoration"></div>
      <div class="decoration4 decoration"></div>
      <div class="decoration5 decoration"></div>
      <div class="decoration decoration4 decoration6"></div>
      <div class="decoration decoration7 decoration2"></div>
      <div class="decoration decoration8 decoration3"></div>
      <div class="login-title">
        <h1>Register</h1>
      </div>
      <div class="login-part">
        <input class="login-input" v-model="username" placeholder="Username" />
        <input class="login-input" type="password" v-model="password" placeholder="Password" />
        <button class="login-button" @click="register">Register</button>
        <span class="change-link" @click="changeToLogin">返回登录</span>
      </div>
    </div>
<!--    <div class="decoration decoration1"></div>-->
<!--    <div class="decoration decoration2"></div>-->
<!--    <div class="decoration decoration3"></div>-->
<!--    <div class="decoration decoration4"></div>-->
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter
 
import '../style/Login.css' // 导入css
export default {
  name: 'LoginVue',
  setup () {
    const username = ref('')
    const password = ref('')
    const phone = ref('')
    const loginShow = ref(true)
    const registerShow = ref(false)
    const router = useRouter()
 
    const changeToRegister = async () => {
      loginShow.value = false
      registerShow.value = true
    }
 
    const changeToLogin = async () => {
      loginShow.value = true
      registerShow.value = false
    }
 
    const login = async () => {
      console.log('Login with:', username.value, password.value)
      try {
        const formData = new FormData()
        formData.append('username', username.value)
        formData.append('password', password.value)
        const response = await fetch('http://localhost:8081/api/user/login', {
          method: 'POST',
          body: formData
        })
        const data = await response.json()
        if (response.ok) {
          console.log('Link success', data)
          if (data.code === 200) {
            // 登录成功
            alert('登录成功！')
            await router.push('/home')
          } else {
            alert(data.msg)
          }
        } else {
          console.error('Link failed', data)
        }
      } catch (error) {
        console.error('Error login', error)
      }
    }
 
    const register = async () => {
      console.log('Register with:', username.value, password.value)
      try {
        const formData = new FormData()
        formData.append('username', username.value)
        formData.append('password', password.value)
        const response = await fetch('http://localhost:8081/api/user/register', {
          method: 'POST',
          body: formData
        })
        const data = await response.json()
        if (response.ok) {
          if (data.code === 200) {
            console.log('Register success', data)
            alert('注册成功！')
            await changeToLogin()
          } else {
            console.log('Register failed', data)
            alert(data.msg)
          }
        } else {
          console.error('Register failed', data)
        }
      } catch (error) {
        console.error('Error during register', error)
      }
    }
 
    return { username, password, phone, login, loginShow, registerShow, changeToRegister, register, changeToLogin }
  }
}
</script>
 
<style>
 
</style>

2）Home.vue

Home.vue est pagina principalis quae salit cum prospere login.

Home.vue:

<template>
首页<br><br>
  <button class="login-button" @click="signOut">退出登录</button>
</template>
 
<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'HomeVue',
  setup () {
    const router = useRouter()
    const signOut = async () => {
      await router.push('/')
    }
    return { signOut }
  }
}
</script>
 
<style scoped>
 
</style>

3）iter

Pagina fusa configurationem, ad paginam login redigere cum semita /, /login est pagina login est, et /domi est pagina protocollum.

index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/LoginAndRegister.vue'
import Home from '../views/Home.vue'
 
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

4）Login.css

CSS design pro pagina adnotatione login.

Login.css:

*{
    margin: 0;
    padding: 0;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.login-box{
    background-color: white;
    padding: 40px 100px;
    border-radius: 8px;
    box-shadow: 0 0 5px 1px gainsboro;
    position: relative;
}
.login-part{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
}
.login-input{
    width: 250px;
    height: 30px;
    border-radius: 8px;
}
.login-button{
    height: 40px;
    border-radius: 8px;
    background-color: #2c3e50;
    color: white;
    transition: 0.5s;
}
.login-button:hover{
    background-color: darkcyan;
    font-size: 15px;
    transition: 0.5s;
}
.login-button:active{
    background-color: darkslateblue;
}
.change-link{
    color: #00BFFF;
    text-decoration: underline;
}
.change-link:hover{
    color: cornflowerblue;
}
 
.decoration {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(to left, #FDF5E6, #96CDCD );
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: 1;
}
.decoration1 {
    top: 150px;
    left: -210px;
}
.decoration2 {
    top: 20px;
    right: -20px;
    width: 100px; /* 第二个菱形的大小 */
    height: 100px;
    background: linear-gradient(to right, #FFF5EE, #E6E6FA);
}
.decoration3 {
    top: 50px;
    right: -180px;
    width: 200px; /* 第三个菱形的大小 */
    height: 200px;
    background: linear-gradient(to right, #7FFFD4, cadetblue);
}
.decoration4 {
    top: 200px;
    right: -200px;
    width: 500px; /* 第三个菱形的大小 */
    height: 500px;
    z-index: -1;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(to right, #FFFACD, #00BFFF);
}
.decoration5 {
    top: -100px;
    right: 200px;
    width: 400px; /* 第三个菱形的大小 */
    height: 400px;
    z-index: -1;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(to right, #AFEEEE, #00BFFF);
}
.decoration6 {
    top: 10px;
    right: -680px;
}
 
.decoration7 {
    top: -170px;
    right: -500px;
}
 
.decoration8 {
    top: -140px;
    right: -655px;
}

V) Login adnotatione pagina ostentationem

Caudices adamantini passim dispositi sunt, et initio hoc modo apparent;

Postea paucas alias adamantinas caudices addidi et positiones et colores mutavi.

2. Create springboot+mysql+mybatis project et coniungere ad database

Utere fonticulis, mysql, mybatis ut simpliciter aedificare inceptum retro-finem et coniungere cum datorum relatione:

idea, vere tabernus+MySQL+MyBatis project creat et ostendit contenta mensae database in interreti pagina_idea database in pagina interretiali CSDN ostentat.

Supplementum ad articulum:

Si molestum inveneris scribendi rationem ponere et quotiescumque genus entitatis creas, sequentes clientelas in pom.xml addere potes:

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

Deinde utere @Data annotatione in genere entitatis, ut omittas scripto modos et pones;

Processus idem fere est, sed notitia me hoc tempore dissimile est.

Difficultas incidit: maven clientes servat downloading, sed responsum non est per longum tempus

Aliquid tamen erravit dum inceptum creando. Hoc tempore novo computatro usus sum ut consilium ultimi crearet. Primum illud aedificavi -ius, nec fuit diu responsum;

Solutio:

Latibulum purgavi et ideam relevi, sed parum momenti erat.

Postea deprehensus est eo quod Maven CELLA centrali extraneo utitur defalta, et machinali obturaculum in idea usus sum, celeritas download adeo tardissima esset.

Ita maven localiter posui, ad doceo refero;

Maven download et institutionem doceo (super detailed) _maven institutionem-CSDN blog

Download secundum tutelam ac domicilium imaginis in machina institutionis path->conf->sectae.xml Aedificare, Executio, Instruere->Aedificare Instrumenta-> In Maven, viam mutare Maven domum ad viam localem:

Post modificationem celeritas download multo velocior est.

Directorium structura finalis propositi backendi haec est:

3. Write login et adnotatione tergum-finis munera

1. Login logica

Repletum in informationes quas transeuntes ante finem obtine, inter nomen et tesseram usoris, et quaesitum ex nomine et tessera in datorum usore Login succedit, alioquin deficit.

2. Adnotatione logica

Informatio impletionem consecuta a fine anteriore, inter nomen et tesseram usoris. Postquam input informationem vacuam non esse iudicavi, primum quaesitum utentis secundum nomen usoris in database Defectus et defectus informationes redditur. Si non inveni, Users subcriptio et recordum in datorum inserere.

3. Backend codice partem

Inter eas facultates->mapper->UserMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
 
<mapper namespace="com.example.demo.mapper.UserMapper" >
    <resultMap id="result" type="com.example.demo.entity.User">
        <result property="id" column="id" />
        <result property="username" column="username" />
        <result property="password" column="password" />
        <result property="phone" column="phone" />
        <result property="gender" column="gender"/>
    </resultMap>
 
    <!--    通过用户名和密码查找对应用户，用于登录-->
    <select id="findUserByNameAndPwd" resultMap="result" parameterType="User">
        select * from user
        where username = #{username}
        and password = #{password}
    </select>
 
 
    <!--    通过用户名查找对应用户，用于注册检验用户名是否已存在-->
    <select id="findUserByName" resultMap="result" parameterType="User">
        select * from user
        where username = #{username}
    </select>
 
    <!--    添加用户-->
    <insert id="addUser" parameterType="User">
        insert into user (username, password)
        values ( #{username}, #{password} )
    </insert>
 
</mapper>

java->com.example.demo->mapper->UserMapper.java:

package com.example.demo.mapper;
 
import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;
 
@Mapper
public interface UserMapper {
    // 通过用户名和密码查找对应用户
    public User findUserByNameAndPwd(User user);
    // 通过用户名查找用户
    public User findUserByName(User user);
    // 添加用户
    public void addUser(User user);
}

java->com.example.demo->service->UserService.java:

package com.example.demo.service;
 
import com.example.demo.entity.User;
 
public interface UserService {
    // 通过用户名和密码查找对应id
    public User findUserByNameAndPwd(User user);
    // 通过用户名查找用户
    public User findUserByName(User user);
//     添加用户
    public void addUser(User user);
}

java->com.example.demo->service->UserServiceImpl.java:

package com.example.demo.service;
 
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;
 
@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;
 
    // 通过用户名和密码查找对应id
    @Resource
    public User findUserByNameAndPwd(User user){
        return userMapper.findUserByNameAndPwd(user);
    }
 
    // 通过用户名查找用户
    @Resource
    public User findUserByName(User user){
        return userMapper.findUserByName(user);
    }
 
//     添加用户
    @Resource
    public void addUser(User user){
        userMapper.addUser(user);
    }
}

java->com.example.demo->controller->UserController.java:

package com.example.demo.controller;
 
 
import com.example.demo.entity.User;
import com.example.demo.result.Result;
import com.example.demo.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.*;
 
 
@RestController
@RequestMapping("/api/user")
public class UserController {
    @Resource
    UserService userService;
 
    // 登录
    @CrossOrigin
    @PostMapping(value = "/login")
    public Result login(@ModelAttribute("user") User user){
        String username=user.getUsername();
        String password=user.getPassword();
        System.out.println("Login received username: " + username);
        System.out.println("Login received password: " + password);
        User userCheck = new User();
        userCheck.setUsername(username);
        userCheck.setPassword(password);
        System.out.println(userCheck.getUsername() + " " + userCheck.getPassword());
        try{
            User findUser = userService.findUserByNameAndPwd(userCheck);
            if(findUser != null){
                return Result.success(findUser);
            }else {
                return Result.failure(401,"用户名或密码错误");
            }
        }catch (Exception e){
            return Result.failure(500,"服务器异常");
        }
    }
 
    // 注册
    @CrossOrigin
    @PostMapping(value = "/register")
    public Result register(@ModelAttribute("user") User user){
//        String username = "222";
//        String password = "222";
        User userCheck = new User();
        userCheck.setUsername(user.getUsername());
        userCheck.setPassword(user.getPassword());
        if(userCheck.getUsername() == null || userCheck.getUsername().isEmpty() || userCheck.getPassword() == null || userCheck.getPassword().isEmpty()){
            System.out.println("用户名或密码不可为空");
            return Result.failure(201,"用户名和密码不可为空");
        }else {
            System.out.println("Register received username: " + userCheck.getUsername());
            System.out.println("Register received password: " + userCheck.getPassword());
            try{
                // 先在数据库中查找是否已有用户名相同的用户
                User findUser = userService.findUserByName(userCheck);
                if(findUser != null){
                    // 用户名已存在
                    return Result.failure(202,"用户名已存在!");
                }
                else {
                    // 新用户，数据库添加记录
                    userService.addUser(userCheck);
                    return Result.success(userCheck);
                }
            }catch (Exception e) {
                return Result.failure(500, "服务器异常");
//            }
            }
        }
    }
}

4. Curre ad project

Fines anteriores et posteriores currunt et seorsim incipiunt. Hic ego portum extremum mutavi ad 8081 in application.properties, et finis anterior est defalta 8080. Finis igitur anterioris et posterioris incepta feliciter currit, intra http:/ /localhost:8080 in navigatro, eam in retis electronicarum electronicarum reprime, feliciter ad tergum coniunge, et feliciter alia prompta informationes reddere et pop-up suggerit cum colligationem in et perscriptum pro input:

Post felix login: