Vue项目的搭建,Springboot项目的对接_sprintboot +vue 简单对接-程序员宅基地

技术标签: Vue  springboot  

一.vue环境的搭建

二.创建vue项目

1.进入代码文件夹,cmd窗口执行: vue create vue-to-springboot,直接enter,然后就会自动创建项目了。(需要等待一会会)

2.安装所需的一些依赖

1.vue add element (添加 element,一个 element 风格的 UI 框架)


2.npm install axios (安装 axios,用于网络请求)


3.npm install vuex --save(安装 Vuex,用于管理状态)


4.npm install vue-router (安装 路由,用于实现两个 Vue 页面的跳转)

3.使用vscode打开项目

现在需要创建相应功能的目录结构,进行分层开发,需要在 src 目录下创建下面几个目录

1)api (网络请求接口包)
2)router (路由配置包)
3)store (Vuex 状态管理包)
4)utils (工具包)
5)views (vue 视图包,存放所有 vue 代码,可根据功能模块进行相应分包)

 

完整项目下载:https://github.com/ChenXbFrank/vue-to-springboot

1.npm install 安装项目的依赖

2.npm run serve 启动服务

springboot项目就不介绍了,只是提供一个简单的接口供前端访问。

项目下载地址:https://github.com/ChenXbFrank/vue-login-java 启动项目。

4.测试

http://localhost:8080/#/  输入admin、123456测试

登陆成功!

账号密码输入错误,如图所示。

springboot和vue简单的前后端分离实现。

参考文章​​​​​​​

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33371766/article/details/106505788

智能推荐

CM+CDH安装搭建全过程(总结版)_cloudera manager server gc cpu usage is at 10% or -程序员宅基地

文章浏览阅读2.9k次。目录第一次搭建CM、CDH第二次搭建CM、CDH搭建环境:搭建过程:报错过程:总结复盘:第三次搭建CM、CDH搭建环境:搭建过程:报错过程:总结复盘:第四次搭建CM、CDH搭建环境:搭建过程:报错过程:总结复盘:第一次搭建CM、CD..._cloudera manager server gc cpu usage is at 10% or more of total process time

内核开发调试printk_printk 头文件-程序员宅基地

文章浏览阅读706次。进行内核开发调试在进行驱动开发的过程中往往要打印一些信息来查看是否正确类似于printf,以下将介绍在内核开发常用的调试方法。.(第一次写文章,内容可能不咋样勿喷呀)内容一、printk介绍二、如何查看并修改消息级别在应用程序采用printf打印调试、内核驱动采用printk打印调试。printk函数打印数据到console缓冲区,打印的格式方类似printf。printk函数说明头文件:<linux/kernel.h>int printk(KERN_XXX const_printk 头文件

Kafka原理、部署与实践——深入理解Kafka的工作原理和使用场景,全面介绍Kafka在实际生产环境中的部署_kafka如何负载使用一台对外的机器-程序员宅基地

文章浏览阅读2.5k次。随着互联网的发展,网站的流量呈爆炸性增长,传统的基于关系型数据库的数据处理无法快速响应。而NoSQL技术如HBase、MongoDB等被广泛应用于分布式数据存储与处理,却没有提供像关系型数据库一样的ACID特性、JOIN操作及完整性约束。因此,很多公司或组织开始转向Apache Spark、Flink、Beam等新一代大数据处理框架来处理海量数据。然而,由于新一代大数据处理框架依赖于HDFS等文件系统,导致集群规模扩容困难、成本高昂。另一方面,云计算平台的出现让用户可以快速部署、扩展大数据处理集群。_kafka如何负载使用一台对外的机器

麒麟KYLINOS桌面操作系统2303上安装tigervnc_麒麟系统电脑安装vncserver-程序员宅基地

文章浏览阅读1.4k次。hello,大家好啊,今天给大家带来在麒麟桌面操作系统2303上安装tigervnc的文章,本篇文章给大家讲述如何安装并且远程连接使用,后面会给大家更新如何将tigervnc做成桌面图标点击即可开启及关闭,欢迎大家浏览分享转发。_麒麟系统电脑安装vncserver

EPS方圆预发机说明书-程序员宅基地

文章浏览阅读324次。预发机说明书_eps方圆预发机说明书

java 获取第一条数据,如何取出每个分组的第一条记录-程序员宅基地

文章浏览阅读1.2k次。问题1:如何取出每个分组的第一条记录(×××背景)回答:select t.name1,t.name2,t.zx from (select row_number()over(partition by name1 order by zx desc)rn, test.* from test)t where t.rn=1;用rank的话你zx有值相等的,还是用row_number好了问题2:重复数据中,取..._java获得实体对象第一个值

随便推点

Node.js_node可以使用什么命令 ,它会自动找到该文件下的start指令,执行入口文件。-程序员宅基地

文章浏览阅读280次。nodejs。_node可以使用什么命令 ,它会自动找到该文件下的start指令,执行入口文件。

linux图片相似度检测软件下载,移动端图像相似度算法选型-程序员宅基地

文章浏览阅读293次。概述电商场景中,卖家为获取流量,常常出现重复铺货现象,当用户发布上传图像或视频时,在客户端进行图像特征提取和指纹生成,再将其上传至云端指纹库对比后,找出相似图片,杜绝重复铺货造成的计算及存储资源浪费。该方法基于图像相似度计算,可广泛应用于安全、版权保护、电商等领域。摘要端上的图像相似度计算与传统图像相似度计算相比,对计算复杂度及检索效率有更高的要求。本文通过设计实验,对比三类图像相似度计算方法:感..._linux 图片相似度对比

java isprime函数_判断质数(isPrime)的方法——Java代码实现-程序员宅基地

文章浏览阅读3.8k次。判断质数(isPrime)的方法——Java代码实现/** 质数又称素数。一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数;否则称为合数* 100以内质数表2 3 5 7 11 13 17 19 23 29 31 37 41 43 4753 59 61 67 71 73 79 83 89 97质数具有许多独特的性质:(1)质数p的约数只有两个:1和p。(2)初等数学基本定理:..._java isprime

2.小白学uvm验证 - uvm_objection 和 uvm_component_uvm_object accessor 参数的意义-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏41次。1. uvm_objection 和 uvm_component 基础  uvm_objection 和 uvm_component 是 uvm 中两大基础类,刚开始学习的时候,对两个东西认识不深,以为它们俩差不多,谁知道它两是一个是“爷爷”,一个是孙子的关系,两者贯穿整个 uvm 验证方法学。至于为什么要划分 uvm_object 和 uvm_component 呢,是因为前任在验证的过程中发..._uvm_object accessor 参数的意义

Url 访问大小写敏感问题解决-程序员宅基地

文章浏览阅读2.7k次。2019独角兽企业重金招聘Python工程师标准>>> ..._yii2 url 大小写

gin 渲染不同目录下的模板(支持多层目录)_gin 加载多层模板-程序员宅基地

文章浏览阅读6k次,点赞3次,收藏3次。一直在学着使用gin,今天试了下gin的模板渲染,一路比较坑。真要吐槽下某度,啥都没有。参考资料:https://www.bookstack.cn/read/gin-doc/response.mdhttps://juejin.im/post/5b026a4c6fb9a07aac24c122https://blog.csdn.net/moxiaomomo/article/details/..._gin 加载多层模板

推荐文章

热门文章

相关标签