Vue+Element UI+Spring Boot小demo

  • 时间:
  • 浏览:
  • 来源:互联网

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

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

IDEA 2020.1版
sqlyog客户端

服务:

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

功能:

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

展示:

数据库(进行过增删操作。。)
在这里插入图片描述

后端

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

前端

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

在这里插入图片描述

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

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

源码:

项目源码明天放在github上,见具体仓库。(ping了github网站,改了host文件,有时候还是进不去。。)

本文链接http://www.dzjqx.cn/news/show-617206.html