|옐프캠프| 캠프장 CRUD

         -Introducing YelpCamp Final Project 
         -Creating the Basic Express App 
         -Campground Model Basics 
         -Seeding Campgrounds
         -Campground Index
         -Campground Show 
         -Campground New and Create 
         -Campground Edit and Update 
         -Campground Delete 

YelpCamp 최종 프로젝트를 소개합니다

이것이 하나의 대규모 애플리케이션 구축의 시작입니다.
다음은 내가 구축할 항목에 대한 개요입니다.
YelpCamp의 목적은 yelp가 작동하는 방식과 유사하게 캠프장을 찾고 검토하는 장소입니다.
앱은 홈페이지/클러스터 지도/인증/캠핑장 게시물 새로 만들기/리뷰 페이지로 구성됩니다.











시작할 코드:

망아지 / 옐프캠프

노드 모듈 종속성을 추가하려면 npm install을 실행해야 합니다.

기본 익스프레스 앱 만들기

터미널 유형에서

npm init -y 

그런 다음 express, mongoose 및 ejs를 설치하십시오.

npm i express mongoose ejs

그런 다음 이 프로젝트를 구축할 추가 파일 구조를 설정합니다.

캠프장 모델 기본 사항

캠프장을 위한 몽구스 모델 설정.
각 캠프장에는 이름/제목, 가격, 설명 및 위치가 있습니다.

const mongoose = require('mongoose'); 
const Schema = mongoose.Schema; 

const CampgroundSchema = new Schema({
    title: String, 
    prince: String, 
    description: String, 
    location: String
  }); 

mondule.exports = mongoose.model('Campground', CampgroundSchema); 

그런 다음 몽구스가 연결되어 있고 작동하는지 확인해야 합니다.

시딩 캠프장

이제 데이터로 캠핑장을 설정할 차례입니다.
여기에서 데이터베이스를 시드할 데이터 세트를 찾을 수 있습니다.
https://github.com/Colt/YelpCamp/blob/c12b6ca9576b48b579bc304f701ebb71d6f9879a/seeds/cities.js

캠프장 색인

이제 기본 경로 및 템플릿 기능을 설정할 시간입니다.

setting up the route 
app.get('/campgrounds', async (req,res) => {
  const campground = await Campground.find({})
  res.render('campgrounds/index')
 })

HTML 템플릿 설정

<h1>All Campgrounds</h1> 
<ul> 
  <% for (let campgrounds of campgrounds %> 
<li><%= campgrounds.title %></li>
  <% }%>
</ul> 

캠프장 쇼

쇼 경로는 결국 캠프장의 세부 정보 페이지가 됩니다.

경로 설정

app.get('/campgrounds/:id', async(req, res) => {
    res.render('campgrounds/show')
 })

HTML 템플릿 설정

<h1><%= campground.title %></h1> 

<h2><%= campground.location %></h2> 

캠프장 신규 및 생성

양식 렌더링

<form action="/campgrounds" methods="POST">
  <div>
   <label for="title">Title</label> 
   <input type="text" id="title" name="campground[title]">
  </div>
  <div>
   <label for="location">Location</label> 
   <input type="text" id="location" name="campground[location]">
  </div>
<button>Add Campground</button>
</form> 

경로 설정

app.post('/campgrounds', async (req, res) => {
  const campground = new Campground(req.body.campground); 
  await campground.save(); 
  res.redirect(`/campgrounds/${ campground._id }); 
 }); 

캠프장 편집 및 업데이트

양식을 제공하는 경로

app.get('/campgrounds/:id/edit', async(req, res) => {
  const campground = await Campground.findById(req.params.id) 
  res.render('campgrounds/edit', { campground })); 
})

HTML 템플릿

<h1>Edit Campgrounds</h1> 
<form action="/campgrounds" methods="POST">
  <div>
   <label for="title">Title</label> 
   <input type="text" id="title" name="campground[title]">
  </div>
  <div>
   <label for="location">Location</label> 
   <input type="text" id="location" name="campground[location]">
  </div>
<button>Add Campground</button>
</form> 

캠프장 삭제

경로는 삭제 경로가 됩니다.

app.delete('/campgrounds/:id', async (req, res) => {
   const { id } = req.params; 
   await Campground.findByIdAndDelete(id);
res.redirect('/campgrounds');
})

HTML 템플릿

<h1><%= campground.title %></h1> 
<h2><%= campground.location %></h2>

<p> <a href="/campgrounds/<%=campground_id%>/edit">Edit</a>
</p>
<p>
<form action="/campgrounds/<%=campground._id%>?_method=DELETE" method="POST"> 
<button>Delete</button>
</form>
</p>
<footer>
<a href="/campgrounds">All Campgrounds</a>
</footer>

이제 기본 구조가 설정되었으므로 yelp 캠프 웹 애플리케이션의 복잡성을 구축할 차례입니다.