开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情
后台业务逻辑开发
1.富文本编辑器的使用
访问官网:www.wangeditor.com/
2.下载对应的js文件并且导入到项目中
3.页面使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/resources/wangEditor.min.js"></script>
</head>
<body>
<button id="btnRead">获取内容</button>
<button id="btnSet">设置内容</button>
<div id="divEditor" style="width: 80%;height: 600px">3333</div>
</body>
<script>
var E = window.wangEditor;
var editor = new E("#divEditor");
editor.create();
document.getElementById("btnRead").onclick=function () {
var content = editor.txt.html();
alert(content);
}
document.getElementById("btnSet").onclick=function () {
var content = "<li style='color: red'>你好</li>";
editor.txt.html(content);
}
</script>
</html>
代码说明:
- <script src="/resources/wangEditor.min.js">:加载js文件
- var E = window.wangEditor:初始化文本编辑器
- editor.create():文本编辑显示在页面上
- editor.txt.html():用来获取或者设置文本内容
4.重启项目
图书后台开发
1.WEB-INF新增management文件夹，用来存放后台文件的开发
book.ftl是图书列表页面
2.新增management包，用来处理后台控制器业务
@Controller
@RequestMapping("/management/book")
public class MBookController {
@GetMapping("/index.html")
public ModelAndView showBook(){
return new ModelAndView("/management/book");
}
}
代码说明:
- @RequestMapping("/management/book"):控制器新增统一的前缀
- @GetMapping("/index.html"):设置图书列表页面的url
3.重启项目
访问:http://localhost:8080/management/book/index.html
图书列表管理界面
文件上传
1.pom.xml引入文件上传依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
发布依赖
2.applicationContext.xml新增bean
3.控制器新增方法
@PostMapping("/upload")
@ResponseBody
public Map upload(@RequestParam("img") MultipartFile file, HttpServletRequest request) throws IOException {
//得到上传目录
String uploadPath = request.getServletContext().getResource("/").getPath()+"/upload/";
//设置文件名
String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
//扩展名
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
//保存文件到upload目录
file.transferTo(new File(uploadPath+fileName+suffix));
Map result = new HashMap<>();
result.put("errno",0);
result.put("data",new String[]{"/upload/"+fileName+suffix});
return result;
}
4.重启项目
可以看到，文件上传成功
