尚筹网：显示首页---如何跳转到一个页面显示方法1

缺乏、安全感 2023-06-24 01:30 158阅读 0赞

# 思路 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]  
总结：这个方法一般需要操作数据的时候；而如果是直接跳转的话可以使用mvc:view-controller标签，具体请参考方法二。

# 步骤 #

## 创建PortalHandler ##

所在工程：atcrowdfunding-admin-2-component  
全类名：com.atguigu.crowd.funding.handler.PortalHandler  
代码：

package com.atguigu.crowd.funding.handler;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class PortalHandler {
        
    
    	@RequestMapping("/index")
    	public String showIndex() {
        
    		// 从数据库加载页面要显示的数据
    		return "index-page";
    	}
    }

相当于在

> 所在工程：atcrowdfunding-admin-1-webui  
> 所在文件：/atcrowdfunding-admin-1-webui/src/main/resources/spring-web-mvc.xml

<mvc:view-controller path="/index.html" view-name="index-page"/>

## 创建index-page.jsp ##

将2019尚筹网单一+分布式架构\\单一架构\\资料\\原型页面\\index.html的内容复制进去。  
所在工程：atcrowdfunding-admin-1-webui  
文件位置：/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF

## 调整index-page.jsp ##

index-page.jsp的最开头添加：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>

\[tips：必要时刷新\]

## 处理样式和JavaScript相关 ##

1、将样式和JavaScript文件从原型中直接复制到项目中  
所在工程：atcrowdfunding-admin-1-webui  
![在这里插入图片描述][20191220130438605.png]  
2、刷新页面  
此时应该能够正常访问。

## 解决页面路径的隐患 ##

### 问题 ###

![在这里插入图片描述][20191220130631640.png]  
可以看出这里使用的是相对路径，不太好

### 方法：使用base标签 ###

1、写法

2、注意点

*  base标签需要放在head标签内
 *  base标签必须放在所有带路径的标签前面
 *  serverName和serverPort之间必须有“:”
 *  contextPath前：不能有“/”  
    因为contextPath本身就是“/”开头的，再写会多一个，导致Cookie的路径不一致，进而导致Session不能正常工作
 *  contextPath后：必须有“/”  
    带路径的标签，如果路径以“/”开头，则不参考base标签。又因为具体标签中的路径和base标签中的路径拼起来以后必须是有效、完整的路径，所以“/”要放在base标签的路径最后  
    ![在这里插入图片描述][20191220130747870.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191220124817182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20191220130438605.png]: https://img-blog.csdnimg.cn/20191220130438605.png
[20191220130631640.png]: https://img-blog.csdnimg.cn/20191220130631640.png
[20191220130747870.png]: https://img-blog.csdnimg.cn/20191220130747870.png