1、数据库设计
article：文章表
| 字段 | | 备注 || ------- | -------- | ------- || id | int | 文章的唯一ID || author | varchar | 作者 || title | varchar | 标题 || content | longtext | 文章的内容 |
见表SQL：
CREATE TABLE article (
id int(10) NOT NULL AUTO_INCREMENT COMMENT ‘int文章的唯一ID’,
author varchar(50) NOT NULL COMMENT ‘作者’,
title varchar(100) NOT NULL COMMENT ‘标题’,
content longtext NOT NULL COMMENT ‘文章的内容’,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
2、基础项目搭建
2.1、建一个SpringBoot项目配置
spring:
datasource:
username: root
password: 123456
#?serverTimezone=UTC解决时区的报错
url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
driver-class-name: com.mysql.cj.jdbc.Driver
src/main/java
**/*.xml
true
2.2、实体类：
//文章类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article implements Serializable {
private int id; //文章的唯一ID
private String author; //作者名
private String title; //标题
private String content; //文章的内容
}
2.3、mapper接口：@Mapper
@Repository
public interface ArticleMapper {
//查询所有的文章
List
queryArticles();
//新增一个文章
int addArticle(Article article);
//根据文章id查询文章
Article getArticleById(int id);
//根据文章id删除文章
int deleteArticleById(int id);
}
<?xml version="1.0" encoding="UTF-8"?> select * from article select * from article where id = #{id} insert into article (author,title,content) values (#{author},#{title},#{content}); delete from article where id = #{id} 既然已经提供了 myBatis 的映射配置文件，自然要告诉 spring boot 这些文件的位置**
mybatis:
mapper-locations: classpath:com/kuang/mapper/*.xml
type-aliases-package: com.kuang.pojo
编写一个Controller测试下，是否ok；
3、文章编辑整合（重点）
3.1、导入 editor.md 资源 ，删除多余文件
3.2、编辑文章页面 editor.html、需要引入 jQuery；
秦疆'Blog
标题：
作者：
3.3、编写Controller，进行跳转，以及保存文章
@Controller
@RequestMapping("/article")
public class ArticleController {
@GetMapping("/toEditor")
public String toEditor(){
return “editor”;
}
@PostMapping("/addArticle")
public String addArticle(Article article){
articleMapper.addArticle(article);
return “editor”;
}
}
图片上传问题
1、前端js中添加配置
//图片上传
imageUpload : true,
imageFormats : [“jpg”, “jpeg”, “gif”, “png”, “bmp”, “webp”],
imageUploadURL : “/article/file/upload”, // //这个是上传图片时的访问地址
2、后端请求，接收保存这个图片, 需要导入 FastJson 的依赖//博客图片上传问题
@RequestMapping("/file/upload")
@ResponseBody
public JSONObject fileUpload(@RequestParam(value = “editormd-image-file”, required = true) MultipartFile file, HttpServletRequest request) throws IOException {
//上传路径保存设置
//获得SpringBoot当前项目的路径：System.getProperty(“user.dir”)
String path = System.getProperty(“user.dir”)+"/upload/";
//按照月份进行分类：
Calendar instance = Calendar.getInstance();
String month = (instance.get(Calendar.MONTH) + 1)+“月”;
path = path+month;
File realPath = new File(path);
if (!realPath.exists()){
realPath.mkdir();
}
//上传文件地址
System.out.println(“上传文件保存地址：”+realPath);
//解决文件名字问题：我们使用uuid;
String filename = “ks-”+UUID.randomUUID().toString().replaceAll("-", “”);
//通过CommonsMultipartFile的方法直接写文件（注意这个时候）
file.transferTo(new File(realPath +"/"+ filename));
//给editormd进行回调
JSONObject res = new JSONObject();
res.put(“url”,"/upload/"+month+"/"+ filename);
res.put(“success”, 1);
res.put(“message”, “upload success!”);
return res;
}
3、解决文件回显显示的问题，设置虚拟目录映射！在我们自己拓展的MvcConfig中进行配置即可！@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
// 文件保存在真实目录/upload/下，
// 访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了。
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**")
.addResourceLocations(“file:”+System.getProperty(“user.dir”)+"/upload/");
}
}
表情包问题
自己手动下载，emoji 表情包，放到图片路径下：修改editormd.js文件
// Emoji graphics files url path
editormd.emoji = {
path : “…/editormd/plugins/emoji-dialog/emoji/”,
ext : “.png”
};
4、文章展示
4.1、Controller 中增加方法@GetMapping("/{id}")
public String show(@PathVariable(“id”) int id,Model model){
Article article = articleMapper.getArticleById(id);
model.addAttribute(“article”,article);
return “article”;
}
4.2、编写页面 article.html
作者：
5、可能会出现的问题 上传图片，未找到上传数据
public class BinaryUploader {
public static final State save(HttpServletRequest request,
Map<String, Object> conf) {
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
}
try {
//将request 转化成 MultipartHttpServletRequest
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
if(multipartFile==null){
return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
}
String savePath = (String) conf.get("savePath");
String originFileName = multipartFile.getOriginalFilename();
String suffix = FileType.getSuffixByFilename(originFileName);
originFileName = originFileName.substring(0,
originFileName.length() - suffix.length());
savePath = savePath + suffix;
long maxSize = ((Long) conf.get("maxSize")).longValue();
if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
}
savePath = PathFormat.parse(savePath, originFileName);
//此处为springboot中自定义 资源上传的硬盘路径，可以根据自己需求再controller中读取自定义配置设置
String uploadPath = "";
if(request.getAttribute("uploadPath")!=null){
uploadPath = (String)request.getAttribute("uploadPath");
}
String physicalPath = uploadPath + savePath;
InputStream is = multipartFile.getInputStream();
State storageState = StorageManager.saveFileByInputStream(is,
physicalPath, maxSize);
is.close();
if (storageState.isSuccess()) {
storageState.putInfo("url", PathFormat.format(savePath));
storageState.putInfo("type", suffix);
storageState.putInfo("original", originFileName + suffix);
}
return storageState;
} catch (IOException e) {
}
return new BaseState(false, AppInfo.IO_ERROR);
}
private static boolean validType(String type, String[] allowTypes) {
List<String> list = Arrays.asList(allowTypes);
return list.contains(type);
}}
重新编译后打包，我们再来测试一下；
6、测试
重启项目，浏览器地址栏输入http://localhost:8080/，访问进行测试！大功告成！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
