Day27 NodeJS实作 I

NodeJS的学习终於接近尾声，接下来就是要进行实作，为了熟悉刚学完的工具，预计用最後几天的时间完成一个包含新增、修改、删除的待办清单应用程序，以MERN Stack进行开发。

前端应用程序

今天要先从前端下手，在React的应用程序中，是藉由Router与Route的设定切换页面，因此，首先以create-react-app建立一个新的应用程序，并安装、引入react-router-dom中的BrowserRouter、Route、Link与Switch。

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from "react-router-dom";

接着以建立两个回传页面的函式：Home与AddItem，分别作为待办清单的主页与新增页面。

function Home() {
  return (
    <div>
      <h1>待办清单</h1>
    </div>
  );
}

function AddItem() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);

  return <div className="container">
    <Form className="offset-4 col-4 " onSubmit={handleSubmit(onSubmit)}>
      <Form.Group className="pt-5 mb-3" >
        <input type="text" className="form-control" placeholder="Title" {...register("Title", {required: true, maxLength: 50})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <textarea  className="form-control"  {...register("Note", {})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <input type="datetime" className="form-control" placeholder="Date" {...register("Date", {})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <input type="text" className="form-control" placeholder="#" {...register("#", {})} />
      </Form.Group>
      <Form.Group className="mb-3" >
        <input className="btn btn-success ms-1" type="submit" />
      </Form.Group>
    </Form>
  </div>;
}

页面完成之後，要进行页面切换的内容设定，在App函式中，以<Switch>标签规划切换内容的空间，并在其中加入<Route>定义切换的页面Path，在<Route>之下再加入<[Component名称] />。

function App() {
  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <Switch>
            <Route path="/AddItem">
              <AddItem />		// AddItem function所return的页面
            </Route>
            <Route path="/">
              <Home />		// Home function所return的页面
            </Route>
          </Switch>
        </header>
      </div>
    </Router>
  );
}

接着是设定切换页面的按钮，在Home函式加入切换AddItem的<Link>，并在AddItem加入返回Home的<Link>，<Link>的属性to指向切换页面的Path。

function Home() {
  return (
    <div>
      <h1>待办清单
        <Link className="ms-5" to="/AddItem">
          <img src={addIcon} className="iconP" alt="add" />
        </Link>
      </h1>
    </div>
  );
}

// AddItem()内加入
<Link className="btn btn-secondary me-1" to="/">取消</Link>

在浏览器中执行时的画面，首页的跳转按钮为绿色的新增Icon，AddItem页面中的取消按钮可以返回首页。

小结

前端页面的切换是常常使用的功能，没想到复杂起来这麽难...本来预计要把每个页面的Component好好切割，碍於时间及React的开发技能还没能扎实学习，先以单一档案中的不同函式作为练习。