309. YelpCamp: Campground Show Page Part 1

Add Mongoose

1. Install and configure mongoose

2. Setup campground model

3. Use campground model inside of our routes 

 

 

Show pages

1. Review the RESTFful routes we're seen so far

2. Add description to our campground model

3. Show db.collection.drop()

4. Add a show route/templates

 

RESTFUL ROUTES sample

name	url	verb	description
INDEX	/dogs	GET	Display a list of all dog
NEW	/dogs/new	GET	Display  form to make a new dog
CREATE	/dogs	POST	Add new dog to DB
SHOW	/dogs/id	GET	Show info about one dog

 

<app.js>

const express = require("express"),
	app = express(),
	bodyParser = require("body-parser"),
	mongoose = require("mongoose");

// mongodb와 mongoose 연결하여 js로 mongodb 사용 가능하게 설정한다. 27017은 mongodb의 기본 포트
mongoose.connect("mongodb://localhost:27017/yelp_camp", {useNewUrlParser: true, useUnifiedTopology: true});

// bodyParser를 사용할 수 있도록 설정
app.set(bodyParser.urlencoded({extended: true}))

// view engine이란 node js에서 다양한 형태의 language를 사용 시 해당 langauge들을 문제없이 사용할 수 있도록 해준다
// ex) HTML5, JSP etc
app.use("view engine", "js")

// Shcema Setup. DB Schema를 다음과 같이 설정한다. 일종의 템플릿으로 아래의 형태로 key-vale를 가진다. 
// 기본적으로 해당 Schema를 사용할 경우 3개의 key-value pair를 가진다.
const campgroundSchema = new mongoose.Schema({
	name: String,
	image: String,
	description : String
})

// 위에서 선언한 형태의 Schema로 컴파일된 모델의 속성을 가진 Campground을 새로 선언한다.
const Campground = mongoose.model("Campground", campgroundSchema);



// RESTFUL Route를 각각의 목적에 따라 선언한다.
app.get("/campgrounds", (req, res) => {
	//DB에서 campgrounds 데이터를 조건없이({}) 조회(find)한다. 즉 모든 데이터 조회.
		// 조회를 위해 2개의 인자를 사용한다. (err 여부와 db에서 받은 모든 정보)
	Campground.find({}, (err, allCampgrounds) => {
		if(err){// err 발생 시 
			console.log(err); // 터미널에 err를 출력
		} else {	// err 없을 시
			res.render("index", {campgrounds: allCampgrounds}); //index.ejs에 campgrounds라는 이름으로 allCampgrounds를 대입한다.
		}
	})
});


//CREATE - 새로운 campground를 database에 생성 
app.post("/campgrouds", (req, res) => { // POST method가 /campgrounds route로 전달되면 
	const name = req.body.name;	// 요청한 body의 name = name 값을 const name에 할당
	const image = req.body.image; // 요청한 body에 name = image 값을 const image에 할당
	const desc = req.body.description; // 요청한 body에 name = description 값을 const description에 할당
	// 위의 name, image, desc를 하나의 obj에 저장한다. 사용할 형태는 campgroundSchema와 동일하므로 각각 key-vale 형태로 맞춰준다.
	const newCampground = {name: name, image: image, description: desc};

	// DB에 mongoose로 모델링한 새로운 데이터를 생성하고 저장한다.
	Campground.create(newCampground, (err, newlyCreated) => {
		if(err){ // err 발생 시 터미널에 내용 출력
			console.log(err)
		} else {
			res.redirect("/campgrounds"); // 정상 동작 시 "/campgounds"로 페이지를 redirect하여 저장된 값을 페이지에서 볼 수 있도록 한다. 
		}
	})
});


//NEW - 새로운 campground를 생성할 수 있는 form을 보여준다.
app.get("/campgrounds/new", (req, res) => {
	res.render("new.ejs");	// "/campgrouynds/new"로 GET method 요청이 서버로 들어오면 new.ejs를 렌더링 한 값을 클라이언트로 respose한다.
});


//SHOW - 상세페이지를 보여준다. "/campgrounds" 페이지는 현재 DB에 저장된 데이터를 한 페이지에 출력하므로, description을 보여주는 개별 페이지로 이동시킨다.
app.get("/campgrounds/:id", (req, res) => {
	// 주어진 id 값으로 db를 검색하고, 검색한 데이터를 특정 페이지에 출력한다. 
	Campground.findById(req.params.id, (err, foundCampground) =>{ //기본 메소드인 findById를 사용해 campgroundSchema로 모델링한 campground를 id로 조회한다.
		if(err){
			console.log(err)
		} else { // err가 없을 시 렌더링한 show.ejs 응답한다. 응답할 때 findById로 조회한 데이터인 foundCampground를 campground로 할당한다.
			res.render("show", {campground: foundCampground});
		}
	})
});

// "/"형태로 GET METHOD 요청이 들어오면 landing page를 보여준다. 해당 if - else if 형태처럼 포괄하는 Route인 "/"가 코드 위에 있을 경우 모든 페이지가 landing page를
// 응답받는 것을 조심해야 한다. "/campground, /campground/new 등의 url은 결국 "/" 의 하위 형태이기 때문에 해당 Route가 위에 있으면 "/"뒤의 campgound 등은 무시하고
// landing page로 모두 이동시키기 때문이다.
app.get("/", (req, res) => {
	res.render("landing");
})



// express 시 사용하는 기본 서버 설정 내용이다. 해당 코드는 3000포트를 사용할 때의 옵션이며, 정상 연결 시 console log가 출력된다.
app.listen(process.env.PORT || 3000, () =>{ 
	console.log("The Yelpcamp v2 server has been started");
});

 

rendering 시 사용하는 ejs 파일은 310에서 정리