springboot+vue 旅遊信息管理系統（二）用戶註冊與用戶登錄的實現

旅遊信息管理系統用戶註冊與用戶登錄的實現

前言

代碼已上傳至github：https://github.com/kalipoison/travelManageSystem

流程

com.gohb.travels.Controller.UserController代碼如下：

package com.gohb.travels.Controller;

import com.gohb.travels.entity.Result;
import com.gohb.travels.entity.User;
import com.gohb.travels.service.UserService;
import com.gohb.travels.utils.CreateImageCode;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("user")
@CrossOrigin //允許跨域
@Slf4j
public class UserController {

    @Autowired
    private UserService userService;


    @RequestMapping("login")
    public Result login(@RequestBody User user,HttpServletRequest request) {
        Result result = new Result();
        log.info("user: " + user);
        try {
            User userDB = userService.login(user);
            //登錄成功之後保存用戶的標記 ServletContext application Redis userid userdb
            request.getServletContext().setAttribute(userDB.getId(),userDB);
            result.setMsg("登錄成功~~").setUserId(userDB.getId());
        } catch (Exception e) {
            result.setState(false).setMsg(e.getMessage());
        }
        return result;
    }

    /**
     * 用戶註冊
     *
     * @param code
     * @param user
     * @return
     */
    @PostMapping("register")
    public Result register(String code, String key, @RequestBody User user, HttpServletRequest request) {
        Result result = new Result();
        log.info("接收的驗證碼: " + code);
        log.info("接收的驗證碼的key: " + key);
        log.info("接收到user對象: " + user);
        //驗證驗證碼
        String keyCode = (String) request.getServletContext().getAttribute(key);
        log.info(keyCode);
        try {
            if (code.equalsIgnoreCase(keyCode)) {
                //註冊用戶
                userService.register(user);
                result.setMsg("註冊成功!!!");
            } else {
                throw new RuntimeException("驗證碼錯誤!!!");
            }
        } catch (Exception e) {
            e.printStackTrace();
            result.setMsg(e.getMessage()).setState(false);
        }
        return result;
    }

    /**
     * 生成驗證碼
     *
     * @throws IOException
     */
    @GetMapping("getImage")
    public Map<String, String> getImage(HttpServletRequest request) throws IOException {
        Map<String, String> result = new HashMap<>();
        CreateImageCode createImageCode = new CreateImageCode();
        //獲取驗證碼
        String securityCode = createImageCode.getCode();
        //驗證碼存入session
        String key = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
        request.getServletContext().setAttribute(key, securityCode);
        //生成圖片
        BufferedImage image = createImageCode.getBuffImg();
        //進行base64編碼
        ByteArrayOutputStream bos = new ByteArrayOutputStream();
        ImageIO.write(image, "png", bos);
        String string = Base64Utils.encodeToString(bos.toByteArray());
        result.put("key", key);
        result.put("image", string);
        return result;
    }
}

com.gohb.travels.dao.UserDAO代碼如下：

package com.gohb.travels.dao;

import com.gohb.travels.entity.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserDAO {


    //根據用戶名查詢用戶
    User findByUsername(String username);

    //註冊用戶
    void save(User user);
}

com.gohb.travels.entity.Result代碼如下：

package com.gohb.travels.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain=true)
public class Result {
    private Boolean state = true;
    private String msg;
    private String userId;
}

com.gohb.travels.entity.Users代碼如下：

package com.gohb.travels.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class User {
    private String id;
    private String username;
    private String password;
    private String email;
}

com.gohb.travels.service.UserService代碼如下：

package com.gohb.travels.service;

import com.gohb.travels.entity.User;

public interface UserService {



    User login(User user);

    void register(User user);
}

com.gohb.travels.service.UserServiceImpl代碼如下：

package com.gohb.travels.service;

import com.gohb.travels.dao.UserDAO;
import com.gohb.travels.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDAO userDAO;


    @Override
    public User login(User user) {
        User userDB = userDAO.findByUsername(user.getUsername());
        if(userDB!=null){
            if(userDB.getPassword().equals(user.getPassword())){
                return userDB;
            }
            throw new RuntimeException("密碼輸入錯誤~~~");
        }else{
            throw new RuntimeException("用戶名輸入錯誤!!!");
        }
    }

    @Override
    public void register(User user) {
        if (userDAO.findByUsername(user.getUsername()) == null) {
            userDAO.save(user);
        }else{
            throw new RuntimeException("用戶名已經存在~~~~");
        }
    }
}

