最近由于开发需求,需要写一些半自动化接口,需要单开工程仅供运维使用,所以又要回过头熟悉下前端技术,做个笔记记录,方便后续查询使用。
1、环境简要介绍下
版本不是很严格,主要就是看自己需求来实际的选择进行。
springboot版本:2.2.9
bootstrap版本:3.3.7
jquery版本: 1.12.4
2、部分代码
pom文件:
<?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.2.9.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.zh.boot</groupId>
<artifactId>zh-boot</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>zh-boot</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.70</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.12.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.32</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<!-- maven打包忽略test类 -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.2</version>
<configuration>
<skipTests>true</skipTests>
</configuration>
</plugin>
</plugins>
</build>
</project>
application.yml文件
server:
port: 8080
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
check-template-location: true
cache: false
mode: HTML5
encoding: utf-8
一个入口controller类
package com.zh.boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
/**
* @author : Lu Ma Ren
* @Date: 2020/6/1 16:00
* @Description: V-
*/
@SuppressWarnings("all")
@Controller
@RequestMapping(value = "/auto")
public class AutoInterfaceController {
@GetMapping(value = "/main")
public ModelAndView intoMainPage() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("main");
modelAndView.addObject("param1", "我第一个参数");
modelAndView.addObject("param2", "我第二个参数");
modelAndView.addObject("param3", "success");
return modelAndView;
}
}
html界面:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="./webjars/jquery/1.12.4/jquery.min.js"></script>
<script src="./webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>SpringBoot+Html+Bootstrap</title>
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">创建内容模板</a>
</li>
<li role="presentation">
<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">创建Model</a>
</li>
<li role="presentation">
<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">管理历史记录</a>
</li>
<li role="presentation">
<a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">待定开发</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="margin-outside: 10px">
<div role="tabpanel" class="tab-pane active" id="home">
第一个tab页
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<p th:text="${param1}"></p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<p th:text="${param2}"></p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<p th:text="${param3}"></p>
</div>
</div>
</div>
</body>
</html>
这块有个深坑:就是路径问题,所以建议直接写绝对路径
启动项目,访问地址:
这样就得到结果了,不过还是要验证下最终包资源问题,浏览开发者工具打开就可以看到结果
自从毕业就没怎么写前端了,基本都是前后端分离,但是技术不能忘记,偶尔的一些场景还是需要用得到的,