JS经典实例网站首页 JS经典实例

SSR服务端渲染

发布时间：2020-06-13 17:16:15编辑：雪饮阅读（）

新手模板初始化

vue init nuxt-community/starter-template 01_nuxt_start

后面的是项目名可自定义

然后一路next即可，最后按照提示进入目录npm install 以及npm run dev

当我们npm run dev后看到结果里面有提示你访问项目的地址，然后我们访问项目可以看到默认localhost就有响应内容而且不是以前哪种纯引入js，这就是所谓的服务端渲染。。。

组件的建立与访问

新建pages/one.vue如

<template>
    <div>我是one</div>
</template>

<script>
    export default {
        name: "one"
    }
</script>

<style scoped>

</style>

新建pages/test/teo.vue如

<template>
   <div>我是two</div>
 </template>
 
 <script>
     export default {
         name: "two"
     }
 </script>
 
 <style scoped>
 
 </style>

新建pages/test/index.vue如

<template>
     <div>我是test/index</div>
 </template>
 
 <script>
     export default {
         name: "index"
     }
 </script>
 
 <style scoped>
 
 </style>

然后访问地址分别如

http://localhost:3000/one

http://localhost:3000/test/two

http://localhost:3000/test

链接与局部请求

在page/index.vue中加入链接如

<template>
   <section class="container">
     <div>
       <app-logo/>
       <h1 class="title">
         01_nuxt_start
       </h1>
       <h2 class="subtitle">
         Nuxt.js project
       </h2>
       <nuxt-link to="/test/two">进入two组件</nuxt-link>
       <div class="links">
         <a
           href="https://nuxtjs.org/"
           target="_blank"
           class="button--green">Documentation</a>
         <a
           href="https://github.com/nuxt/nuxt.js"
           target="_blank"
           class="button--grey">GitHub</a>
       </div>
     </div>
   </section>
 </template>
 
 <script>
 import AppLogo from '~/components/AppLogo.vue'
 
 export default {
   components: {
     AppLogo
   }
 }
 </script>
 
 <style>
 .container {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }
 
 .title {
   font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
   display: block;
   font-weight: 300;
   font-size: 100px;
   color: #35495e;
   letter-spacing: 1px;
 }
 
 .subtitle {
   font-weight: 300;
   font-size: 42px;
   color: #526488;
   word-spacing: 5px;
   padding-bottom: 15px;
 }
 
 .links {
   padding-top: 15px;
 }
 </style>

然后我们访问首页后在通过首页注意观察network中的请求数，然后点击首页中的进入第二个组件的地方再次观察network并没有新增请求，也就是说ssr渲染已经将所有页面都渲染了，所以进入第二个组件时候是非常快的。

中间件

我们再创建一个项目用于中间件，如

vue init nuxt-community/starter-template 02_middlaware_plugin_pages_id

然后也同样的和上面新手模板一样的npm install和npm run dev

然后建立middleware/console.js（中间件）如

export default function (content) {
   //content是nuxt中最大最大的对象
   //可以获取所有东西，请求参数，store。。
   console.log("console middleware content",content);
   console.log("中间件被加载咯");
 }

然后我们在nuxt的配置文件中引入该中间件，一般的，我们会将中间件运用在路由上。则

nuxt.config.js中新增配置如

module.exports = {
   //路由改变会被调用
   router:{
     middleware:"console"
   },
   /*
   ** Headers of the page
   */
   head: {
     title: '02_middlaware_plugin_pages_id',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
   },
   /*
   ** Customize the progress bar color
   */
   loading: { color: '#3B8070' },
   /*
   ** Build configuration
   */
   build: {
     /*
     ** Run ESLint on save
     */
     extend (config, { isDev, isClient }) {
       if (isDev && isClient) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
         })
       }
     }
   }
 }

然后我们重新编译后在打开项目可以看到中间件已经生效咯

proxy代理与axios请求在nuxt中的使用

在我们中间件项目中需要使用到proxy和axios，而这里使用方法和vue中直接使用是有区别的。

首先我们在该项目根目录要安装这两个插件

npm install @nuxtjs/axios

npm install @nuxtjs/proxy

然后写安装插件脚本，以mixin为例。。。

建立plugins/installMixin.js如