com.gohb.travels.utils.CreateImageCode代碼如下：

package com.gohb.travels.utils;


import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;


public class CreateImageCode {
    // 圖片的寬度。
    private int width = 160;
    // 圖片的高度。
    private int height = 40;
    // 驗證碼字符個數
    private int codeCount = 4;
    // 驗證碼干擾線數
    private int lineCount = 20;
    // 驗證碼
    private String code = null;
    // 驗證碼圖片Buffer
    private BufferedImage buffImg = null;
    Random random = new Random();

    public CreateImageCode() {
        creatImage();
    }

    public CreateImageCode(int width, int height) {
        this.width = width;
        this.height = height;
        creatImage();
    }

    public CreateImageCode(int width, int height, int codeCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        creatImage();
    }

    public CreateImageCode(int width, int height, int codeCount, int lineCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.lineCount = lineCount;
        creatImage();
    }

    // 生成圖片
    private void creatImage() {
        int fontWidth = width / codeCount;// 字體的寬度
        int fontHeight = height - 5;// 字體的高度
        int codeY = height - 8;

        // 圖像buffer
        buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = buffImg.getGraphics();
        //Graphics2D g = buffImg.createGraphics();
        // 設置背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);



        // 設置字體
        //Font font1 = getFont(fontHeight);
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        g.setFont(font);

        // 設置干擾線
        for (int i = 0; i < lineCount; i++) {
            int xs = random.nextInt(width);
            int ys = random.nextInt(height);
            int xe = xs + random.nextInt(width);
            int ye = ys + random.nextInt(height);
            g.setColor(getRandColor(1, 255));
            g.drawLine(xs, ys, xe, ye);
        }

        // 添加噪點
        float yawpRate = 0.01f;// 噪聲率
        int area = (int) (yawpRate * width * height);
        for (int i = 0; i < area; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);

            buffImg.setRGB(x, y, random.nextInt(255));
        }


        String str1 = randomStr(codeCount);// 得到隨機字符
        this.code = str1;
        for (int i = 0; i < codeCount; i++) {
            String strRand = str1.substring(i, i + 1);
            g.setColor(getRandColor(1, 255));
            // g.drawString(a,x,y);
            // a爲要畫出來的東西，x和y表示要畫的東西最左側字符的基線位於此圖形上下文座標系的 (x, y) 位置處

            g.drawString(strRand, i*fontWidth+3, codeY);
        }


    }

    // 得到隨機字符
    private String randomStr(int n) {
        String str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
        String str2 = "";
        int len = str1.length() - 1;
        double r;
        for (int i = 0; i < n; i++) {
            r = (Math.random()) * len;
            str2 = str2 + str1.charAt((int) r);
        }
        return str2;
    }

    // 得到隨機顏色
    private Color getRandColor(int fc, int bc) {// 給定範圍獲得隨機顏色
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    /**
     * 產生隨機字體
     */
    private Font getFont(int size) {
        Random random = new Random();
        Font font[] = new Font[5];
        font[0] = new Font("Ravie", Font.PLAIN, size);
        font[1] = new Font("Antique Olive Compact", Font.PLAIN, size);
        font[2] = new Font("Fixedsys", Font.PLAIN, size);
        font[3] = new Font("Wide Latin", Font.PLAIN, size);
        font[4] = new Font("Gill Sans Ultra Bold", Font.PLAIN, size);
        return font[random.nextInt(5)];
    }

    // 扭曲方法
    private void shear(Graphics g, int w1, int h1, Color color) {
        shearX(g, w1, h1, color);
        shearY(g, w1, h1, color);
    }

    private void shearX(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(2);

        boolean borderGap = true;
        int frames = 1;
        int phase = random.nextInt(2);

        for (int i = 0; i < h1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(0, i, w1, 1, (int) d, 0);
            if (borderGap) {
                g.setColor(color);
                g.drawLine((int) d, i, 0, i);
                g.drawLine((int) d + w1, i, w1, i);
            }
        }

    }

    private void shearY(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(40) + 10; // 50;

        boolean borderGap = true;
        int frames = 20;
        int phase = 7;
        for (int i = 0; i < w1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(i, 0, 1, h1, 0, (int) d);
            if (borderGap) {
                g.setColor(color);
                g.drawLine(i, (int) d, i, 0);
                g.drawLine(i, (int) d + h1, i, h1);
            }

        }

    }



    public void write(OutputStream sos) throws IOException {
        ImageIO.write(buffImg, "png", sos);
        sos.close();
    }

    public BufferedImage getBuffImg() {
        return buffImg;
    }

    public String getCode() {
        return code.toLowerCase();
    }

    //使用方法
 /*public void getCode3(HttpServletRequest req, HttpServletResponse response,HttpSession session) throws IOException{
        // 設置響應的類型格式爲圖片格式
            response.setContentType("image/jpeg");
            //禁止圖像緩存。
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);


            CreateImageCode vCode = new CreateImageCode(100,30,5,10);
            session.setAttribute("code", vCode.getCode());
            vCode.write(response.getOutputStream());
     }*/

}

