Nuxt.js实现了一个SSR前端博客的示例代码

编辑：宝哥软件园来源：互联网时间：2021-08-20

新天龙八部

评分

为什么要使用Nuxt.js

该公司现有的项目只有登陆页面，通过从前端服务器本身读取pug文件在服务器端呈现，当然是为了第一屏幕加载速度和SEO。Nuxt.js是一个基于Vue.js的通用应用框架，它预先假定了使用vue.js开发呈现在服务器端的应用所需的各种配置，只有安装官方文档进行开发，才能很好地解决SSR的问题。让我们以一个简单的博客为例来练习Nuxt.js

项目介绍

目前基于Nuxt.js的简化博客包括注册、登录、文章列表页、文章详情页和用户列表页，其中用户信息由Vux存储，异步数据由asyncData获取，刷新页面后使用nuxtServerInit和cookie处理Vux数据丢失，使用错误模板页处理常规错误，使用中间件进行简单的权限验证。这个项目是有缺陷的，它统一封装了axios方法，但是没有考虑服务器请求接口和令牌处理。

目录结构

Assets:资源文件。用于组织未编译的静态资源，如LESS、SASS或JavaScript。组件：组件。Layouts:页面：模板页面，默认为default.vue您可以在此目录中创建全局页面或错误处理页面的统一布局。您需要提供一个nuxt标签，它类似于路由器视图中间件：用户定义的中间件将在加载组件之前被调用。可以在页面中调用：middleware: '中间件名称'。Page pages:index.vue是根页面，Nuxt.js框架读取所有的。vue文件，并自动生成相应的路由配置。如果需要动态参数id，可以添加带有_id的文件，必须用参数名加下划线。Plugin:插件用于组织需要在根Vue.js应用程序实例化之前运行的Javascript插件。Static:静态文件，静态文件目录Static用于存储应用程序的静态文件，这样的文件不会被Nuxt.js调用Webpack进行构造和编译。Store:用于组织vuex状态管理。具体使用请移至官网。nuxt . config . js : nuxt . config . js文件用于组织Nuxt.js应用的个性化配置，配置头、加载、css、插件等。Nuxt.js生命周期

1.传入请求浏览器的请求)2。接受请求后，nuxtServerInit服务器应该检查当前是否有nuxtserverinit配置项，如果有，执行这个函数3。存储操作用于操作vuex4。中间件可以做一些操作，比如jWT。5.validate()检查参数。如果参数检查失败，可以在布局的错误中捕获。6.asyncData() fetch() asyncData用于渲染组件，fetch用于渲染vuex7.render。

Nuxt扩展后的生命周期和方法如下：

before create : u before create()components : { numxtload : {…} } computed : { isofline : u context : { Isstatic : false，isDev: true，isHMR: true，app: {…}，payload: undefined，…} create d : u created()data 333:err :“错误已更改”}注意：

只有Vue.js生命周期的beforeCreate和created hooks才会在服务器和客户端呈现。在上述生命周期中无法获得窗口对象。AsyncData和fetch，我们可以得到数据。不要试图将数据装载到数据上。此时，我们无法获得这个对象。发展总结

如何修改默认引导端口？

您可以在package.json下修改配置，如下所示。

' config ' : { ' nuxt ' : { ' host ' : ' 127 . 0 . 0 . 1 '，' port' :' 3304'}}如何添加全局样式？

您可以在assets中添加一个全局css文件，例如在assets下的Css文件夹目录中添加一个index.css文件，然后在nuxt-config.js中配置Css文件路径.CSS :[' ~ assers/CSS/index . CSS ']

通过模板中的别名访问图片是正确的。为什么在Css中设置背景图片时会报错？

css中配置的是“~/”后的“/”需要删除。

img src=' http : ~/static/logo . jpg '/back round-image : URL(' ~ static/logo . jpg ')；如何添加路由动画？

同样，我们在Css文件中添加一些动画代码，一般的样式后面会跟-active和-leak-active，其实和Vue动画是一样的。默认情况下，从第页开始的动画将作用于所有页面。如果你想制作一个特定页面的动画，你可以在相应的页面脚本中引用它，比如transitions: 'bounce '。页面-输入-活动，页面-保持活动状态{ transition:不透明度. 3s }。页面-输入，页面-保持活动状态{ opacity: 0 }。弹入激活{ animation:弹入. 8s；} .弹跳-离开-激活{ animation:弹开. 5s；} @关键帧弹入{ 0% { transform : scale(1)} 50% { transform : scale(1.01)} 100% { transform : scale(1)} } @关键帧弹出{ 0% { transform : scale(1)} 50% { transform : scale(1.01)} 100% { transform : scale(1)} }如何传递路由参数？

与Vue-router相同，有两种方式：声明式和编程式，只是标签改为router.push(.)

nuxt-link : to=' { name : ' article '，params: { id33601234 } } '声明性/nuxt-link //编程性此。$ router.push ({name3360' article '，params: { id:)

Nuxt.js提供了一个validate的生命周期挂钩，可以在其中验证参数。以文章详查id为例，我们需要判断传递的id是否为数字，可以按如下方式处理。

验证({params}) {return/ d $/。test (params.id)}如何添加404等错误页面？

您可以在布局下创建一个新的error.vue页面。内容如下。当您访问一个不存在的页面时，或者当参数验证失败时，或者当我们在中间件处理中抛出异常时，您将跳转到这个页面。

