Code Craftsman Community (Practical Notes 2)

1. Realize the paging function :

First, analyze the paging characteristics of the page https://elasticsearch.cn/explore/. When the current page is not the first page, "<" will appear, and correspondingly, when the current page is not the last page, ">" It will appear; the other page is a group of 7 numbers. When these 7 numbers do not include the first page, "<<" will appear, and when the last page is not included, ">>" will appear.

select * from question limit a, b: Starting from position a, return b data

select * from question limit a offset b: return a data from position b

2.P27: 404 error is displayed after the introduction of jquery

Solution: In order to introduce resources, jquery must be introduced first, and bootstrap.min.js later, because there is the use of jquery in bootstrap.min.js.

Insert picture description here

3. thymeleaf: encapsulate a fixed style and call it on different pages.

navigation.html:存放格式的页面

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
	<div th:fragment="nav">
        //放固定的格式
	</div>
</body>
</html>
进行调用
<div th:insert="navigation :: nav"></div>

4. @PathVariable : Path variable

You can directly get the data from the page in the background, and perform corresponding operations through the obtained data.

@GetMapping("/question/{id}")
public String question(@PathVariable(name = "id") Integer id,                       
                       Model model) {
    
        
    QuestionDTO questionDTO = questionService.getById(id);         			       		 	 model.addAttribute("question", questionDTO);    
    return "question";
}

5. Interceptor: Interceptor

Before running the webpage, perform certain operations.

6. Implementation of logout operation

在html中将退出登录映射到 /logout
<li><a href="/logout">退出登录</a></li>
//    	  在相应的controller中实现退出登录操作
    @GetMapping("/logout")
    public String logout(HttpServletRequest request,
                         HttpServletResponse response) {
    
    
//        将session从页面中移除
        request.getSession().removeAttribute("user");

//        将自定义的 token cookie从页面中移除
        Cookie cookie = new Cookie("token", "null");
        cookie.setMaxAge(0);
        response.addCookie(cookie);
        return "redirect:/";
    }

7. Accept id attribute in html

<!--用于接收 id属性-->
<input type="hidden" name="id" th:value="${id}">

8. Integrate Mybatis Generator : http://mybatis.org/generator/

(1) Add relevant plug-ins in the pom file

<plugin>    
    <groupId>org.mybatis.generator</groupId>    
    <artifactId>mybatis-generator-maven-plugin</artifactId>    
    <version>1.4.0</version>  
    需要驱动
    <dependencies>        
    	<dependency>            
    		<groupId>mysql</groupId>            
    		<artifactId>mysql-connector-java</artifactId>            
    		<version>8.0.18</version>        
    	</dependency>    
    </dependencies>
</plugin>

(2) Build generatorConfig.xml under resources

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
<!--    数据库基本数据设置-->
    <context id="DB2Tables" targetRuntime="MyBatis3">
    <!--实现分页功能的插件    -->
        <plugin  type="org.mybatis.generator.plugins.RowBoundsPlugin"></plugin>
    
        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
         connectionURL="jdbc:mysql://localhost:3306/test?serverTimezone=UTC"
         userId="root"
         password="123456">
        </jdbcConnection>

        <javaTypeResolver >
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>

<!--        model所在的位置-->
        <javaModelGenerator targetPackage="life.zxw.community.community.model" targetProject="src/main/java">
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </javaModelGenerator>

<!--        xml所在的位置-->
        <sqlMapGenerator targetPackage="mapper"  targetProject="src/main/resources">
            <property name="enableSubPackages" value="true" />
        </sqlMapGenerator>

<!--        xml映射的mapper-->
        <javaClientGenerator type="XMLMAPPER" targetPackage="life.zxw.community.community.mapper"  targetProject="src/main/java">
            <property name="enableSubPackages" value="true" />
        </javaClientGenerator>

<!--        连接数据库中的表,重要属性为 tableName-->
        <table  tableName="user" domainObjectName="User" >
        </table>

    </context>
</generatorConfiguration>

(3) Add @MapperScan to the running program

@MapperScan(basePackages = "life.zxw.community.community .mapper")

(4) Running in Terminal, various sql statements will be automatically generated according to the database table

mvn -Dmybatis.generator.overwrite=true mybatis-generator:generate

9. @Transactional : Transaction processing, automatically commit the transaction or automatically roll back when encountering an exception.

https://www.jianshu.com/p/5687e2a38fbc

10.java 8 Stream : can process data in a declarative way

https://www.runoob.com/java/java8-streams.html (Novice Tutorial)

