精华内容
下载资源
问答
  • webpack多入口文件页面打包配置

    万次阅读 2018-01-08 17:42:20
    大多数情况下,我们使用 webpack来打包单页应用程序...或者项目需要多次的更新迭代等,都适合做成多页面程序,这就涉及到了 webpack的多页面文件的打包配置问题。 手动配置 单页应用程序和多页应用程序的 webpac

    大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项目,而且以我的经验来看,这种情况出现的频率还不低,例如项目比较大,无法进行全局的把握,或者项目需要多次的更新迭代等,都适合做成多页面程序,这就涉及到了 webpack的多页面文件的打包配置问题。


    手动配置

    单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的,只不过多页的配置需要在单页配置的基础上顾及到多个页面罢了,loaderoutputplugins这些基本都不需要改动,需要改动的一般都是入口文件 entry,如果你用到了 抽离css样式的插件 extract-text-webpack-plugin、自动模板插件 html-webpack-plugin的话,那么还需要对这两个插件进行额外的改写,大多数情况下,我们也都只需要改动这三个地方,所以本文就只简单说下这三个位置,如果在实际的项目中还有其他的地方需要改动,参照这三个位置即可。

    示例的文件目录如下:

    这里写图片描述

    entry

    单页应用程序的入口配置一般如下所示:

    entry: resolve(__dirname, "src/home/index.js")

    这个配置就是指定 webpack/src/home/index.js这个文件开始进入,进行一系列的打包编译过程。

    如果是多页应用程序,则需要多个入口文件,例如:

    entry: {
      home: resolve(__dirname, "src/home/index.js"),
      about: resolve(__dirname, "src/about/index.js")
    }

    这样,整个项目就有了两个入口 homeabout

    extract-text-webpack-plugin

    extract-text-webpack-plugin 插件主要是为了抽离css样式,防止将样式打包在 js中引起页面样式加载错乱的现象,单页程序中,一般这样使用此插件:

    plugins: [
        new ExtractTextPlugin('style.[contenthash].css')
    ]

    而到了多页程序,因为存在多个入口文件以及对应的多个页面,每个页面都有自己的 css样式,所以需要为每个页面各自配置一下:

    plugins: [
        new ExtractTextPlugin('home/[name].[contenthash].css'),
        new ExtractTextPlugin('about/[name].[contenthash].css')
    ]

    除此之外还需要注意一点,每个页面也只需要自己的 css样式,理论上把别的页面 css样式文件也打包到自己的页面中当然也是可以的,但显然是不合理的,这只会增加冗余代码,还可能会导致不可预测的样式覆盖等问题,所以需要对下面这种 loader配置进行修改:

    {
        test: /\.css$/,
        loader: 'style!css!autoprefixer'
    },
    {
        test: /\.scss$/,
        loaders: [
          'style',
          'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'sass',
          'autoprefixer'
        ]
    },

    上面的配置会把所有编译出来的 css文件打包到同一个文件中,我们要做的就是把这些 css分离开,每个页面都有各自单独的 css样式文件:

    // 为每个页面定义一个 ExtractTextPlugin
    const homeExtractCss = new ExtractTextPlugin('home/[name].[contenthash].css')
    const aboutExtractCss = new ExtractTextPlugin('about/[name].[contenthash].css')
    // ...
    module: {
        rules: [
          // 每个页面的 ExtractTextPlugin 只处理这个页面的样式文件
          {
            test: /src(\\|\/)home(\\|\/)css(\\|\/).*\.(css|scss)$/,
            use: homePageExtractCss.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'postcss-loader', 'sass-loader']
            })
          },
          {
            test: /src(\\|\/)about(\\|\/)css(\\|\/).*\.(css|scss)$/,
            use: salePersonalCenterExtractCss.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'postcss-loader', 'sass-loader']
            })
          }
        ]
    }
    // ...
    // 每个页面都有各自的 ExtractTextPlugin,所以需要都声明一遍
    plugins: [
        homeExtractCss,
        aboutExtractCss
    ]

    html-webpack-plugin

    html-webpack-plugin插件的使用,在单页应用程序和多页应用程序中的 webpack配置没什么区别

    new HtmlWebpackPlugin({
       filename: 'home/home.html',
       template: 'src/home/html/index.html',
       inject: true,
       minify: {
           removeComments: true,
           collapseWhitespace: true
       }
     })
     new HtmlWebpackPlugin({
       filename: 'about/about.html',
       template: 'src/about/html/index.html',
       inject: true,
       minify: {
           removeComments: true,
           collapseWhitespace: true
       }
     })

    有几个页面,就对每个页面进行上述配置即可。


    自动配置

    上述的配置代码已经可以满足多页面开发需求了,但是有一点似乎有些遗憾,那就是每增加一个页面,就需要更新一遍 entryextract-text-webpack-pluginHtmlWebpackPlugin的配置,虽然只是几行代码的问题,而且基本上都是复制粘贴没什么难度,但毕竟代码再少也需要过问,并且需要改的地方比较多,仓促之下可能还会遗漏,要是能一劳永逸,写一遍代码,无论以后增删页面都不需要过问就好了。

    稍微观察下这个目录就可以发现,这个目录结构其实是很有规律的:

    这里写图片描述

    每个页面都是 src/目录下的一个文件夹,这个文件夹中有两个子目录,分别存放这个页面的模板 html,样式文件 css,还有一个入口文件 index.js

    既然有规则,那么肯定是可以进行程序编码的,如果按照这种规则,每个页面都是 ./src下的一个目录,目录名即为页面名,并且这个目录中的结构也都是相同的,那么可以通过一个通用方法来获取所有的页面名称(例如 homeabout),这个通用方法的一个示例如下:

    function getEntry () {
      let globPath = 'src/**/html/*.html'
      // (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法
      let pathDir = 'src(\/|\\\\)(.*?)(\/|\\\\)html'
      let files = glob.sync(globPath)
      let dirname, entries = []
      for (let i = 0; i < files.length; i++) {
        dirname = path.dirname(files[i])
        entries.push(dirname.replace(new RegExp('^' + pathDir), '$2'))
      }
      return entries
    }

    借助 glob这个库,遍历 .src/目录下具有这种规律 src/**/html/*.html的子目录,通过正则匹配出这个子目录的名称

    获取到了所有的页面名称,下面就好办了。

    entry

    // entry: resolve(__dirname, "src/home/index.js")
    // 改为
    entry: addEntry()
    //...
    function addEntry () {
      let entryObj = {}
      getEntry().forEach(item => {
        entryObj[item] = resolve(__dirname, 'src', item, 'index.js')
      })
      return entryObj
    }

    extract-text-webpack-plugin

    // plugins: [
        // new ExtractTextPlugin('home/[name].[contenthash].css'),
        // new ExtractTextPlugin('about/[name].[contenthash].css')
    //]
    // 改为
    const pageExtractCssArray = []
    getEntry().forEach(item => {
      pageExtractCssArray.push(new ExtractTextPlugin(item + '/[name].[contenthash].css'))
    })
    // ...
    plugins: [...pageExtractCssArray]

    module.rules样式相关的两个loaders删掉,改为动态添加:

    getEntry().forEach((item, i) => {
      webpackconfig.module.rules.push({
        test: new RegExp('src' + '(\\\\|\/)' + item + '(\\\\|\/)' + 'css' + '(\\\\|\/)' + '.*\.(css|scss)$'),
        use: pageExtractCssArray[i].extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      })
    })
    // ...
    module.exports = webpackconfig

    html-webpack-plugin

    plugins中无需手动初始化 html-webpack-plugin,改为动态添加:

    getEntry().forEach(pathname => {
      let conf = {
        filename: path.join(pathname, pathname) + '.html',
        template: path.join(__dirname, 'src', pathname, 'html', 'index.html')
      }
      webpackconfig.plugins.push(new HtmlWebpackPlugin(conf))
    })
    // ...
    module.exports = webpackconfig

    完成了上述修改后,以后无论是在项目中添加页面还是删除页面,都无需再对 webpack配置进行手动修改了,虽然开始时开起来似乎这种动态的自动配置代码比较多,而且稍微复杂一点,但是从长期来看,绝对是一劳永逸的好做法。

    另外,如果你的项目目录结构和我示例的目录结构不一样,那么就需要你根据自己的目录结构对代码进行少许的修改,但整体解决问题的方法是不变的,一个易于维护的项目,目录结构都该是有律可循的。

    展开全文
  • 同理,也想通过页面直接读取本地文件中的内容。   问题分析:因为整个处理过程不涉及到后台的运行,所以处理过程应该在前台进行处理。那就是通过js代码来处理。   解决过程:通过在网上查找,发现了js中的...

    问题描述:假设网页有个文本框之类的东西,想通过点击某一按钮后,将用户在文本框中输入的内容直接保存在本地某个文件中。同理,也想通过页面直接读取本地文件中的内容。

     

    问题分析:因为整个处理过程不涉及到后台的运行,所以处理过程应该在前台进行处理。那就是通过js代码来处理。

     

    解决过程:通过在网上查找,发现了js中的ActiveXObject类。

     

    将页面用户填入的信息保存到本地文件中:

    function getInfoFromWeb() {
    	var strFile = "D:\\test.txt";	//定义文件保存的路径
    	
    	//new一个ActiveXObject类的对象。
    	var objFSO = new ActiveXObject("Scripting.FileSystemObject");
    	
    	// 检查文件是否存在
    	if (!objFSO.FileExists(strFile)) {
    		// 创建文本文件
    		var objStream = objFSO.CreateTextFile(strFile, true);
    		objStream.Write("在这里填写需要在文本中存放的值,可以是一个变量");
    		objStream.Close(); // 关闭文件
    		alert("ok");
    	}
    	else {
    		alert("文本文件: " + strFile + "已经存在<br>");
    	}
    }
    


    读取本地文件中的内容到前端页面:

    function readInfoToWeb(){
    	var fso, ts, s; //fso为ActiveXObject类的对象,ts为需要打开的文件对象,s保存从文件对象ts中读取的内容
    	var ForReading = 1; 
    	
    	//new一个ActiveXObject类的对象
    	fso = new ActiveXObject("Scripting.FileSystemObject");
    	//打开文件路径
    	ts = fso.OpenTextFile("d:\\testfile.txt", ForReading);
    	//读取文件内容
    	s = ts.ReadLine();
    	//将文件内容写入到对应的标签中
    	document.getElementById("这里填写对应标签的id").innerHTML = s; 
    }


    注:以上的代码只可以在IE中成功运行。


    最后介绍一下ActiveXObject类,以下内容来自:http://www.jsann.com/post/activexobject_in_javascript.html

    在这篇文章中介绍的比较全面,感谢!

     

    JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用。使用方法:

    newObj = new ActiveXObject(servername.typename[, location])

    ActiveXObject 对象语法有这些部分:其中newObj是必选项。要赋值为 ActiveXObject 的变量名。
    servername是必选项。提供该对象的应用程序的名称。
    typename是必选项。要创建的对象的类型或类。
    location是可选项。创建该对象的网络服务器的名称。

    切记:ActiveX是微软的东西,故而只有IE才支持!

    javaScript中利用ActiveXObject来创建FileSystemObject操作文件


    一、功能实现核心:FileSystemObject 对象
    要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。


    二、FileSystemObject编程
    使用FileSystemObject 对象进行编程很简单,一般要经过如下的步骤: 创建FileSystemObject对象、应用相关方法、访问对象相关属性 。


    (一)创建FileSystemObject对象
    创建FileSystemObject对象的代码只要1行:

    var fso = new ActiveXObject(“Scripting.FileSystemObject”);
    上述代码执行后,fso就成为一个FileSystemObject对象实例。


    (二)应用相关方法
    创建对象实例后,就可以使用对象的相关方法了。比如,使用CreateTextFile方法创建一个文本文件:

    	var fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	var f1 = fso.createtextfile(“c:\\myjstest.txt”,true”);

    (三)访问对象相关属性
    要访问对象的相关属性,首先要建立指向对象的句柄,这就要通过get系列方法实现:GetDrive负责获取驱动器信息,GetFolder负责获取文件夹信息,GetFile负责获取文件信息。比如,指向下面的代码后,f1就成为指向文件c:\test.txt的句柄:

    	var fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	var f1 = fso.GetFile(“c:\\myjstest.txt”);
    然后,使用f1访问对象的相关属性。比如:
    	var fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	var f1 = fso.GetFile(“c:\\myjstest.txt”);
    	alert(“File last modified: ” + f1.DateLastModified);
    执行上面最后一句后,将显示c:\myjstest.txt的最后修改日期属性值。
    但有一点请注意:对于使用create方法建立的对象,就不必再使用get方法获取对象句柄了,这时直接使用create方法建立的句柄名称就可以:
    	var fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	var f1 = fso.createtextfile(“c:\\myjstest.txt”,true”);
    	alert(“File last modified: ” + f1.DateLastModified);

    三、操作驱动器(Drives)
    使用FileSystemObject对象来编程操作驱动器(Drives)和文件夹(Folders)很容易,这就象在Windows文件浏览器中对文件进行交互操作一样,比如:拷贝、移动文件夹,获取文件夹的属性。


    (一)Drives对象属性
    Drive对象负责收集系统中的物理或逻辑驱动器资源内容,它具有如下属性:
    l TotalSize:以字节(byte)为单位计算的驱动器大小。
    l AvailableSpace或FreeSpace:以字节(byte)为单位计算的驱动器可用空间。
    l DriveLetter:驱动器字母。
    l DriveType:驱动器类型,取值为:removable(移动介质)、fixed(固定介质)、network(网络资源)、CD-ROM或者RAM盘。
    l SerialNumber:驱动器的系列码。
    l FileSystem:所在驱动器的文件系统类型,取值为FAT、FAT32和NTFS。
    l IsReady:驱动器是否可用。
    l ShareName:共享名称。
    l VolumeName:卷标名称。
    l Path和RootFolder:驱动器的路径或者根目录名称。


    (二)Drive对象操作例程
    下面的例程显示驱动器C的卷标、总容量和可用空间等信息:

    	var fso, drv, s =”";
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	drv = fso.GetDrive(fso.GetDriveName(“c:\\”));
    	s += “Drive C:” + ” – “;
    	s += drv.VolumeName + “\n”;
    	s += “Total Space: ” + drv.TotalSize / 1024;
    	s += ” Kb” + “\n”;
    	s += “Free Space: ” + drv.FreeSpace / 1024;
    	s += ” Kb” + “\n”;
    	alert(s);


    四、操作文件夹(Folders)
    涉及到文件夹的操作包括创建、移动、删除以及获取相关属性。
    Folder对象操作例程 :
    下面的例程将练习获取父文件夹名称、创建文件夹、删除文件夹、判断是否为根目录等操作:

    	var fso, fldr, s = “”;
    	// 创建FileSystemObject对象实例
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	// 获取Drive 对象
    	fldr = fso.GetFolder(“c:\\”);
    	// 显示父目录名称
    	alert(“Parent folder name is: ” + fldr + “\n”);
    	// 显示所在drive名称
    	alert(“Contained on drive ” + fldr.Drive + “\n”);
    	// 判断是否为根目录
    	if (fldr.IsRootFolder)
    		alert(“This is the root folder.”);
    	else
    		alert(“This folder isn’t a root folder.”);
    	alert(“\n\n”);
    	// 创建新文件夹
    	fso.CreateFolder (“C:\\Bogus”);
    	alert(“Created folder C:\\Bogus” + “\n”);
    	// 显示文件夹基础名称,不包含路径名
    	alert(“Basename = ” + fso.GetBaseName(“c:\\bogus”) + “\n”);
    	// 删除创建的文件夹
    	fso.DeleteFolder (“C:\\Bogus”);
    	alert(“Deleted folder C:\\Bogus” + “\n”);


    五、操作文件(Files)
    对文件进行的操作要比以上介绍的驱动器(Drive)和文件夹(Folder)操作复杂些,基本上分为以下两个类别:对文件的创建、拷贝、移动、删除操作和对文件内容的创建、添加、删除和读取操作。下面分别详细介绍。


    (一)创建文件
    一共有3种方法可用于创建一个空文本文件,这种文件有时候也叫做文本流(text stream)。
    第一种是使用CreateTextFile方法。代码如下:

    	var fso, f1;
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	f1 = fso.CreateTextFile(“c:\\testfile.txt”, true);
    第二种是使用OpenTextFile方法,并添加上ForWriting属性,ForWriting的值为2。代码如下:
    	var fso, ts;
    	var ForWriting= 2;
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	ts = fso.OpenTextFile(“c:\\test.txt”, ForWriting, true);
    第三种是使用OpenAsTextStream方法,同样要设置好ForWriting属性。代码如下:
    	var fso, f1, ts;
    	var ForWriting = 2;
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	fso.CreateTextFile (“c:\\test1.txt”);
    	f1 = fso.GetFile(“c:\\test1.txt”);
    	ts = f1.OpenAsTextStream(ForWriting, true);

    (二)添加数据到文件
    当文件被创建后,一般要按照“打开文件->填写数据->关闭文件”的步骤实现添加数据到文件的目的。
    打开文件可使用FileSystemObject对象的OpenTextFile方法,或者使用File对象的OpenAsTextStream方法。
    填写数据要使用到TextStream对象的Write、WriteLine或者WriteBlankLines方法。在同是实现写入数据的功能下,这3者的区别在于:Write方法不在写入数据末尾添加新换行符,WriteLine方法要在最后添加一个新换行符,而WriteBlankLines则增加一个或者多个空行。
    关闭文件可使用TextStream对象的Close方法。


    (三)创建文件及添加数据例程
    下面的代码将创建文件、添加数据、关闭文件几个步骤结合起来进行应用:

    	var fso, tf;
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	// 创建新文件
    	tf = fso.CreateTextFile(“c:\\testfile.txt”, true);
    	// 填写数据,并增加换行符
    	tf.WriteLine(“Testing 1, 2, 3.”) ;
    	// 增加3个空行
    	tf.WriteBlankLines(3) ;
    	// 填写一行,不带换行符
    	tf.Write (“This is a test.”);
    	// 关闭文件
    	tf.Close();

    (四)读取文件内容
    从文本文件中读取数据要使用TextStream对象的Read、ReadLine或ReadAll 方法。Read方法用于读取文件中指定数量的字符;ReadLine方法读取一整行,但不包括换行符;ReadAll方法则读取文本文件的整个内容。读取的内容存放于字符串变量中,用于显示、分析。在使用Read或ReadLine方法读取文件内容时,如果要跳过一些部分,就要用到Skip或SkipLine方法。
    下面的代码演示打开文件、填写数据,然后读取数据:

    	var fso, f1, ts, s;
    	var ForReading = 1;
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	// 创建文件
    	f1 = fso.CreateTextFile(“c:\\testfile.txt”, true);
    	// 填写一行数据
    	f1.WriteLine(“Hello World”);
    	f1.WriteBlankLines(1);
    	// 关闭文件
    	f1.Close();
    	// 打开文件
    	ts = fso.OpenTextFile(“c:\\testfile.txt”, ForReading);
    	// 读取文件一行内容到字符串
    	s = ts.ReadLine();
    	// 显示字符串信息
    	alert(“File contents = ‘” + s + “‘”);
    	// 关闭文件
    	ts.Close();

    (五)移动、拷贝和删除文件

    对于以上三种文件操作,javascript各有两种对应的方法:File.Move 或FileSystemObject.MoveFile用于移动文件;File.Copy 或FileSystemObject.CopyFile用于拷贝文件;File.Delete 或FileSystemObject.DeleteFile用于删除文件。
    下面的代码演示在驱动器C的根目录下创建一个文本文件,填写一些内容,然后将文件移动到\tmp目录下,再在目录\temp下面建立一个文件拷贝,最后删除这两个目录的文件:

    	var fso, f1, f2, s;
    	fso = new ActiveXObject(“Scripting.FileSystemObject”);
    	f1 = fso.CreateTextFile(“c:\\testfile.txt”, true);
    	// 写一行
    	f1.Write(“This is a test.”);
    	// 关闭文件
    	f1.Close();
    	// 获取C:\根目录下的文件句柄
    	f2 = fso.GetFile(“c:\\testfile.txt”);
    	// 移动文件到\tmp目录下
    	f2.Move (“c:\\tmp\\testfile.txt”);
    	// 拷贝文件到\temp目录下
    	f2.Copy (“c:\\temp\\testfile.txt”);
    	// 获取文件句柄
    	f2 = fso.GetFile(“c:\\tmp\\testfile.txt”);
    	f3 = fso.GetFile(“c:\\temp\\testfile.txt”);
    	// 删除文件
    	f2.Delete();
    	f3.Delete();

    总结:上述提及的例程都非常简单,要全面、灵活地掌握javascript文件操作技术,还需要大量的实践练习。而且还有一点提醒大家,由于涉及到在浏览器中进行文件读写这样的高级操作,对于默认的浏览器安全级别而言,在代码运行前都会有一个信息提示,这点请在实际环境中提示访问者注意。











    展开全文
  • 文件下载时如果连接失效,下载页面空白的解决办法

    框架和环境:ssm+maven3.0+db2+easyui1.4+jdk1.7

    功能背景:第一步是通过定时轮询把封闭系统请求的入参报文生成文件放到共享盘的目录。同时把文件的路径信息存到数据库表。第二步就是我这个页面的功能,把生成的文件信息列表显示并可以选中下载文件列表。但是发现如果这个文件已经删除,点击下载后由于资源不存在后台异常,虽然做了处理,但是页面就会出现空白。

    实现页面文件下载的思路:查询的时候把每个文件的路径也查出来,在页面进行隐藏,等到下载的时候把文件对应路径传到后台,后台依据这个路径可以找到文件,并读取写到页面,实现下载功能。

    1.页面点击下载触发的方法。主要同过window.location.href=“”来进行链接方式下载。之前的博文有介绍post方法无法完成文件下载。

    function downloadOrderExport(){
        var row=$("#dataTable").datagrid('getSelected');   
        if(row !=null){
            var filepath=escape(encodeURIComponent(row.filePath));
            window.location.href=basePath+"/orderExport/downloadAndUpdate?filePath="+filePath;
        }else{
            $.messager.alert('提示','请选择一条你要下载的记录!');
        }
    
    }

    2.具体Controller层的方法为void,这也是不同于StringL类型返回值的最大区别和难点。由于无法用return,只能用response转跳到另一个Controller,然后返回页面:

    @RequestMapping("/download")
        public void downloadXmlFile(HttpServletRequest request,HttpServletResponse response){
            String filePath=request.getParameter("filePath");
            //为防止文件名乱码,这里进行处理
            try {
                filePath=URLDecoder.decode(filePath,"utf-8");
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            File file=new File(filePath);
            String fileName=file.getName();
            try{
                InputStream fis=new BufferedInputStream(new FileInputStream(filePath));
                byte[] buffer=new byte[fis.available()];
                fis.read(buffer);
                fis.close();
                //清空response
                response.reset();
                //设置response的Header
                response.setHeader("Content-Disposition","attachment;filename="+new String(fileName.getBytes()))
                response.setHeader("Content-length",""+file.length());
    
                OutputStream toClient=new BufferedOutputStream(response.getOutputStream());
                response.setContentType("application/octet-stream");
                toClient.write(buffer);
                toClient.flush();
                toClient.close();
            }catch(Exception e){
                logger.error("文件下载出错。"+e.getMessage(),e);
                //文件不存在时会在FileinputStream(filePath)读取时异常,进入这里。导致前台页面无响应。这里就进行重定向到原页面,并带上错误标记
                try{
                    //request.getCOntextPath()获取项目名,这个必须加上,不然找不到对应path的方法。页面404,这个path对应本类的另一个方法(在下面有)
                    response.sendRedirect(request.getCOntextPath()+"/orderExport/toOrderExport?error=error");
                }catch(IOException e1){
                    logger.error(e1);
                }
            }
        }
    
        //转跳到下载的主页面
        @RequestMapping("/toOrderExport")
        public String jumpToOrderExportJsp(){
            return "/orderExport/orderExportIndex";
        }

    3.经过前两步,如果要下载的文件有异常,就会进入异常处理模块—通过response请求转发到前台下载页面。但是问题来了:我们是通过window.location.href进行后台。并没有回调函数的功能,该如何接收后台的入参呢?答案是在页面每次加载时进行异常标记的判断!js代码如下:

    $(function(){
        function getQueryString(param){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null){
                $.messager.alert('提示','你下载的文件不存在!');
            } 
        }
    
        getQueryString("error");
    
    })

    总结:

    1.针对重定向-redirect在ssm的controller层使用分为两种:一种是方法有返回值,一般为String,重定向用return “请求地址”即可;另一种方法是无返回值void,只能用response.sendRedirect(request.getContextPath+”请求地址”)
    针对String类型的重定向,这篇博文:spring mvc controller间跳转 重定向 传参讲的比较清楚。分带参数和不带参数两种。


    2.正常的从后台我们拿到的都是集合,map等,但是接触后台重定向请求前台的很少,带参数返回前台的就更少/orderExport/toOrderExport?error=error。我这里就是获取个标记,只要error不为空就证明出现异常。那么正常情况下该如何获取后台的请求参数呢?这里有两种方法供选择。一种是正则方法,一种是传统截取的方法。推荐使用第一种。我这里参考博文:获取参数的方法

    方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)

    function GetQueryString(name)
    {
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null){
            return  unescape(r[2]); 
         }
        return null;
    }
    
    // 调用方法,获取指定参数名的参数值
    alert(GetQueryString("参数名1"));
    alert(GetQueryString("参数名2"));
    alert(GetQueryString("参数名3"));

    下面举一个例子:

    若地址栏URL为:abc.html?id=123&url=http://www.maidq.com

    那么,但你用上面的方法去调用:alert(GetQueryString(“url”));

    则会弹出一个对话框:内容就是 http://www.maidq.com

    如果用:alert(GetQueryString("id"));那么弹出的内容就是 123 啦;

    当然如果你没有传参数的话,比如你的地址是 abc.html 后面没有参数,那强行输出调用结果有的时候会报错:
    所以我们要加一个判断 ,判断我们请求的参数是否为空,首先把值赋给一个变量:

    var myurl=GetQueryString("url");
    if(myurl !=null && myurl.toString().length>1)
    {
       alert(GetQueryString("url"));
    }

    这样就不会报错了!

    方法二:传统方法

    <script type="text/javascript">
    function UrlSearch() 
    {
       var name,value; 
       var str=location.href; //取得整个地址栏
       var num=str.indexOf("?") 
       str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
    
       var arr=str.split("&"); //各个参数放到数组里
       for(var i=0;i < arr.length;i++){ 
        num=arr[i].indexOf("="); 
        if(num>0){ 
         name=arr[i].substring(0,num);
         value=arr[i].substr(num+1);
         this[name]=value;
         } 
        } 
    } 
    var Request=new UrlSearch(); //实例化
    alert(Request.id);
    </script>
    展开全文
  • js页面将数据内容以文件形式下载

    千次阅读 2021-03-24 10:15:16
    * @param {String} fileName 文件名称 * @param {String} fileContent 文件内容 * @return {String} */ function createAndDownloadFile(fileName, fileContent) { if (!fileName) { return '文件名称为空'; ...
    /**
     * 创建下载文件
     * @param {String} fileName     文件名称
     * @param {String} fileContent  文件内容
     * @return {String}
     */
    function createAndDownloadFile(fileName, fileContent) {
        if (!fileName) {
            return '文件名称为空';
        }
        if (typeof fileName !== 'string') {
            return '文件名类型错误';
        }
        if (!fileContent) {
            return '文件内容为空';
        }
        if (typeof fileContent !== 'string') {
            fileContent = JSON.stringify(fileContent);
        }
    
        // 创建隐藏a标签
        var aTag = document.createElement('a');
    
        // 将文件内容转成blob对象
        var blob = new Blob([fileContent]);
    
        // 设置下载文件名
        aTag.download = fileName;
    
        // 给a标签创建DOMString
        aTag.href = URL.createObjectURL(blob);
    
        // 模拟点击、下载
        aTag.click();
    
        // 释放DOMString
        URL.revokeObjectURL(blob);
    
        return '';
    }
    

     

    展开全文
  • jsp页面文件上传的详细教程

    千次阅读 2019-08-30 22:20:50
    0)导入文件上传的依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3...
  • H5页面实现下载文件兼容移动端

    千次阅读 2019-12-12 12:05:00
    H5页面实现下载文件兼容移动端 问题1:之前写的H5 blob方式下载 主要是以后台返回文件流的方式进行下载 pc端没有问题 发现有些手机不支持 移动端的下载的方式改成通过文件Url直接下载或打开 但是这种方式不太安全 ...
  • 从vue新建页面过程vue项目文件调用关系

    万次阅读 多人点赞 2018-09-28 16:22:21
    由此可见,运行时启动文件webpack.dev.conf.js,而文件中包含如下语句,规定了起始页面: new HtmlWebpackPlugin ( { filename : 'index.html' , template : 'index.html' , inject : true ...
  • springBoot 连接打包成jar包运行时,获取图片上传文件、前端页面文件问题背景:在使用springboot进行开发时,会将项目打包成jar包,进行运行。 问题1:使用文件上传功能后,怎么获取文件? 问题2:每次更新前端...
  • 1、UI布局: (1)添加图片位的div:   (2)文件显示的模板布局(重点):
  • 文件存在,但页面显示404错误,文件不存在,同级其他文件能打开。 原因: 原因可能是IIS服务器不支持该文件类型。 解决办法: a、win2008打开IIS管理器,双击“MIME类型”: 点击右侧的“添加”,在弹出框里面,...
  • 有关JSP页面导出EXCEL文件

    千次阅读 2016-06-08 17:03:17
    设置之后,该页面的内容直接存为test2.xls的EXCEL文件。 好处是简单,但是生成的EXCEL文件不可控制,因此不算太好使。 2)使用Apache poi导出。 简单地说就是获取生成table的数据流,将其输出到设定好的EXCEL文件,...
  • 在BS软件页面设计完成后,我们就可以发布网站了,那么如何在vs2013中发布呢?初次接触发布,有些摸不着头脑,经查资料和自己摸索,总结出了一些个人经验,供大家参考: 一、发布 在项目名称上点右键-发布,弹出发布...
  • 1.创建工程temp,同时创建app应用song01app 2.在创建的app应用song01app下创建文件目录"templates"...4.在工程temp下的settings.py文件下添加应用song01app 5.编写temp下的urls....
  • 这种包含叫做静态包含,主页面不能够向被包含的页面传递参数,可以包含任意类型的文件,将包含文件的内容加载。也就是说,使用这种方法包含文件,它不管其内容如何,不过是静态页面还是动态页面都首先将页面的内容先...
  • 来实现预览操作时,文件打开的窗口页面title会根据后台方法来显示,此时如果不想看到方法,想让页面title动态显示文件名,需要进行以下操作: /* 设定新弹出页面的title 暂不适用pdf格式文件*/ var title1=name...
  • HTML页面中的表格导出为EXCEL文件

    万次阅读 2018-10-12 11:59:31
    1、js文件准备 jquery.table2excel.js 下载地址 https://github.com/rainabba/jquery-table2excel CSDN站内也多有该插件的下载提供 2、页面中引入js插件 &lt;script type="text/javascript" src="...
  • PDF文件页面大小不一致的解决办法

    万次阅读 2017-10-12 22:07:19
    经常遇到PDF文件中,页面大小不一致的情况,起来极为不爽,如何用简洁的方法解决呢。利用打印功能中的“页面缩放方式”即可很方便地解决此问题,如下: 1.在PDF文件页面中找到打印,点开打印对话框,设置打印...
  • JS跨页面或跨JS文件对变量赋值

    千次阅读 2017-07-20 19:28:23
    JS跨页面或跨JS文件对变量赋值,这是很小的一个问题。但问题虽小,却总觉得有点不够自然,不爽。为什么呢?访问一个页面上的变量不是什么难事,比如用parent.变量,或者windows.变量,都可以。但这么一来,这...
  • 将一个页面分成多个html文件(静态html分割页面

    万次阅读 多人点赞 2016-06-19 14:54:12
    静态html分割页面,达到类似PHP等动态页面的include引入页面效果。 用html把首页分成三个文件
  • JSP页面中引入js文件

    万次阅读 2012-08-13 12:48:05
    检查方法:将Js的内容写在当前的页面的 之间,是否能够正常运行,如果不能,请核查代码  2) 如果引入的代码在当前页面中能够正常运行,但当引入时不能正常运行,则有两种可能   A:引入Js的路径有问题   B:...
  • Jsp页面引入Js文件出错

    千次阅读 2012-04-20 12:37:17
    1)引入的js文件出错,检查方法:将Js的内容写在当前的页面的 之间,是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当前页面中能够正常运行,但当引入时不能正常运行,则有两种可能  A:引入Js...
  • 页面转发引起文件路径失效

    千次阅读 2012-08-20 20:43:34
    转发和重定向的区别之一是:采用转发,URL不会发生变化。...否则,是找不到文件的。  例如:假设jsp页面在project文件夹下,css源文件在project/style文件夹下。  从servlet转发到jsp页面的地址为
  • 用jspf文件做jsp页面的通用页面

    千次阅读 2016-05-17 21:22:35
    写jsp页面时,是不是:*" pageEncoding="utf-8"%> css和js引用特别多,而且有些页面头部信息包括css、js引用都一样,这时候聪明的程序猿肯定会想到把这一部分
  • 安装 Microsoft Windows Server 2003 或 Microsoft Windows XP 的一个 64 位版本时,操作系统将创建一个和一个半数量倍您计算机中安装的 RAM 的页面文件。 但是,由于在计算机的 RAM 量增加,页面文件需要将减小。 ...
  • 页面表格导出为Excel文件

    万次阅读 2018-07-03 11:54:57
    如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob [blɑ:b]和Object URL特性将表格导出。不过,丑话说在前头...
  • 获取方式如下所示:弹窗如下:获取成功!! 欢迎各位大佬批评指正
  • 2.读取本地磁盘的图片文件,如:d:/image/1.jpg 1.读取tomcat或者项目webapp目录下图片。 这类问题比较简单, 前端页面代码: <img id="fileTeacherTwo" src="/skillsCompetitionPlatform/userfiles/1/image....
  • 使用请求转发加载不出目的页面CSS文件的解决方法 当我们请求转发的目的页面是HTML文档或者JSP服务页面时,可能会出现一种情况,那就是页面的CSS文件或JS文件没有加载进去,那么这是上面问题呢?实际上这是路径的...
  • 有没有好的方法能够将页面中的table下载导出到excel。 用的方法是可以下载,但是下载的文件没有扩展,要手动去改扩展,才能看到。
  • TP5.1 将项目默认的入口文件定义在public目录下,对于程序安全有风险,因项目的需要,需修改项目入口文件为自定义的路径,以下是我的做法: 1、将public目录下的index.php , 和 htaccess 文件移至项目根目录。 2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,284,918
精华内容 513,967
关键字:

如何看页面文件名称