8.3.4 NuxtJS综合案例

本文为拉勾网大前端高薪训练营第一期笔记

---

心得体会

本章节花了很多时间看和学，主要是我对Vue.js和Nuxt.js并不是特别熟悉，之前写React.js比较多，这次真的是用一个非常实战的例子来学和实践，老师在视频里基本上只是把重点给做了，还有很多页面需要自己补全功能，经过这次作业有了一次全方位的理解，硕果累累，真的推荐学的人都自己实践一下。

实现的过程会遇到很多奇奇怪怪的问题，具体的问题和解决办法在本文最后，nuxtjs的报错真的不告诉是代码的哪一行真的很麻烦。

还有个意外收获就是因为这次作业是需要部署到gitee pages上，之前用过github pages，体验了一下gitee pages，还是挺简单易用，更新新代码也很快。

本文很长，作业代码在最后。

笔记

学习案例名称RealWorld

开源的学习项目，帮助开发者快速学习新技能

https://github.com/gothinkster/realworld

demo地址：http://demo.realworld.io/#/

接口文档:https://github.com/gothinkster/realworld/tree/master/api

页面模板:https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md

创建项目

mkdir realworld-nuxtjs
cd realworld-nuxtjs
npm init -y
npm i nuxt
//配置启动脚本
//创建pages目录，配置初始页面

免费cdn服务

www.jsdelivr.com

有中国节点

ionicons在国内慢

google fonts在国内支持

封装请求

utils/request.js

import axios from 'axios'
const request = axios.create({
baseURL: 'https://conduit.productionready.io/'
})
export default request

登陆请求

//form阻止默认的提交行为
//<form @submit.prevent='onSubmit'> 

import request from '@/utils/request'

export default {
  methods: {
    async onSubmit () {
      try {
        const { data } = await request({
          method: 'POST',
          url: '/api/users/login',
          data: {
            user: this.user
          }
        })
      } catch (err) {
        this.errors = err.response.data.errors
      }
    }
  }
}

内存存储

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default () => { return new Vuex.Store({
    state: {
      user: null
    },
    mutations: {
			setUser (state, user) { 
				state.user = user
			} 
		},
    actions: {}
  })
}

登陆成功后

客户端onSubmit里

this.$store.commit(‘setUser’, data.user)

客户端存储到cookie

const Cookie = process.client ? require('js-cookie') : undefined 
Cookie.set('user', data.user)

服务器端解析cookie

store/index.js

actions: {
  nuxtServerInit ({ commit }, { req }) {
    let user = null
    if (req.headers.cookie) {
      // 将请求头中的 Cookie 字符串解析为一个对象