List<String> string = Arrays.asList("abc","","ba");
List<String> ss = string.stream().filter(s -> !s.isEmpty()).collect(Collectors.toList());
List<String> aa = string.stream().map(s -> s.toUpperCase()).collect(Collectors.toList());
System.out.println(ss);
[abc, ba]

System.out.println(aa);
[ABC, , BA]
//        获取去重的评论人
        Set<Long> commentators = comments.stream().map(comment -> comment.getCommentator()).collect(Collectors.toSet());
        List<Long> userIds = new ArrayList<>();
        userIds.addAll(commentators);

//       获取评论人并转换成Map
        UserExample userExample = new UserExample();
        userExample.createCriteria()
                .andIdIn(userIds);
        List<User> users = userMapper.selectByExample(userExample);
        Map<Long, User> userMap = users.stream().collect(Collectors.toMap(user -> user.getId(), user -> user));

//       转换comment为commentDTO
        List<CommentDTO> commentDTOS = comments.stream().map(comment -> {
    
    
            CommentDTO commentDTO = new CommentDTO();
            BeanUtils.copyProperties(comment, commentDTO);
            commentDTO.setUser(userMap.get(comment.getCommentator()));
            return commentDTO;
        }).collect(Collectors.toList());
        return commentDTOS;

11.Mybatis Generator: Generate your own code

(1) Create your own xml file under \src\main\resources\mapper, write related SQL statements, and map to the corresponding mapper

(2) Create your own mapper under \src\main\java\life\zxw\community\community\mapper

12. Realize MarkDown editing (using editor.md ): http://editor.md.ipandao.com/

(1) Create a markdown editor

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>

<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>

<script type="text/javascript">
    $(function() {
     
     
        var editor = editormd("editor", {
     
     
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

(2) Display the content of markdown and place it on the page where the content is displayed

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>

//展示markdown内容
<div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>             
</div>


<script type="text/javascript">
    $(function() {
     
     
	    var testView = editormd.markdownToHTML("test-markdown-view", {
     
     
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script> 

14.动态sql: if,choose(when,otherwise),where,set,foreach等

The core of mybatis performs flexible operations on sql statements, judges through expressions, and flexibly splices and assembles sql.

References: https://blog.csdn.net/madman_donghui/article/details/79449524

15. Realize search function

(1) Send the search content of the page to the backend

<form class="navbar-form navbar-left" action="/" method="get">    
    <div class="form-group">        
    	<input type="text" class="form-control" name="search" placeholder="搜索问题"> </div>    
    <button type="submit" class="btn btn-default">搜索</button></form>

(2)

拿到页面传来的请求搜索内容
@RequestParam(name = "search",required = false) String  search
    
进行搜索    
PagesDTO pagesDTO = questionService.list(search,page,size);

将拿到的内容设置成 sql正则表达式中的样子(REGEXP)
if (StringUtils.isNotBlank(search)){
    
    
            String[] strings = StringUtils.split(search," ");
            search = Arrays.stream(strings).collect(Collectors.joining("|"));

        }

将页面信息page,size以及search封装成QuestionQueryDTO,以便信息的拿取
    
利用自己写的动态sql来拿到查找问题数目
Integer totalcount = extMapper.countBySearch(questionQueryDTO);

拿到问题列表
List<Question> questions = extMapper.selectByearch(questionQueryDTO);

将拿到的问题列表以及search返回到页面
model.addAttribute("pagesDTO", pagesDTO);
model.addAttribute("search", search);

(3)

当并没有进行搜索时,即search==null,这时候正常显示页面。
<ul class="pagination" th:if="${search==null}">

当进行搜索时,即search!=null,这时候显示与搜索问题相关的页面,与此同时,翻页时也将search加入地址。   
<ul class="pagination" th:if="${search!=null}">    
<a th:href="@{/(page=${page},search=${search})}" th:text="${page}">

16.Add log

设置日志存储路径
logging.file.path=logs/community.
设置日志等级
loglogging.level.root=info
设计日志最大存储天数
logging.file.max-history=15
设置日志最大存储容量
logging.file.maxsize=100MB
server.servlet.session.timeout=15552000
spring.servlet.multipart.max-file-size=20MB
spring.servlet.multipart.max-request-size=20MB
},search=${
    
    search})}" th:text="${
    
    page}">

16.Add log

设置日志存储路径
logging.file.path=logs/community.
设置日志等级
loglogging.level.root=info
设计日志最大存储天数
logging.file.max-history=15
设置日志最大存储容量
logging.file.maxsize=100MB
server.servlet.session.timeout=15552000
spring.servlet.multipart.max-file-size=20MB
spring.servlet.multipart.max-request-size=20MB

Guess you like

Origin blog.csdn.net/qq_41458842/article/details/104901439