mandy-wang / realworld-nuxtjs Goto Github PK

// nuxt.js的配置
module.exports = {
    router: {
        linkActiveClass: 'active', // 路由高亮
        extendRoutes(routes, resolve) {
            routes.splice(0) // 清空默认路由
            routes.push(...[
                {
                    path: '/',
                    component: resolve(__dirname, 'pages/layout/'),
                    children:[
                        {
                            path: '',  // 默认子路由
                            name: 'home',
                            component: resolve(__dirname,'pages/home/')
                        }
                    ]
                }
            ])
        }
    }
}

// 基于axios的封装
import axios from 'axios'

const request = axios.create({
    baseURL: 'https://conduit.productionready.io'
})
// 请求拦截器

// 响应拦截器
export default request

import axios from '@/utils/request'

// 用户登录
export const login = data => {
    return {
        method: 'POST',
        url: '/api/users/login',
        data
    }
}
// 用户注册
export const register = data => {
    return {
        method: 'POST',
        url: '/api/users',
        data
    }
}

export default {
  name: 'LoginIndex',
  computed: {
    isLogin(){
      return this.$route.name === 'login'
    }
  }
};

//对接口返回错误信息的处理： 使用try  catch 并展示错误信息
try {
    // 提交表单请求
    const { data }= this.isLogin?await login({
        user: {email:this.user.email,password:this.user.password}
    }):await register({user: this.user})
    this.$store.commit('setUser',data.user)
    // 为了防止刷新页面数据丢失 我们需要把数据持久化
    Cookie.set('user',data.user)
    // 保存用户登录状态 并跳转到首页
    this.$router.push('/')
}catch(err){
    console.dir(err)
    this.errs = err.response.data.errors
}

middleware: 'notAuthenticaticated', // 也可以是[]

// 验证是否登录的中间件
export default function ({ store, redirect }) {
    if (store.state.user) {
        return redirect('/')
    }
}

const cookieparser = process.server ? require('cookieparser'):undefined
// 在服务端渲染期间运行都是同一个实例
// 为了防止数据冲突，务必要把state定义成一个函数 返回数据对象
export const state = () => {
    return {
        // 当前登录用户的登录状态
        user: null
    }
}
export const mutations = {
    setUser(state,data){
        // console.log(data)
        state.user = data
    }
}
export const actions = {
    // nuxtServerInit是一个特殊的action方法
    // 这个action会在服务端渲染期间自动调用
    // 作用：初始化容器数据， 传递数据给客户端使用
    nuxtServerInit ({ commit },{ req }) {
        let user = null
        // 如果请求头中有Cookie
        if (req.headers.cookie){
            // 使用cookieparser把cookie字符串转换为js对象
            const parsed = cookieparser.parse(req.headers.cookie)
            try {
                user = JSON.parse(parsed.user)
            } catch (err){

            }
            // 提交mutation修改state状态
            commit('setUser',user)
        }
    }
}

computed: {
    ...mapState(['user'])
  }

import {getArticles} from '@/api/api'
export default {
  name: 'home',
  async asyncData (){
    const {data} = await getArticles()
    return {
      articles: data.articles,
      articlesCount: data.articlesCount
    }
  }
}

async asyncData ({query}){
    const page = Number.parseInt(query.page || 1)
    const limit = 2
    const {data} = await getArticles({
      limit,
      offset: (page-1)*limit
    })
    const {data:tagData} = await getTags()
    return {
      articles: data.articles,
      articlesCount: data.articlesCount,
      limit,
      page,
      tags: tagData.tags
    }
  },  

computed: {
    totalPage (){
      return Math.ceil(this.articlesCount/this.limit)
    }
  }

watchQuery: ['page'],

async asyncData ({query}){
    const page = Number.parseInt(query.page || 1)
    const limit = 2
    // const {data} = await getArticles({
    //   limit,
    //   offset: (page-1)*limit
    // })
    // const {data:tagData} = await getTags()
    // return {
    //   articles: data.articles,
    //   articlesCount: data.articlesCount,
    //   limit,
    //   page,
    //   tags: tagData.tags
    // }
    const [articleRes,tagsRes]=Promise.all([
      getArticles({
        limit,
        offset: (page-1)*limit
      }),
      getTags()
    ])
    const {articles,articlesCount} = articleRes.data
    const {tags} = tagsRes.data
    return {
      articles,
      articlesCount,
      page,
      limit,
      tags
    }
  },

async asyncData ({query}){
    const page = Number.parseInt(query.page || 1)
    const limit = 2
    const {tag} = query
    const [articleRes,tagsRes]= await Promise.all([
      getArticles({
        limit,
        offset: (page-1)*limit,
        tag
      }),
      getTags()
    ])
    const {articles,articlesCount} = articleRes.data
    const {tags} = tagsRes.data
    return {
      articles,
      articlesCount,
      page,
      limit,
      tags,
      tag,
      tab: query.tab || 'global_feed'
    }
  },
  watchQuery: ['page','tag','tab'],  // 动态检测数据变化  更新数据

// 基于axios的封装
import axios from 'axios'
// 创建请求对象
export const request = axios.create({
    baseURL: 'https://conduit.productionready.io'
})

// 通过插件机制获取到上下文对象 query params req res app store
// 插件导出函数必须作为default成员
export default ({store}) => {
  // 请求拦截器
  // 所有请求都经过这里，可以设置一些公共业务处理 统一设置token
  request.interceptors.request.use(function (config) {
        // Do something before request is sent
        // 请求经过这里
        
        const {user} = store.state
        if (user && user.token) {
            config.headers.Authorization = `Token ${user.token}`
        }
        return config;
      }, function (error) {
        // Do something with request error
        // 请求失败进入
        return Promise.reject(error);
      });
}

plugins: [
        '~/plugins/request.js'
    ]

import {request} from '@/plugins/request'

async asyncData ({params}){
    const {data} = await getArticle(params.slug)
    return {
      article: data.article
    }
  }

head() {
      return {
        title: `${this.article.title} - RealWorld`,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.article.description
          }
        ]
      }
    }

import {getComments,addComments} from '@/api/api'
export default {
    name: 'ArticleComment',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data(){
        return{
            comments:[],
            comment:''
        }
    },
    async mounted(){
        const { data } = await getComments(this.article.slug)
        this.comments = data.comments
    },
    methods: {
        async addComments(article){
            console.log(article)
            const slug = article.slug
            const res = await addComments(slug,{comment: {body: this.comment}})
            console.log(res)
        }   
    }
}