整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Spring MVC 框架学习-返回页面+加载静态资源

章目录

  • Spring 框架学习（六）---- 返回页面+加载静态资源
  • 2、返回 application/json
  • 1、请求转发forword 和 重定向的区别2、请求转发的访问资源问题演示

Spring 框架学习（六）---- 返回页面+加载静态资源

一、返回页面

不加 @ResponseBody ,默认是返回一个网页

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

二、返回非页面的数据

  返回非页面的数据，必须在方法或者类上加 @ResponseBody，同时 我们返回的类型 springmvc会自动解析成对应的格式，不需要我们进行手动指定

1、返回 text/html

@RequestMapping("/getText")
    @ResponseBody
    public String getHTML(String name){
 
        return "<h1>你好,欢迎用户："+name+"<h1>";
    }

访问接口，自动解析成 html格式

通过 Fiddler 进行抓包，查看返回响应的格式为 text/html。

2、返回 application/json

使用map存储数据，返回map

@RequestMapping("/getmap")
    @ResponseBody
    public Object getJson(){
 
        HashMap<Object,Object> map = new HashMap<>();
        map.put("msg","登陆成功");
        map.put("status",200);

        return map;
    }

自动解析称为 json 格式的数据

三、加载静态资源

咱们就直接定死了写的格式

在webapp目录下创建static文件夹保存 css、js、html 资源

同时在spring-mvc.xml 文件中加入 过滤静态资源、加载静态资源的配置

<!--    过滤静态资源，  /.jsp  /.html 不会经过-->
    <mvc:default-servlet-handler/>


 <!--加载静态资源location表示访问的路径return"/static/login.html",mapping表示映射的静态资源位置-->
    <mvc:resources location="/static/css/" mapping="/static/css/**"/>
    <mvc:resources location="/static/js/" mapping="/static/js/**"/>
    <mvc:resources location="/static/" mapping="/static/**"/>

我们来试一下访问静态资源

在wbeapp目录下创建static文件，将css/js/html等文件添加进去

web.xml 配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                             http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
    <multipart-config>
      <max-file-size>20848820</max-file-size>
      <max-request-size>418018841</max-request-size>
      <file-size-threshold>1048576</file-size-threshold>
    </multipart-config>
  </servlet>

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

</web-app>

spring-mvc.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.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    

    <!--    开启注解扫描，将使用注解的类托管到spring 容器中-->
    <context:component-scan base-package="com.*"/>

    <!--    过滤静态资源，  /.jsp  /.html 不会经过-->
    <mvc:default-servlet-handler/>

<!--    加载静态资源文件-->
    <mvc:resources location="/static/css/" mapping="/static/css/**"/>
    <mvc:resources location="/static/js/" mapping="/static/js/**"/>
    <mvc:resources location="/static/" mapping="/static/**"/>

    <!--    开启mvc注解驱动-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>



    </mvc:annotation-driven>

</beans>

在controller层进行访问静态html文件（经过css、js渲染）

@RequestMapping("/login")
    public String getLog(){
 
        return "redirect:/static/login.html";
    }

四、转发和重定向

1、请求转发forword 和 重定向的区别

（1） 重定向 将请求重新定位到资源的位置，请求转发是服务器端进行转发的

（2）请求重定向url地址发生改变，请求转发地址不发生变化

（3）请求重定向于直接访问新地址的效果一样，不存在原来的外部资源不能访问，请求转发服务器端的转发可能会造成外部资源不能访问（js、css）

如果外部资源与转发访问的页面不在同一级目录下，会造成外部资源不可访问。

2、请求转发的访问资源问题演示

通过转发的请求资源都直接通过 8080:/a/login 这个接口的同一级目录下直接访问，当然找不到资源

请求重定向相当于 输入的url变了，直接访问到 /static/login/html,同时附带的资源在在这一目录下能够访问到。

3、页面跳转

1、请求转发： 服务器放客户进行请求转发并将结果响应给客户端，URL是不会变的

2、请求重定向：服务器端请求重新定义到要访问的地址。URL会放生改变。

总结：

  • 请求转发的URL地址不变，因为是服务器端进行转发和响应的，所以重定向URL地址会发生改变，因为服务器端直接将请求重定向到具体的地址上
  • 使用请求转发那么有可能会发生资源丢失，访问不到外部资源。请求重定向是直接重定向到URL地址，所以请求重定向和直接访问目标地址的效果是一样的，所以不会存在外部资源丢失的情况。

五、组合注解

@RestController

相当于 @Controller + @ResponseBody

只能加到类上

  • 回JSON对象，我们就需要用到@ResponseBody注解，如果接收JSON数据封装成JavaBean的话，我们就需要用到@RequestBody注解。随后在配置文件上创建对应的bean即可。


  • 一、通过json数据传输
