Spring Boot + Java爬虫 + 部署到Linux（七、前端）

最新推荐文章于 2024-04-28 20:34:10 发布

gg_yangliyang

最新推荐文章于 2024-04-28 20:34:10 发布

阅读量610

点赞数

分类专栏： Spring Boot 爬虫文章标签：爬虫前端 thymeleaf spring boot

本文链接：https://blog.csdn.net/gg_yangliyang/article/details/80869583

版权

我们先在项目的resources里面建两个目录。一个叫static放一些静态文件，一个叫templates，放html文件。由于没怎么学过前端，又想让界面比较美观，可以使用bootstrap，可以搜索下载。好像现在最新版是3.7了吧，我这还是3.6呢。然后还有一个必须的就是jquery，这个是bootstrap和自己写都很需要。

在static里新建一个js目录，里面放上bootstrap.min.js和jquery.min.js。再在static里新建一个css目录，放上解压出来的bootstrap css的一大堆。如果想设favicon.ico，可以在application.properties里加上一行spring.mvc.favicon.enabled = false。然后整个favicon直接放static里就行了。最后，放个introduction.html在里面了，就是说明。image里放的是两个图片，一个叫up.png，一个叫down.png。目录层次就是这样的

剩下的就是templates里面的html了，总共4个，分别是index.html,login.html,success.html,include.html。前端的东西没什么好说的，复制粘贴就完事了嗷。当然可以把script和style专门写成css和js文件，但是不想麻烦了。

首先是最主要的index.html


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>eDownload</title>
	<style>
		div{
			margin:10px;
		}
		
	</style>
    <script type="text/javascript" src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    
	<link rel="stylesheet" type="text/css" href="/css/bootstrap/3.3.6/bootstrap.min.css" th:href="@{/css/bootstrap/3.3.6/bootstrap.min.css}"/>
	<script src="/js/bootstrap.min.js" th:src="@{js/bootstrap.min.js}"></script>
	<script th:inline="javascript">
	window.οnlοad=function(){
		var cookie = [[${cookie}]];
		
		var sem = cookie.split(";");
	
		if(sem.length == 2){
			var colon = sem[0].split(":");
			
			if(colon.length == 2){
				var userId = colon[1];
				
				$("#user").text("用户："+userId);
				
				$("#logout").show();
			}
		}
	};
		 var websocket = null;

	    //判断当前浏览器是否支持WebSocket
	    if('WebSocket' in window){
	        
	        init_websocket(websocket);
	    }
	    else{
	        alert('Not support websocket')
	    }
		function init_websocket(websocket){
			websocket = new WebSocket("ws://"+[[${localhost}]]+":8080/websocket");
			//连接发生错误的回调方法
		    websocket.onerror = function(){
		        setMessageInnerHTML("error");
		    };

		    //连接成功建立的回调方法
		    websocket.onopen = function(event){
		    	
		    }

		    //接收到消息的回调方法
		    websocket.onmessage = function(event){
		        setMessageInnerHTML(event.data);
		    }

		    //连接关闭的回调方法
		    websocket.onclose = function(){
		        //setMessageInnerHTML("close");
		        setMessageInnerHTML("连接已断开！请刷新浏览器或点击重新连接！\n");
		        $('#conn').show();
		    }

		    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		    window.onbeforeunload = function(){
		        websocket.close();
		    }
		}
		
	    

	    //将消息显示在网页上
	    total = 0;
	    title="";
	    now = 0.0;
	    success_num = 0;
	    function setMessageInnerHTML(msg){
	    	show = $("

最低0.47元/天解锁文章

gg_yangliyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot + Java爬虫 + 部署到Linux（七、前端）

我们先在项目的resources里面建两个目录。一个叫static放一些静态文件，一个叫templates，放html文件。由于没怎么学过前端，又想让界面比较美观，可以使用bootstrap，可以搜索下载。好像现在最新版是3.7了吧，我这还是3.6呢。然后还有一个必须的就是jquery，这个是bootstrap和自己写都很需要。在static里新建一个js目录，里面放上bootstrap.min....
复制链接

扫一扫