山西省建设厅网站首页,广西网站制作,广告设计毕业设计,开发网站最后进行的步骤是什么项目笔记为项目总结笔记，若有错误欢迎指出哟~ 【项目专栏】 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（1）spring boot项目搭建、vue项目搭建、微信小程序项目搭建 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（2）后端跨域、登录模块、sp… 项目笔记为项目总结笔记，若有错误欢迎指出哟~ 【项目专栏】 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（1）spring boot项目搭建、vue项目搭建、微信小程序项目搭建 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台（2）后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格 java+vue+微信小程序项目】从零开始搭建——健身房管理平台 后端处理跨域1.处理方式（3种）2.跨域处理 登录模块1.界面设计2.接口设计 前端登录组件1.删除不需要的组件2.连接后端测试3.全局样式4.element ui5.引入iconfont6.引入axios7.登录组件（Login.vue）（1）模板部分（template标签）定义了组件的结构和布局（2）脚本部分（script标签）定义了组件的行为（3）样式部分（style标签）（4）测试登录组件 后端登录功能分层架构1.mysql数据库（1）新建数据库（2）user实体（3）创建user表（4）插入数据 2.数据访问层（1）UserDao.java添加@MapperScan注解 （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 {@Overridepublic 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, Authorization2.跨域处理
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 {@Overridepublic 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密码登录接口返回参数说明参数名解释idID 号username账号password密码phoneNumber电话号码role角色state状态flag标志登录是否成功前端登录组件
1.删除不需要的组件
app.vue
templatediv id="app"router-view //div
/templatestyle/stylerouter——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
templatedivbutton @click="click"test测试/button/div
/templatescriptimport 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 = false;new Vue({router,store,render: (h) =
