minhas informações de contato
Correspondência[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Aqui está uma implementação de projeto de vue3+springboot+mybatis+mysql, que simplesmente implementa as funções de login e registro de separação de front-end e back-end. As principais ferramentas são: idea, navicat.
Índice
1. Crie o projeto vue3 e a configuração inicial
2. Modifique a estrutura do projeto
1) Estrutura de diretório original
2) Estrutura de diretório modificada
Edite e escreva a página de registro de login
5) Exibição da página de registro de login
2. Crie o projeto springboot+mysql+mybatis e conecte-se ao banco de dados
3. Escreva funções de back-end de login e registro
3. Parte do código de back-end
Para criar um projeto, você pode consultar um dos meus artigos:
Crie um projeto vue3 personalizado com o blog IDEA_idea vue3-CSDN
Estrutura de diretório inicial após a criação:
Primeiro você precisa modificar a estrutura de diretórios original
ativospostar fotos
componentesComponentes intermediários, geralmente reutilizáveis
roteadoré a rota na qual os caminhos dos arquivos de todas as páginas principais são configurados
lojaGeralmente usado para gerenciamento de estado vuex, como armazenamento de tokens, etc.
VisualizaçõesCentro é a página principal
Aplicativo.vueÉ o componente raiz do aplicativo Vue.
principal.jsÉ o arquivo de entrada da aplicação, geralmente usado para introduzir dependências como vue e vue router.
Para implementar a função de login e registro, a estrutura de diretórios modificada é:
Crie LoginAndRegister.vue na pasta de componentes para implementar a página e funções de login e registro. Aqui, eu apenas crio um arquivo .vue para login e registro, no qual v-if é usado para determinar se os elementos do bloco de login e do bloco de registro são. renderização incluída, afetando assim sua exibição.
Configurações iniciais
v-if="loginShow"为true, v-if="registerShow"为false
Alterna verdadeiro e falso quando o botão é clicado para alternar.
Após o registro bem-sucedido, volte para a seção de login.
Por uma questão de comodidade e hábitos do usuário, embora os atributos do usuário incluam id, nome de usuário, senha, telefone e sexo, apenas o nome de usuário e a senha são preenchidos durante o registro, e a função é simplesmente implementada. A senha não é criptografada e é. não é seguro o suficiente. Atualizarei o artigo novamente para escrever sobre um método de login e registro mais seguro, bem como como preencher informações pessoais após o 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 é a página principal que acessa após o login bem-sucedido.
Página inicial.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>
Configuração de roteamento de página, redireciona para a página de login quando o caminho é /, /login é a página de login e /home é a página inicial.
índice.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
Design CSS para página de registro de 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;
- }
Os blocos em forma de diamante estão dispostos aleatoriamente e inicialmente têm a seguinte aparência:
Posteriormente, adicionei mais alguns blocos em forma de diamante e mudei suas posições e cores. O efeito final é o seguinte:
Use springboot, mysql, mybatis para simplesmente construir um projeto back-end e conectar-se ao banco de dados, referência:
Suplemento ao artigo:
Se você achar difícil escrever métodos set e get sempre que criar uma classe de entidade, poderá adicionar as seguintes dependências em pom.xml:
- <dependency>
- <groupId>org.projectlombok</groupId>
- <artifactId>lombok</artifactId>
- </dependency>
Em seguida, use a anotação @Data na classe de entidade para omitir a gravação dos métodos set e get:
O processo é quase o mesmo, mas os dados que criei desta vez são diferentes. O principal motivo é que os atributos e dados da tabela do usuário mudaram (a diferença não é grande, então a sopa não altera o medicamento):
Encontrou um problema: o maven continua baixando dependências, mas não há resposta por muito tempo
No entanto, algo deu errado durante a criação do projeto. Desta vez, usei um novo computador para criar o projeto de back-end. Como resultado, depois que o Maven foi iniciado, ele continuou baixando várias dependências e plugando. -ins, e não houve resposta por muito tempo:
Solução:
Limpei o cache e reiniciei a ideia, mas surtiu pouco efeito.
Mais tarde, descobri que pode ser porque o Maven usa um armazém central estrangeiro por padrão, e eu estava usando a ideia do plug-in maven, então a velocidade de download seria muito lenta.
Então baixei o maven localmente, consulte o tutorial:
Tutorial de download e instalação do Maven (super detalhado)_maven Installation-CSDN blog
Baixe conforme o tutorial e modifique a URL da imagem no caminho de instalação do maven->conf->settings.xml Porém, não configurei as variáveis de ambiente, configurei diretamente na ideia em arquivo->settings->. Build, Execution, Deployment->Build Tools-> No Maven, altere o caminho inicial do Maven para o caminho local:
Após a modificação, a velocidade de download é realmente muito mais rápida.
A estrutura de diretórios do projeto de back-end final é a seguinte:
Obtenha as informações preenchidas passadas pelo front end, incluindo nome de usuário e senha, e consulte com base no nome de usuário e senha no banco de dados. Se o usuário for encontrado, significa que o usuário existe e o nome de usuário e a senha correspondem. . O login foi bem-sucedido, caso contrário, falhará.
Obtenha as informações de preenchimento passadas pelo front end, incluindo nome de usuário e senha. Após julgar que as informações de entrada não estão vazias, primeiro procure o usuário de acordo com o nome de usuário no banco de dados. falha e as informações de falha são retornadas. Se não for encontrado, os usuários podem registrar e inserir o registro no banco de dados. Após o registro bem-sucedido, o bloco de login será exibido e o bloco de registro será oculto.
Entre eles recursos->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, "服务器异常");
- // }
- }
- }
- }
- }
Os front-ends e back-ends são executados e iniciados separadamente. Aqui alterei a porta de back-end para 8081 em application.properties, e o front-end é o padrão 8080. Portanto, depois que os projetos de front-end e back-end forem executados com sucesso, digite http:/. /localhost:8080 no navegador, verifique-o na rede das ferramentas do desenvolvedor, conecte-se com sucesso ao back-end e, ao fazer login e registrar-se para entrada de teste, diferentes informações de prompt e prompts pop-up podem ser retornados com sucesso:
Após login bem-sucedido: