搭建前端項目

工具 Visual Studio Code

react基礎(chǔ)項目

檢查是否已安裝node.js cmd node -v npm -v 分別查看node 版本及npm 版本 若無 可使用nvm安裝node
https://github.com/coreybutler/nvm-windows/releases
若上述地址無法訪問下載 可使用百度網(wǎng)盤
鏈接：https://pan.baidu.com/s/1JWWfE4zPGEGSU5gUf90SCg
提取碼：ozx8
關(guān)于nvm的使用可參考博客https://www.cnblogs.com/gaozejie/p/10689742.html
注意 nvm安裝舊版本node容易出現(xiàn)npm 命令運(yùn)行失敗nvm無法運(yùn)行情況建議版本 14.15.0 以上 （20211124）

安裝好nvm node npm 之后 進(jìn)行react基礎(chǔ)項目創(chuàng)建 打開準(zhǔn)備存放前端項目的文件夾 文件路徑輸入cmd 回車進(jìn)入當(dāng)前文件夾的cmd 執(zhí)行

npm uninstall create-react-app -g （以前創(chuàng)建過腳手架的話先進(jìn)行卸載 再重新安裝以適配最新版本 此步驟可逃過 失敗也是正常現(xiàn)象）
npm install create-react-app -g  安裝腳手架
create-react-app ankicoo-showcase-web  “ankicoo-showcase-web”為你準(zhǔn)備創(chuàng)建的前端項目的名稱

創(chuàng)建前端項目.png

使用編輯器打開前端項目 可通過終端或創(chuàng)建文件夾時的cmd窗口執(zhí)行 npm run eject 彈出配置文件

前端結(jié)構(gòu)概覽.png

運(yùn)行項目 npm run start 項目將在scripts.js文件中配置的默認(rèn)端口 進(jìn)行打開 通常為127.0.0.1:3000

此處可修改輸出端口.png

前端默認(rèn)打開界面.png

打開App.js 它對應(yīng)的就是默認(rèn)打開的首頁 關(guān)于項目結(jié)構(gòu)的講解可以參見：https://www.bilibili.com/video/BV1yt411M7cE
簡單來說默認(rèn)打開index.js index.js 中打開了App.js 所以現(xiàn)在可以直接編輯App.js 來達(dá)到修改內(nèi)容的目的

去掉其他內(nèi)容 替換為hello world.png

首頁展示內(nèi)容替換后.png

訪問后端接口

添加訪問后端工具 axios 終端執(zhí)行 npm install axios 安裝axios依賴
打開config目錄下的webpackDevService.config.js 配置訪問代理 綁定后端 /showcase 對應(yīng)后端配置的context-path target 則是后端的地址及端口

    proxy:{
      "/showcase":{
        target:"http://127.0.0.1:8080",
        changeOrigin:true
      }
    }

配置防止跨域.png

進(jìn)行訪問后端的操作 對App.js 進(jìn)行億點點改造

import { Component } from 'react';
import './App.css';
//使用axios 配置本次訪問默認(rèn)添加 /showcase前綴 以適配配置的代理
const axios = require('axios');
axios.defaults.baseURL = '/showcase'

//react 前端組件的基本寫法 格式參考嗶哩嗶哩教學(xué)
export default class App extends Component {
  constructor(props){
    super(props);
    this.state =  {
        value: "我是前端數(shù)據(jù)"    
    };
}
  // 界面加載前進(jìn)行的操作 在此處 預(yù)加載后端數(shù)據(jù)
  componentDidMount() {
    //axios用法 get 對應(yīng)后端GetMapping 注解 接口的 post get 類型相關(guān)信息 可百度查看介紹
    axios.get(`/display/hello`).then((data)=>{
        //默認(rèn)用法 賦值
        this.setState({
          value : data.data
        })
    })  
  }

  render(){
    return (
      <div className="App">
          {this.state.value}
      </div>
    );
  }
}

下面就分別是啟動后端前和啟動后端后的界面展示內(nèi)容 后端對應(yīng)接口參見 ReZero 從零開始搭建前后端項目（一）

啟動后端前.png

啟動后端后.png