vue-ssr,页面按需加载,权限控制

本文介绍了Vue SSR的优势和核心,包括使用vue-server-renderer插件进行渲染,并讲解了动态请求数据的方法。接着讨论了页面按需加载的重要性及实现方式。最后,详细阐述了前端权限控制,包括路由控制、视图控制和请求控制,并提供了基于Vue的实现方案。
摘要由CSDN通过智能技术生成

一、功能介绍中涉及的知识

vue SSR学习

SSR:服务器端渲染(同构或者通用)
服务器把每个要展示的页面都运行完成后,将运行流直接给浏览器,所有的运算都在服务器端中完成,而浏览器只需要解析HTML即可

1.SSR和SPA

SPA:单页面应用

使用SSR的优势:

  • 对SEO(搜索引擎优化)更加友好,
  • 内容到达时间(time-to-content)更快,当网络缓慢时,不用等待所有js都下载完成再执行,可以让用户快速看到渲染页面。

SSR的缺点:

  • 开发中,针对特定的浏览器,只能使用一部分生命周期钩子函数
  • 服务器渲染应用程序时,需要在Node.js server环境运行
  • 在node.js中渲染应用程序时,需要占用大量的CPU资源

2.SSR的核心:
通过vue-server-renderer插件的renderToString()方法,把Vue实例转换为字符串插入到html文件中。

“`
const renderer = createRenderer({
template: require(‘fs’).readFileSync(‘./index,template.html’, ‘utf-8’)
})

 renderer.renderToString(app,(err, html) => {
     console.log(html) //html是注入程序内容的部分
 })

“`

3.添加路由功能,分清服务端和客户端的范围
①:创建vue实例的引用文件夹:每次客户端请求都会创建一个新的vue实例

```
export function createApp() {
    const router = createRouter()
    const app = new Vue({
        router,
        render: h => h(App)
    })
    return app
}

```
②:对实例进行路由渲染,返回给客户端

```

export default function creatRouter(){
    let router = new VueRouter({
        mode: 'history',
        router:[
            {
                path: '/home',
                component: require('./router/home.vue')
            },
            {
                //其他引用文件
            }
        ]
    })
}

```
③:服务器端渲染部分
   server.js部分,使用了一个promise回调函数,实例创建完成后,将返回的信息传入渲染器中进行处理,处理结束后,把字符串放入html中返回给客户端

 ```
//响应路由请求
express.get('*', (req, res) => {
    const context = { url:req.url }
    // 创建vue实例传入请求路由信息
    creatApp(context).then(app => {
        renderer.renderToString(app, (err, html) => {
            if (err) {
                return res.state(500).end('运行错误')
            }
            res.send(`
              //插入HTML代码段
            `)
        })
    }, err => {
        if(err.code === 404){
            res.status(404).end('所请求的页面不存在')
        }
    })
})  
//服务器监听
express.listen(8000, () => {
   console.log('已启动')
})
 ```
 ④:创建一个新的vue实例后,通过路由的Push()方法,更改实例的路由状态。

 `	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值