informasi kontak saya
Surat[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Berikut adalah implementasi proyek vue3+springboot+mybatis+mysql, yang hanya mengimplementasikan fungsi login dan registrasi pemisahan front-end dan back-end. Alat utamanya adalah: idea, navicat
Daftar isi
1. Buat proyek vue3 dan konfigurasi awal
2. Memodifikasi struktur proyek
2) Struktur direktori yang dimodifikasi
Edit dan tulis halaman pendaftaran login
5) Tampilan halaman registrasi login
2. Buat proyek springboot+mysql+mybatis dan sambungkan ke database
3. Tulis fungsi back-end login dan registrasi
Untuk membuat proyek, Anda dapat merujuk ke salah satu artikel saya:
Buat proyek vue3 khusus dengan blog IDEA_idea vue3-CSDN
Struktur direktori awal setelah pembuatan:
Pertama, Anda perlu mengubah struktur direktori asli
aktivamemposting gambar
komponenKomponen perantara, biasanya dapat digunakan kembali
ruteradalah rute di mana jalur file dari semua halaman utama dikonfigurasi
tokoUmumnya digunakan untuk manajemen status vuex, seperti menyimpan token, dll.
pandanganTengah adalah halaman utama
Aplikasi.vueIni adalah komponen root dari aplikasi Vue.
utama.jsIni adalah file entri aplikasi, biasanya digunakan untuk memperkenalkan dependensi seperti vue dan vue router.
Untuk mengimplementasikan fungsi login dan registrasi, struktur direktori yang dimodifikasi adalah:
Buat LoginAndRegister.vue di bawah folder komponen untuk mengimplementasikan halaman dan fungsi registrasi login. Di sini, saya hanya membuat file .vue untuk login dan registrasi, di mana v-if digunakan untuk menentukan apakah elemen blok login dan blok registrasi disertakan. . rendering, sehingga memengaruhi tampilannya.
Pengaturan awal
v-if="loginShow"为true, v-if="registerShow"为false
Beralih benar dan salah ketika tombol diklik untuk beralih.
Setelah registrasi berhasil, beralih kembali ke bagian login.
Demi kenyamanan dan kebiasaan pengguna, meskipun atribut pengguna meliputi id, nama pengguna, kata sandi, nomor telepon, dan jenis kelamin, hanya nama pengguna dan kata sandi yang diisi saat pendaftaran, dan fungsinya diterapkan secara sederhana tidak cukup aman. Saya akan memperbarui artikel lagi untuk menulis tentang metode login dan registrasi yang lebih aman, serta cara meningkatkan informasi pribadi setelah login.
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>
Home.vue adalah halaman utama yang dituju setelah login berhasil.
Beranda.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>
Konfigurasi perutean halaman, alihkan ke halaman login ketika jalurnya adalah /, /login adalah halaman login, dan /home adalah halaman beranda.
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
Desain CSS untuk halaman registrasi 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;
- }
Balok-balok berbentuk berlian tersebut disusun secara acak, dan awalnya terlihat seperti ini:
Kemudian, saya menambahkan beberapa blok lagi berbentuk berlian dan mengubah posisi dan warnanya. Efek akhirnya adalah sebagai berikut:
Gunakan springboot, mysql, mybatis untuk sekadar membangun proyek back-end dan terhubung ke database, referensi:
Tambahan artikel:
Jika Anda merasa kesulitan untuk menulis metode set dan get setiap kali Anda membuat kelas entitas, Anda dapat menambahkan dependensi berikut di pom.xml:
- <dependency>
- <groupId>org.projectlombok</groupId>
- <artifactId>lombok</artifactId>
- </dependency>
Kemudian gunakan anotasi @Data di kelas entitas untuk menghilangkan penulisan metode set dan get:
Prosesnya hampir sama, namun data yang saya buat kali ini berbeda. Alasan utamanya adalah atribut dan data tabel pengguna telah berubah (perbedaannya tidak besar, dan supnya tidak mengubah obatnya):
Mengalami masalah: maven terus mengunduh dependensi, tetapi tidak ada respons untuk waktu yang lama
Namun, ada yang tidak beres saat membuat proyek. Kali ini saya menggunakan komputer baru untuk membuat proyek back-end. Ini adalah pertama kalinya saya membuatnya. Akibatnya, setelah Maven dimulai, ia terus mengunduh berbagai dependensi dan plug -ins, dan tidak ada jawaban untuk waktu yang lama:
Larutan:
Saya membersihkan cache dan memulai kembali ide tersebut, tetapi pengaruhnya kecil.
Belakangan saya mengetahui bahwa itu mungkin karena Maven menggunakan gudang pusat asing secara default, dan saya menggunakan ide plug-in maven, sehingga kecepatan unduh akan sangat lambat.
Jadi saya mengunduh maven secara lokal, lihat tutorialnya:
Tutorial pengunduhan dan instalasi Maven (super detail)_instalasi maven-blog CSDN
Unduh sesuai tutorial dan ubah URL gambar di jalur instalasi maven->conf->settings.xml. Namun, saya tidak mengkonfigurasi variabel lingkungan. Saya langsung mengaturnya dalam ide di file->settings-> Build, Execution, Deployment->Build Tools-> Di Maven, ubah jalur beranda Maven ke jalur lokal:
Setelah dimodifikasi, kecepatan download memang jauh lebih cepat.
Struktur direktori proyek backend akhir adalah sebagai berikut:
Dapatkan informasi lengkap yang diteruskan oleh front end, termasuk nama pengguna dan kata sandi, dan kueri berdasarkan nama pengguna dan kata sandi dalam database. Jika pengguna ditemukan, berarti pengguna tersebut ada dan nama pengguna serta kata sandinya sesuai .Login berhasil, jika tidak maka gagal.
Mendapatkan informasi pengisian yang diteruskan oleh front end, termasuk nama pengguna dan kata sandi. Setelah menilai bahwa informasi yang dimasukkan tidak kosong, cari dulu pengguna sesuai dengan nama pengguna di database gagal dan informasi kegagalan dikembalikan. Jika tidak ditemukan, Pengguna dapat mendaftar dan memasukkan catatan ke dalam database. Setelah registrasi berhasil, blok login akan ditampilkan dan blok registrasi akan disembunyikan.
Diantaranya sumber daya->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->layanan->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->layanan->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, "服务器异常");
- // }
- }
- }
- }
- }
Ujung depan dan belakang dijalankan dan dimulai secara terpisah. Di sini saya mengubah port ujung belakang menjadi 8081 di properti aplikasi, dan ujung depan adalah default 8080. Jadi setelah proyek ujung depan dan belakang berhasil dijalankan, masukkan http:/ /localhost:8080 di browser. , periksa di jaringan alat pengembang, berhasil terhubung ke backend, dan berhasil mengembalikan informasi prompt dan pop-up yang berbeda saat masuk dan mendaftar untuk input pengujian:
Setelah berhasil login: