怎么搭建vue+springboot项目

这篇文章主要讲解了“怎么搭建vue+springboot项目”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么搭建vue+springboot项目”吧！idea： 编写后端springboot代码hbuilderx或VSCode编写vue代码navicat或者dbeaver 编写创建数据库表在搭建之前，首先你需要安装nodeJs，具体如何安装就不多赘述，百度即可。win+R键唤出弹框输入cmd，进入控制台界面。然后，命令行切换到想创建项目的路径再使用命令创建项目然后就创建好了，找到创建项目的路径，cmd命令行，看package.json是dev还是serve此时的package.json文件内容这里给大家推荐第二种方式创建使用cmd命令行会打开一个ui界面，跟着ui提示操作就行打开cmd提示的网页地址：我的是http://localhost:800然后一步步操作：ps：如果提示不是内部命令信息提示，就需要安装vue组件
命令行输入： npm install vue更具体的百度搜索操作即可在正式开始运行之前先梳理一下创建vue项目需要什么在按照我刚刚的方式创建完vue项目后，（如有勾选安装router的情况）便已经可以通过npm run serve直接运行项目了，（只是有前端部分）；初始它会有一个HelloWorld.vue的组件界面。一运行便能够看到该页面的内容。但是单单有这些是不够的。要制作一个功能齐全的vue项目，最少需要安装这几项：vue-router :页面跳转和传参

一个UI框架组件：根据你需要制作电脑端还是手机端项目去搜索vue ui框架。
一般都能够搜索到比较常用的vue ui框架。这些ui框架都会有文档，文档内部有如何安装
的npm insta免费云主机域名ll 命令。
本次的ui框架为elementUi

