保姆级笔记:人脸智能识别系统(一)

第一天笔记

前后端分离项目如何对接

打开前端项目文件,找到vue.config.js,找到该行:
在这里插入图片描述
本项目无需编写前端代码,只需编写后台接口即可。若需要前端代码与数据库文件,可以在评论区注明你的邮箱,我会进行发送

编写登录接口

1.1接口:生成验证码

在这里插入图片描述

1.1.1创建SpringBoot工程

在这里插入图片描述

在这里插入图片描述

(这一步直接默认,不用选任何选项)
这一步直接默认,不用选任何选项

直接点击Finish即可
在这里插入图片描述

1.1.2打开POM文件,导入依赖

在这里插入图片描述

<?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.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.cas</groupId>
    <artifactId>项目名</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>项目名</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <aliyun.oss.version>2.8.3</aliyun.oss.version>
        <captcha.version>1.6.2</captcha.version>
        <commons.lang.version>2.6</commons.lang.version>
        <commons.fileupload.version>1.3.1</commons.fileupload.version>
        <commons.io.version>2.5</commons.io.version>
        <commons.codec.version>1.10</commons.codec.version>
        <commons.configuration.version>1.10</commons.configuration.version>
        <druid.version>1.1.20</druid.version>
        <datasource.version>2.5.6</datasource.version>
        <easypoi.version>4.2.0</easypoi.version>
        <fastdfs.version>1.26.7</fastdfs.version>
        <fastjson.version>1.2.31</fastjson.version>
        <google.zxing.version>3.4.0</google.zxing.version>
        <hutool.version>5.2.4</hutool.version>
        <jwt.version>0.9.1</jwt.version>
        <joda.time.version>2.9.9</joda.time.version>
        <jpush.version>3.3.4</jpush.version>
        <knife4j.version>2.0.3</knife4j.version>
        <mysql.version>8.0.33</mysql.version>
        <mybatisplus.version>3.4.3.1</mybatisplus.version>
        <mybatisplus.generator>3.3.2</mybatisplus.generator>
        <mybatisplus.velocity>1.7</mybatisplus.velocity>
        <quartz.version>2.3.0</quartz.version>
        <qcloud.cos.version>4.4</qcloud.cos.version>
        <qcloud.qcloudsms.version>1.0.5</qcloud.qcloudsms.version>
        <qiniu.version>7.2.14</qiniu.version>
        <shiro.version>1.3.2</shiro.version>
        <swagger2.version>2.9.2</swagger2.version>
        <velocity.version>1.7</velocity.version>
    </properties>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
        </dependency>
        <!--redis -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <!--excel操作-->
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-spring-boot-starter</artifactId>
            <version>${easypoi.version}</version>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!-- swagger2 -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>${swagger2.version}</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>${swagger2.version}</version>
        </dependency>
        <!-- mysql驱动 -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatisplus.version}</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>${mybatisplus.generator}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>${mybatisplus.velocity}</version>
        </dependency>
        <!--人脸识别-->
        <dependency>
            <groupId>com.tencentcloudapi</groupId>
            <artifactId>tencentcloud-sdk-java</artifactId>
            <version>3.1.62</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.26</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>${commons.lang.version}</version>
        </dependency>
        <!-- fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastjson.version}</version>
        </dependency>
        <!-- 验证码 -->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>${captcha.version}</version>
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>${jwt.version}</version>
        </dependency>
        <!--工具包-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>${hutool.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>
1.1.3导入代码生成器,实现逆向工程

将Main.java拷贝至如下目录:
在这里插入图片描述
修改Main.java中的数据库源
在这里插入图片描述

1.1.4向数据库中导入user表,并建立与user相关的实体类与其他文件

用记事本打开sql文件:
在这里插入图片描述
使用Navicat执行下面的sql语句:

DROP TABLE IF EXISTS `user`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!50503 SET character_set_client = utf8mb4 */;
CREATE TABLE `user` (
  `user_id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `username` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户名',
  `password` varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '密码',
  `real_name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '真实姓名',
  `contact` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '联系人',
  `mobile` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '手机号',
  `status` int DEFAULT NULL COMMENT '状态  0正常   1禁用',
  PRIMARY KEY (`user_id`) USING BTREE,
  UNIQUE KEY `username` (`username`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=43 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='系统用户';
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `user`
--

LOCK TABLES `user` WRITE;
/*!40000 ALTER TABLE `user` DISABLE KEYS */;
INSERT INTO `user` VALUES (1,'admin','8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92','管理员','张三','15679711120',1),(39,'test','96cae35ce8a9b0244178bf28e4966c2ce1b8385723a96a6b838858cdd6ca0a1e','张三','','',1);
/*!40000 ALTER TABLE `user` ENABLE KEYS */;
UNLOCK TABLES;

修改Main.java中的实体名称
在这里插入图片描述
运行,生成相应的文件
在这里插入图片描述

1.1.5开始写代码:生成验证码

建立LoginController.java
在这里插入图片描述
根据API文档,返回的是json数据,因此需要编写一个工具类Result.java
在这里插入图片描述
Result.java代码内容

/**
 * 功能:实现返回封装的json数据
 * 作者:CAS
 * 日期:2024-07-14 21:12
 */
package com.cas.utils;


import java.util.HashMap;

/**
 * LoginController返回值封装
 */

public class Result extends HashMap<String,Object> {
    //成功
    public static Result ok(){
        Result result=new Result();
        result.put("code",200);
        result.put("msg","操作成功");
        return result;
    }
    //失败
    public static Result error(String msg){
        Result result=new Result();
        result.put("code",500);
        result.put("msg",msg);
        return result;
    }
    //对put方法进行重写,实现其他信息追加
    @Override
    public Result put(String key,Object value){
        super.put(key,value);//在当前对象的基础上实现添加
        return this;//返回当前对象
    }
}

开始编写接口。打开LoginController.java:

@RestController//注意直接输入"localhost:端口号/接口地址"一定要用@RestController,因为@Controller会认为返回的是页面。解释:https://blog.csdn.net/weixin_44541213/article/details/118110869
public class LoginController {

    @Autowired
    private RedisTemplate redisTemplate;//注入RedisTemplate
    @Autowired
    private UserService userService;//注入UserService
    @Autowired
    private JwtUtil jwtUtil;//自动注入jwtUtil

    //验证码生成接口
    @GetMapping("/captcha")
    public Result captcha(){
        //1.生成验证码,验证码图片以及相应的UUID。
        //直接调用第三方工具
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 4);//生成验证码图片
        String code = specCaptcha.text().toLowerCase();//code表示验证码最终拿到的值
        String uuid = IdUtil.simpleUUID();//生成uuid
        Map<String,String> map=new HashMap<>(3);//创建一个Map,将uuid、code与captcha用键值对的方式存入
        map.put("uuid",uuid);//存入uuid
        map.put("code",code);//存入code
        map.put("captcha",specCaptcha.toBase64());//存入验证码图片
        return Result.ok().put("data",map);//调用utils里的ok()方法,同时再调用重写后的put方法实现验证码信息追加
    }
}

编写项目启动类:
在这里插入图片描述

package com.cas;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.cas.mapper")
public class CvApplication {
    public static void main(String[] args) {
        SpringApplication.run(CvApplication.class, args);
    }
}

创建并配置application.yml
在这里插入图片描述

server:
  port: 8083
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/community?useUnicode=true&characterEncoding=utf-8
    username: 'root'
    password: '数据库密码'

运行CvApplication.java,输入localhost:8083/captcha,查看结果

在这里插入图片描述

1.1.6开始与前端对接

打开前端项目,打开终端,找到项目根目录,输入npm run dev
在这里插入图片描述
运行后端的CvApplication.java
输入前端运行后显示的地址:
在这里插入图片描述
成功!!!
在这里插入图片描述

1.2疑问解答

1.如何确定后端端口的url是"/captcha"?
打开views/login下的index.vue,这是登录相对应的页面
在这里插入图片描述
调到methods:{},可以看到初始化时会调用getCaptcha()方法:
在这里插入图片描述
按住ctrl,点击getCaptchaImg()方法进行跳转
在这里插入图片描述
跳转到目录:/src/api/sys/login,找到相应方法,其中的url路径与后端的Controller接口相应的url对应。
在这里插入图片描述
LoginController.java
在这里插入图片描述
2.在前后端分离项目中,Controller中的每一个接口方法使用@Controller标注还是@RestController标注?

注意直接输入"localhost:端口号/接口地址"进行测试时一定要用@RestController,因为@Controller会认为返回的是页面。解释:https://blog.csdn.net/weixin_44541213/article/details/118110869
在这里插入图片描述

  • 14
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YZ122552

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值