idea创建springboot+vue项目搭建之旅(二)

本文详细记录了使用IDEA创建SpringBoot结合Vue的项目过程,采用vue-admin-template快速搭建,解决node-sass安装问题,配置前后端联调,适用于新手快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

idea创建springboot+vue项目搭建之旅(二)

(记录vue的项目搭建,自己记录用,搬运工)
对于项目基础的搭建,由于时间问题,采用了 vue-admin-template
的模板,链接里有详细的关于模板的使用和一些入门时VUE的配置构造。当然,用模板省了很多事。
这里使用的 vue-admin-template 模板
项目初,我们还未配置shiro、redis等,所以模板下载后可以直接运行,但后期加上后要修改的配置,我也会用我的理解方式记录在文章中,感谢模板的分享者。
还有一些对于项目配置的理解来自于下面这个老哥的文章还有伙伴的帮助,感谢!
vue完整项目配置

首先,项目下载下来就是一个可以正常启动的项目,基本解决了自己从头开发会踩的各种坑。那么说的在install之后会遇到的第一个坑,有的人会有有的没有,就是npm在安装的时候的node-sass安装失败,这个问题的解决方法有很多,百度一下,因为我发现每个人解决掉这个问题的方式都不太一样就自行查询解决吧
这里也提供一个解决方案,在npm run install结束之后,输入命令:

  • npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
    然后输入
  • npm install sass-loader node-sass -D
    执行结束后再次启动项目,就成功了!

然后我们可以看到一个完整的项目,我们对项目的改造也从这里开始。

  • 首先,我们需要配置链接后台的地址
    我们先找到目录下面的.env.development文件,下面的product则是代表着不同的环境下调用的地址,方便打包的时候使用,打开后可以看到里面的VUE_APP_BASE_API,将其修改为我们的后台地址就行啦
    在这里插入图片描述
    修改完成后,我们每个访问后台的链接都会加上这个基础的api地址,就能正常访问后台啦。

(又有需求来了…待续…)

引用\[1\]:在搭建Spring Boot项目时,可以参考一些教程来创建项目。在创建项目的过程中,可以逐步添加新的功能,并进行测试,以确保项目的完整性和准确性。在创建项目时,可以选择适合自己的Spring Boot版本,并根据需要添加相应的依赖。\[1\] 引用\[2\]:在项目搭建完成并正常运行后,可以开始配置项目的日志。可以创建一个logback-spring.xml的配置文件,并在其中指定日志存放的路径和打印的mapper位置。然后在application-dev.yml的配置文件中添加日志文件的位置,以便项目启动后能正常打印日志。在测试项目时,可能会遇到一些问题,例如与原项目的冲突。因此,测试的重要性不可忽视,通过测试可以发现并解决问题。\[2\] 引用\[3\]:接下来是配置数据库。首先需要在pom文件中添加所需的MySQL数据库依赖和阿里巴巴的Druid连接池依赖。然后在配置文件中配置数据库相关内容,可以参考一些教程来进行配置。此外,还需要配置MyBatis,可以创建一个MyBatis配置类,并在其中指定扫描路径和Mapper文件的位置。\[3\] 根据您的问题,如果您想在Spring Boot + Vue项目创建字典,可以按照以下步骤进行操作: 1. 在后端项目创建一个字典实体类,定义字典的属性和方法。 2. 创建一个字典的数据访问对象(DAO),用于与数据库进行交互,包括查询、插入、更新和删除字典数据。 3. 创建一个字典的服务类,用于处理字典的业务逻辑,例如查询字典数据、添加字典数据等。 4. 在前端项目创建一个字典管理页面,用于展示和操作字典数据。可以使用Vue框架来实现前端页面的开发。 5. 在前后端之间进行数据交互,可以使用RESTful API来进行数据传输。 通过以上步骤,您可以在Spring Boot + Vue项目中成功创建字典,并实现字典的管理和操作。 #### 引用[.reference_title] - *1* *2* *3* [idea创建springboot+vue项目搭建之旅(一)](https://blog.youkuaiyun.com/ZuoJiu_/article/details/104281687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值