axios: 目前常用的与后端数据交互的组件，因为我们是vue+springboot项目，为前后端
分离的项目，需要用它来连接前后端那么，通过梳理我们便清楚了如何往下去制作。此外，为了快速的构建好vue项目，你最起码你需要掌握以下关于vue的知识：掌握了以上知识的前提，是你已经有学习过html5相关的知识后，然后就可以着手制作vue项目了vscode，找到项目路径（我用的是idea，无所谓用什么软件，直接用cmd也能运行）然后新建终端，输入运行的命令：以下vue代码皆以vue2.x为准！vue-router是vue.js的官方路由管理器，一般用它作页面跳转和跳转时传参。以我的学生管理系统的结构为例：首先需要在vue项目的界面引入vue-router，使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：axios的作用用于于后端异步通信，简单的说就是你想把前端数据传给后端就需要它进行数据交互
同样，使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：ui框架，顾名思义就是用于编写界面用的，像淘宝网站，京东等等。其实选择哪个都ok，看自己喜好，一般比较用的多的是elementui，layui，museui，和mintui等等。有基于移动端的也有基于电脑端。以我的学生成绩管理系统为例，用的是elementui同样，使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：到这里基础的vue项目所需要的都安装好了，打开package.json能看到刚刚安装的安装完了，你还需要引入在mian.js里进行引入刚刚安装的，以及使用elementui首先看看我的学生成绩管理系统的完整结构api: 用于与后端数据交互assets： 用于存放静态资源，如图片，样式设置components： 组件，一般我用它作为项目的主入口，即项目一启动就打开它的界面router: 配置路由，管理页面跳转utils： 主要工具配置，这里主要是写axios的配置，用于引入api里的get.js和post.js，作为数据交互views: 你的项目里需要几个页面就使用几个页面进行增添视图组件在以上截图中，我有：Login.vueaddScore.vuedeleteScore.vueupdateScore.vueshowScore.vuemaintry.vue这几个视图组件则，router的index.js代码如下App.vue代码：这个文件是axios的配置文件代码如下：写完request.js后，就需要根据自己的需求在get.js和post.js编写对应的和后端交互的代码以其中一个进行举例：get.js：如我想实现登录功能，则需要先引入刚刚的request.js文件，把前端输入框输入的两个参数，账号username和密码password传到后端，去获取后端路径下的/login/loginTosystem里编写的controller方法post.jspost一般处理参数比较多的情况如我实现注册功能，用一个对象参数去接收，把它传入后端的/register/registerAccount的controller方法增删改查的思路按照该方法去制作即可这个是vue的配置文件，是代理的一种，可以理解解决跨域这里有一个要注意的是，前面的module.exports一定要注意有没有“s”如果没有s，配置是不会生效的以上vue的配置基本就完成了，接下来就可以去编写你需要的页面和功能了和前端不同，springboot一般使用的是依赖进行配置所需要的内容，以及使用注解去声明我使用的idea去创建springboot项目。直接创建maven项目在后面新增文件夹作为不同的功能直接下一步，填写完项目名称创建即可本依赖为pom.xml文件的内容以上按需引入，引入了springboot依赖，mysql驱动，mybatis等等，具体功能请百度以我的学生成绩管理系统为例：config： 配置跨域和redis配置constant： 配置与前端交互返回的数据提示和内容controller： 控制层，接收前端的数据service： service层，处理接收到的数据，主要作功能代码dto： 实体类mapper： 从service到mapper，主要实现数据库的增删改查方法的实现Vo： 主要用于构建不同数据的综合的实体类，以及配置与前端交互的数据utils: 工具类，但是本项目并没有用到resource/mapper： 数据库的增删改查语句application.yml: 配置数据库驱动和redis配置、服务器端口等等pom.xml: 依赖StudentScoreApplication.java: 启动类ps： constant和Vo可简化不编写，如不编写数据交互提示，把controller和service
层的返回数据修改为别的数据类型即可，如String想启动项目，必须要有一个入口文件，代码如下：只有配置跨域，才能接收到前端的数据请求原本教程需要配置redis，现在简化，修改为不需要redis，更新时间2022-04-11application.yml 文件主要是配置数据库和服务器的在这里要注意的是，context-path,配置了项目的路径于是本项目路径为：http:locahost:8081/student之所以提这个，因为怕你们和后面要讲的contoller的路径搞乱ps：如需要简化，此处可不配置主要有两个文件，一个是ResutEnum，一个是ResutVo用于与前端数据交互代码如下以上，springboot的基础配置就已经ok了。但是，在继续往下写代码，我们得明白，springboot是怎么执行代码的。其实，我们哪怕只创建一个文件夹，只创建两三个java文件也能编写完一个springboot项目，但是，这样的代码是特别乱的，也不利于维护；因此我们才分层，一个文件夹一个层次，每个层次处理一种类型的功能首先，我们知道，第一步肯定是从前端接收数据，那么接收到的数据第一步是哪里？答案就是controller，别的层也可以，但是约定俗成，规定了它作为和前端交互同理，controller接收到后，传到了service，service编写功能的实现，service再请求到mapper，mappe里编写数据库增删改查的实现mapper再请求到resource下的mapper.xml，数据库的增删改查语句去查找数据库的数据。当查到数据库数据后，返回到mapper，再到service，然后回到controller，最后再返回前端。然后我们再看controller代码，以下所有的都以登录和注册功能作为例子，因为其他功能都和这两个差不多登录是查询注册是插入登录controller：ps： 如简化不编写数据交互，把ResultVo修改为别的类型，如String这里需要特别说明，其他和它一样
我们看到，它@RequestMapping(“/login/**”)
代表会请求到login路径
@GetMapping(“/loginTosystem”)
在login路径下写这个请求，代表它的路径为
/login/loginTosystem
细心的人会发现，前端的get和post也有写相同的路径
再结合配置的路径，到请求到这里的时候，最终路径为
http:localhost:8081/student/login/loginTosystem
其他同理注册controller：ps： 如简化不编写数据交互，把ResultVo修改为别的类型，如String在请求到下面的service的时候，我们应该要有一个实体去映射，即和数据库字段相同，账号表ps: 要注意的是，字段名称需要一样，否则会映射失败，到时候拿到的数据是空的登录service注册service登录mapper注册mapper登录：注册：感谢各位的阅读，以上就是“怎么搭建vue+springboot项目”的内容了，经过本文的学习后，相信大家对怎么搭建vue+springboot项目这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: Java中static关键字和内部类如何使用

这篇文章主要讲解了“Java中static关键字和内部类如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Java中static关键字和内部类如何使用”吧！在Java中，被static修饰的成员，称之为静态…