好程序员web前端培训学习笔记Vue学习笔记之二
好程序员web前端培训学习笔记Vue学习笔记之二,服务端渲染
什么是服务器端渲染 (SSR)?
Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。
为什么使用服务器端渲染 (SSR)?
更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间 (time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。
Vue SSR初体验
.安装
npm install vue vue-server-renderer --save
.渲染一个 Vue 实例
// 第 1 步:创建一个 Vue 实例const Vue = require('vue')const app = new Vue({
template: <div>Hello World</div>
})// 第 2 步:创建一个 rendererconst renderer = require('vue-server-renderer').createRenderer()// 第 3 步:将 Vue 实例渲染为 HTMLrenderer.renderToString(app).then(html => {
console.log(html)}).catch(err => {
console.error(err)})
Nuxt.js
1.Nuxt.js介绍与安装
https://zh.nuxtjs.org/guide
npx create-nuxt-app <项目名>
服务端渲染, 解决首屏加载速度, 和 seo问题
//如果出现错误 HTMLElement is not define 修改nuxt.config.js 中pluginsplugins: [
// '@/plugins/element-ui', { src: '@/plugins/element-ui', ssr: false} ] //不要复制 , 编码有问题
- Nuxt.js的配置
https://zh.nuxtjs.org/guide/configuration - 路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
(1) 要在页面之间使用路由,我们建议使用 标签。 支持activeClass ,tag
(2)
pages/--| user/-----| index.vue-----| one.vue--| index.vue那么,Nuxt.js 自动生成的路由配置如下:router: {
routes: [
{ name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' }
]}
(3)嵌套路由
创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加 用于显示子视图内容。
pages/--| film/-----| nowplaying.vue-----| comingsoon.vue--| film.vue
(4)重定向
-
nuxt.config.js
router:{extendRoutes (routes, resolve) { routes.push({ path: '/', redirect: '/film' }) }
}
-
利用中间件来处理
// 中间件 middle/ redirect.js
export default function({ isHMR, app, store, route, params, error, redirect }) {
if (isHMR) return
// 页面均放在_lang文件夹下,即lang为动态路由参数
/*if (!params.lang) { //此写法会出现路由重定向次数过多的问题return redirect('/' + defaultLocale + '' + route.fullPath)
}
*/if(route.fullPath == '/film') { return redirect('/film/nowplaying') }
}
router: {middleware: 'redirect' // 即每次路由跳转会调用该中间件
//多个中间件写法
// middleware: ['redirect']
}
(5) 动态路由
必须加下划线 (文件夹也可以加下划线(多级嵌套), 文件也可以加下划线)
pages/--| detail/-----| _id.vue//编程式跳转 this.$router.push("/detail");
(6) 获取动态路由参数
asyncData({params}){
console.log(params.id);
}
- 视图
在layout 里面 写好default.vue 可以认为这是根组件的模板了,
所有的组件都加在里面, 但是有些页面 可能不一样,就可以使用 个性化定制页面。
举个例子 layouts/template.vue:
<div>这个页面不需要导航栏</div> <nuxt/>
- 异步数据与资源文件
(1) 如果组件的数据不需要异步获取或处理,可以直接返回指定的字面对象作为组件的数据。
export default {
data () {
return { foo: 'bar' }
}}
(2)使用 req/res(request/response) 对象
在服务器端调用asyncData时,您可以访问用户请求的req和res对象。在当前页面刷新, 服务端执行此函数从其他页面跳转过来,客户端执行此函数export default {
async asyncData ({ req, res }) {
// 请检查您是否在服务器端 // 使用 req 和 res if (process.server) { //判断是否在服务器被调用 //process.client 判断是否在客户端被调用 return { host: req.headers.host } } return {}
}}
(3)错误处理
Nuxt.js 在上下文对象context中提供了一个 error(params) 方法,
你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。
以返回 Promise 的方式举个例子:
export default {
asyncData ({ params, error }) {
return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) .catch((e) => { error({ statusCode: 404, message: 'Post not found' }) })
}}
(4)反向代理的配置 (重启服务器)
npm i @nuxtjs/proxy -D在 nuxt.config.js 配置文件中添加对应的模块,并设置代理
modules: [
'@nuxtjs/axios', //添加axios '@nuxtjs/proxy' //添加proxy模块 ],
axios: {
proxy: true
},
proxy: {
'/api': { target: 'http://example.com', pathRewrite: { '^/api' : '/' } }
}这样就配置好了webpack的反向代理。为了在服务端和客户端都工作, 需要axios.get((process.server?'https://h5.ele.me':'')+"/restapi/shop......e&terminal=h5").then(res=>{
console.log(res.data)})如果上线了, 需要在node中配置好 http-proxy-middleware 就工作了。
- vuex状态树 ( 注意:重启服务器 )
(1)需要添加 store/index.js 文件,并对外暴露一个 Vuex.Store 新的实例
每次访问都要返回一个实例, 防止交叉请求状态污染
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = () => new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment (state) { state.counter++ }
}})
(2)fetch 方法用于在渲染页面前填充应用的状态树(store)数据,
与 asyncData 方法类似,不同的是它不会设置组件的数据。
如果页面组件设置了 fetch 方法,它会在组件每次加载前被调用(在服务端或切换至目标路由之
前)。
export default {
async fetch ({ store, params }) {
let { data } = await axios.get('http://my-api/stars') store.commit('setStars', data)
}}//当然这个异步请求 也可以在actions中做异步
await store.dispatch('GET_STARS');
}}//store/index.jsexport const actions = {
async GET_STARS ({ commit }) {
const { data } = await axios.get('http://my-api/stars') commit('SET_STARS', data)
}}
(3)vuex 还是非父子以及状态快照的作用
// 访问 还是 通过 this.$store.state.listasync fetch({store}){
if(store.state.list.length){ return; } //数据请求部分 }
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Serverless 工作流给人工智能带来了哪些变化?
4月,阿里云 Serverless 工作流正式商业化,这是一款用于协调多个分布式任务执行的全托管 Serverless 云服务。产品致力于简化开发和运行业务流程所需要的任务协调、状态管理以及错误处理等繁琐工作,让用户聚焦业务逻辑开发。 精准打造云上自动生产线,Serverless 工作流正式商用 工作流是一种非常常见的场景,比如企业内部审批、采购订单、ETL等日常企业事务,或者大数据处理流水线,常规或定制化自动化运维等。此外,音视频行业的多媒体文件分片转码、格式转换、审核校验和人脸识别等长时任务,电商旅游行业的客户线上订单,AI 行业的机器学习流水线, 生信行业的基因测序也会有工作流。 这些场景面临着以下难点:一般由众多异步分布式任务组成,控制逻辑和任务逻辑交织在一起,流程复杂冗长;分布式任务可能跨越公共云和本地机房,安全的打通网络代价很大;整个工作流执行完毕耗时过长,造成资源占用的浪费;涉及异步且关键业务流程,务必保证数据一致性;繁复的执行步骤如何进行可视化监控等等。 Serverless工作流正式针对这些痛点,分离控制逻辑与任务逻辑,细化责任,便于管理和维护;将流程以模版方式统一定...
- 下一篇
上云遇到ERP
最近在迁云搬站过程中,总是在大型企业处遇到ERP、CRM等大型的系统需求,这类系统和软件基本上都是有很久的历史,也有很深的行业背景。这些系统是最不好上云和搬迁的,CRM系统还好,如果没有深度绑定某些大型商业软件,而是ISV开发商提供,一般上云和搬站也能很顺利的完成。ERP系统基本上SAP、ORACLE、用友等大型商业软件占有率最高。 一、ERP的概念和特点 ERP是企业资源计划(Enterprise Resource Planning,ERP)的英文缩写。其概念由美国Gartner Group(加特纳集团公司)于20世纪90年代初首先提出。ERP是制造资源计划MRPII的再延伸和集成。 二、ERP的主要厂商和产品 1、SAP SAP成立于1972年,由5位离开IBM公司的系统分析师在德国曼海姆建立。致力于成为为企业提供解决方案的软件供应商。48年之间为全球44,000个客户提供了软件和解决方案。 SAP有面 向不同规模企业 的ERP产品,比如 适合中小企业 的SAP Business ByDesign、SAP Business One,适合大 中型企业的SAP S/4HANA、...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS关闭SELinux安全模块