【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（2）后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格

项目笔记为项目总结笔记，若有错误欢迎指出哟~

【项目专栏】
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（1）spring boot项目搭建、vue项目搭建、微信小程序项目搭建
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（2）后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格

java+vue+微信小程序项目】从零开始搭建——健身房管理平台

后端处理跨域
- 1.处理方式（3种）
- 2.跨域处理
登录模块
- 1.界面设计
- 2.接口设计
前端登录组件
- 1.删除不需要的组件
- 2.连接后端测试
- 3.全局样式
- 4.element ui
- 5.引入iconfont
- 6.引入axios
- 7.登录组件（Login.vue）
- - （1）模板部分（template标签）定义了组件的结构和布局
  - （2）脚本部分（script标签）定义了组件的行为
  - （3）样式部分（style标签）
  - （4）测试登录组件
后端登录功能
- 分层架构
- 1.mysql数据库
- - （1）新建数据库
  - （2）user实体
  - （3）创建user表
  - （4）插入数据
- 2.数据访问层
- - （1）UserDao.java
  - （2）UserMapper.xml
  - （3）User.java
- 3.业务逻辑层
- - （1）LoginService.java
  - （2）LoginServiceImpl.java
- 4.表现层
- - （1）LoginController.java
前端修改登录组件
验证登录模块
知识点：springboot分层架构
工具：IDEA修改get、set、tostring方法快捷键修改
工具：vue代码风格
- 原本的代码风格
- 格式化后的代码风格（shift+alt+f）
- 步骤

后端处理跨域

1.处理方式（3种）

在 Spring Boot 中处理跨域请求有几种方式，下面是其中几种常用的方式：

1.使用 @CrossOrigin 注解：可以在控制器类或方法上使用 @CrossOrigin 注解来启用跨域支持。通过指定允许跨域的源地址、请求方法、头部信息等，可以实现对特定请求的跨域支持。示例代码如下：

@CrossOrigin(origins = "http://example.com", methods = RequestMethod.GET)
@RestController
public class MyController {
   
    // 控制器方法
}

2.自定义 Filter：可以编写一个自定义的 Filter，在其中添加响应头信息来实现跨域请求的支持。首先创建一个实现了 javax.servlet.Filter 接口的类，然后在 doFilter 方法中添加响应头信息。在 Spring Boot 中，可以通过配置类将该 Filter 注册到应用程序中。示例代码如下：

@Component
public class CorsFilter implements Filter {
   
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
   
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "http://example.com");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        chain.doFilter(request, response);
    }
}

3.全局配置跨域支持：可以通过在 Spring Boot 的配置文件中添加跨域相关的配置项来实现全局的跨域支持。在 application.properties 或 application.yml 文件中添加如下配置：

# application.properties
spring.webmvc.cors.allowed-origins=http://example.com
spring.webmvc.cors.allowed-methods=GET,POST,PUT,DELETE
spring.webmvc.cors.allowed-headers=Content-Type, Authorization

2.跨域处理

util——>WebConfig.java
在这里插入图片描述

package com.hui.util;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//全局配置类，配置跨域请求
@Configuration
public class WebConfig implements WebMvcConfigurer {
   

    @Override
    public void addCorsMappings(CorsRegistry registry) {
   
        registry
                //允许访问的路径
                .addMapping("/**")
                //配置请求来源
                .allowedOrigins("http://localhost:8080")
                //允许跨域访问的方法
                .allowedMethods("GET","POST","DELETE","PUT","OPTION")
                //允许携带参数
                .allowCredentials(true)
                //请求头
                //.allowedHeaders()
                //最大效应时间
                .maxAge(3600);

    }
}

登录模块

1.界面设计

在这里插入图片描述

2.接口设计

接口地址：localhost:9999/login
返回格式：json
请求方式：post

参数名	解释
username	账号
password	密码

登录接口返回参数说明

参数名	解释
id	ID 号
username	账号
password	密码
phoneNumber	电话号码
role	角色
state	状态
flag	标志登录是否成功

前端登录组件

1.删除不需要的组件

app.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>

</style>

router——>index.js

import Vue from "vue";
import VueRouter from "vue-router";
import TestView from "../views/TestView.vue";

Vue.use(VueRouter);

const routes = [
  {
   
    path: "/",
    name: "TestView",
    component: TestView,
  },

];

const router = new VueRouter({
   
  routes,
});

export default router;

2.连接后端测试

views——>TestView.vue

<template>
  <div>
    <button @click="click">test测试</button>
  </div>
</template>

<script>

import axios from 'axios';

export default {
     
  name: "TestView",
  components: {
     
    
  },
  methods: {
     
    click(){
     
      axios.get('http://localhost:9999/test').then((res)=>{
     
        console.log(res);
      }).catch((err)=>{
     
        console.log(err)
      })
    }
  }
};
</script>

核心代码讲解

click(){
    axios.get('http://localhost:9999/test').then((res)=>{
      console.log(res);
    }).catch((err)=>{
      console.log(err)
    })
}

这段代码是使用 JavaScript 编程语言编写的，其中使用了一些语法和函数库。

axios.get('http://localhost:9999/test')：这是使用 Axios 库发送 HTTP GET 请求的语法。Axios 是一个基于 Promise 的 HTTP 客户端，它提供了简洁的 API 来执行异步请求。在这里，我们使用 Axios 的 get() 方法发送一个 GET 请求到指定的 URL。
.then((res) => { console.log(res); })：这是 Promise 的 then() 方法的使用，用于注册成功的回调函数。当请求成功完成时，服务器的响应会作为参数传递给这个回调函数，并将其打印到控制台上。
.catch((err) => { console.log(err); })：这是 Promise 的 catch() 方法的使用，用于注册失败的回调函数。当请求过程中发生错误时，错误信息会作为参数传递给这个回调函数，并将其打印到控制台上。

在这里插入图片描述
测试成功

3.全局样式

1.创建文件global.css
assets——>css——>global.css

/* 全局式样 */
html,body,#app{
   
    height: 100%;
    margin: 0px;
    padding: 0px;
}

2.引入全局样式
项目入口文件main.js

import './assets/css/global.css'  // 添加全局样式

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/css/global.css'  // 添加全局样式

Vue.config.productionTip =