SpringBoot+MyBatis+Oracle项目基本架构
项目框架
![项目架构](https://i-blog.csdnimg.cn/blog_migrate/8a895868392a5526e5aaaeaf8852cbd0.png)
后端
1. User.java
package com.cetc.firstlogin.entity;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.EqualsAndHashCode;
import java.io.Serializable;
@Data
@EqualsAndHashCode(callSuper = false)
@TableName("USERS")
public class User implements Serializable {
@TableField("id")
private String id;
@TableField("username")
private String username;
@TableField("password")
private String password;
public User() {
}
public User(String id, String username, String password) {
this.id = id;
this.username = username;
this.password = password;
}
}
2. 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.cetc.firstlogin.dao.UserMapper">
<insert id="save">
INSERT INTO "USERS"
VALUES (#{id,jdbcType=VARCHAR},#{username,jdbcType=VARCHAR},#{password,jdbcType=VARCHAR})
</insert>
<select id="findByUsername" resultType="com.cetc.firstlogin.entity.User">
SELECT * FROM "USERS" WHERE USERNAME = #{username}
</select>
<select id="findMaxId" resultType="java.lang.Integer">
SELECT MAX(ID) FROM USERS
</select>
</mapper>
3. UserMapper.java
package com.cetc.firstlogin.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cetc.firstlogin.entity.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
@Repository
public interface UserMapper extends BaseMapper<User> {
int save(User user);
User findByUsername(@Param("username") String username);
Integer findMaxId();
}
4. UserService.java
package com.cetc.firstlogin.service;
import com.cetc.firstlogin.entity.User;
public interface UserService {
void register(String username,String password);
User findUser(String username);
}
5. UserServiceImpl.java
package com.cetc.firstlogin.service.impl;
import com.cetc.firstlogin.dao.UserMapper;
import com.cetc.firstlogin.entity.User;
import com.cetc.firstlogin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public void register(String username,String password) {
User user = new User();
Integer id = new Integer(userMapper.findMaxId());
id++;
user.setId(id.toString());
user.setUsername(username);
user.setPassword(password);
userMapper.save(user);
}
@Override
public User findUser(String username) {
User user = userMapper.findByUsername(username);
return user;
}
}
6. UserController
package com.cetc.firstlogin.controller;
import com.cetc.firstlogin.entity.User;
import com.cetc.firstlogin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/user")
public class LoginController {
@Autowired
private UserService userService;
@RequestMapping("/login")
@ResponseBody
public String findByUsername(String username,String password){
User user = userService.findUser(username);
String data ="success";
if (user == null){
return "username-fail";
}
if (!user.getPassword().equals(password)){
return "password-fail";
}
return data;
}
@RequestMapping("/register")
@ResponseBody
public String register(String username,String password){
String state = "success";
userService.register(username,password);
return state;
}
}
前端
1.login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/logincss.css"/>
<script src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="login">
<h1>CETC</h1>
<div>
<input type="text" required="required" placeholder="用户名" id="username" name="username"/>
<input type="password" required="required" placeholder="密码" id="password" name="password"/>
<div>
<input class="validate" type="text" name="validate" id="validate" placeholder="请输入验证码(区分大小写)"/>
<canvas id="canvas" width="100" height="43" onclick="dj()"></canvas>
</div>
<button id="submit" class="submit" type="submit">登录</button>
<br>
<button id="register" class="submit" type="register" onclick=
"window.location.href='http://localhost:63342/first-login/templates/register.html'">注册</button>
<div id="CheckMsg" class="msg"></div>
</div>
</div>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
2.register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/logincss.css"/>
<script src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="login">
<h1>CETC注册</h1>
<input type="text" required="required" placeholder="请输入用户名" id="username" name="username"/>
<input type="password" required="required" placeholder="请输入密码" id="password" name="password"/>
<input type="password" required="required" placeholder="请再次输入密码" id="repass" name="repass"/>
<button id="submit" class="submit" type="submit">提交</button>
<div id="CheckMsg" class="msg"></div>
</div>
<script type="text/javascript">
$('#submit').click(function(){
var username = $("#username").val();
var password = $("#password").val();
var repass = $("#repass").val();
if(!username || username == ""){
showMsg("用户名不能为空");
return false;
}
if(!password || password == ""){
showMsg("请输入密码");
return false;
}
if(!repass || repass == ""){
showMsg("请再次输入密码");
return false;
}
if (password != repass){
showMsg("俩次密码不一致");
return false;
}
$.ajax({
url : "http://localhost:8080/user/register",
data :{
username:username,
password:password
},
type : "POST",
success : function(data) {
if (data){
if (data == "success") {
showMsg("正在注册...");
setTimeout(function () {
console.log(data);
window.location.href ='http://localhost:63342/first-login/templates/login.html';
},1000)
} else {
showMsg(data);
return false;
}
}
},
error : function(data){
showMsg(data);
}
});
});
function showMsg(msg){
$("#CheckMsg").text(msg);
};
</script>
</body>
</html>
3.welcom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎</title>
</head>
<body>
登陆成功!
</body>
</html>
4.logincss.css
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
font-family: 'Open Sans',sans-serif;
margin: 0;
background-color: #4A374A;
}
#login{
position: absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
#login h1{
color: #fff;
text-shadow:0 0 10px;
letter-spacing: 1px;
text-align: center;
}
h1{
font-size: 2em;
margin: 0.67em 0;
}
input{
width: 278px;
height: 18px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow:1px 1px 1px;
border-top: 1px solid #312E3D;
border-left: 1px solid #312E3D;
border-right: 1px solid #312E3D;
border-bottom: 1px solid #56536A;
border-radius: 4px;
background-color: #2D2D3F;
}
.submit{
width: 300px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 5px;
margin: 0;
}
.msg{
color: #ea8c37;
font-size: 14px;
padding-left: 40px;
padding-top: 10px;
clear: both;
font-weight: bold;
}
.validate{
width: 170px;
position: relative;
}
canvas{
border: 1px solid #ccc;
border-radius: 5px;
}
5.login.js
var show_num = [];
draw(show_num);
function dj(){
draw(show_num);
};
function draw(show_num) {
var canvas_width=document.getElementById('canvas').clientWidth;
var canvas_height=document.getElementById('canvas').clientHeight;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z," +
"x,c,v,b,n,m";
var aCode = sCode.split(",");
var aLength = aCode.length;
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength);
var deg = Math.random() * 30 * Math.PI / 180;
var txt = aCode[j];
show_num[i] = txt;
var x = 10 + i * 20;
var y = 20 + Math.random() * 8;
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) {
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) {
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
};
function randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
};
$('#submit').click(function(){
showMsg("");
var username = $("#username").val();
var password = $("#password").val();
if (!username || username == ""){
showMsg("用户名不能为空");
return false;
}
if (!password || password == ""){
showMsg("请输入密码");
return false;
}
var val = document.getElementById("validate").value;
var num = show_num.join("");
if (val=='') {
showMsg('请输入验证码!');
return false;
} else if (val != num) {
showMsg('验证码错误!\n请重新输入!');
document.getElementById("validate").value='';
draw(show_num);
return false;
}
$.ajax({
url : "http://localhost:8080/user/login",
data :{
username : username,
password : password
},
type : "POST",
success : function(data) {
if (data){
if (data == "success") {
showMsg("正在登陆...");
setTimeout(function () {
console.log(data);
window.location.href ='http://localhost:63342/first-login/templates/welcome.html';
},1000)
} else {
showMsg(data);
return false;
}
}
},
error : function(data){
showMsg(data);
}
});
});
function showMsg(msg){
$("#CheckMsg").text(msg);
};
附pom.xml依赖配置文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.2</version>
<relativePath/>
</parent>
<groupId>com.cetc</groupId>
<artifactId>first-login</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>first-login</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.24</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.5</version>
</dependency>
<dependency>
<groupId>com.oracle.database.jdbc</groupId>
<artifactId>ojdbc8</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.oracle</groupId>
<artifactId>ojdbc6</artifactId>
<version>11.2.0.3</version>
</dependency>
<dependency>
<groupId>cn.easyproject</groupId>
<artifactId>orai18n</artifactId>
<version>12.1.0.2.0</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.56</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>