練習使用 Vue, Node.js 和 Mongodb 建立專案,可以分別使用不同帳號登入後,建立自己的代辦事項
- Animate.css 增加前端動畫效果
- SweetAlert2 增加前端訊息提示
- JsonWebToken 發送 token 給登入者
功能 | 詳細 | 方法 | URL |
---|---|---|---|
註冊 | 使用 username, email, password 註冊 | POST | /api/auth/register |
登入 | 使用 username, password 登入 | POST | /api/auth/login |
建立清單 | 建立單一清單 | POST | /api/todos |
瀏覽所有清單 | 一次取得所有清單 | GET | /api/todos |
修改獨立清單 | 獨立修改所指定的清單 | PUT | /api/todos/:id |
修改全部清單 | 一次修該全部清單(勾選) | PUT | /api/todos |
刪除獨立清單 | 獨立刪除所指定的清單 | DELETE | /api/todos/:id |
刪除全部完成清單 | 一次刪所有完成清單(勾選) | DELETE | /api/todos |
可以跟著步驟進行安裝與設定,即可開始使用專案
Clone 在你的電腦上
$ git clone https://github.com/ben7152000/todolist-vue.git
請在 mongodb-atlas 建立資料庫,並連接到專案裡
1. 進入專案
$ cd vue-todolist
2. 安裝套件
$ npm install
3. 建立 .env
MONGODB_URL=<YOUR_MONGODB_URL>
SECRET_KEY=<YOUR_TOKEN_KEY>
PORT=<YOUR_SERVER_PORT>
4. 執行專案
$ npm run serve
5. 專案成功執行
> vue server is running on port 8080
> node server is running on port 8081