不惑之年的硬件牛人一步一步教你学spring boot完整项目---客户管理模块从前端到后台之login.html部分分析（三）

跟着波哥学物联网

于 2018-06-09 14:22:24 发布

阅读量287

点赞数

分类专栏： spring boot理论及实战

本文链接：https://blog.csdn.net/weixin_38638578/article/details/80623634

版权

spring boot理论及实战专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：笔者曾经有18年的硬件研发经验，从（1）51单片机到（2）FPGA到（3）嵌入式ARM(ARM9到CORTEX A9)全都研发设计过，产品从（1）B超的整机研发到（2）智能家居系统到（3）无线电监测机到（4）平板电脑研发到（5）路灯智能控制到（5）工业电脑均有涉及，从（1）普通的电子技术工程师到（2）副总工程师到（3）副总经理到（4）事业部总经理。。。开始教你学习用spring boot搭建一个我们落地的完整项目模块--客户管理部分。

今天是：2018年6月8日研究主题：客户管理模块从前端到后台之login.html部分分析

一、项目内建立前端页面的两个文件：一个是static，另一个是templates；

1. 默认情况下, 网页存放于static目录下, 默认的"/"指向的是~/resouces/static/index.html文

2. 如果引入了thymeleaf, 则默认指向的地址为~/resouces/templates/index.html

由于在之前的pom.xml中增加了thymeleaf模板，因此会访问templates下面的html，我们就将html放到templates目录下；将js、css、font、im g放到static目录下。

二、先学学html5的知识

1、html5的第一行代码

2、最小框架的html5

三、在“templates”中新建“login.xml”文件

四、正式开始编写“login.html”

1、先写框架：

需要特别说明的是： Stylesheet -- 定义一个外部加载的样式表，引入css目录下面的login.css文件

<link rel="stylesheet" href="css/login.css">

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录入口</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>

</body>
</html>

2、添加body内容：

（1）、<div></div>表示建立一个层，一个包含框；class=“first”表示给这个层起一个名为first的类名称，然后css中可以调用.first{width:100px;height:100px;backgroud:red}等之类的样式。

<div class="first">

（2）、

<h1>欢迎登陆</h1>

（3）、form表单后面跟id表示：

<form id="login">

（4）、在input中加入placeholder标签，可以作为用户文字提示；如：<input type="radio" name="radio" id="#" value="#"/>里面：type是该控件的类型；name用作表单的控件名；id主要用于页面内的javascript引用；value是该控件的值。

<input type="text" placeholder="用户名" name="username"/>
<input type="password" placeholder="密码" name="password"/>
<input type="button" id="loginbutton" value="登录"/>

（5）、

<li>表示列表项。<ul>表示无序排列，<ol>表示有序排列。即在<ul> </ul>中写入<li>可以构成一个无序列表，而在<ol> </ol>中写入<li>构成的是一个有序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

（6）、<script>相当于一个标签，你要在html中写js的话就必须用这个type后边就是定义一个类型！type="text/javascript" 就是告诉浏览器中间的代码是文本形式的javascript；

<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/login.js"></script>