#vue 使用

首先在cmd中使用cd定位到前端位置，然后

npm i

安装依赖，接着使用

npm run dev

(应该可以修改)，接着就可以点击链接直接进去。

app.vue 是主要的页面，这个和vue路由有什么关系呢？前端难道就一个页面吗？

.vue文件包含三个部分：template ，script，style

home.vue 是路由吗？

home.vue 的角色：

home.vue` 是一个 Vue 组件，通常用作应用的主页或入口视图。

它本身并不是路由，而是路由目标之一。
路由的定义：

路由是指在应用中，根据 URL 的变化，动态地加载和显示不同的页面或组件。

在 Vue 中，路由通常通过 vue-router 包来实现。

package.json 这个是相当于yml文件，配置依赖以及启动项

问题：还是有不明白的配置，明明这个项目pom中并没有aspectjweaver，但是一直出错，然后我是用mvn clean install也是一直出错

前后端分离的优势

开发效率提升

并行开发：前端和后端可以同时开发，互不干扰，缩短项目周期。
独立进度：前端可以先根据接口文档开发，而后端专注于接口实现，减少等待时间。

技术选型自由

前端自由度：可选React、Vue、Angular等框架，使用最适合的技术。
后端灵活性：可选择Java、Python、Node.js等语言，满足不同需求。

维护与扩展便捷

模块化：前后端分离使得代码更模块化，维护和扩展更容易。
独立优化：前端和后端可以独立优化，互不影响。

API标准化

统一接口：使用RESTful API或GraphQL，接口更标准化，便于理解和使用。
可复用性：接口可被多个客户端调用，提高系统可复用性。

用户体验提升

流畅交互：前端可独立优化，实现单页应用，提升用户体验。
快速响应：前端处理UI逻辑，减少与后端的交互延迟。

架构清晰

责任明确：前端负责展示，后端处理数据，架构更清晰。
模块化架构：便于拆分成微服务，提升系统灵活性。

微服务支持

后端拆分：后端可拆分为多个微服务，提升系统扩展性。
API网关：统一管理微服务，方便前端调用。

部署灵活

分开部署：前端可部署在CDN，后端在云服务器，优化加载速度。
资源优化：分开部署可更好地优化资源使用。

安全性增强

后端专注：后端专注于数据安全，API权限控制更严格。
减少风险：前端只处理展示，降低被攻击风险。

多终端支持

统一接口：后端提供统一API，支持Web、移动端等多终端。
维护成本降低：后端接口统一，减少维护工作量。

测试与调试便捷

独立测试：前后端可独立测试，接口文档作为契约，减少错误。
高效调试：问题定位更明确，解决问题更快。

团队协作高效

并行开发：前后端团队并行开发，减少等待时间。
明确职责：职责分明，团队协作更高效。

前后端分离的一个重要优势就是可以复用别人的前端，只要 API 接口符合预期，你可以直接换上一个新的前端，而不需要改动后端。

如果你现在有一个基于 Thymeleaf 的 Spring Boot 项目，想把前端替换成 Vue 3，基本思路如下：

调整后端，提供 API 接口

Thymeleaf 主要是服务器端渲染（SSR），但 Vue 需要的是前端渲染（CSR），所以你要把 Thymeleaf 相关的代码移除，改为 提供 RESTful API，后端的调整点包括：

Controller 返回 JSON（使用 @RestController 代替 @Controller）。
前后端通信格式：Spring Boot 默认用 Jackson 处理 JSON，确保你的数据能正确返回 JSON 格式。

跨域问题（CORS）

：Vue 运行在不同端口（如

localhost:5173

），需要配置 Spring Boot 允许跨域请求：

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:5173") // 允许 Vue 访问
                        .allowedMethods("GET", "POST", "PUT", "DELETE");
            }
        };
    }
}

身份验证 & 会话管理：如果原项目用的是 Session 进行登录验证，前后端分离后更推荐用 JWT 或 Token 机制。

特性	Session	Token	JWT
存储位置	服务器端	客户端	客户端
服务器负担	高（需要存储会话信息）	低（无需存储会话信息）	低（无需存储会话信息）
适用场景	传统前后端紧耦合架构	前后端分离、分布式系统	前后端分离、微服务架构、分布式系统
扩展性	差（分布式系统中需要同步会话）	好（支持分布式系统）	好（支持分布式系统和微服务）
安全性	依赖于`Session ID`的安全性	依赖于`Token`的安全性	依赖于签名机制，安全性更高
用户信息存储	用户信息存储在服务器端	用户信息不存储在服务器端	用户信息可以存储在`JWT`的有效载荷中

2. 创建 Vue 3 前端项目

安装 Vue 3 开发环境

：

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

使用 axios 请求后端 API

：

npm install axios

在 Vue 组件中：

import axios from "axios";

axios.get("http://localhost:8080/api/data").then(response => {
    console.log(response.data);
});

路由管理：用 vue-router 处理前端路由，不再依赖 Spring Boot 的 @RequestMapping 进行页面跳转。

3. 构建 & 部署

如果你想把 Vue 前端和 Spring Boot 后端放在一起：

开发时：Vue 运行在 localhost:5173，后端运行在 localhost:8080，两者独立开发。
生产部署时

：
- 使用 npm run build 构建 Vue 静态文件，放到 Spring Boot 的 resources/static 目录下。
- 或者，前后端完全分开部署，使用 Nginx 部署 Vue，Spring Boot 作为后端 API 服务器。

4. 总结

后端保持不变，只是改为提供 REST API，去掉 Thymeleaf 相关的东西。
前端完全用 Vue 3 开发，通过 axios 访问后端 API。
前后端独立运行，开发效率更高。

如果你的 Spring Boot 后端本来就有 Controller 层，改造起来不会太复杂，关键是数据交互方式的调整。这样做后，你的前端可以随时换成 React、Svelte 或其他框架，而后端可以保持稳定不变。

vue笔记-20250302

#vue 使用

home.vue 是路由吗？

2. 创建 Vue 3 前端项目

3. 构建 & 部署

4. 总结