菜鳥後端：_CRUD 是㊙學Restful 前要懂的基礎🇹🇼 ♥

4 min readMar 10, 2020

Programming of syntax you could be refrence others ,
Most import point , how a feature is done step by step from scratch
程式語法可以參考其他人的成品,
最重要的是一個功能是怎麼從零開始一步步做完的

學習用英文寫工作日誌, ：因為時間很多!! 注意看英文的使用非常自己的style !!

Recommand :
prepare your Pen and Notebook , still wrtten ,paint , try use CURD__make To_do_list
Finally the Wireframe Design ( UI/UX ) always match the rule of CURD also

What is JavaSix ? _♥♥♥ (*´∀`)~♥♥♥

Is mean Javasex ……..long story ….

What is -To Do List ?

It’s “Data Manage “. record you list , check you list complete or not done , order you lisst

CRUD (create, read, update, delete)

Start Design :

1 . User Story :

🔴 Follow _ GRUD 🔴

Users can add a new todo and specify the name — -GREAT

Users can browse ( view ) the full todo list, sorted by name — READ

Users can view detailed data for a specific todo — READ

Users can edit the name of a todo with the completion status — UPDATE

Users can delete a todo — DELETE

🔴 Follow _ Certification Users. 🔴

Users can register an account, including: name, email, password

Users can log in/out Login

users will only see their own todo

Users can log in directly with their Facebook account

2. UI / UX _ DESIGN

user flow or user process :

For example :

How Design your websit , let Index、Detail、New、Edit , totally Four page Still switch .

wireframes

設計好使用者流程後，進入到每個頁面的介面設計，在以下的 wireframe 裡，你可以看出每個頁面的元件，以及版面配置。

User flow Chart

Great !!!

link : User flow Chart

Setting Route :

Barry Story _remember_way. let you Design CRUD, easy !

Before listen port and After require Todo Model .

Your Express.js , order to Read code.

Check you Route setting on your websit path :

Install Express . handlebars :

/todo $npm install express-handlebars/todo $ mkdir views 
/views  $ mkdir layouts/views/layouts $ touch main.handlebars $ code mainhandlebars

copy it to your [ main.handlebars ] :

<!-- ./layouts/main.handlebars --> 
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Todo List</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  {{{body}}}
</body>

</html>

Install [ index.handlebars ] :

Check your partial template is ok ! no probable!

refrence //for handlebars of virables and //install handbars express module

Before my note blog /medium

⬇️ is my this project _todo _ LAB:

on views/ $ touch index.handlebars

copy it to index.handlebars :

put Template simply

<!-- ./views/index.handlebars --> 
<h2>hello world! 這是 index</h2>

Modify _Route of HomePage :

Tell our controller of Render ( ) , that ‘s direct to index.Handlebars .

So open your Controller of app.js

// app.js
// ...

// 設定路由
// Todo 首頁
app.get('/', (req, res) => {
  return res.render('index')
})
// ...

$ nodemon app.js

菜鳥後端：_CRUD 是㊙ 學Restful 前要懂的基礎🇹🇼 ♥