-
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.4.5</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.csj</groupId> <artifactId>fileuploaddownloads</artifactId> <version>0.0.1-SNAPSHOT</version> <name>fileuploaddownloads</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-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.0.19</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </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> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project>
-
yml
spring: datasource: url: jdbc:mysql://localhost:3306/test?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver thymeleaf: prefix: classpath:/templates/ # 配置视图解析器 前缀 templates为视图文件夹 templates没有这个文件夹的话自己手动建再 resources里面建 suffix: .html #.html为后缀 encoding: UTF-8 #编码格式 #jpa 测试 jpa: hibernate: ddl-auto: update # 新增数据库链接必须的参数 # 控制台显示SQL show-sql: true properties: hibernate.format_sql: true servlet: multipart: # 设置文件上传的大小 enabled: true max-file-size: 1GB # 最大支持文件大小 max-request-size: 1GB # 最大支持请求大小 file-size-threshold: 0 -
pojo
package com.csj.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Data @NoArgsConstructor @AllArgsConstructor @Entity(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; private String name; private String pwd; private String headPortrait; // 用户头像的存放地址 } -
mapper
package com.csj.mapper; import com.csj.pojo.User; import org.springframework.data.jpa.repository.JpaRepository; public interface UserMapper extends JpaRepository<User,Integer> { User findByNameAndPwd(String name, String pwd); } -
controller
package com.csj.controller; import com.csj.mapper.UserMapper; import com.csj.pojo.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.UUID; // 负责登录注册用户 @Controller public class LoginController { @Autowired private UserMapper userMapper; @RequestMapping("registered") public String registered() { return "registered"; } /** * 处理图片， 响应图片的路径给前端显示 */ @RequestMapping("uploadHead") @ResponseBody public String uploadHead(@RequestParam("file") MultipartFile file, User user) throws IOException { String fileName = file.getOriginalFilename(); // 上传的源文件名 包括后缀 // 这是个临时保存路径 ，项目的target文件 String savePath = "C:\\代码\\fileuploaddownloads\\target\\classes\\static"; // 保存头像的路径,这里用 项目的 target的静态路径 清楚重新打包就会丢失图片 String saveFileName = UUID.randomUUID().toString() + "-" + fileName; // 生成唯一图片名 System.out.println(saveFileName); InputStream inputStream = file.getInputStream(); // 获取上传文件读的流 FileOutputStream fos = new FileOutputStream(new File(savePath, saveFileName)); // savePath指定上传路径，saveFileName 指定上传后的名字 // fos.write(inputStream.read()); byte[] bytes = new byte[inputStream.available()]; int len = 0; while ((len = inputStream.read(bytes)) != -1) { // 不等于-1 说明还没读完 接着读 fos.write(bytes, 0, len); // 开始写入 } return saveFileName; // 返回上传的图片的名字 } @RequestMapping("saveUser") public String addUser(User user) { System.out.println(user); User save = userMapper.save(user); if (save != null) { return "redirect:/login"; // 添加成功跳转到登录页， 这样地址栏上的地址也变了 } else { return "redirect:/registered"; // 添加失败重定向到注册页面 } } @RequestMapping("login") public String login() { return "login"; } @RequestMapping("dologin") public String dologin(User user) { User user1 = userMapper.findByNameAndPwd(user.getName(), user.getPwd()); if (user1 != null) { return "redirect:/list"; // 重定向去访问列表请求 } else { return "redirect:/login"; } } } -
启动类
package com.csj; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.data.jpa.repository.config.EnableJpaRepositories; @SpringBootApplication @EnableJpaRepositories public class FileuploaddownloadsApplication { public static void main(String[] args) { SpringApplication.run(FileuploaddownloadsApplication.class, args); } } -
注意要引入 jquery.js
-
registered.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!-- 引入Thymeleaf的模板 才可以用它的标签, 才能用El表达式之类的 --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html ; charset = utf-8"/> <title>Title</title> </head> <body> <form th:action="@{/saveUser}" method="post"> <!-- 头像 ,accept="image/png,image/jpeg" 只能选择以...结尾的, 这里是只能选择图片--> <input type="file" name="file" id="tou" multiple accept="image/png,image/jpeg"> </br> <img style="visibility:hidden;padding: 0;margin: 0" id="img"/></br> <input type="hidden" name="headPortrait" id="headPortrait" > <input type="text" name="name" > </br> <input type="text" name="pwd"> </br> <input type="submit" value="注册"> </form> </body> <style> </style> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript"> let fileM=document.querySelector("#tou"); $("#tou").on("change", function () { console.log(document.getElementById("tou").name) let fileObj = fileM.files[0]; console.log(fileObj) let formData = new FormData(); formData.append('file', fileObj); let img = document.getElementById("img"); $.ajax({ type: 'post', url: 'http://localhost:8080/uploadHead', data: formData, contentType: false, processData: false, success: (e) => { console.log(e) img.src = e; img.style.visibility = "visible" // 取消隐藏 让其看得见 $("#headPortrait").val(e) // 动态给 headPortrait(头像) 文本框复制 } }); }) </script> </html> -
login.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!-- 引入Thymeleaf的模板 才可以用它的标签, 才能用El表达式之类的 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 登录页面 <form action="/dologin" method="post"> <input type="text" name="name"/> <input type="text" name="pwd"/> <input type="submit" value="登录"> </form> </body> </html>
2489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
