Build a Vue.js 3 CRUD example to consume REST APIs, display and modify data using Axios and Vue Router.
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- There is a Search bar for finding Tutorials by title.
Alter the url on the file ".server/config/db.config.js" to your own mongodb user and password:
"mongodb+srv://mongouser:<password>@cluster0.lz21f1y.mongodb.net/?retryWrites=true&w=majority"
npm install
npm run serve
npm run build
npm run test
npm run lint
Methods Urls Actions
- POST /api/tutorials create new Tutorial
- GET /api/tutorials retrieve all Tutorials
- GET /api/tutorials/:id retrieve a Tutorial by :id
- PUT /api/tutorials/:id update a Tutorial by :id
- DELETE /api/tutorials/:id delete a Tutorial by :id
- DELETE /api/tutorials delete all Tutorials
- GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword
- vue: 2.6.10
- vue-router: 3.1.3
- axios: 0.19.0
- package.json contains 3 main modules: vue, vue-router, axios.
- There are 3 components: TutorialsList, Tutorial, AddTutorial.
- router.js defines routes for each component.
- http-common.js initializes axios with HTTP base Url and headers.
- TutorialDataService has methods for sending HTTP requests to the Apis.
- vue.config.js configures port for this Vue Client.