學院新聞

 

如何使用react和 graphql 開發一個blog

 

2017/12/11 11:53:10

 

本文由cosmic.js 友情提供,謝謝支持的伙伴以及sitepoint 網站提供。

本文主要描述使用react 以及 graphql . cosmic.js 來創建一個基礎的博客文章系統。這是一個使用流行技術棧快捷,輕量級的好產品。下面我們開始。


開始

請確認在你的機器上安裝了node .js 和Npm 。如果沒有請到node 官網下載安裝安裝,然后我們繼續。

首先創建app的文件夾。如果你也喜歡使用終端命令行,可以使用如下的命令:

Mkdir simple-react-blog 

Cd simple-react-blog 

接下來,我們添加一個叫 package.json 的文件到當前文件夾,用來引用當前app需要的文件依賴:

Vim package.json 

請添加如下內容,

{{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next build; NODE_ENV=production node server.js"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "express": "^4.16.2",
    "lodash": "^4.17.4",
    "next": "^4.0.3",
    "next-routes": "^1.1.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }}

多么完美的依賴。來看看,我們都用了那些插件:

Axios是一個promised式的HTTP客戶端,用來和graphql以及cosmic.js通信。

Next.js是一個我們通用 react 框架。

Next routes是一個動態路由。

Express是一個服務端的框架。

React用來處理用戶界面。

我們的腳本需要以上依賴運行和部署。運行以下命令安裝上述的依賴:

Npm i

他等價于NPM INSTALL

構建我們的博客

下一步,我們來構建博客的頁面,創建一個頁面文件夾以及index.js文件。

Vim index.js

添加如下代碼到其中:

import axios from 'axios'import _ from 'lodash'import Footer 
from './partials/footer'import Header from './partials/header'import 
helpers from '../helpers'import config from '../config'export 
default class extends React.Component {
  static async getInitialProps({ req }) {
    const query = `{
      objects(bucket_slug: "${config.bucket.slug}") {
        _id
        type_slug
        slug
        title
        metadata
        created_at
      }
    }`
    return await axios.post(`https://graphql.cosmicjs.com/v1`, 
    { query })
    .then(function (response) {
      return {
        cosmic: {
          posts: _.filter(response.data.data.objects, 
          { type_slug: 'posts' }),
          global: _.keyBy(_.filter(response.data.data.objects, 
          { type_slug: 'globals' }), 'slug')
        }
      }
    })
    .catch(function (error) {
      console.log(error)
    })
  }
  render() {
    if (!this.props.cosmic)
      return Loading...    return (
                                {
            this.props.cosmic.posts &&
            this.props.cosmic.posts.map(post => {
              const friendly_date = 
              helpers.friendlyDate(new Date(post.created_at))
              post.friendly_date = 
              friendly_date.month + ' ' + friendly_date.date       
              
              return (
                
                {
                    post.metadata.hero.imgix_url &&
                   
                   }
                  {post.title}                                                                                                                                  by {post.metadata.author.title} on {post.friendly_date}                                                                                                        Read more...                                                        
              )
            })
          }
                          )
  }}

以下興奮的事情發生了。


1.我們導入了需要的模塊:Axios,Lodash以及其他helpers和組件。

2.我們使用了partials推入,并如header頭部和footer尾部版權部分。關于partials可以參考GitHub。

3.我們請求Comic.js以及grapthql,需要返回如下內容:

ID,typeslug,slug,title,metadata以及create at

4.我們設置主進程在我們的組件渲染到comic對象。我們使用lodash去解析posts和全局對象類型。

5.我們返回表單數組數據和圖片URL到主博客feed流。


簡單的表單查詢

針對簡單的查詢,我們添加POST屬性到props。Post是用來從博客文章的slug中查詢匹配的內容。代碼如下:

const gql_query = `{
  objects(bucket_slug: "${config.bucket.slug}") {
    type_slug
    slug
    title
    content
    metadata
    created_at
  }
}`return await axios.post(`https://graphql.cosmicjs.com/v1`, 
{ query: gql_query }).then(function (response) {

return {
    cosmic: {
      posts: _.filter(response.data.data.objects, 
      { type_slug: 'posts' }),
      global: _.keyBy(_.filter(response.data.data.objects, 
      { type_slug: 'globals' }), 'slug'),

      post: _.find(response.data.data.objects, 
      { slug: query.slug }),
    }
  }}).catch(function (error) {
  console.log(error)})}

完整的代碼請你到github上查詢下載。


小結

本文的完整代碼均在cosmicjs博客上提供下載。托管的不同版本也在github上。你可以輕松get到,源代碼包括dashboard等相關組件。


作者:tony spiro

編譯:前端老白

來源:sitepoint.com


課程咨詢
校區地址

徐匯旗艦中心
地址:上海市徐匯區番禺路868號昂立教育基地1號樓

中山公園校區
地址:長寧路999號兆豐廣場3樓

五角場萬達校區
地址:國賓路36號萬達廣場B樓801

人民廣場校區
地址:福州路579號大眾書局3樓

浦東八佰伴校區
地址:南泉北路1021號昂立教育基地

點擊關閉
星际彩票不能提现