微服务和VUE入门教程(6)：连接数据库-mybatis
微服务和VUE入门教程(0): 着手搭建项目
微服务和VUE入门教程(1): 搭建前端登录界面
微服务和VUE入门教程(2): 注册中心
微服务和VUE入门教程(3): user微服务的搭建
微服务和VUE入门教程(4)：网关zuul的搭建
微服务和VUE入门教程(5)： 前后端交互
微服务和VUE入门教程(6)：连接数据库-mybatis
微服务和VUE入门教程(7):配置中心-config
微服务和VUE入门教程(8):前端主页的编写
微服务和VUE入门教程(9)： token验证-token后端生成以及前端获取
微服务和VUE入门教程(10)： token验证-前端登录拦截以及token过期提醒
微服务和VUE入门教程(11): mybatis 动态查询
微服务和VUE入门教程(12)：前端提示搜索框的实现
微服务和VUE入门教程(13)： token验证-zuul拦截与验证
微服务和VUE入门教程(14)： 热部署
微服务和VUE入门教程(15)： 课堂小知识
微服务和VUE入门教程(16)： zuul 熔断
微服务和VUE入门教程(17)： VUE 响应拦截器
微服务和VUE入门教程(18)： 前端接口模块化
微服务和VUE入门教程(19)： VUE组件化–子组件向父组件通信
微服务和VUE入门教程(20)： VUE组件化–父组件向子组件通信
微服务和VUE入门教程(21)： springboot中定时器-Schedule
微服务和VUE入门教程(22): 页面长时间未操作自动退出登录
微服务和VUE入门教程(23): 微服务之间的调用
微服务和VUE入门教程(24): 微服务之断路器
微服务和VUE入门教程(25): 微服务之Hystrix-dashboard
微服务和VUE入门教程(26): 微服务之turbine
微服务和VUE入门教程(27)：VUE前端工程打包
1. mybatis介绍
MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。
总得来说，我们使用MyBatis来操作数据库是传统的JDBC方便很多。
新建数据库，新建user表
数据库，我们使用的是mysql5.5版本，具体如何装mysql，去百度吧，我的宝藏都在那里。懒懒的我不喜欢用黑方框命令行，于是在这里，直接使用了mysql自带的workbench，开源免费。
建表语句如下：
CREATE TABLE `user` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`username` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
2. 后端连接数据库
2.1 新建文件
修改my-user微服务，新建dao，pojo , service,以及在resource文件夹中新建mappers
2.2 修改父项目pom文件
在父项目pom文件中，添加mysql和mybatis依赖
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.24</version>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>
2.3 修改微服务pom文件
在my-user微服务的pom文件中，添加mysql和mybatis依赖
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
</dependency>
2.4 修改UserApplication.jave文件
添加注解，声明dao接口文件
@MapperScan("com.user.dao")
2.5 修改application.yml文件
添加连接数据库信息
#配置端口号
server:
port: 8802
#注册到注册中心
eureka:
client:
service-url:
defaultZone: http://localhost:8801/eureka/
# 配置微服务名字
spring:
application:
name: my-user
# 连接数据库
datasource:
url: jdbc:mysql://127.0.0.1:3306/blog?characterEncoding=UTF-8
username: root
password: 123456
driver-class-name: com.mysql.jdbc.Driver
# mapper保存路径
mybatis:
mapper-locations: classpath:mappers/*
2.6 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">
<!--DAO的路径-->
<mapper namespace="com.user.dao.UserDAO">
<!--实体类路径-->
<resultMap id="BaseUserMap" type="com.user.pojo.User">
<id column="id" jdbcType="INTEGER" property="id" />
<result column="username" jdbcType="VARCHAR" property="userName" />
<result column="password" jdbcType="VARCHAR" property="passWord" />
</resultMap>
<!--登录查询-->
<select id="loginSel" resultType="com.user.pojo.User">
select * from user where username = #{userName} and password = #{passWord}
</select>
</mapper>
2.7 UserDAO.java: 接口文件
package com.user.dao;
import com.user.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.Map;
// 记得这里的声明哦
@Mapper
public interface UserDAO {
//登录，这里的loginSel对应于UserMapper.xml中的id="loginSel"方法
User loginSel(Map<String,Object> userInfo);
}
我们会发现UserDAO 是一个接口文件，loginSel接口对应于UserMapper.xml中的id="loginSel"方法。
我们传入的参数是一个Map，这样做的好处，日后可知。
2.8 User.java: 实体类文件
package com.user.pojo;
public class User {
private int id;
private String userName;
private String passWord;
public User(int id, String userName, String passWord) {
this.id = id;
this.userName = userName;
this.passWord = passWord;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String username) {
this.userName = userName;
}
public String getPassWord() {
return passWord;
}
public void setPassWord(String passWord) {
this.passWord = passWord;
}
}
2.9 UserService.java: 接口文件
package com.user.service;
import com.user.pojo.User;
import java.util.Map;
public interface UserService {
//登录
User login(Map<String,Object> userInfo);
}
2.10 UserServiceImpl.java: 接口实现类文件
package com.user.service.impl;
import com.user.dao.UserDAO;
import com.user.pojo.User;
import com.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Map;
// 记得这里的声明哦
@Service
public class UserServiceImpl implements UserService {
//引入 dao接口
@Autowired
UserDAO userDAO;
//重写login实现类
@Override
public User login(Map<String,Object> userInfo){
return userDAO.loginSel(userInfo);
}
}
2.11 修改UserController.java文件
//引入接口实现类
@Autowired
UserService userService;
@RequestMapping(value = "/login", method = RequestMethod.POST)
public JSONObject login(@RequestBody JSONObject jsonObject){
String userName = jsonObject.getString("userName");
String passWord = jsonObject.getString("passWord");
//获取用户名，并打印
System.out.println(userName);
System.out.println(passWord);
//数据库进行检查
User user = userService.login(jsonObject);
JSONObject result = new JSONObject();
//若正确返回200，若错误返回400
if(user == null){
result.put("state",400);
}else {
result.put("state",200);
}
return result;
}
3. 前端验证
3.1 新建跳转页面
在前端src/components/login文件夹中，新建Hello.vue。
当登录成功之后，跳转到Hello.vue页面中
<template>
<div>登录成功</div>
</template>
<script>
export default {
name: "Hello"
}
</script>
<style scoped>
</style>
3.2 加入router/index.js路由
这一次，我们使用一种新的路由方式，如下图，我感觉这样方便改一些。
{
path: '/hello',
component: resolve => require(['@/components/login/Hello'],resolve),
meta:{
title: 'Hello'
}
}
3.3 修改login.vue中的login()方法
login(){
this.$axios.post('/user/login', {
userName: this.loginForm.userName,
passWord: this.loginForm.password
})
.then(successResponse =>{
//获取后端返回数据
console.log(successResponse.data.state);
let state = successResponse.data.state;
//判断是否登录成功
if(state === 200){
this.$router.push('/hello');
}else {
this.$message("用户名或密码错误");
}
})
}
4. 测试
首先我们打开后端的eureka，zuul，user。前端启动项目，浏览器输入： http://localhost:8080/，进入登录界面
其次，我们要保证数据表user表中已有数据。
输入错误信息，后端返回400
输入正确登录信息，返回200，跳转到Hello页面
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
