博客

springboot—导入模板的操作步骤详解

  • Post author:
  • Post category:其他




导入模板的操作步骤详解



模板下载地址

  • 百度随便搜一下模板下载

在这里插入图片描述

  • 例如：下面这个，随便找个喜欢的模板下载

在这里插入图片描述

  • 下载完成后，随便命个名，解压出来

在这里插入图片描述

  • 解压出来后的样子

在这里插入图片描述


assets文件夹，导入idea，存放静态资源static下。这个文件夹里面都是一些图片，样式和封装的js


下面的html就是一些对呀页面，按照自己需求则取



创建springboot项目


此处为员工管理系统

例一：模拟数据库

  • controller:IndexController


访问地址写在controller是一种方法，写在配置类里面是第二种方法，此处配置类为（MyMvcConfig）
 

package com.na.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

//    @RequestMapping("/pages-signin.html")
//    public String index(){
//        return "pages-signin";
//    }

//    @RequestMapping("/index.html")
//    public String index(){
//        return "index";
//    }

}
  • MyMvcConfig 
package com.na.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

//    @Override
//    public void addViewControllers(ViewControllerRegistry registry) {
//        registry.addViewController("/").setViewName("index");
//        registry.addViewController("/index.html").setViewName("index");
//    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("pages-signin");
        registry.addViewController("/pages-signin.html").setViewName("pages-signin");
    }
}

  • dao:

    • DepartmentDao 

      package com.na.dao;

import com.na.pojo.Department;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author 22724
 * @create 2021/12/17
 * @since 1.0.0
 */
//部门Dao
@Repository
public class DepartmentDao {

    //模拟数据库中的数据

    private static Map<Integer, Department> departments = null;

    static {
        departments = new HashMap<Integer, Department>();//创建一个部门表

        departments.put(101,new Department(101,"教学部"));
        departments.put(102,new Department(102,"市场部"));
        departments.put(103,new Department(103,"教研部"));
        departments.put(104,new Department(104,"运营部"));
        departments.put(105,new Department(105,"后勤部"));

    }

    //获得所以部门信息
    public Collection<Department> getDepartments(){
        return departments.values();
    }

    //通过id得到部门
    public Department getDepartmentById(Integer id){
        return departments.get(id);
    }

}

    • EmployeeDao 

      package com.na.dao;

import com.na.pojo.Department;
import com.na.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author 22724
 * @create 2021/12/17
 * @since 1.0.0
 */

//员工Dao
@Repository
public class EmployeeDao {

    //模拟数据库中的数据
    private static Map<Integer, Employee> employees = null;
    //员工有所属的部门
    @Autowired
    private DepartmentDao departmentDao;

    static {
        employees = new HashMap<Integer,Employee>();//创建一个部门表

        employees.put(1001,new Employee(1001,"AA","A2272499575@qq.com",0,new Department(101,"教学部")));
        employees.put(1002,new Employee(1002,"BB","B2272499575@qq.com",1,new Department(102,"市场部")));
        employees.put(1003,new Employee(1003,"CC","C2272499575@qq.com",0,new Department(103,"教研部")));
        employees.put(1004,new Employee(1004,"DD","D2272499575@qq.com",1,new Department(104,"运营部")));
        employees.put(1005,new Employee(1005,"EE","E2272499575@qq.com",0,new Department(105,"后勤部")));

    }

    //主键自增
    private static Integer initId = 1006;
    //增加一个员工
    public void save(Employee employee){
        if (employee.getId()==null){
            employee.setId(initId++);
        }

        employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));

        employees.put(employee.getId(),employee);
    }

    //查询全部员工信息
    public Collection<Employee> getAll(){
        return employees.values();
    }

    //通过id查询员工
    public Employee getEmployeeById(Integer id){
        return employees.get(id);
    }

    //通过id删除员工
    public void delete(Integer id){
        employees.remove(id);

    }
}

  • pojo

    • Department 

      package com.na.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author 22724
 * @create 2021/12/17
 * @since 1.0.0
 */
//部门表
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {

    private Integer id;
    private String departmentname;


}

    • Emloyee 

      package com.na.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author 22724
 * @create 2021/12/17
 * @since 1.0.0
 */
//员工表
@Data
@NoArgsConstructor
public class Employee {

    private Integer id;
    private String lastName;
    private String email;
    private Integer gender;//0:女   1：男
    private Department department;
    private Date birth;

    public Employee(Integer id, String lastName, String email, Integer gender, Department department) {
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
        this.department = department;
        //默认的创建日期
        this.birth = new Date();
    }

}

  • pom.xlm 

    <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.7.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.na</groupId>
    <artifactId>springboot-01-helloworld</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-01-helloworld</name>
    <description>na first Springboot project</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>



    <dependencies>
        <!--启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <!--  lombok     -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!-- Thymeleaf 我们都是基于3.x-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>

<!--        <dependency>-->
<!--            <groupId>org.webjars</groupId>-->
<!--            <artifactId>jquery</artifactId>-->
<!--            <version>3.4.1</version>-->
<!--        </dependency>-->

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.6.0</version>
            </plugin>
        </plugins>
    </build>

