山东大学项目实训（一）——分工讨论和环境搭建（2021.6.28）

本文链接：https://blog.youkuaiyun.com/Devillllived/article/details/118549160

本文记录了在山东大学项目实训中，参与开发牙科数据分割与分类及可视化展示平台的过程。小组分工明确，作者作为前端开发者，从零基础开始学习并搭建react和vue框架环境。在尝试后发现react对新手不友好，转而采用vue进行进一步的学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次山东大学实训我选择的是周元峰老师的题目——“牙科数据的分割与分类及可视化展示平台。”主要是做一个web平台上的牙科相关展示平台，包括1）多模态牙科数据读取；2）多模态牙科数据可视化；3）多模态牙科数据处理；4）面向牙科医生的交互功能设计；5）案例管理五大主要功能，以及我们讨论得到的一些附加功能。
因为实训正式开始前已经完成分组，所以今天开幕典礼后我们小组就开始进行分工讨论，最终得到两人负责前端，两人负责算法和可视化，一人负责后端的结论。我的工作是前端这一方面，因为我和另一位负责前端的同学在前端方面零基础零经验，所以相必会非常艰难，只能边学边做了。
第一天主要是选择用来编写前端的框架，然后搭建该框架的环境。刚开始我们选择的是react框架，使用webstorm根据网上的教程搭建好了环境，并且跟随教程一步一步完善并完成了以下井字棋代码

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div