标签存档: 网页静态化

SpringMVC静态页面例子

下面的例子说明了如何使用 Spring MVC 框架来编写一个简单的基于 web 的应用程序,它可以在 <mvc:resources> 标签的帮助下访问静态页面和动态页面。为了开始使用它,让我们在恰当的位置使用 Eclipse IDE,然后按照下面的步骤使用 Spring 的 Web 框架来开发一个动态的基于表单的 Web 应用程序:

步骤 描述
1 创建一个名称为 HelloWeb 的动态 Web 项目,并且在已创建的项目的 src文件夹中创建一个包 com.tutorialspoint
2 将上面提到的 Spring 和其他库拖拽到文件夹 WebContent/WEB-INF/lib中。
3 在 com.tutorialspoint 包下创建一个 Java 类 WebController
4 在 WebContent/WEB-INF 文件夹下创建 Spring 的配置文件 Web.xml 和 HelloWeb-servlet.xml
5 在 WebContent/WEB-INF 文件夹下创建名称为 jsp 的子文件夹。在这个子文件夹下创建一个视图文件 index.jsp
6 在 WebContent/WEB-INF 文件夹下创建名称为 pages 的子文件夹。在这个子文件夹下创建一个静态文件 final.htm
7 最后一步是创建所有的源代码和配置文件的内容,并导出该应用程序,正如下面解释的一样。


这里是 WebController.java 文件的内容:

package com.tutorialspoint;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class WebController {
   @RequestMapping(value = "/index", method = RequestMethod.GET)
   public String index() {   
       return "index";
   }   
   @RequestMapping(value = "/staticPage", method = RequestMethod.GET)   
   public String redirect() {     
      return "redirect:/pages/final.htm";
   }
}


下面是 Spring Web 配置文件 web.xml 的内容:

<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>Spring Page Redirection</display-name>

    <servlet>
        <servlet-name>HelloWeb</servlet-name>
        <servlet-class>
           org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>HelloWeb</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>


下面是另一个 Spring Web 配置文件 HelloWeb-servlet.xml 的内容:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
 http://www.springframework.org/schema/mvc
 http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context-3.0.xsd">

    <context:component-scan base-package="com.tutorialspoint" />

    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
    </bean>

    <mvc:resources mapping="/pages/**" location="/WEB-INF/pages/" />
    <mvc:annotation-driven/>

</beans>

在这里,<mvc:resources…./> 标签被用来映射静态页面。 mapping 属性必须是一个指定一个 http 请求的 URL 模式的 Ant 模式。 location 属性必须指定一个或者多个具有包含图片,样式表,JavaScript 和其他静态内容的静态页面的资源目录位置。多个资源位置可以使用逗号分隔这些值的列表来被指定。

下面是 Spring 视图文件 WEB-INF/jsp/index.jsp 的内容。这将是一个登陆页面,这个页面将发送一个请求来访问 staticPage 的 service 方法,它将重定向这个请求到 WEB-INF/pages 文件夹中的一个可用的静态页面。

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
    <title>Spring Landing Page</title>
</head>
<body>
<h2>Spring Landing Pag</h2>
<p>Click below button to get a simple HTML page</p>
<form:form method="GET" action="/HelloWeb/staticPage">
<table>
    <tr>
    <td>
    <input type="submit" value="Get HTML Page"/>
    </td>
    </tr>
</table>  
</form:form>
</body>
</html>


下面是 Spring 视图文件 WEB-INF/pages/final.htm 的内容:

<html>
<head>
    <title>Spring Static Page</title>
</head>
<body>
<h2>A simple HTML page</h2>
</body>
</html>

最后,下面是包含在你的 web 应用程序中的 Spring 和其他库的列表。你仅仅需要将这些文件拖拽到 WebContent/WEB-INF/lib 文件夹中。

  • commons-logging-x.y.z.jar

  • org.springframework.asm-x.y.z.jar

  • org.springframework.beans-x.y.z.jar

  • org.springframework.context-x.y.z.jar

  • org.springframework.core-x.y.z.jar

  • org.springframework.expression-x.y.z.jar

  • org.springframework.web.servlet-x.y.z.jar

  • org.springframework.web-x.y.z.jar

  • spring-web.jar

一旦你完成了创建源代码和配置文件后,导出你的应用程序。右键单击你的应用程序,并且使用 Export > WAR File 选项,并且在 Tomcat 的 webapps文件夹中保存你的 HelloWeb.war 文件。

JS放大缩略图并随鼠标移动

CSS:

<style type="text/css">
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
.img_s{border:none;}
audio{width:250px;margin-top:7px;}
</style>

HTML:

<table class="result-tab" width="100%">
    <tr>
        <th>ID</th>                            
        <th>缩略图</th>                            
        <th>路径</th>                            
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img class="img_s" src="upload/2017/05/22/76411495433869.jpg" height='40' width='250' title="盛开的菊科植物"/>										
        </td>
        <td>
            upload/2017/05/22/76411495433869.jpg
        </td>																							
    </tr>
</table>    		

JS:

$(function(){
	var x = 10;
	var y = 20;
	$("img.img_s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"
						+ this.src 
						+"' alt='预览图' height='500' width='800'/>"
						+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show(500);	  //设置x坐标和y坐标,并且显示
    }).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();	 //移除
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

效果图:://wp.cpxiang.tech/wp-content/uploads/2017/05/@XYCJINXCVH39QJD7_Hjpg-1.jpg

WP安装或恢复问题集合

一、运行环境

        1.mysql php5 apache2安装

sudo apt-get update #更新安装源
sudo apt-get install mysql-server mysql-client php5 apache2

        2.让mysql支持更大的SQL statement

mysql>show global variables like 'max_allowed_packet';
mysql>set global max_allowed_packet=1024*1024*16;

        3.启用apache2的rewrite_module

sudo a2enmod rewrite  #开启Rewrite模块#停用模块,使用 a2dismod
vim  /etc/apache2/apache2.conf

         将AllowOverride None修改为AllowOverride All

sudo /etc/init.d/apache2 restart  #重启apache2

二、wordpress设置

        1.如果有域名更换或将wordpress迁移到其他服务器则需要替换网站中的URL

                个人建议用notpad++进行*.*全文替换 

        2.先恢复mysql

sudo mysql -u -p data<data.sql #备份sudo mysqldump -u -p data>data.sql

        3.更改固定连接

                设置固定连接为伪静态模式,请参考固定链接设置的几种方法,改成伪静态后,有利于进一步设置页面缓存

        4.添加.htaccess

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

        5.下载缓存插件并激活使用

                如果要恢复带有正在处于激活状态缓存插件的wordpress,请删除该插件,然后再重新安装激活使用

引入Bootstrap

Bootstrap 中文网://www.viagrapascherfr.com/sildenafil-generique-pas-cher-livraison-rapide/ Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。

继续阅读 »

WordPress文章URL设置详解

传说中,固定链接有SEO功能,今天试了试,现在给大家分享一下:

wordpress固定链接设置技巧:

1、不要让日期出现在固定链接里面

这基于两个方面的考虑。一是如果数字出现在固定链接里面,等于提醒搜索引擎,这是很旧的内容了,没必要再爬一遍了。另外一个原因是,假如你要修改文章的日期重新发布的话,链接地址就变了,也就是意味着你的反向链接,PR 等等都没有了。

继续阅读 »