搭建前端项目

工具 Visual Studio Code

react基础项目

检查是否已安装node.js cmd node -v npm -v 分别查看node 版本及npm 版本 若无 可使用nvm安装node
https://github.com/coreybutler/nvm-windows/releases
若上述地址无法访问下载 可使用百度网盘
链接：https://pan.baidu.com/s/1JWWfE4zPGEGSU5gUf90SCg
提取码：ozx8
关于nvm的使用可参考博客https://www.cnblogs.com/gaozejie/p/10689742.html
注意 nvm安装旧版本node容易出现npm 命令运行失败nvm无法运行情况建议版本 14.15.0 以上 （20211124）

安装好nvm node npm 之后 进行react基础项目创建 打开准备存放前端项目的文件夹 文件路径输入cmd 回车进入当前文件夹的cmd 执行

npm uninstall create-react-app -g （以前创建过脚手架的话先进行卸载 再重新安装以适配最新版本 此步骤可逃过 失败也是正常现象）
npm install create-react-app -g  安装脚手架
create-react-app ankicoo-showcase-web  “ankicoo-showcase-web”为你准备创建的前端项目的名称

创建前端项目.png

使用编辑器打开前端项目 可通过终端或创建文件夹时的cmd窗口执行 npm run eject 弹出配置文件

前端结构概览.png

运行项目 npm run start 项目将在scripts.js文件中配置的默认端口 进行打开 通常为127.0.0.1:3000

此处可修改输出端口.png

前端默认打开界面.png

打开App.js 它对应的就是默认打开的首页 关于项目结构的讲解可以参见：https://www.bilibili.com/video/BV1yt411M7cE
简单来说默认打开index.js index.js 中打开了App.js 所以现在可以直接编辑App.js 来达到修改内容的目的

去掉其他内容 替换为hello world.png

首页展示内容替换后.png

访问后端接口

添加访问后端工具 axios 终端执行 npm install axios 安装axios依赖
打开config目录下的webpackDevService.config.js 配置访问代理 绑定后端 /showcase 对应后端配置的context-path target 则是后端的地址及端口

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

配置防止跨域.png

进行访问后端的操作 对App.js 进行亿点点改造

import { Component } from 'react';
import './App.css';
//使用axios 配置本次访问默认添加 /showcase前缀 以适配配置的代理
const axios = require('axios');
axios.defaults.baseURL = '/showcase'

//react 前端组件的基本写法 格式参考哔哩哔哩教学
export default class App extends Component {
  constructor(props){
    super(props);
    this.state =  {
        value: "我是前端数据"    
    };
}
  // 界面加载前进行的操作 在此处 预加载后端数据
  componentDidMount() {
    //axios用法 get 对应后端GetMapping 注解 接口的 post get 类型相关信息 可百度查看介绍
    axios.get(`/display/hello`).then((data)=>{
        //默认用法 赋值
        this.setState({
          value : data.data
        })
    })  
  }

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

下面就分别是启动后端前和启动后端后的界面展示内容 后端对应接口参见 ReZero 从零开始搭建前后端项目（一）

启动后端前.png

启动后端后.png