WEB application development comprehensive training day7

The training content of this section is introduction to Thymeleaf, Mybatis reverse engineering and jQuery

Download link of this project

https://pan.baidu.com/s/1DJh_4OcHTO1bL669U-v3WQ Extraction code: 8888

Thymeleaf

  1. Foreword: if you only know ajax, you are not recommended to use html directly, because it is very inconvenient to assign the data obtained by ajax to the html tag. We have learned jsp before. In jsp, you can directly traverse the back-end data through the jstl tag for loop traversal, if judgment, etc. However, the jsp technology is relatively old. We use a better thymeleaf to replace the jsp page for page data display.

  2. thymeleaf's advantages over jsp: JSP is not friendly to the front end, there are a lot of java code, JSP can not run alone, it must rely on the back-end server, and the front-end test is also troublesome. thymeleaf is an html page. It is a better template engine than JSP. It is also officially recommended by spring boot. You can not only directly open the execution static page, but also display dynamic content based on the server

  3. step

    <!-- thymeleaf -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.11.RELEASE</version>
    </dependency>
    <!-- thymeleaf-spring4 -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring4</artifactId>
        <version>3.0.9.RELEASE</version>
    </dependency>
    
  4. spring-mvc.xml(day6_ssm)

    <!--Template parser-->
    <bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
        <property name="prefix" value="/WEB-INF/pages/"></property>
        <property name="suffix" value=".html"></property>
        <property name="characterEncoding" value="utf-8"></property>
        <property name="templateMode" value="HTML5"></property>
        <property name="cacheable" value="false"></property>
    </bean>
    <!--template engine-->
    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver"></property>
    </bean>
    <!--view resolver -->
    <bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="characterEncoding" value="utf-8"></property>
        <property name="templateEngine" ref="templateEngine"></property>
    </bean>
    
  5. thymeleaf front and rear end transmission parameters

    @Controller
    public class ThymeleafController {
    
        /**
         * Transfer data to front page
         * @return
         */
        @RequestMapping("/test")
        public String test(Model model){
            String msg = "hello world";
            User user = new User();
            user.setUserName("Zhang San");
            user.setUserId(12);
            user.setUserAge(33);
            User user2 = new User();
            user2.setUserName("Zhang San");
            user2.setUserId(13);
            user2.setUserAge(33);
            List<User> userList = new ArrayList<>();
            userList.add(user);
            userList.add(user2);
            //1. Pass string data to the front end jsp: request. Setattribute()
            model.addAttribute("msg1111",msg);
            //2. Transfer object
            model.addAttribute("user",user);
            //3. Transfer set
            model.addAttribute("userList",userList);
            //4. Transfer picture path
            model.addAttribute("imgpath","/img/giao.jpg");
            return "test_thymeleaf";
        }
        /**
         * Delete the data according to the id passed by the front-end thymeleaf
         */
        @RequestMapping("/delete")
        @ResponseBody
        public String delete(Integer id){
            System.out.println(id);
            return "success";
        }
    }
    
    <!--
    1. Text assignment inside label: th:text
    2. Input box value Display value: th:value
    -->
    <h1 th:text="${msg1111}">Hello, world</h1>
    <input type="text" th:value="${msg1111}" value="1111">
    <span th:text="${user.userName}"></span>
    <span th:text="${user.userAge}"></span>
    <hr>
    
    <!--
    th:each="user:${userList}"  The set to traverse is userList,user Is a variable that can get every element in the collection
    -->
    <table border="1" style="border-collapse: collapse">
        <tr th:each="user:${userList}">
            <td th:text="${user.userId}"></td>
            <td th:text="${user.userName}"></td>
            <td th:text="${user.userAge}"></td>
            <td>
                <a th:href="@{'/delete?id='+${user.userId}}">Click delete</a>
            </td>
        </tr>
    </table>
    <!--
    such @{${route}}: yes thymeleaf Officially recommended writing
     When using and referencing resources, avoid the problem caused by whether the project name is configured or modified. Each time, the value is taken from the root path of the project
     For example: use css  js Pictures are recommended
    -->
    <img th:src="@{${imgpath}}" alt="">
    
  6. thymeleaf uses the a tag to transfer the value to the back-end Controller

    <td>
        <a th:href="@{'/delete?id='+${user.userId}}">Click delete</a>
    </td>
    
    /**
         * Delete the data according to the id passed by the front-end thymeleaf
    */
    @RequestMapping("/delete")
    @ResponseBody
    public String delete(Integer id){
        System.out.println(id);
        return "success";
    }
    