</project>

  • 目录截图

在这里插入图片描述



模板页面修改

  • 例如登陆页面 pages-signin.html


    1. 首先要加上头部:



    1. 所有页面的静态资源都需要使用thymeleaf接管。使用@符号来配置
       
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

   <head>

      <!-- Basic -->
      <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

      <meta name="keywords" content="HTML5 Admin Template" />
      <meta name="description" content="Porto Admin - Responsive HTML5 Template">
      <meta name="author" content="okler.net">

      <!-- Mobile Metas -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <!-- Web Fonts  -->
      <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

      <!-- Vendor CSS -->
      <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.css}" />
      <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}" />
      <link rel="stylesheet" th:href="@{/vendor/magnific-popup/magnific-popup.css}" />
      <link rel="stylesheet" th:href="@{/vendor/bootstrap-datepicker/css/datepicker3.css}" />

      <!-- Theme CSS -->
      <link rel="stylesheet" th:href="@{/stylesheets/theme.css}" />

      <!-- Skin CSS -->
      <link rel="stylesheet" th:href="@{/stylesheets/skins/default.css}" />

      <!-- Theme Custom CSS -->
      <link rel="stylesheet" th:href="@{/stylesheets/theme-custom.css}">

      <!-- Head Libs -->
      <script th:src="@{/vendor/modernizr/modernizr.js}"></script>

   </head>
   <body>
      <!-- start: page -->
      <section class="body-sign">
         <div class="center-sign">
            <a href="/" class="logo pull-left">
               <img th:src="@{/images/logo.png}" height="54" alt="Porto Admin" />
            </a>

            <div class="panel panel-sign">
               <div class="panel-title-sign mt-xl text-right">
                  <h2 class="title text-uppercase text-bold m-none"><i class="fa fa-user mr-xs"></i> 登录</h2>
               </div>
               <div class="panel-body">
                  <form action="index.html" method="post">
                     <div class="form-group mb-lg">
                        <label>用户名</label>
                        <div class="input-group input-group-icon">
                           <input name="username" type="text" class="form-control input-lg" />
                           <span class="input-group-addon">
                              <span class="icon icon-lg">
                                 <i class="fa fa-user"></i>
                              </span>
                           </span>
                        </div>
                     </div>

                     <div class="form-group mb-lg">
                        <div class="clearfix">
                           <label class="pull-left">密码</label>
                           <a th:href="@{/pages-recover-password.html}" class="pull-right">Lost Password?</a>
                        </div>
                        <div class="input-group input-group-icon">
                           <input name="pwd" type="password" class="form-control input-lg" />
                           <span class="input-group-addon">
                              <span class="icon icon-lg">
                                 <i class="fa fa-lock"></i>
                              </span>
                           </span>
                        </div>
                     </div>

                     <div class="row">
                        <div class="col-sm-8">
                           <div class="checkbox-custom checkbox-default">
                              <input id="RememberMe" name="rememberme" type="checkbox"/>
                              <label for="RememberMe">Remember Me</label>
                           </div>
                        </div>
                        <div class="col-sm-4 text-right">
                           <button type="submit" class="btn btn-primary hidden-xs">登录</button>
                           <button type="submit" class="btn btn-primary btn-block btn-lg visible-xs mt-lg">Sign In</button>
                        </div>
                     </div>

                     <span class="mt-lg mb-lg line-thru text-center text-uppercase">
                        <span>or</span>
                     </span>

                     <div class="mb-xs text-center">
                        <a class="btn btn-facebook mb-md ml-xs mr-xs">Connect with <i class="fa fa-facebook"></i></a>
                        <a class="btn btn-twitter mb-md ml-xs mr-xs">Connect with <i class="fa fa-twitter"></i></a>
                     </div>

                     <p class="text-center">Don't have an account yet? <a href="../../../../../../样式模板/员工管理系统/pages-signup.html">Sign Up!</a>

                  </form>
               </div>
            </div>

            <p class="text-center text-muted mt-md mb-md">&copy; Copyright 2018. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.</p>
         </div>
      </section>
      <!-- end: page -->

      <!-- Vendor -->
      <script th:src="@{/vendor/jquery/jquery.js}"></script>
      <script th:src="@{/vendor/jquery-browser-mobile/jquery.browser.mobile.js}"></script>
      <script th:src="@{/vendor/bootstrap/js/bootstrap.js}"></script>
      <script th:src="@{/vendor/nanoscroller/nanoscroller.js}"></script>
      <script th:src="@{/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>
      <script th:src="@{/vendor/magnific-popup/magnific-popup.js}"></script>
      <script th:src="@{/vendor/jquery-placeholder/jquery.placeholder.js}"></script>
      
      <!-- Theme Base, Components and Settings -->
      <script th:src="@{/javascripts/theme.js}"></script>
      
      <!-- Theme Custom -->
      <script th:src="@{/javascripts/theme.custom.js}"></script>
      
      <!-- Theme Initialization Files -->
      <script th:src="@{/javascripts/theme.init.js}"></script>

   </body>
</html>


版权声明：本文为qq_45596062原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。