VUE+TypeScript系列(二)-----在IDEA中配置node以及TypeScript

打开IDEA,设置中找到如下页面:

在Node和TypeScript两框中配置之前配好环境的路径,如下图所示:

 

配置好后,选择应用确定。

测试:

新建文件hello.ts

 输入以下代码

function hello(str) {
    return 'Hello, '+ str
}

let user = 'hhh'

console.log(hello(user))

 在工具栏上面会有一个小锤子

 点击一下即可出现名字为hello.js的文件,即完成了ts向js的转换。目前大多数浏览器还不支持ts,所以转化成js,才能更好的展示效果。

### 如何将 `vue-element-plus-admin` 与 Java 后端集成 #### 一、项目概述 `vue-element-plus-admin` 是一套基于 Vue3、TypeScript、Vite 和 Element Plus 的现代化后台管理系统框架[^1]。该框架提供了丰富的组件库和支持多种功能模块,适用于快速构建企业级应用。 对于希望将其与 Java 技术栈相结合的企业来说,可以利用 Spring Boot 或其他流行的 Java Web 框架作为服务器端支持,实现前后端分离架构下的高效协作开发模式。 #### 、环境准备 为了顺利完成集成工作,在开始之前需确认已安装并配置好如下工具: - Node.js (推荐版本 >= 14.x) - npm / yarn - JDK (建议采用 LTS 版本如8或17) - Maven 或 Gradle 构建工具 - IDE(IntelliJ IDEA 推荐) #### 三、创建 Java API Server 使用 Spring Initializr 创建一个新的 Spring Boot 应用程序,并添加必要的依赖项,比如 Spring Web MVC、Spring Security 等服务端所需的功能包。这一步骤可以通过访问 [start.spring.io](https://start.spring.io/) 来完成初始化设置过程。 ```java @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` 定义 RESTful APIs 控制器用于处理来自前端请求的数据交互逻辑。例如提供用户认证接口 `/api/auth/login` 及资源获取路径 `/api/resource/{id}`。 ```java @RestController @RequestMapping("/api") public class ApiController { @PostMapping("/auth/login") public ResponseEntity<?> login(@RequestBody LoginRequest request){ // 实现登录验证业务... return ResponseEntity.ok().build(); } @GetMapping("/resource/{id}") public Resource getResourceById(@PathVariable Long id){ // 返回指定ID对应的资源对象实例 return resourceService.findById(id).orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND)); } } ``` #### 四、调整 Frontend 设置以便连接到 Backend Service 修改 `.env.development.local` 文件中的 VITE_API_BASE_URL 参数指向本地运行的服务地址;如果是生产环境中,则应该通过 CI/CD 流程自动注入正确的 URL 地址。 ```bash # .env.development.local VITE_API_BASE_URL=http://localhost:8080/api/ ``` 在 src/settings.ts 中开启代理选项 proxyTable ,使得开发期间可以直接向目标主机发起跨域请求而无需额外配置 CORS 头信息。 ```typescript // settings.ts export default { title: 'Vue Element Admin', tagsView: true, fixedHeader: false, sidebarLogo: true, devServer: { port: 9527, open: true, overlay: { warnings: false, errors: true }, proxy: { '/api': { target: process.env.VITE_API_BASE_URL!, changeOrigin: true, pathRewrite: {'^/api' : ''}, }, }, }, }; ``` 最后,在 axios 请求拦截器中加入 token 认证机制,确保每次发送 HTTP 请求时都能携带有效的身份凭证给后端校验权限合法性。 ```javascript import axios from 'axios'; import store from '@/store'; const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL as string, }); service.interceptors.request.use( config => { const accessToken = store.getters['user/token']; if (accessToken) { config.headers.Authorization = `Bearer ${accessToken}`; } return config; }, error => Promise.reject(error), ); export default service; ``` 以上就是关于如何将 `vue-element-plus-admin` 与 Java 后端进行集成的最佳实践方法[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值