保姆级笔记:人脸识别智能管理系统--第一天
第一天笔记
前后端分离项目如何对接
打开前端项目文件,找到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