$("#submit_bt").click(function(){
 var data = {
 title: $("#title").val(),
 dm_label: $("#dm_label").val(),
 url: $("#url").val(),
 img_url: $("#img_url").html(),
 state: 0
 }
 $.ajax({
 type:'post',
 url:'${ctx}/admin/dynamic/message/add',
 dataType : 'json',
 data: JSON.stringify(data),
 contentType: "application/json; charset=utf-8",
 success:function(data){
 if (data.mark=="0") {
 window.location.href="${ctx}/admin/dynamic/message/list?state=0&page_size=10&father_id=24";
 } else {
 alert(data.tip);
 }
 },
 error: function(textStatus) {
 alert(textStatus);
 }
 });
});
@RequestMapping(value = "/admin/dynamic/message/add", method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
@Authority(AuthorityType.NoAuthority)
public RetInfo insert(@Valid @RequestBody TsJzDynamicMessage tsJzDynamicMessage, BindingResult result, HttpServletRequest request) {
 RetInfo retInfo = new RetInfo();
 if (result.hasErrors()) {
 List<FieldError> err = result.getFieldErrors();
 FieldError fe = err.get(0);
 retInfo.setMark("1");
 retInfo.setTip(fe.getDefaultMessage());
 } else {
 TsJzAdmin tsJzAdmin = AdminSession.getAdmin(request);
 retInfo = dynamicMessageService.insertDynamicMessage(tsJzDynamicMessage, tsJzAdmin);
 }
 return retInfo;
}

二、通过url数据传输

本文中，让我们尝试构建自定义 HTML Hepler以在 .NET Core MVC 应用程序中提供分页。首先对不熟悉的人简单介绍一下，什么是HTML Helper（助手）：

  • HTML 助手使开发人员可以轻松快速地创建 HTML 页面。
  • 在大多数情况下，HTML 助手只是一个返回字符串的方法。
  • MVC 带有内置的 HTML 帮助器，例如 @Html.TextBox()、@Html.CheckBox()、@Html.Label 等。
  • HTML 助手在 razor 视图中呈现 html 控件。例如，@Html.TextBox() 渲染 <input type="textbox"> 控件，@Html.CheckBox() 渲染 <input type="checkbox"> 控件等。

需求

在Web应用程序中，如果要显示大量记录，则需要提供分页。在本文中，我们通过创建自定义 HTML Helper 在 .NET Core MVC 应用程序中实现分页。为了简单起见，我们只能使用数字来表示数据。

假设我们需要在多页中显示 55 条记录，每页有 10 个项目，如上所示。

开始

打开 Visual Studio 2019 > 创建 .NET Core MVC 应用程序，如下所示。

项目命名为 HTMLHelpersApp。

选择 .NET 框架版本。

创建所需的模型和帮助文件。

  1. 创建一个新模型“Number”。
  2. 右键单击 Model 文件夹并添加“Number”类。

在 Number.cs 中添加代码。该模型捕获用户输入。它只有一个属性：“InputNumber”。

using System;
using System.ComponentModel.DataAnnotations;


namespace HTMLHelpersApp.Models
{
    public class Number
    {
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
        [RegularExpression(@"^\d+$", ErrorMessage = "Only numbers are allowed. Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber = 1;
    }
}

现在让我们添加一个公共类 PageInfo.cs。创建新文件夹 Common 并添加 PageInfo.cs 类。

  1. 右键单击项目文件夹并添加一个新文件夹。

在 PageInfo.cs 中添加代码：

  1. Page Start 表示当前页面上的第一项。
  2. Page End 表示当前页面的最后一项。
  3. 每页项目数表示要在页面上显示的项目数。
  4. Last Page 表示页数/最后页码。
  5. Total Items 表示项目的总数。

根据总项目数和每页项目数，计算页面的总页数、第一个项目和最后一个项目。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;


namespace HTMLHelpersApp.Common
{
    public class PageInfo
    {
        public int TotalItems { get; set; }
        public int ItemsPerPage { get; set; }
        public int CurrentPage { get; set; }


        public PageInfo()
        {
            CurrentPage = 1;
        }
        //starting item number in the page
        public int PageStart
        {
            get { return ((CurrentPage - 1) * ItemsPerPage + 1); }
        }
        //last item number in the page
        public int PageEnd
        {
            get
            {
                int currentTotal = (CurrentPage - 1) * ItemsPerPage + ItemsPerPage;
                return (currentTotal < TotalItems ? currentTotal : TotalItems);
            }
        }
        public int LastPage
        {
            get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
        }
        
    }
}

现在我们来到最重要的部分：创建自定义 HTML 助手。

  1. 创建自定义 HTML 帮助程序 PageLinks，它呈现页码、上一个和下一个链接。
  2. 在“Common”文件夹中添加一个新类“PagingHtmlHelpers.cs”。
  3. 在“PagingHtmlHelpers.cs”中添加代码。
  4. 扩展 HtmlHelper 并添加新功能以添加页面链接。
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)

5.取2个参数

  1. pageInfo：添加页码
  2. 委托给函数：将整数和字符串作为参数添加控制器操作方法中所需的参数

使用标签构建器创建锚标签。

TagBuilder tag = new TagBuilder("a");
Add attributes
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");

样式也可以用作属性。

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Text;


namespace HTMLHelpersApp.Common
{
    public static class PagingHtmlHelpers
    {
        public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
        {
            StringBuilder pagingTags = new StringBuilder();
            //Prev Page
            if (pageInfo.CurrentPage > 1)
            {
                pagingTags.Append(GetTagString("Prev", PageUrl(pageInfo.CurrentPage - 1)));


            }
            //Page Numbers
            for (int i = 1; i <= pageInfo.LastPage; i++)
            {
                pagingTags.Append(GetTagString(i.ToString(), PageUrl(i)));
            }
            //Next Page
            if (pageInfo.CurrentPage < pageInfo.LastPage)
            {
                pagingTags.Append(GetTagString("Next", PageUrl(pageInfo.CurrentPage + 1)));
            }
            //paging tags
            return new HtmlString(pagingTags.ToString());
        }


        private static string GetTagString(string innerHtml, string hrefValue)
        {
            TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
            tag.MergeAttribute("class","anchorstyle");
            tag.MergeAttribute("href", hrefValue);
            tag.InnerHtml.Append(" "+ innerHtml + "  ");
            using (var sw = new System.IO.StringWriter())
            {
                tag.WriteTo(sw, System.Text.Encodings.Web.HtmlEncoder.Default);
                return sw.ToString();            
            }
        }
    }
}

在“Models”文件夹中添加一个新类“ShowPaging.cs”。

  • DisplayResult将在每一页上显示数字列表。
  • PageInfo将捕获所有页面详细信息，例如每页上的页数、总项目、开始项目和最后一个项目等。
using HTMLHelpersApp.Common;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;


namespace HTMLHelpersApp.Models
{
    public class ShowPaging
    {
        
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
        [RegularExpression(@"^\d+$", ErrorMessage = "Only positive numbers are allowed. Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber { get; set; }


        public List<string> DisplayResult { get; set; }


        public PageInfo PageInfo;
    }
}

添加新控制器

添加一个新控制器：“HTMLHelperController”

右键单击控制器文件夹并在上下文菜单中选择控制器。

选择“MVCController-Empty”。

在“HTMLHelperController”中添加代码。

using HTMLHelpersApp.Common;
using HTMLHelpersApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;


namespace HTMLHelpersApp.Controllers
{
    public class HTMLHelperController : Controller
    {
        private const int PAGE_SIZE = 10;
        public IActionResult Number()
        {
            return View();
        }


        public IActionResult ShowPaging(ShowPaging model, int page = 1, int inputNumber = 1)
        {
            if (ModelState.IsValid)
            {
                var displayResult = new List<string>();
                string message;


                //set model.pageinfo
                model.PageInfo = new PageInfo();
                model.PageInfo.CurrentPage = page;
                model.PageInfo.ItemsPerPage = PAGE_SIZE;
                model.PageInfo.TotalItems = inputNumber;


                //Set model.displayresult - numbers list
                for (int count = model.PageInfo.PageStart; count <= model.PageInfo.PageEnd; count++)
                {
                    message = count.ToString();
                    displayResult.Add(message.Trim());
                }
                model.DisplayResult = displayResult;
            }
            //return view model
            return View(model);
        }
    }
}

在 Views 文件夹中创建一个新文件夹“HTMLHelper”，并创建一个新视图“Number.cshtml”。

在“Number.cshtml”中添加代码。

@model HTMLHelpersApp.Models.Number


<h4>Number</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="ShowPaging" method="get">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <input asp-for="InputNumber" class="form-control"/>
            </div>
            <div class="form-group">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

同样，创建一个新视图“ShowPaging.cshtml”。

@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common


<link rel="stylesheet" href ="~/css/anchorstyles.css"/>
<form>
    <h4>Show Paging</h4>
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <dl class="row">
        <dt class="col-sm-2">
            <b>Number: </b> @Html.DisplayFor(model => model.InputNumber)
        </dt>
        <dd>
            <a asp-action="Number">Change Number</a>
        </dd>
    </dl>


    <div>
        @if (Model != null && Model.DisplayResult != null)
        {
            <ul>
                @foreach (var item in Model.DisplayResult)
                {
                    <li>@Html.Raw(item)</li>
                }
            </ul>
            <div>
                @Html.PageLinks(@Model.PageInfo, x => Url.Action("ShowPaging",
                    new { page = x.ToString(), inputNumber = @Model.InputNumber }))
            </div>
        }
    </div>        
 </form>

解决方案资源管理器如下所示：

在“startup.cs”中配置默认控制器和操作。

编译并运行应用程序，输入数字 35。

点击提交。

你会在底部看到分页，每页显示10个数字，一共4页，且每页都一个链接。


在线咨询
上一篇：简单小程序：登录页面（html）
下一篇：什么是HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 叙永县 江源县 江阳区 沅江市 站前区 薛城区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服