//做安装插件的行为
 import Vue from 'vue';
 console.log('正在安装mixin插件');
 Vue.mixin({
   created() {
   console.log("通过插件的安装的行为");
   }
 });

然后nuxt.config.js新增配置如

module.exports = {
   //路由改变会被调用
   router:{
     middleware:"console"
   },
   //~代表根目录
   plugins:['~/plugins/installMixin'],
   /*
   ** Headers of the page
   */
   head: {
     title: '02_middlaware_plugin_pages_id',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
   },
   /*
   ** Customize the progress bar color
   */
   loading: { color: '#3B8070' },
   /*
   ** Build configuration
   */
   build: {
     /*
     ** Run ESLint on save
     */
     extend (config, { isDev, isClient }) {
       if (isDev && isClient) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
         })
       }
     }
   }
 }

然后我们重新npm run dev会发现前后端都可以看到插件的安装

那么接下来就是axios与proxy在nuxt中的配置了

那么nuxt.config.js中新增配置如

//~代表根目录
 plugins:['~/plugins/installMixin'],
 //便捷使用axios
 modules:[
   '@nuxtjs/axios',
   '@nuxtjs/proxy'
 ],
 proxy:[
   ['/api',
     {
       target:'http://vue.gaojiupan.cn/',
       pathRewrite:{'^/api':'api'}
     }
   ]
 ],

然后建立组件pages/user/_id.vue如：

<template>
 <div>{{lunbos}}</div>
 </template>
 
 <script>
   export default {
     data(){},
     async asyncData({params,app}){
       console.log(params);
       // /api/getnewslist
       // http://www.sinya.online/api/getlunbo
       let lunbos=await app.$axios.get('/api/getthumimages/0');
       //要求return 一个对象 类似于data函数
       return {
         lunbos:lunbos.data.message
       }
     }
   }
 </script>
 
 <style scoped>
 
 </style>

然后pages/index.vue中如

<template>
   <section class="container">
     <div>
       <app-logo/>
       <h1 class="title">
         02_middlaware_plugin_pages_id
       </h1>
       <h2 class="subtitle">
         Nuxt.js project
       </h2>
       {{lunbos}}
       <hr/>
       <nuxt-link :to="{name:'user-id',params:{id:8}}">去id</nuxt-link>
       <div class="links">
         <a
           href="https://nuxtjs.org/"
           target="_blank"
           class="button--green">Documentation</a>
         <a
           href="https://github.com/nuxt/nuxt.js"
           target="_blank"
           class="button--grey">GitHub</a>
       </div>
     </div>
   </section>
 </template>
 
 <script>
 import AppLogo from '~/components/AppLogo.vue'
 
 export default {
   //这里模板中要调用数据，所以data是必须
   data(){},
   components: {
     AppLogo
   },
   async asyncData({app}){
     let lunbos=await app.$axios.get('/api/getthumimages/0');
     //要求return 一个对象 类似于data函数
     return {
       lunbos:lunbos.data.message
     }
   }
 }
 </script>
 
 <style>
 .container {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
 }
 
 .title {
   font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
   display: block;
   font-weight: 300;
   font-size: 100px;
   color: #35495e;
   letter-spacing: 1px;
 }
 
 .subtitle {
   font-weight: 300;
   font-size: 42px;
   color: #526488;
   word-spacing: 5px;
   padding-bottom: 15px;
 }
 
 .links {
   padding-top: 15px;
 }
 </style>

然后刷新查看首页

没错，首页已经成功通过axios与proxy跨域拿到了数据

然后我们点击“去id”会发现只是单纯追加一个请求即可

Validate验证器

在上面“去id”页面中，我们传递的参数是8，然后我们也可以直接修改地址栏传参，如传参为x，我们会发现也能返回正常内容

此时我们在pages/user/_id.vue中追加验证器配置(这里验证地址栏参数值必须为数字值)如

export default {
   validate({params}){
     return /^\d+$/.test(params.id)
   },
   data(){},

然后同样的访问地址参数，结果则如

然后我们再次修改地址栏参数值为一个数字值，然后

那么也就是说我们的验证器是生效了的。

关键字词：SSR,nuxt,中间件,middleware,验证器,validate,axios,proxy

上一篇：pwa的https与离线app

下一篇：nuxt中的store使用

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

SSR服务端渲染

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例