Vue+Element UI+Spring Boot小demo

前一阵跟着教程做了一个小项目的一部分,因为觉得过了一遍基础感觉什么也没记住,想着跟着做一下会不会好一些,也正好看看现实中是如何用的,发现真难,这种东西真的是学了基础跟没学一样,中间找bug有时一找就是几个小时。。也主要是因为我是跳着学的,中间跳过了许多过渡的东西,因为现在许多的技术框架都是一点点建立产生的,就像前端的许多花样也还要建立在JavaScript上,c++许多语法也建立C语言的基础上。就像牛顿大师说的那样:“如果说我比别人看得更远些,那是因为我站在了巨人的肩上.”
还有一个问题,不同的人有不同的书写习惯,但真正工作总是有一份合适的约定和协议,就像网络协议一样,需要遵循一些不能更改的规则。现在的我还分不清哪个是好的,百度也说的模棱两可,所以看到更好的,我就想着换一种方式,因为知道的少,会的少,懂得少,所以现在不得不模仿,牙牙学语一般吧。版本更新迭代很快,我用东西很多时候又喜欢最新版,所以。。。

技术栈:
前端:Vue + Element UI + axios(实现异步通信)
后端:Spring Boot + JPA + MySQL
数据库:MySQL(自己电脑上的是5.7版本,但实际使用的idea集成的8.0版本,所以配置文件中要格外注意时区和数据库class的设置)
开发工具:

IDEA 2020.1版
sqlyog客户端

服务:

开了两个服务,前端端口8080,后端8181,由于默认都是8080,所以一定要改一个(一般改后端),不然启动失败报错。也可以将前端项目打包和后端放在一起,这样通过url的设置,用一个就可以,这是我前两天看到的,不过我还不会,因为在跟着做(实则已经玩的忘了)

功能:

可实现书籍的增删改,目前只是针对单表操作
可实现分页显示操作
点击相应内容即可实现路由跳转,不是重定向哦

展示:
数据库(进行过增删操作。。)

在这里插入图片描述

后端

注意pom依赖和yml(当然也可以使用properties风格)文件的设置
在这里插入图片描述

前端

由于版本等问题,启动需输入npm run serve,而不是npm run dev,这个因软件等而异
在这里插入图片描述

在这里插入图片描述

界面,注意看地址栏的变化

在这里插入图片描述
在这里插入图片描述
这个操作有传参,因为后端代码是通过id进行修改和删除操作的

在这里插入图片描述

源码:

仓库地址链接。(ping了github网站,改了host文件,有时候还是进不去。。)

扫描二维码关注公众号,回复: 12830370 查看本文章

猜你喜欢

转载自blog.csdn.net/weixin_45845039/article/details/115038314
今日推荐