Mybatis reverse engineering

  1. Function: automatically generate entity classes, dao interfaces and corresponding mapper files (resultmap, addition, deletion, query and modification methods) according to the tables and fields of the database

  2. Use steps:

    • Modify pom.xml

      • Add reverse engineering dependencies

        Try to select the mysql dependencies you have used before

      • Add a plug-in for reverse engineering
      • Create the resources folder in src/main and mark, and copy generatorConfig.xml and config.properties into it

        Be sure to modify the database, account and password in config.properties

    • generatorConfig.xml contains entity classes, dao interfaces, and the location where mapper files are stored

    • Configuring the maven plug-in



  3. matters needing attention:

    • Do not reuse the mybatis reverse engineering plug-in to generate code

    • After the reverse engineering is used up, delete the table tag in generatorConfig.xml, and it doesn't matter to report an error. To avoid clicking an error and running the reverse engineering plug-in repeatedly

Project configuration SSM

  1. Import dependencies (including thymeleaf's)

  2. Modify web.xml

  3. spring-mybatis.xml spring-mvc.xml mybatis-config.xml

Supplement jquery content

  1. Introduction:

    jQuery It's a JavaScript Library.
    jQuery Greatly simplified JavaScript Programming.
    jQuery It's easy to learn
    
  2. Basic use

   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
       <div id="container" xixi="Hee hee">
   
       </div>
       <p class="content"></p>
       <p class="content"></p>
       <p class="content"></p>
       <button class="btn">Button</button>
   </body>
   <!--Import jquery library-->
   <script src="jquery-3.6.0.min.js"></script>
   <script type="text/javascript">
       //Obtain the label according to the id, assign a value, and modify the text color, background color, etc
       // var container = document.getElementById("container")
       // //1. innerHTML can recognize tags, innerText cannot recognize tags
       // // container.innerHTML = "<a href=' https://www.baidu.com '> Baidu < / a >“
       // container.innerText = "<a href=' https://www.baidu.com '> Baidu < / a >“
       // //2. Modify text color
       // container.style.color="red";
       // container.style.backgroundColor="yellow";
   
       //jquery........................
       // 1. jq get tag elements and three assignment methods
       // html() is the function of innerHTML, which can not only assign values, but also take values
       // text() innerText
       // value attribute of val() input box
       $("#Container ". HTML (" hee hee ")
       $(".content").html("ha-ha")
       $("p")//Get all p Tags
       //2. jq operate css
       // $("#container").css("color",'red')
       $("#container").css({"color":'red',"background-color":"yellow"})
       $(".content").css("color",'green')
       //3. Attribute operation
       console.log($("#container").attr("xixi"))
       //4. Events
       $(".btn").click(function () {
           //Function to execute after clicking
           console.log("Click event");
       })
       //5. Effect
       //5.1 hiding and displaying
       // $('#container').show()
       // $('#container').hide('3000')
       //5.2 fade in and fade out
       // $("#container").fadeOut(2000) / / fade out
       // $("#container").fadeIn(2000) / / fade in
       //5.3 slide display and slide up hide
       $("#container").slideUp(2000)
   </script>
   </html>
$('#container').show()
       // $('#container').hide('3000')
       //5.2 fade in and fade out
       // $("#container").fadeOut(2000) / / fade out
       // $("#container").fadeIn(2000) / / fade in
       //5.3 slide display and slide up hide
       $("#container").slideUp(2000)
   </script>
   </html>

Individual test effect

Tags: JQuery Maven Spring

Posted on Sun, 19 Sep 2021 19:18:48 -0400 by Rose.S