项目笔记为项目总结笔记,若有错误欢迎指出哟~
【项目专栏】
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(1)spring boot项目搭建、vue项目搭建、微信小程序项目搭建
【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(2)后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
java+vue+微信小程序项目】从零开始搭建——健身房管理平台
后端处理跨域
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 = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
1.重置默认样式:不同浏览器对于标签的默认样式会有一些差异,通过设置全局样式可以重置这些默认样式,从而使得页面在各个浏览器上表现一致。
2.统一页面外观:通过设置全局样式,可以确保整个应用的外观风格是一致的,提高用户体验和视觉美感。
3.方便管理和维护:将一些全局的样式设置在一个地方,方便统一管理和维护,减少重复代码,提高开发效率。
4.element ui
element ui组件:https://element.eleme.cn/#/zh-CN/component/layout
Element UI 在许多 Vue.js 项目中被广泛应用,它的简洁易用和丰富的功能使得开发者能够快速构建出美观、功能完善的界面。如果您正在开发基于 Vue.js 的桌面端应用,Element UI 可能是一个不错的选择。
1.引入element-ui(项目入口文件main.js)
//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
5.引入iconfont
阿里巴巴矢量图标库(Iconfont)是一个提供矢量图标资源的在线平台,用户可以在该平台上搜索、筛选并免费下载各种矢量图标,同时还支持将图标添加到自己的项目中。
iconfont:https://www.iconfont.cn/
1.选取需要的图标,添加到项目种
2.下载到本地
3.使用教程
4.使用步骤
4.1将解压后的文件夹重命名为font
复制粘贴到项目assets——>font
4.2引入iconfont
项目入口文件main.js中: