乐趣区

关于nuxt.js:全栈导航网站挂掉我是如何排查问题

问题

我忽然发现,网站刷新的时候打不开了,如果是路由跳转进去,是失常的

然而网站经常链接会被他人珍藏,或者间接分享关上,间接打不开必定不好

问题剖析:此网站我是采纳的 nuxt.js 开发的,个别这种谬误类型,通过网络申请的数据,而后在对象下的某属性失落,造成谬误类型

排查

通过查看,是在父级页面申请的数据,传到子组件数据失落

page.js 页面

<template>
    <div class="aritcle-detail">
        <Header />
        <div class="wp clearfix">
            <Detail :detail="detail"></Detail>
        </div>
        <Footer />
    </div>
</template>
<script>
import {apiNavthemeDetail} from '@/api/navtheme'
import Detail from '@/web/article/Detail'
export default {
    components:{Detail},
    async asyncData({$axios, app, store, params,route}) {console.log('router',params.id);
        const res = await apiNavthemeDetail({id: params.id});
        return {
            detail: res.data,
            params
        }
    },
    mounted() {setTimeout(() => {console.log('params', this.params)
            console.log('detail', this.detail)
        }, 3000)
    }
}
</script>

Detail 子组件

<template>
    <div class="detail">
        <div class="detail-left">
            <div class="info">
                <div class="header">
                    <h1>{{detail.title}}</h1>
                    <div class="meta">
                        <span>
                            {{detail.member.it_name}} 次
                        </span>
                    </div>
                </div>
                <div class="user">
                    <div class="user-left">
                        <div class="img">
                            <img :src="detail.member.userhead" alt />
                        </div>
                        <div class="name">
                            <b>{{detail.member.username}}</b>
                            <span class="user-title">{{detail.member.description}}</span>
                        </div>
                    </div>
                </div>
                <div class="content article-md">
                    <no-ssr>
                        <mavon-editor
                            class="detail-md itnavs-markdown"
                            :value="detail['content']"
                            :subfield="false"
                            :defaultOpen="'preview'"
                            :toolbarsFlag="false"
                            :editable="false"
                        />
                    </no-ssr>
                </div>
            </div>
            <div class="community">
                <img src="@/assets/images/qzdh.jpg" alt />
            </div>
        </div>
    </div>
</template>
<script>
import Rightuser from './Rightuser'
import Casually from './Casually'
export default {
    components: {
        Rightuser,
        Casually
    },
    props: ['detail'],
}
</script>

查看服务器日志

nuxt.js 是 node 过程,启动的是用 pm2,如有不懂,清查看我之前写的【文章】

pm2 logs

此处得出结论,认为是服务没有查找数据,咱们查看服务端代码

public function detail(){$id = input('id');
        $navtheme = new NavthemeModel();
        $detail = $navtheme->where('id',$id)->with(['member'=>function($query){$query->field('it_name');
        },'taxonomic'=>function($query){$query->field('name,id,parentid');
            $query->with('primary');
        }])->find();
        $navtheme->where('id',$id)->inc('hits',1)->update();
        $detail['recommended'] = $navtheme->recommended();
        return $this->showWebData(['data'=>$detail]);
}

揣测,$navtheme 去查找时失败,未查找到相干数据,导致 member 类型空,那么在客户端前端写法

detail.member // 为 undefined
detail.member.it_name // 报错,undefined 上面没有数据属性,导致 nuxt.js 异样 

代码始终我未动过,为啥呈现这种状况,不得奇解

通过排查,我尝试在这里,打印 id

$id = input('id');
dump($id)

得出结论:null,那么问题找到了,也就会客户端穿过来的参数 id,没有承受到,导致没有查问到数据

此时又有问题,前端和后端都是我写的,都跑了大半年没问题,怎么忽然参数失落了,为了验证,此刻咱们能够查看 nginx 日志

nginx 日志

通过宝塔面板能够查看到可视化查看 nginx 日志,当然也能够用命令行去查看,会更粗疏一些

通过排查在参数失落

确认前端是否传入参数

async asyncData({$axios, app, store, params, router}) {console.log('router',router.id)
    console.log(params.id)
},

nuxt.js asyncData 函数是在服务端执行,所以在客户端是看不到的,须要在服务端看,我持续应用 pm2 logs 查看

论断:前端传递参数,后端没有承受到参数,在传输过程中失落,前端应用的是用的 axios.js

axios.js 参数传输过程中失落

首先确认 axios.js 版本,是否过于老旧

{
  "name": "nuxt-itnavs",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {"axios": "^0.21.1",},
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.0.0",
    "vue-img-cutter": "^2.1.10"
  }
}

再次回到,问题所在 我忽然发现,网站刷新的时候打不开了,如果是路由跳转进去,是失常的 ,清看结尾,意思是间接进来的有问题,路由跳转的没问题

在这个问题,须要搞懂 nuxt.js 的执行机制,nuxt.js 次要解决了 seo 渲染问题,原理,先拿到数据,而后拼接成 html 模板,返回客户端,这样有了实在数据 dom 节点

我记得在 axios.js 0.18 之前的版本存在 post 参数失落,参数传递了,后端承受不了,起初版本修复了此问题

Axios- 中文文档

查看 axios.js 封装

// loca 其妙设计如果申请的过的数据间接取,不必发送申请
const post = async(url, params, hand = { loca: false}) => {if (process.server) {const res = await http.post(handLastUrl(url), params);
        return res.data;
    } else {let key = url.replace(/\//g, 'A');
        if (key && hand.loca && window[key]) {return window[key];
        }
        const res = await http.post(handLastUrl(url), params);
        if (hand.loca) {window[key] = res.data;
        }
        return res.data;
    }
}

通过排查因为 axios 默认发送数据时,数据格式是 Request Payload,而并非咱们罕用的 Form Data 格局,PHP 后端未必能失常获取到,所以在发送之前,须要应用 qs 模块对其进行解决

import qs from 'qs'; // 援用之前记得装置 npm i qs -S
http.post(handLastUrl(url), qs.stringify(params));

办法二

如果想疾速解决问题,把参数间接带在 url,不过这种状况,最好搁置一些相似 id,数据比拟少的数据进行传输

const apiTaxonomicItems = (params) => {return post(`${prefix}/taxonomic/items?id=${params.id}`, params)
}
export {apiTaxonomicItems,}

批改后,打包后编译

npm run build // 客户端 

打包实现后上传,.nuxt,static,nuxt.config.js,package.json, 这四个文件

pm2 restart all // 服务端 pm2 重启 

此刻网站能够失常拜访,详情页面刷新也都没问题,【全栈导航】

写到最初

明天是七夕节,祝大家节日快乐,

人总是这样,大道理都懂,小情绪却难以自控,从童稚到成熟,从单纯到简单,咱们都曾不堪一击,也终将刀枪不入。

退出移动版