springboot+mybatis d2admin 前后端分离搭建过程

文章目录

前言

第一次接触前后端分离项目,被安排做项目搭建工作,研究了很久,总算搭建成功了,故在此做一个记录。
项目使用框架:springboot+mybatis d2admin 数据库:mysql
开发工具:后端 SpringToolSuite4 前端 HBuilder X

一、前端搭建

1.下载项目

d2admin地址:https://d2.pub/zh/doc/d2-admin/,参照其中的 快速上手 部分,下载并部署项目即可。

2.修改代码逻辑

原项目中的登录功能,是使用了一个mock来实现的,用户名和密码都是定好的,这里通过修改登录部分的代码,来通过后端访问数据库实现登录。

1.项目目录

springboot+mybatis d2admin 前后端分离搭建过程

2.修改网络请求公用地址以及登录代码

.env中,修改成后端的地址
springboot+mybatis d2admin 前后端分离搭建过程
sys.user.api.js中,注释mock代码,修改请求,添加参数(登录时的用户名和密码)
springboot+mybatis d2admin 前后端分离搭建过程
登录功能的js中 添加参数
springboot+mybatis d2admin 前后端分离搭建过程

  • 这样修改结束后,点击登录页的登录按钮,就会访问http://localhost:8888下的/login请求

3.启动前端项目

npm start启动前端项目,默认在8080端口号

二、后端搭建

1.创建项目

1.使用SpringToolSuite4创建项目

使用SpringToolSuite4创建Springboot项目,创建时依赖选择springweb,jdbc,mybatis,mysql。

2.编写简单业务

根据前端输入的用户名和密码,去数据库查用户名字,并返回前端。
springboot+mybatis d2admin 前后端分离搭建过程
如图controller加注解
springboot+mybatis d2admin 前后端分离搭建过程

3.简单配置

springboot+mybatis d2admin 前后端分离搭建过程

2.启动后端项目

启动后端项目,设定为8888端口号

三、测试

1.测试数据

springboot+mybatis d2admin 前后端分离搭建过程

2.输入用户名密码,点击登录

返回的数据为数据库取得的姓名
只为看到结果,未写全 跳转首页 等代码
springboot+mybatis d2admin 前后端分离搭建过程

总结

以上为springboot+mybatis d2admin 前后端分离 搭建过程

上一篇:Leetcode 1078.Bigram 分词


下一篇:1078万学子奔赴考场,这些考试事项要注意!