Springboot+mybatis构建管理后台系统
- 新建一个springboot工程
- 开发后台管理登陆功能
- 1.在springboot中集成mybatis
- 2.编写登陆接口
- 2.编写登陆页面
新建一个springboot工程
这篇博客教大家如何从零开始使用springboot+mabatis搭建一个博客的后台管理系统;本文采用的开发工具是idea,数据库使用的是mysql
1.使用idea新建springboot工程非常容易,打开idea file->new->project 左侧选择Spring Initialezr
2.点击next,填写maven工程的相关信息
3.点击next 选择web
4.点击next->finish 第一次新建可能要等一会 一点要耐心 新的springboot工程就新建成功了
打开BlogApplication类 右键
就可以将项目启动起来了,这样一个新的工程就建好了
开发后台管理登陆功能
1.在springboot中集成mybatis
1.在工程的pom.xml文件中加入
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.13</version>
<scope>runtime</scope>
</dependency>
2.我们在数据库中(blog)中新建一个user表 并新建一条数据
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`user_name` varchar(32) DEFAULT NULL COMMENT '用户名',
`password` varchar(32) DEFAULT NULL COMMENT '密码',
`full_name` varchar(32) DEFAULT NULL COMMENT '姓名',
`age` int(11) DEFAULT NULL COMMENT '年龄',
`phone` varchar(16) DEFAULT NULL COMMENT '电话',
`email` varchar(32) DEFAULT NULL COMMENT '邮箱',
`motto` varchar(256) DEFAULT NULL COMMENT '座右铭',
`occupation` varchar(64) DEFAULT NULL COMMENT '职业',
`hobby` varchar(128) DEFAULT NULL COMMENT '爱好',
`qq` varchar(16) DEFAULT NULL COMMENT 'qq号',
`wechat` varchar(16) DEFAULT NULL COMMENT '微信号',
`portrait` varchar(256) DEFAULT NULL COMMENT '头像',
`wechat_code` varchar(128) DEFAULT NULL COMMENT '微信二维码',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='后台管理用户表';
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'admin', '123456', '管理员', '25', null, null, null, null, null, null, null, null, null);
3.编写数据库连接配置文件,springboot中的配置只需要在application.properties文件中加入就可以,下面加入数据库连接配置
spring.datasource.name=blog
spring.datasource.url=jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=Hongkong
spring.datasource.username= root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
但是通常springboot 更习惯将application.properties改名为application.yml文件 这时候配置的写法如下
spring:
datasource:
name: blog
url: jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=Hongkong
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
4.新建User实体类,
package com.xiong.blog.model;
public class User {
private Integer id;
private String userName;
private String password;
private String fullName;
private Integer age;
private String phone;
private String email;
private String motto;
private String occupation;
private String hobby;
private String qq;
private String wechat;
private String portrait;
private String wechatCode;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName == null ? null : userName.trim();
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password == null ? null : password.trim();
}
public String getFullName() {
return fullName;
}
public void setFullName(String fullName) {
this.fullName = fullName == null ? null : fullName.trim();
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone == null ? null : phone.trim();
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email == null ? null : email.trim();
}
public String getMotto() {
return motto;
}
public void setMotto(String motto) {
this.motto = motto == null ? null : motto.trim();
}
public String getOccupation() {
return occupation;
}
public void setOccupation(String occupation) {
this.occupation = occupation == null ? null : occupation.trim();
}
public String getHobby() {
return hobby;
}
public void setHobby(String hobby) {
this.hobby = hobby == null ? null : hobby.trim();
}
public String getQq() {
return qq;
}
public void setQq(String qq) {
this.qq = qq == null ? null : qq.trim();
}
public String getWechat() {
return wechat;
}
public void setWechat(String wechat) {
this.wechat = wechat == null ? null : wechat.trim();
}
public String getPortrait() {
return portrait;
}
public void setPortrait(String portrait) {
this.portrait = portrait == null ? null : portrait.trim();
}
public String getWechatCode() {
return wechatCode;
}
public void setWechatCode(String wechatCode) {
this.wechatCode = wechatCode;
}
}
5.新建mapper接口 UserMapper
package com.xiong.blog.dao;
import com.xiong.blog.model.User;
import java.util.Map;
public interface UserMapper {
/**
* 根据用户名密码获取用户
* @param map
* @return
*/
User selectByUserName(Map<String, Object> map);
}
这一步一定要在 BlogApplication类中加入下面配置,否则无法找到接口
- 新建mybatis mapper.xml文件 ,在resource文件夹下面新建mapping文件夹 然后在里面新建UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.xiong.blog.dao.UserMapper" >
<resultMap id="BaseResultMap" type="com.xiong.blog.model.User" >
<id column="id" property="id" jdbcType="INTEGER" />
<result column="user_name" property="userName" jdbcType="VARCHAR" />
<result column="password" property="password" jdbcType="VARCHAR" />
<result column="full_name" property="fullName" jdbcType="VARCHAR" />
<result column="age" property="age" jdbcType="INTEGER" />
<result column="phone" property="phone" jdbcType="VARCHAR" />
<result column="email" property="email" jdbcType="VARCHAR" />
<result column="motto" property="motto" jdbcType="VARCHAR" />
<result column="occupation" property="occupation" jdbcType="VARCHAR" />
<result column="hobby" property="hobby" jdbcType="VARCHAR" />
<result column="qq" property="qq" jdbcType="VARCHAR" />
<result column="wechat" property="wechat" jdbcType="VARCHAR" />
<result column="portrait" property="portrait" jdbcType="VARCHAR" />
<result column="wechat_code" property="wechatCode" jdbcType="VARCHAR" />
</resultMap>
<sql id="Base_Column_List" >
id, user_name, password, full_name, age, phone, email, motto, occupation, hobby,
qq, wechat, portrait,wechat_code
</sql>
<select id="selectByUserName" resultMap="BaseResultMap" parameterType="java.util.Map" >
select
<include refid="Base_Column_List" />
from user
where user_name = #{userName,jdbcType=VARCHAR} and password = #{password,jdbcType=VARCHAR}
</select>
</mapper>
7.最后还需要在配置文件中加入mybatis mapper文件和model类的路径
mybatis:
mapper-locations: classpath:mapping/*.xml
type-aliases-package: com.xiong.blog.model
这样mybatis就集成好了,下面我们来写一个登陆接口
2.编写登陆接口
我们用sping的良好习惯是要编写service层 我们新建UserService 以及他的实现类 UserServiceImpl
package com.xiong.blog.service;
import com.xiong.blog.model.User;
import java.util.Map;
public interface UserService {
User selectByUserName(Map<String, Object> map);
}
package com.xiong.blog.service.impl;
import com.xiong.blog.dao.UserMapper;
import com.xiong.blog.model.User;
import com.xiong.blog.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Map;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public User selectByUserName(Map<String, Object> map) {
return userMapper.selectByUserName(map);
}
}
新建LoginController
package com.xiong.blog.controller;
import com.xiong.blog.model.User;
import com.xiong.blog.service.UserService;
import com.xiong.blog.vo.ResultBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.Map;
@Controller
public class LoginController {
@Autowired
private UserService userService;
@RequestMapping("/login")
@ResponseBody
public Object login(@RequestParam(value = "user_name", required = false) String userName,
@RequestParam(value = "password", required = false) String password) {
Map<String,Object> map = new HashMap<>();
map.put("userName",userName);
map.put("password",password);
User user = userService.selectByUserName(map);
return user;
}
}
最后工程目录下的文件如下:
最后启动工程,然后在浏览器中输入http://localhost:8080/login?user_name=admin&password=123456
浏览器中显示:
接口已经写好了,我们在写工程的时候一般把接口的返回固定成一定的格式,这时候我们新建一个接口返回的vo类
package com.xiong.blog.vo;
import java.io.Serializable;
public class ResultBean implements Serializable {
public ResultBean(){
}
public ResultBean(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
private int code;
private String msg;
private Object data;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
同时用户登陆成功后我们把用户信息放到session中 我们改造下接口
@RequestMapping("/login")
@ResponseBody
public Object login(HttpServletRequest request,
@RequestParam(value = "user_name", required = false) String userName,
@RequestParam(value = "password", required = false) String password) {
Map<String,Object> map = new HashMap<>();
map.put("userName",userName);
map.put("password",password);
User user = userService.selectByUserName(map);
if(user == null){
return new ResultBean(-1,"用户名密码错误",null);
}else{
HttpSession session = request.getSession();
session.setAttribute("user",user);
}
return new ResultBean(200,"登陆成功",user);
}
这样登陆接口就写好了
2.编写登陆页面
springboot中我们通常使用yml模板 讲html文件放在resource下的templates文件夹中 css,js等静态资源放在static文件夹中,
我们在templates文件夹中放入 login.html index.html 页面 使用模板 我们需要在pom.xml中加入配置
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在LoginController 中加入访问登陆页和首页的代码
@RequestMapping("/")
public Object index() {
return "login";
}
@RequestMapping("/index")
public Object indexHtml() {
return "index.html";
}
html页面代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台管理</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="page-wrapper flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5">
<div class="card p-4">
<div class="card-header text-center text-uppercase h4 font-weight-light">
登陆
</div>
<div class="card-body">
<div class="form-group">
<label class="form-control-label">用户名</label>
<input type="text" id="user_name" class="form-control">
</div>
<div class="form-group">
<label class="form-control-label">密码</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<p id="login_tips" class="red"></p>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-12">
<button id="login_btn" class="btn btn-primary px-5 fullwidth">登陆</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/login.js"></script>
</body>
</html>
login.js代码
$(document).ready(function () {
$('#login_btn').on('click', function (e) {
e.preventDefault();
login();
});
function login(){
if($.trim($("#user_name").val())==""||$.trim($("#password").val())==""){
return;
}
$.ajax({
type:"POST",
url:"login",
dataType:"json",
data:{
'user_name':$("#user_name").val(),
'password':$("#password").val()
},
success:function(data){
if(data&&data.code==200){
$("#login_tips").hide();
window.location.href="index"
}else{
$("#login_tips").html(data.msg);
$("#login_tips").show();
}
},
error:function(jqXHR){
console.log("接口异常"+jqXHR.status);
}
});
}
document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
login();
}
}
});
重新运行工程 浏览器中输入http://localhost:8080/ 即可打开登陆页面
输入用户名 admin 密码123456 即可进入index.html页面