[Add] axios and ajax

@@ -13,6 +13,7 @@ import routes from "./routes";
 import userRouter from "./routers/userRouter";
 import videoRouter from "./routers/videoRouter";
 import globalRouter from "./routers/globalRouter";
+import aipRouter from "./routers/apiRouter";
 import "./passport";
 
 dotenv.config();
@@ -45,5 +46,5 @@ app.use(localsMiddleware);
 app.use(routes.home, globalRouter);
 app.use(routes.users, userRouter);
 app.use(routes.videos, videoRouter);
-
+app.use(routes.api, aipRouter);
 export default app; // 파일을 불러올때 app object를 준다는 의미.

@@ -7,6 +7,12 @@ const currentTime = document.getElementById("currentTime");
 const totalTime = document.getElementById("totalTime");
 const volumeRange = document.getElementById("jsVolume");
 
+const registerView = () => {
+  fetch(`/api/${window.location.href.split("/videos/")[1]}/view`, {
+    method: "POST",
+  });
+};
+
 // video element MDN
 // using MDN (Mozila Developer Networks)
 function handlePlayClick() {
@@ -90,6 +96,7 @@ function setTotalTime() {
 
 // 영상이 끝나면 pause하고 다시 앞으로 돌릴 수 있게 하고 싶다...
 function handleEnded() {
+  registerView();
   videoPlayer.currentTime = 0;
   playBtn.innerHTML = '<i class="fas fa-play"></i>';
 }

@@ -119,3 +119,20 @@ export const deleteVideo = async (req, res) => {
   // 삭제를 실패하던 성공하던 home으로 redirect한다.
   res.redirect(routes.home);
 };
+
+// 조회수 부분
+export const postRegisterView = async (req, res) => {
+  const {
+    params: { id },
+  } = req;
+  try {
+    const video = await Video.findById(id);
+    video.views += 1;
+    video.save();
+    res.status(200);
+  } catch (error) {
+    res.status(400);
+  } finally {
+    res.end();
+  }
+};

@@ -21,6 +21,7 @@
     "@babel/polyfill": "^7.10.1",
     "@babel/preset-env": "^7.9.6",
     "autoprefixer": "^9.8.0",
+    "axios": "^0.19.2",
     "babel-loader": "^8.1.0",
     "body-parser": "^1.19.0",
     "connect-mongo": "^3.2.0",

+import express from "express";
+import routes from "../routes";
+import { postRegisterView } from "../controllers/videoController";
+
+const apiRouter = express.Router();
+
+apiRouter.post(routes.registerView, postRegisterView);
+
+export default apiRouter;

@@ -27,6 +27,10 @@ const GITHUB_CALLBACK = "/auth/github/callback";
 const FB = "/auth/facebook";
 const FB_CALLBACK = "/auth/facebook/callback";
 
+// API
+const API = "/api";
+const REGISTER_VIEW = "/:id/view";
+
 const routes = {
   home: HOME,
   join: JOIN,
@@ -71,6 +75,9 @@ const routes = {
   me: ME,
   facebook: FB,
   facebookCallback: FB_CALLBACK,
+
+  api: API,
+  registerView: REGISTER_VIEW,
 };
 // template에서 직접 접근이 필요한 경우 함수로 바꿔준다.
 export default routes;