ajax获得excel文件流在前端打开_主流前端技术讲解,面试必考!
Vue.js是Web前端的一个框架,用来快速开发单页面应用。当Vue.js开发变成主流的时候,许多公司的技术团队都打算把下一个新项目换成用Vue.js来开发。
但是当我们详细了解Vue.js以后,会发现一个很尴尬的问题,那就是Vue.js的页面是采用客户端渲染的,它不像PHP、JSP那样是服务器端渲染,搜索引擎无法收录网站的内容。
那有没有办法既能用上Vue.js,又能实现服务器端渲染呢?不用担心,Nuxt.js框架就是一个基于Vue.js的服务器端渲染方案。
一、客户端渲染和服务器端渲染的区别
两种渲染方式的区别在于:首次加载出来的页面中,是否含有数据。这里所说的数据,是指页面中具体的文字内容。
从下面这张图可以比较两种渲染方式的区别。
1.客户端渲染
客户端渲染的情况下,浏览器首次加载出来的是空的网页模板和JavaScript程序,这个页面是不包含数据的,数据需要通过Ajax再次请求服务器获得。此时用户会看到一个Loading加载提示页,或者是一个空白页,等待数据加载完成后页面才会完整显示出来。
2.服务器端渲染
服务器端渲染时,浏览器首次加载出来的就是一个包含数据的完整页面,但这些数据并不是开发人员手动填进去的,而是由服务器预先完成渲染(也就是把数据填充到网页模板中),把渲染结果返回给浏览器。这样用户会感觉到网页的打开速度很快,搜索引擎也能正确识别网页中的数据。
也就是说,服务器端渲染并不是什么新技术,以前的网页全都是服务器端渲染的,只不过用前端技术实现服务器端渲染有点困难。有了Nuxt.js框架以后,就很容易实现了。
二、如何判断网页是不是服务器端渲染
当我们在浏览器上打开网页后,单击鼠标右键,选择“查看网页源代码”,然后看一下源代码中是否包含数据。如果源代码中有数据,那么网页就是服务器端渲染的;如果源代码中没有数据,而页面中有数据的话,那么数据就是通过Ajax异步加载出来的,这样的网页就是客户端渲染。
三、快速体验Nuxt.js
Nuxt.js是工作在服务器端的,它依赖于Node.js。我们先确保Node.js已经安装了,然后我们使用npx命令来创建一个项目。这里我们假设安装到D:demo命令下,创建一个nuxt-demo的项目。
(1)使用VS Code打开D:demo目录。
(2)打开终端,执行命令,创建项目:
npx create-nuxt-app nuxt-demo
(3)在创建项目过程中,会询问选择哪个包管理器,在这里选择使用npm:
? Choose the package manager (Use arrow keys)
Yarn
> Npm
(4)询问选择哪个渲染模式,在这里选择使用SSR(代表服务器端渲染):
? Choose rendering mode (Use arrow keys)
> Universal (SSR)
Single Page App
(5)安装配置完成后,启动项目,命令如下:
cd nuxt-demo
npm run dev
(6)通过浏览器访问http://localhost:3000/,查看启动后的项目。
四、目录结构
我们看一下Nuxt目录结构中的关键文件的作用:
assets:存放待编译的静态资源,如Less、Sass。
static:存放不需要webpack编译的静态文件,服务器启动的时候,该目录下的文件会映射至应用的根路径“/”下。
components:存放自己编写的Vue组件。
layouts:布局目录,用于存放应用的布局组件。
middleware:用于存放中间件。
pages:用于存放应用的路由及视图,Nuxt.js会根据该目录结构自动生成对应的路由配置。
plugins:用于存放需要在根Vue应用实例化之前需要运行的JavaScript插件。
nuxt.config.js:用于存放Nuxt.js应用的自定义配置,以便覆盖默认配置。
关于Nuxt.js的介绍就到这里了。其实Nuxt.js的使用还是非常简单的,但是在面试中,许多前端面试官都会提问这个技术点,大家想要深入学习的话可以参考Nuxt.js的官方文档。
ajax获得excel文件流在前端打开_主流前端技术讲解,面试必考!相关推荐
- ajax获得excel文件流在前端打开_Javascript前端开发:jsonp的原理你真的懂吗?
从事前端开发的小伙伴肯定都用过jquery的ajax请求,但如果需要跨域请求,就需要用到jsonp,因为默认的ajax跨域请求会被浏览器拦截,拦截原因是因为支持Javascript的浏览器都会使用同源 ...
- nodejs调用后端接口返回excel文件流,nodejs再转发前端实现下载excel
今天在项目上遇到了一个问题,就是后端接口返回excel文件流,然后前端实现下载excel,前端下载的excel文件居然无法打开! 在网上搜索了很多对应的资料,也尝试了很多办法,还是没能解决,最后在这篇 ...
- 前端处理后端返回的excel文件流并下载
项目中遇到上传excel,后端写的接口是当重复上传相同信息的excel时会吐出excel二进制文件流,这种文件流需要前端下载供用户看. 首先后端的接口需要上传文件已formData形式上传 这里我用的 ...
- SpringBoot+Vue下载Excel文件流(No converter、Excel乱码)
目录 介绍 No converter Excel乱码 正确代码 后端代码 前端代码 方法1 方法2 方法3 介绍 后端使用SpringBoot.Mybatis Plus,前端使用Vue,进行Excel ...
- 服务器上文件一直被打开吗,Python: 如何判断远程服务器上Excel文件是否被人打开...
最近工作中需要去判断远程服务器上的某个Excel文件是否被打开,如果被人打开,则等待,如果没人打开使用,则去填写数据进Excel文件. 开始想的很简单,和其他语言一样,比如C#,打开文件,如果报错说明 ...
- python检测excel是否打开_Python判断远程服务器上Excel文件是否被人打开的方法_学领未来...
最近工作中需要去判断远程服务器上的某个Excel文件是否被打开,如果被人打开,则等待,如果没人打开使用,则去填写数据进Excel文件. 开始想的很简单,和其他语言一样,比如C#,打开文件,如果报错说明 ...
- java代码读取excel文件_Java 读取excel 文件流代码实例
这篇文章主要介绍了Java 读取excel 文件流代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 public static vo ...
- Java实现Excel下载,excel文件流输出到浏览器
关于实现Excel下载,我使用的是easypoi, easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员就可以方便的写出Excel导出,Excel模板导出,Excel导 ...
- js接收excel文件流并解析下载文件
情景:后端为post请求,且接口返回为excel文件流 方法: 1.使用原生XMLHttpRequest 2.使用原生fetch 3.使用axios import qs from 'qs'import ...
最新文章
- Login rule 权限规则设置自动跳转页面
- Python的IDE:利用MyEclipse2017软件的PyDev插件实现Python编程
- linux登录界面主题,Ubuntu 18.10(Cosmic Cuttlefish) 新登录界面亮相,主题为Yaru
- python视频网站项目_Python开发教育网站项目实例教学(105集视频课程含源码)
- .net6给winform带来的新功能
- 数据结构(二)冒泡排序
- 服务器克隆机网络端口排错
- 小白必看!JS中循环语句大集合
- 微软前WP主管乔北峰长假回归 新岗位或将得罪不少用户
- Vue使用JsBarcode生成条形码
- 微信小程序 三角形实现 (评论三角形)
- 将平板、手机等作为电脑的副屏幕
- 一个基于.Net高性能跨平台内网穿透工具
- 2022.5.4.学习笔记数据类型
- 《运营力——微信公众号 设计 策划 客服 管理 一册通》导读
- Java回炉学习(一)
- 用友T3软件超值的打印秘籍,你值得收藏!
- Java面试题大全(整理版)1000+面试题附答案详解,最全面详细,看完不进你找我
- javascript 老王开车去东北
- 神经网络 mse一直不变_用深层神经网络解释大脑的运作
热门文章
- Castor xsd生成java_java – Castor可以处理从基础XSD导入的多个XSD生成类吗?
- 所有子序列的逆序对总和_一个数字的所有子串的总和
- g++默认参数_C ++默认参数| 查找输出程序| 套装1
- IDEA中Spring Boot项目报错:There was an unexpected error (type=Not Found, status=404)
- nifi 实现数据库到数据库之间数据同步
- latex摘要目录页眉缺少一个空格
- synchronized同步方法概述
- rust雪山矿洞几个入口_梅里雪山内转全记录(雨崩徒步:神湖神瀑冰湖)
- iframe src 传参数_剧本杀测评|本友投稿——蜀山传(非剧透)
- mysql max字符串报错_mysql [Warning] max_join_size报错问题解决办法