SpringBoot+MyBatis+Oracle项目基本架构

项目框架
后端
- 1. User.java
- 2. UserMapper.xml
- 3. UserMapper.java
- 4. UserService.java
- 5. UserServiceImpl.java
- 6. UserController
前端
- 1.login.html
- 2.register.html
- 3.welcom.html
- 4.logincss.css
- 5.login.js
附pom.xml依赖配置文件

项目框架

SpringBoot+MyBatis+Oracle项目基本架构项目框架后端前端附pom.xml依赖配置文件

后端

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 {
    //用户Id
    @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);
    /**
     * 为了判断用户名是否重复
     * @param username
     * @return
     */
    User findByUsername(@Param("username") String username);

    /**
     * 查找最大ID
     * @return
     */
    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);
};
/**
 * 画验证码
 * @param 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");//获取到canvas的对象，演员
    var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
    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;//产生0~30之间的随机弧度
        var txt = aCode[j];//得到随机的一个内容
        show_num[i] = txt;
        var x = 10 + i * 20;//文字在canvas上的x坐标
        var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
        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 + ")";
};

//验证表单是否为空，若为空则将焦点聚焦在input表单上，否则表单通过，登录成功
$('#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获取用户信息并进行验证，如果账户密码不匹配则登录失败，如不需要验证用户信息，这段可不写
    /**
     * 常用参数：
     1、url 请求地址
     2、type 请求方式，默认是'GET'，常用的还有'POST'
     3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
     4、data 设置发送给服务器的数据
     5、success 设置请求成功后的回调函数
     6、error 设置请求失败后的回调函数
     7、async 设置是否异步，默认值是'true'，表示异步
     */
    $.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/> <!-- lookup parent from repository -->
    </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>
        <!--Spring-starter-web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--Java持久化规范-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!-- Lombok：用于简化编写代码 减少get/set方法-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>
        <!-- Druid数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.24</version>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>com.alibaba</groupId>-->
<!--            <artifactId>druid</artifactId>-->
<!--            <version>1.1.0</version>-->
<!--        </dependency>-->
        <!--Mybatis整合SpringBoot依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>
        <!-- Mybatis Plus整合SpringBoot-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>
        <!-- mybatis生成工具 -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.5</version>
        </dependency>
<!--        Spring-oracle-jdbc依赖-->
        <dependency>
            <groupId>com.oracle.database.jdbc</groupId>
            <artifactId>ojdbc8</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- oracle -->
        <dependency>
            <groupId>com.oracle</groupId>
            <artifactId>ojdbc6</artifactId>
            <version>11.2.0.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/cn.easyproject/orai18n -->
        <dependency>
            <groupId>cn.easyproject</groupId>
            <artifactId>orai18n</artifactId>
            <version>12.1.0.2.0</version>
        </dependency>

        <!--        &lt;!&ndash; spring JDBC依赖 &ndash;&gt;-->
<!--        <dependency>-->
<!--            <groupId>org.springframework.boot</groupId>-->
<!--            <artifactId>spring-boot-starter-jdbc</artifactId>-->
<!--        </dependency>-->
        <!-- json -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.56</version>
        </dependency>
        <!-- Mysql驱动依赖 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- SpringBoot-test依赖 -->
        <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>

SpringBoot+MyBatis+Oracle项目基本架构项目框架后端前端附pom.xml依赖配置文件

SpringBoot+MyBatis+Oracle项目基本架构

项目框架

后端

1. User.java

2. UserMapper.xml

3. UserMapper.java

4. UserService.java

5. UserServiceImpl.java

6. UserController

前端

1.login.html

2.register.html

3.welcom.html

4.logincss.css

5.login.js

附pom.xml依赖配置文件

继续阅读

Java String.format方法的简单使用

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

neo4j之cypher使用文档

适用于JavaScript的ECMAScript 2020规范向前发展

GitHub连夜封杀！这份阿里 10W 字内部 Java 字面试手册到底有多强？

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

mybatis_入门程序Mybatis入门

JS生成uuid的四种方法

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【递归】高效率求2的n次幂

layui多任务上传添加进度条

win10本地scala和spark安装安装scala安装spark

scala (3) Function 和 Method