• springboot + vue实战

    未完待续…

    目录

    创建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控制层
    在这里插入图片描述

    创建实体类对象
    在这里插入图片描述
    编写前端获取到数据库数据
    在这里插入图片描述
    在这里插入图片描述
    列表渲染
    在这里插入图片描述

    在这里插入图片描述
    分页功能
    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    【C语言】简单实现扫雷游戏
    使用supervisor管理你的进程
    goland的Markdown拖动插入链接编码有问题
    47从零开始用Rust编写nginx，配对还有这么多要求！负载均衡中的路径匹配
    【Python】Java工程师学Python之PyCharm安装详细教程
    9.11C高级day4
    java日志工具类
    【Java Web】Servlet规范讲解
    谷歌 I/O 2024大会全面硬钢OpenAI；腾讯宣布旗下的混元文生图大模型；阿里巴巴技术下的AI自动视频剪辑工具
    Python基础——魔法方法（一）
  • 原文地址：https://blog.csdn.net/qq_43659234/article/details/118229011