springboot + vue实战

创建springboot项目点击下一步直至安装成功进入项目后会自动安装依赖等着就行然后在resource下创建application.yml文件在文件中加入以下信息创建mapper文件夹

阳光里哭泣的狗

5523人浏览 · 2022-07-27 20:57:17

阳光里哭泣的狗 · 2022-07-27 20:57:17 发布

未完待续…

创建springboot项目

在这里插入图片描述
点击下一步直至安装成功
进入项目后会自动安装依赖等着就行
然后在resource下创建application.yml文件

在这里插入图片描述
在文件中加入以下信息

创建mapper文件夹,用于存放mysql数据库的映射文件

然后在java下的目录下创建一个controller文件夹

并在该文件夹下创建login的class

编写login文件
在这里插入图片描述
查看

跨域处理

在这里插入图片描述
编写webconfig类

创建vue项目

在cmd中执行vue ui进入vue项目管理页面,创建新项目
在这里插入图片描述

在这里插入图片描述
将以下三个打开其他关闭就行

在这里插入图片描述

在这里插入图片描述
然后等待就行

添加插件

添加依赖
在这里插入图片描述

点击启动并打开app
在这里插入图片描述

创建好后利用vscode打开该文件

在这里插入图片描述

将App.vue下的信息清空

添加测试信息

将没用的文件删除
在这里插入图片描述
以下内容也要删除

登入页面创建

在components文件夹下创建Login.vue文件
在这里插入图片描述
并在文件中写入以下信息

回到index.js中引入组件信息

并添加路由

对Login.vue文件进行编写

可以获取到图片信息
从图中可以明显的发现图片的大小和位置不怎么好看

创建css样式来美化
在assets下创建css文件夹并在该文件夹下创建全局样式
在这里插入图片描述

在main.js中引入

创建表单
在element网站上可以直接获取到表单信息

以下为表单信息

绑定数据

在这里插入图片描述

在这里插入图片描述
给表单加样式
访问以下链接

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.d33146d14&type=3
添加自己想要的样式
在这里插入图片描述
将其下载至本地

解压后将其拷贝至vue项目下的assets文件夹中

在main.js中引入样式

回到Login.vue中’将其加上
在这里插入图片描述
这样就会出来两个小logo

给login页面添加背景

在这里插入图片描述

给登入框赋予样式让其居中

在这里插入图片描述

在这里插入图片描述
给用户框和密码框添加校验规则
去element官网查看案例,参照着案例就行仿造

在这里插入图片描述
给表单添加规则

再将写好的规则传递给用户框和密码框

绑定标签元素
实现双向绑定

对登录和重置按钮添加方法

重置按钮
在main.js添加axios
在这里插入图片描述
将秘密隐藏

创建点击事件

定义方法

在这里插入图片描述
提交按钮
和之前一样编写方法

期间可能会碰见跨域的报错

解决办法
进入谷歌商店中安装以下插件,然后点击运行插件就行

或者直接再需要跨域的代码中加入CrossOrign

在这里插入图片描述
设置点击提交后的状态

加入一个判断
若访问到的页面信息为ok则进行相关的操作

在这里插入图片描述
创建提交成功后的跳转页面
创建新的页面

绑定以下跳转的页面

设置跳转路由

回到后端

创建用户实体类
在这里插入图片描述
利用alt+insert能够自动完成初始化

在这里插入图片描述
注意生成的名字,不对的进行更改,改成get

在这里插入图片描述
重写一下toString方便测试

在这里插入图片描述
编写login控制层

再将前端之前写的test更改,并将表单元素信息传递进去

回到页面点击提交后就能再后端看见状态

创建dao层
创建userDao
在这里插入图片描述
再mapper目录下创建UserMapping.xml

写完后将userDao放入login控制层
不知道为什么报错但是也能运行

去Application下搜索以下dao层信息

点击提交按钮就能跳转页面了

导入json依赖

将登入信息转换成json形式

在这里插入图片描述
再将以下信息进行修改

再次点击后就能再控制台上看见相关的信息

将提示信息更改

到此就完成了登录页面对数据库的访问了

在这里插入图片描述
设置退出按钮

在这里插入图片描述

在这里插入图片描述

挂载路由导航守卫

对登录后的页面进行布局
注意container与div不能同级共存,直接去element中container拷贝黏贴,再将咱们之前写好的放入header标签中就行

给三块部分添加样式

给主页添加logo
在头部部分加上图片信息

在这里插入图片描述
给添加的部分加上样式

结果展示

在element中选择你喜欢的样式黏贴过去就行

这其中的数据用数据库中的数据自动填入

创建数据库中的表
分成主表和从表对应着导航一和导航二
主表如下:

从表如下:
在这里插入图片描述
读取数据库中的信息
在后端创建对应数据库的实体类
这里我用了Lombok插件,简单方便快捷
有一个实体类必定会有一个接口,接口又需要一个xml文件来映射

编写主表dao层

编写mapper.xml

编写mainmenus控制层
在这里插入图片描述
在网页上显示的结果如下:

将数据库中的信息显示在导航栏中
编写前端,加上导航列表的事件以及方法

给名称套个循环,保证遍历到数据库中的每个元素

在这里插入图片描述
去除边幅
设置成none就行

设置侧边栏伸缩的功能

在这里插入图片描述

在这里插入图片描述
添加功能

绑定一下功能

在这里插入图片描述

在这里插入图片描述
给侧边栏添加图标

将其替换原先的图标再进行遍历就能获取到所有的图标

编写主体内容

加入路由
在这里插入图片描述
创建一个新页面

创建新的vue必须要进行绑定

重定向一下页面

补充一下之前问题
在数据库中加上字段path

然后回到sparing boot中在添加上path

再去mapper上加上

实现页面内跳转
创建一个vue文件
在这里插入图片描述
进入index.js文件中重定向一下要跳转的页面

将数据库中的path字段进行绑定

但是一刷新就会导致页面被刷新,这并不是我们想要的效果
所以进行一些修改
先给其添加默认的页面,退出登录后还是/hadoop的路径
在这里插入图片描述
给其添加一个点击事件,点击后就会切换路径并且将其保存在session中

面包屑导航区

添加搜索功能

给卡片添加全局样式

回到后端编写dao层
编写查询数据库的方法

编写UserController控制层