前端采用nuxt

為了節(jié)省配置時間(主要我前端是幼兒園水平...),采用create-nuxt-app做開發(fā).

鑒于yarn比較受追捧,采用yarn做包管理.

yarn create nuxt-app <my-project>

前端展示框架采用element-ui

SSR服務(wù)器選擇koa

nuxt異步數(shù)據(jù),采用axios

這個create-nuxt-app會幫助設(shè)置在nuxt.config.js里
異步數(shù)據(jù)加載,這個是blogFe直接調(diào)用blogApi,不是用戶瀏覽器里Ajax請求

export default {
    // 這個ctx就是koa的ctx,奇怪的是cookies函數(shù)不能用,但是
    // ctx.req.headers.cookie這個可以拿到
ctx.request.cookie
    async asyncData(ctx) {
        //console.log(ctx)
        //console.log(ctx.req.headers.cookie)
        const msg = await ctx.app.$axios.$get('/articles/1')
        return { msg: msg }

    }
}

在用戶瀏覽器里ajax的異步請求:
這個會有CORS的問題,初步打算對外用一個地址,通過nginx把前端/后端請求分發(fā)給blogFe/blogApi

<script>
export default {
    methods: {
        onSubmit(){
            let resp=this.$axios.$post(
                "http://<ip>:<port>/<blabla...>", 
                data
            )
        }
    }
}
</script>

一些組件直接使用社區(qū)推薦的module

markdown

markdown編譯采用nuxt社區(qū)推薦的markdown-it
修改nuxt.config.js文件,增加markdown-it配置

//nuxt.config.js
  modules: [
    '@nuxtjs/markdownit',
  ],

比較有意思的是可以這么寫,markdown文件直接import引入

<template>
<div>
  <!-- 不知道為啥總會訪問amazonaws,加上#sonicMaster就不了 -->
  <div id="sonicMaster"></div>
  <!-- .markdown-body是github-markdown-css用的 -->
  <div class="markdown-body" v-html="testMd"></div>  
</div>
</template>

<script>
"use strict";
import testMd from '../../md/test.md'
export default {
//   data() {
//     return {
//         testMd: testMd,
//     }
//   },
    computed: {
      testMd() {
        return testMd
      }
    }
}
</script>

markdown css風(fēng)格(highlight.js也挺好)

顯示css使用類似github風(fēng)格的github-markdown-css
我選擇在nuxt.config.js里加上配置:

  css: [
    'github-markdown-css/github-markdown.css',
  ],

后端采用golang/gin框架

數(shù)據(jù)庫暫時選擇mysql, 后期可能換postgres

據(jù)說postgres比mysql更好,現(xiàn)在還不熟,等熟了換換試試

nginx做轉(zhuǎn)發(fā),為了繞過CORS,采用nginx配置,通過路徑分別傳給nuxt跟gin.

配置如下:

upstream blogApi{
    server <ip>:<port>;
}

upstream blogFe{
    server <ip>:<port>;
}

server {
    listen <port>;
    server_name localhost;
    location /api/ {
        proxy_pass http://blogApi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location / {
        proxy_pass http://blogFe;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}