SpringBoot开发网站

本是古典何须时尚 2022-08-30 00:41 208阅读 0赞

**目录**

什么是WebJars

首页和图表定制

template目录的index

jsp和html的区别

thymeleaf和Jsp或者HTML区别

--------------------

# SpringBoot开发简单的网站 #

### [https://www.bilibili.com/video/BV19E411v7Ty?p=4][https_www.bilibili.com_video_BV19E411v7Ty_p_4] ###

# 什么是WebJars #

什么是WebJars？WebJars是将客户端（浏览器）资源（JavaScript，Css等）打成jar包文件，以对资源进行统一依赖管理。**WebJars的jar包部署在Maven中央仓库上。**

我们在开发Java web项目的时候会使用像Maven，Gradle等构建工具以实现对jar包版本依赖管理，以及项目的自动化管理，但是对于JavaScript，Css等前端资源包，我们只能采用拷贝到webapp目录下的手工方式，这样做就无法对这些资源进行依赖管理。而且容易导致文件混乱、版本不一致等问题。那么**WebJars就提供给我们这些前端资源的jar包形式**，我们就可以进行**依赖管理**。

WebJars是将这些**通用的Web前端资源打包成Java的Jar包**，然后**借助Maven工具对其管理**，保证这些Web资源版本唯一性，升级也比较容易。关于webjars资源，有一个专门的网站http://www.webjars.org/，我们可以到这个**网站上找到自己需要的资源，在自己的工程中添加入maven依赖，即可直接使用这些资源了**。

###  ###

1、 [WebJars主官网][WebJars] 查找对于的组件，比如Vuejs

1.  `<dependency>`
2.  `<groupId>org.webjars.bower</groupId>`
3.  `<artifactId>vue</artifactId>`
4.  `<version>1.0.21</version>`
5.  `</dependency>`

2、页面引入

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70][]

1、JS是一门前端语言。

2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

关系比喻：

若把js比作木头，那么jquery就是木板（半成品）

jQuery与ajax都是js的一个框架，各有各的功能，若js是父亲的话，jquery与ajax就是两个儿子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2][]

#  首页和图表定制![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3][] #

###  template目录的index![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4][] ###

模板引擎支持

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6][]

#  jsp和html的区别 #

HTML（Hypertext Markup Language）文本标记语言，它是静态页面，和JavaScript一样解释性语言，为什么说是解释性语言呢？因为，只要你有一个浏览器那么它就可以正常显示出来，而不需要指定的编译工具，只需在TXT文档中写上HTML标记就OK。  
  
JSP（Java Server Page）看这个意思就知道是Java服务端的页面，所以它是动态的，它是需要经过JDK编译后把内容发给客户端去显示，我们都知道，Java文件编译后会产生一个class文件，最终执行的就是这个class文件，JSP也一样，它也要编译成class文件！JSP不止要编译，它还得要转译，首先把JSP转译成一个Servlet文件，然后在编译成class文件。  
  
JSP和HTML的区别  
  
运行机制不同  
  
HTML是运行在客户端，是一种标记语言，由浏览器解释执行；JSP运行在服务器端，需要web容器提供运行环境。  
  
HTML是客户端技术，提供了一种描述文档中基于文本的信息结构的方法。JSP是服务器端技术，提供了一个动态接口，用于不断更改数据并动态调用服务器操作。  
  
采用的技术不同  
  
HTML是客户端技术，提供了一种描述文档中基于文本的信息结构的方法。JSP是服务器端技术，提供了一个动态接口，用于不断更改数据并动态调用服务器操作。  
  
网页上的区别：  
  
HTML生成静态网页；JSP生成动态网页。  
  
JSP被用作动态页面的制作，而HTML一般用作静态页面的制作。动态页面的内容一般都是依靠服务器端的程序来生成的，不同人、不同时候访问页面，显示的内容都可能不同。

# thymeleaf和Jsp或者HTML区别 #

thymeleaf![20210717174119660.png][]

很好的做前后端的分离：[https://blog.csdn.net/LI\_AINY/article/details/87359683][https_blog.csdn.net_LI_AINY_article_details_87359683]

jsp：![20210717174356389.png][]

运行在服务器，不好实现前后端分离

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7][]

# xmlns是XML Namespaces #

xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。

xmlns是XML Namespaces的缩写，中文名称是：XML命名空间。  
XML 命名空间属性被放置于元素的开始标签之中，并使用以下的语法：  
xmlns:namespace-prefix="namespaceURI"。  
当命名空间被定义在元素的开始标签中时，所有带有相同前缀的子元素都会与同一个命名空间相关联。

[https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf][https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.pdf]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9][]

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
    </head>
    <body>
    <h2>登录页面</h2>
    <form>
        账号: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit" value="登录">
    
    
    </form>
    <div th:text="${name}"></div>
    <div th:utext="${user}" id="ceshi" th:background="red"></div>
    <div th:each="user:${name}" th:text="${user}"></div>
    
    </body>
    <style>
    
    </style>
    </html>

package com.example.demo.controller;
    
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    import java.util.Arrays;
    
    //http://localhost:10000/login
    @Controller
    public class LoginController {
        /**
         * 登录页面
         * @return
         */
        @GetMapping("/login")
        public String login(Model model) {
            // 这里返回的login指的是src/main/resources/templates目录下的login.html
            // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
            // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
    
            model.addAttribute("msg","<h1> zjq</h1>");
            model.addAttribute("user","<h1> zjq</h1>");
            model.addAttribute("name", Arrays.asList("zhangsna","lisi"));
            return "login";
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10][]

[https_www.bilibili.com_video_BV19E411v7Ty_p_4]: https://www.bilibili.com/video/BV19E411v7Ty?p=4
[WebJars]: http://www.webjars.org/bower
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70]: /images/20220829/145dfb8c8d5f4e87b56c9861fc46afd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1]: /images/20220829/13154338a2304699881d3f8b4c58ab3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2]: /images/20220829/c7d3cbf6cb554c12ad62ed0ee32a2a05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3]: /images/20220829/a55090ba02f541729b56216257f8068c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4]: /images/20220829/1d72f46033a9431e89fc0fa6c59e9fa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5]: /images/20220829/1ef124d2f68e4aeeb46fc4f33f4b0ee8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6]: /images/20220829/aa30e1cb08e14ead93a1db3d0fe0ef4b.png
[20210717174119660.png]: /images/20220829/c3ddec54264d406dbdc6eb7bc25daf74.png
[https_blog.csdn.net_LI_AINY_article_details_87359683]: https://blog.csdn.net/LI_AINY/article/details/87359683
[20210717174356389.png]: /images/20220829/c22aa95292d74af19bf3dbece42cc8d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7]: /images/20220829/7b5eefac1a834f128fd4a8b781c25c5e.png
[https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.pdf]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8]: /images/20220829/240d8921e32e41b6ae9a8a38efd90a21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9]: /images/20220829/778091c69b8d4b869ed476c34460de9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10]: /images/20220829/8b84bc9826044d9aabdfd2bebd345951.png