模板div class='容器' h1v-if='错误。statuscode==404 '页不存在/h1 h1 v-else应用程序有错误异常/h1 nuxt-link to='/'第一页/nuxt-link/div/templatescriptordefault { props 3360['错误']，layout:' blog'/指定模板页}/scriptmiddleware中的文件引发错误

导出默认函数({ store，error，redirect }) { if(！store . state . user . user info . auth){ error({ message : '没有权限！statusCode: 403 }) }}如何设置顶部进度条？

加载属性配置可以在nuxt-config.js中设置加载颜色。在created中可能不会立即使用加载。这种配置加载存在严重缺陷，不可能知道真实的加载进度。您也可以自定义加载组件，load : ' ~ components/loading . vue '。

导出默认的{mounted () {this。$ nexttick (()={this。$ nuxt。$正在加载。start () settimeout (()=this。$ nuxt。$正在加载。finish()，500)}}}如何获取异步数据？

Nuxt.js提供了两个函数，asyncData和fetch函数。AsyncData获取组件的数据，fetch获取数据以填充应用程序的存储树，然后再呈现页面。

AsyncData可以使用promise或async函数。记住，返回的东西需要用一个对象包装，不能装入数据。此时没有这个对象。

//方式一asyncData({ app，params，route，query，error}) { return getUserlist({}).然后(RES={ let user=[]；user=res.list console.log(用户，“用户”)返回{用户} }).catch(err={ console.log(err) })}，//方式二异步异步数据({ app }){ 0让数据=等待getuser list({ })；让用户=数据.列表返回{用户} }提取函数同上，可以使用承诺也可以使用异步非同步(异步)函数，通常会犯罪一个突变。

导出默认的{ fetch ({ store，params }){ return axios。get(' http://my-API/star ').然后((res)={ store.commit('setStars '，RES . data)})}/script//或者使用异步非同步(异步)或等待的模式简化代码如下：模板h1星： { { $ store。国家。stars } }/h1/templatescript export默认{ async fetch ({ store，params }){ let { data }=wait axios。获取(' http://my-API/stars ')存储。commit(' setStars，data) }}/script如何动态修改标题的内容？

如果是写死的，可以直接修改头的配置。

head() { return { //title: ' '，这里一旦声明，在asyncdata里修改也不起作用，直接以这个为准meta :[{ hid : ' description '，//nuxt.config替换唯一标识hid { hid: 'description '，name: 'description '，content: ' Nuxt。js项目' }名称： '内容'，内容： '文章详情' } ] } },如果是动态数据从数据源里获取，然后通过异步数据里的应用对象，动态修改头的标题。

asyncData({ app，params }){ const id=params。id；返回getArticleDetail({ id }).然后（结果={ app。头部。标题=结果。标题；}) .catch(err={}) }如何进行权限JWT验证？

登录成功以后，我们会在甜饼干和状态管理中缓存代币信息，当界面刷新的时候，会走商店里的numxtserver初始化函数，该函数仅在每个服务器端渲染中运，可以使用req.headers.cookie获取浏览器的饼干，再次更新商店里的值，接着会走到中间件，中间件进行验证，如果有代币信息则继续，没有则跳转到登录页。1.为什么要在numxtserver初始化更新商店的值？需要在中间件里使用，否则刷新后商店里的值为空了。2.客户端调用接口可以拿到令牌，服务器端如何拿到？可以通过numxtserver初始化里的请求拿到请求信息的饼干，然后请求接口。3.前后端分离，刷新的时候如何保证用户名、令牌等信息依然存在？可以像上面一样，每次取甜饼干的值再次更新商店，但这样有一个问题嘿，饼干可能会被篡改，后端代码需要做验证。也可以每次刷新重新通过代币请求接口，更新用户信息。

商店代码

从“Vue”导入Vue从“Vuex”导入Vuex从""导入用户“/模块/用户”；从" ~/assets/js/constant.js "导入{ COOKIE _ KEY }；vue。使用(Vuex)；const store=()=new Vuex .存储({ modules: { user }，actions 3360 { async nuxtserverit({ commit，dispatch }，{ req，app }){ if(req。标题。cookie){ let parsedResult={ }；请求。标题。饼干。split('；').forEach(cookie={ const CurrentTookie=cookie。split('=')；解析结果[CurrentTookie[0].trim()]=(CurrentTookie[1]| | ' ').trim()；});const UserInfo={ name : ParseResult[COOKIE _ KEY].名称],令牌：解析结果[COOKIE _ KEY].TOKEN]}；提交('用户/设置用户信息，用户信息);} } } });导出默认存储；中间件代码

导出默认函数({存储，错误，重定向}) { if(！商店。国家。用户。用户信息。令牌| |！商店。国家。用户。用户信息。姓名){//错误({ //message: '您没有连接，//statuscode : 403/})重定向('/');}}nginx部署

新公共管理运行构建选择建设以后的四个文件：nuxt，static，nuxt.config.js，package.json上传到服务器PM2PM2启动NPM计划。JSON。名称'-运行开始nginx配置

查看网页源代码可以看到：

服务器{ listen 3000 server _ name Felix 12345 . clubgzip ongip _ buffers 32 4K；gzip _ comp _ level 6；gzip _ min _ length 100gzip _ types应用程序/javascript文本/css文本/XML；gzip _ disable ' MSIE[1-6] '；gzip _ vary on proxy _ buffer _ size 64k proxy _ buffers 32 32k proxy _ busy _ buffers _ size 128 klocation/{ root/data/ww/nuxt；proxy _ pass http://127。0 .0 .1:3002;proxy _ set _ header X-Real-IP $ remote _ addr；} }