Flare-k

[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;
......