任务四:NuxtJS综合案例

113 阅读1分钟

案例介绍

这是一个通用的案例,可以使用任何框架去完成

image.png

image.png

需要掌握的能力

image.png

页面登录注册访问权限

通过路由中间件来处理,当页面没有登录,不允许输入路由进行跳转

image.png

哪个页面需要用,就在name上面写上文件的名字即可

image.png

持久化登录

将登录状态存到cookie中,服务器能拿到,客户端也能拿到

image.png

客户端用于操作cookie的包,使客户端操作cookie更加方便,npm i js-cookie

路由中间件

既能处理服务端的路由拦截,又能处理客户端处理的路由拦截

image.png 使用方法

image.png

image.png

watchQuery

导航栏参数改变,组件不会重新渲染,想要重新渲染,需要使用watchQuery这个参数,实际就是重新调用了asyncData,是组件发生变化。

image.png

image.png

使用插件给每个请求加Token(类似请求拦截器)

image.png

image.png

设置mate优化SEO

更多详细信息可以到Nuxt官网的视图->HTML头部中去了解

image.png

部署

image.png

image.png

PM2常用命令

image.png

Cl/CD服务

这些工具都是用来做持续集成和持续部署的

image.png

服务器连接

image.png

传输文件

image.png

检查传输文件是否成功

image.png

删除文件

image.png

服务器持久化运行项目命令

image.png