com/gohb/travels/mapper/UserDAOMapper.xml內容如下：

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">


<mapper namespace="com.gohb.travels.dao.UserDAO">


    <!--用戶登錄-->
    <select id="findByUsername" parameterType="String" resultType="User">
        select * from t_user where username = #{username}
    </select>


    <!--註冊用戶-->
    <insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
        insert into t_user values(#{id},#{username},#{password},#{email})
    </insert>

</mapper>

application.properties內容如下：

server.port=8989
spring.application.name=travels

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/travels?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=12345

mybatis.mapper-locations=classpath:com/gohb/travels/mapper/*.xml
mybatis.type-aliases-package=com.gohb.travels.entity



logging.level.root=info
logging.level.com.baizhi.travels.dao=debug

login.html代碼如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        form{
            width:270px;
        }
        input{
            width: 70%;
            background: #eee;
        }
        input:focus{
            background: #fff;
        }
        form{
            padding: 0 12px 12px;
        }
        label{
            display: block;
            padding-bottom:12px;
        }
        #img-vcode{
            width: 56px;
            height: 21px;
            float:right;
            position: relative;
            top:2px;
            left:-6px
        }
        .label-text{
            width: 30%;
            float: left;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="wrap">
        <div id="header">
            <div style="float: right;padding-top: 24px">2009/11/20</div>
            <h1>旅遊信息管理系統</h1>
        </div>
        <div id="header-bar"></div>
        <div id="content" style="height: 360px">
            <img src="img/timg.jpg" style="float: right;height: 320px">
            <h2>登錄</h2>
            <form action="province/provincelist.html" method="post">
                <label>
                    <div class="label-text">賬&emsp;號：</div>
                    <input type="text" v-model="user.username" name="username">
                </label>
                <label>
                    <div class="label-text">密&emsp;碼：</div>
                    <input type="password" v-model="user.password" name="password">
                </label>
                <!--<img src="img/vcode.png" id="img-vcode">-->
                <!--<label>-->
                <!--<div class="label-text">驗證碼：</div>-->
                <!--<input type="text" name="vcode" style="width: 100px">-->
                <!--</label>-->
                <button type="button" @click="login">提 交</button>&emsp;
                <a href="reg.html">去註冊</a>
            </form>
        </div>
        <div id="footer">
            ABC@126.com
        </div>
    </div>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            login(){//登錄
                axios.post("http://localhost:8989/user/login",this.user).then((res)=>{
                    console.log(res.data);
                localStorage.setItem("userid",res.data.userId);
                if(res.data.state){
                    alert(res.data.msg +",點擊確定進入主頁!")
                    location.href='./province/provincelist.html';
                }else{
                    alert(res.data.msg);
                }
            });
            }
        }
    })

</script>

reg.html代碼如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        form {
            width: 270px;
        }

        input {
            width: 70%;
            background: #eee;
        }

        input:focus {
            background: #fff;
        }

        form {
            padding: 0 12px 12px;
        }

        label {
            display: block;
            padding-bottom: 12px;
        }

        #img-vcode {
            width: 56px;
            height: 21px;
            float: right;
            position: relative;
            top: 2px;
            left: -6px
        }

        .label-text {
            width: 30%;
            float: left;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="wrap">
        <div id="header">
            <div style="float: right;padding-top: 24px">2009/11/20</div>
            <h1>旅遊信息管理系統</h1>
        </div>
        <div id="header-bar"></div>
        <div id="content" style="height: 360px">
            <img src="img/timg.jpg" style="float: right;height: 320px">
            <h2>註冊</h2>
            <form action="province/provincelist.html" method="post">
                <label>
                    <div class="label-text">賬&emsp;號：</div>
                    <input type="text" v-model="user.username" name="username">
                </label>
                <label>
                    <div class="label-text">密&emsp;碼：</div>
                    <input type="password" v-model="user.password" name="password">
                </label>
                <label>
                    <div class="label-text">郵&emsp;箱：</div>
                    <input type="text" v-model="user.email" name="email">
                </label>
                <img :src="src" id="img-vcode" @click="getImage" :key="key">
                <label>
                    <div class="label-text">驗證碼：</div>
                    <input type="text"  v-model="code" name="vcode" style="width: 100px">
                </label>
                <button type="button" @click="saveUserInfo">提 交</button>&emsp;
                <a href="login.html">去登錄</a>
            </form>
        </div>
        <div id="footer">
            ABC@126.com
        </div>
    </div>
</div>
</body>
</html>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            user:{},
            code:"",
            src:"",
            key:"",
        },
        methods:{
            saveUserInfo(){  //註冊
                console.log(this.user.username + this.user.password + this.user.email);
                console.log(this.code);
                if(!this.user.username){
                    alert('用戶名不能爲空!!!!');
                    return;
                }
                if(!this.user.password){
                    alert('密碼不能爲空!!!!');
                    return;
                }
                //發送axios
                axios.post("http://localhost:8989/user/register?code="+this.code+"&key="+this.key,this.user).then((res)=>{
                    console.log(res);
                if(res.data.state){
                    alert(res.data.msg+",點擊確定跳轉到登錄頁面!!!");
                    location.href='./login.html';
                }else{
                    alert(res.data.msg);
                }
            });
            },
            getImage(){   //獲取驗證碼
                _this  = this;
                axios.get("http://localhost:8989/user/getImage").then((res)=>{
                    console.log(res.data.key);
                _this.src = "data:image/png;base64,"+res.data.image;
                _this.key = res.data.key;
            });
            }
        },
        created(){
            this.getImage();//獲取驗證碼
        }

    });
</script>

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.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.gohb</groupId>
    <artifactId>travels</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>travels</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.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.19</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

springboot+vue 旅遊信息管理系統（二）用戶註冊與用戶登錄的實現

旅遊信息管理系統用戶註冊與用戶登錄的實現

代碼已上傳至github：https://github.com/kalipoison/travelManageSystem

com.gohb.travels.Controller.UserController代碼如下：

com.gohb.travels.dao.UserDAO代碼如下：

com.gohb.travels.entity.Result代碼如下：

com.gohb.travels.entity.Users代碼如下：

com.gohb.travels.service.UserService代碼如下：

com.gohb.travels.service.UserServiceImpl代碼如下：

com.gohb.travels.utils.CreateImageCode代碼如下：

com/gohb/travels/mapper/UserDAOMapper.xml內容如下：

application.properties內容如下：

login.html代碼如下：

reg.html代碼如下：

pom.xml

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

idea中xmlns=http://www.springframework.org/schema/beans報錯

Docker私有倉庫的使用

docker常見應用部署和遷移備份

docker的Dockerfile

centos7下docker安裝設置國內鏡像及常見命令

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

springboot+vue 旅遊信息管理系統（二）用戶註冊與用戶登錄的實現

旅遊信息管理系統 用戶註冊與用戶登錄的實現

代碼已上傳至github：https://github.com/kalipoison/travelManageSystem

com.gohb.travels.Controller.UserController代碼如下：

com.gohb.travels.dao.UserDAO代碼如下：

com.gohb.travels.entity.Result代碼如下：

com.gohb.travels.entity.Users代碼如下：

com.gohb.travels.service.UserService代碼如下：

com.gohb.travels.service.UserServiceImpl代碼如下：

com.gohb.travels.utils.CreateImageCode代碼如下：

com/gohb/travels/mapper/UserDAOMapper.xml內容如下：

application.properties內容如下：

login.html代碼如下：

reg.html代碼如下：

pom.xml

旅遊信息管理系統用戶註冊與用戶登錄的實現