iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
永豐金融APIs

30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站系列 第 25

[Day 25] - React + Tailwind CSS + DasyUI

重新整理一下思路
我們使用jsonp的方式來避過CORS,載入資源

一般jsonp會在data外包一個function()來假裝資料是javascript,
等載入後再將外面那層function去掉,只剩data

但是永豐的匯率api自己就已經先做了把資料放在function()裡這一段了,
因此jsonp一開始取回來的資料會是這樣
jsnocallback(genREMITResult(匯率資料))
外面那層jsnocallback()會被jsonp的方法自己拿掉
剩裡面這層genREMITResult()就要自己想辦法了

昨天想到的方法是在index.html這邊硬加上一個genREMITResult()方法,

目前想到有3條路可以走,
1.繼續在index.html這邊延伸下去,把genREMITResult()寫成一個取匯率的表格
2.想辦法把genREMITResult()給拿掉 只取裡面的data
3.不要糾結在這邊了,乖乖回去用後端取資料

掙扎了半天,只能承認自己對javascript與React的掌握度還不夠,
如果再繼續耗在這段恐怕這幾天都不會有進度了,所以我決定先跳過這題,晚點回來或許會有新想法

先來實現前端的其他功能

就從畫面開始

以前要刻畫面只能依賴Bootstrap,不過現在有了新的選擇:
Tailwind CSS https://tailwindcss.com/
Tailwind可以更有效率的統一管理頁面的CSS風格、以class的方式來操作CSS,從開發的角度來看,還滿方便的

另一個要用的工具是DaisyUI https://daisyui.com/docs/install/
https://ithelp.ithome.com.tw/upload/images/20211010/20128973SysYrmBrHd.png
是基於Tailwind的衍伸工具,DaisyUI把一些按鈕、bar等網頁常用的元件都透過Tailwind實作好了,我們只要把它做好的class套用上去就能直接用,對刻畫面不行的我來說或許會是一大救星

這邊一樣先npm安裝
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @craco/craco

package.json的script要改成craco

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

在專案目錄下建立craco.config.js

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

在專案目錄下建立tailwind.config.js

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

index.css改成以下內容

@tailwind base;
@tailwind components;
@tailwind utilities;

就可以開始使用taildwind了!

接著再來裝DaisyUI
npm i daisyui
然後到tailwind.config.js
把daisyui加進去

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

接下來就來拼湊(?)畫面吧

另外也安裝react-router-dom
npm install react-router-dom
之後可能會用到

...

今天進度:
https://ithelp.ithome.com.tw/upload/images/20211010/20128973Es91keE4ap.png
刻畫面...真的跪了/images/emoticon/emoticon10.gif

在考慮是不是找現成的版來套就好...何苦自虐呢


上一篇
[Day 24] - React 取得永豐匯率api的json資料(2)
下一篇
[Day 26] - React 前端串後端 - 串接登入
系列文
30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站30

尚未有邦友留言

立即登入留言