formatting

This commit is contained in:
leejinseok
2020-02-06 15:23:49 +09:00
parent 7dfac23726
commit c4a0ce9992
16 changed files with 418 additions and 497 deletions

View File

@@ -1,64 +1,63 @@
import axios from 'axios'; import axios from 'axios';
import commonUtil from "../utils/commonUtil";
export default { export default {
getArticles({page = 0, size = 10, q = ''}, authorization) { getArticles({page = 0, size = 10, q = ''}, authorization) {
return axios({ return axios({
url: '/api/articles', url: '/api/articles',
headers: { headers: {
'Authorization': authorization 'Authorization': authorization
}, },
params: { params: {
page, page,
size, size,
q q
} }
}); });
}, },
getArticle({articleId}, authorization) { getArticle({articleId}, authorization) {
return axios({ return axios({
url: '/api/articles/' + articleId, url: '/api/articles/' + articleId,
headers: { headers: {
'Authorization': authorization 'Authorization': authorization
} }
}); });
}, },
postArticle({title = '', content = ''}, authorization) { postArticle({title = '', content = ''}, authorization) {
return axios({ return axios({
url: '/api/articles', url: '/api/articles',
method: 'post', method: 'post',
headers: { headers: {
'Authorization': authorization 'Authorization': authorization
}, },
data: { data: {
title, title,
content content
} }
}); });
}, },
updateArticle(id, {title = '', content = ''}, authorization) { updateArticle(id, {title = '', content = ''}, authorization) {
return axios({ return axios({
url: '/api/articles/' + id, url: '/api/articles/' + id,
method: 'put', method: 'put',
headers: { headers: {
'Authorization': authorization 'Authorization': authorization
}, },
data: { data: {
title, title,
content content
} }
}); });
}, },
removeArticle({articleId}, authorization) { removeArticle({articleId}, authorization) {
return axios({ return axios({
url: '/api/articles/' + articleId, url: '/api/articles/' + articleId,
headers: { headers: {
'Authorization': authorization 'Authorization': authorization
}, },
method: 'delete' method: 'delete'
}); });
} }
} }

View File

@@ -1,39 +1,37 @@
import axios from "axios"; import axios from "axios";
import commonUtil from "../utils/commonUtil";
export default { export default {
login(data) { login(data) {
const { email, password } = data; const {email, password} = data;
return axios({ return axios({
method: 'post', method: 'post',
url: '/api/auth/login', url: '/api/auth/login',
data: { data: {
email, email,
password password
} }
}); });
}, },
session(authorization) { session(authorization) {
return axios({ return axios({
method: 'get', method: 'get',
url: '/api/users', url: '/api/users',
headers: { headers: {
'Authorization': authorization 'Authorization': authorization
} }
}); });
}, },
register(data) { register(data) {
const { email, name, password } = data; const {email, name, password} = data;
return axios({ return axios({
method: 'post', method: 'post',
url: '/api/auth/register', url: '/api/auth/register',
data: { data: {
email, email,
name, name,
password password
} }
}); });
}, },
} }

View File

@@ -1,58 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@@ -8,6 +8,6 @@ Vue.config.productionTip = false;
Vue.use(VueCookie); Vue.use(VueCookie);
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
router router
}).$mount('#app'); }).$mount('#app');

View File

@@ -1,20 +0,0 @@
import axios from "axios";
import commonUtil from "../utils/commonUtil";
export default {
async session() {
try {
await axios({
method: 'get',
url: '/api/users',
headers: {
'Authorization': commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))
}
});
} catch (e) {
alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
await this.$router.replace('/');
}
}
}

View File

@@ -1,8 +1,10 @@
<template> <template>
<div> <div>
<router-link to="/auth/login">로그인</router-link> <br> <router-link to="/auth/login">로그인</router-link>
<router-link to="/auth/register">회원가입</router-link> <br> <br/>
</div> <router-link to="/auth/register">회원가입</router-link>
<br/>
</div>
</template> </template>
<script> <script>
@@ -10,20 +12,19 @@
export default { export default {
name: "Welcome", name: "Welcome",
async beforeCreate() { async beforeCreate() {
authApi.session = authApi.session.bind(this); authApi.session = authApi.session.bind(this);
}, },
async created() { async created() {
try { try {
await authApi.session(); await authApi.session();
await this.$router.replace('/articles'); await this.$router.replace("/articles");
} catch (e) { } catch (e) {
console.log(e); console.log(e);
}
} }
} };
}
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@@ -1,16 +1,18 @@
<template> <template>
<div> <div>
<div></div>
<div> <div>
title :
<span>{{ article.title }}</span>
</div> </div>
<div> <div>
title : <span>{{ article.title }}</span> content:
</div> <p>{{ article.content }}</p>
<div>
content: <p>{{ article.content }}</p>
</div> </div>
<div v-if="init"> <div v-if="init">
createdAt: <span>{{ article.createdAt }}</span> createdAt:
<span>{{ article.createdAt }}</span>
</div> </div>
<div v-if="article.isOwn"> <div v-if="article.isOwn">
@@ -21,38 +23,39 @@
</template> </template>
<script> <script>
import authService from "../../services/authService"; import authService from "../../services/authService";
import articleService from "../../services/articleService"; import articleService from "../../services/articleService";
export default { export default {
name: "Detail", name: "Detail",
data() { data() {
return { return {
article: {}, article: {},
init: false, init: false,
test: '' test: ""
} };
}, },
async beforeCreate() { async beforeCreate() {
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this); authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
articleService.getArticle = articleService.getArticle.bind(this); this
articleService.removeArticle = articleService.removeArticle.bind(this); );
}, articleService.getArticle = articleService.getArticle.bind(this);
async created() { articleService.removeArticle = articleService.removeArticle.bind(this);
this.article = await articleService.getArticle(this.$route.params.id); },
this.init = true; async created() {
}, this.article = await articleService.getArticle(this.$route.params.id);
methods: { this.init = true;
async remove() { },
const articleId = this.$route.params.id; methods: {
if(!confirm('정말 삭제하시겠습니까?')) return; async remove() {
const articleId = this.$route.params.id;
if (!confirm("정말 삭제하시겠습니까?")) return;
await articleService.removeArticle(articleId); await articleService.removeArticle(articleId);
}, }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@@ -7,7 +7,7 @@
<span @click="clickUser">{{ article.user.name }}</span> <span @click="clickUser">{{ article.user.name }}</span>
</article> </article>
<br> <br/>
<div> <div>
<router-link to="/articles/write">글쓰기</router-link> <router-link to="/articles/write">글쓰기</router-link>
@@ -24,39 +24,40 @@
</template> </template>
<script> <script>
import authService from "../../services/authService"; import authService from "../../services/authService";
import articleService from "../../services/articleService"; import articleService from "../../services/articleService";
export default { export default {
name: "List", name: "List",
data() { data() {
return { return {
articles: [], articles: [],
pending: true pending: true
} };
}, },
async beforeCreate() { async beforeCreate() {
articleService.getArticles = articleService.getArticles.bind(this); articleService.getArticles = articleService.getArticles.bind(this);
authService.logout = authService.logout.bind(this); authService.logout = authService.logout.bind(this);
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this); authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
this
);
}, },
async created() { async created() {
await authService.banishIfUserUnAuthenticated(); await authService.banishIfUserUnAuthenticated();
this.articles = await articleService.getArticles({}); this.articles = await articleService.getArticles({});
this.pending = false; this.pending = false;
}, },
methods: { methods: {
async logout() { async logout() {
if (!confirm('정말 로그아웃 하시겠습니까?')) return; if (!confirm("정말 로그아웃 하시겠습니까?")) return;
await authService.logout(); await authService.logout();
}, },
clickUser(evt) { clickUser(evt) {
console.log(evt.target); console.log(evt.target);
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@@ -3,7 +3,7 @@
<form @submit="isEdit ? update($event) : create($event)"> <form @submit="isEdit ? update($event) : create($event)">
<div class="row"> <div class="row">
<label for="title">Title</label> <label for="title">Title</label>
<input type="text" id="title" v-model="title"> <input type="text" id="title" v-model="title"/>
</div> </div>
<div class="row"> <div class="row">
<label for="content">Content</label> <label for="content">Content</label>
@@ -17,51 +17,57 @@
</template> </template>
<script> <script>
import articleService from "../../services/articleService"; import articleService from "../../services/articleService";
import authService from "../../services/authService"; import authService from "../../services/authService";
export default { export default {
name: "Write", name: "Write",
data() { data() {
return { return {
title: '', title: "",
content: '', content: "",
isEdit: false isEdit: false
} };
},
async beforeCreate() {
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
articleService.postArticle = articleService.postArticle.bind(this);
articleService.updateArticle = articleService.updateArticle.bind(this);
articleService.getArticle = articleService.getArticle.bind(this);
articleService.doseSessionHasPermission = articleService.doseSessionHasPermission.bind(this);
},
async created() {
const id = this.$route.query.id;
if (id) {
await authService.banishIfUserUnAuthenticated();
const { title, content, user } = await articleService.getArticle(id);
await articleService.doseSessionHasPermission(user);
this.title = title;
this.content = content;
this.isEdit = true;
}
},
methods: {
async create(evt) {
evt.preventDefault();
const {title, content} = this;
await articleService.postArticle({title, content});
}, },
async update(evt) { async beforeCreate() {
evt.preventDefault(); authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
const {title, content} = this; this
await articleService.updateArticle(this.$route.query.id, {title, content}); );
articleService.postArticle = articleService.postArticle.bind(this);
articleService.updateArticle = articleService.updateArticle.bind(this);
articleService.getArticle = articleService.getArticle.bind(this);
articleService.doseSessionHasPermission = articleService.doseSessionHasPermission.bind(
this
);
},
async created() {
const id = this.$route.query.id;
if (id) {
await authService.banishIfUserUnAuthenticated();
const {title, content, user} = await articleService.getArticle(id);
await articleService.doseSessionHasPermission(user);
this.title = title;
this.content = content;
this.isEdit = true;
}
},
methods: {
async create(evt) {
evt.preventDefault();
const {title, content} = this;
await articleService.postArticle({title, content});
},
async update(evt) {
evt.preventDefault();
const {title, content} = this;
await articleService.updateArticle(this.$route.query.id, {
title,
content
});
}
} }
} };
}
</script> </script>
<style scoped> <style scoped>

View File

@@ -2,8 +2,8 @@
<div> <div>
<router-link to="/">home</router-link> <router-link to="/">home</router-link>
<form @submit="submit"> <form @submit="submit">
<input type="email" v-model="email"> <input type="email" v-model="email"/>
<input type="password" v-model="password"> <input type="password" v-model="password"/>
<button type="submit">확인</button> <button type="submit">확인</button>
</form> </form>
</div> </div>
@@ -17,32 +17,31 @@
name: "Login", name: "Login",
data() { data() {
return { return {
email: '', email: "",
password: '' password: ""
};
},
beforeCreate() {
authApi.session = authApi.session.bind(this);
authService.login = authService.login.bind(this);
},
async created() {
try {
await authApi.session();
await this.$router.replace("/articles");
} catch (e) {
console.log(e);
} }
}, },
beforeCreate() { methods: {
authApi.session = authApi.session.bind(this); submit: async function (evt) {
authService.login = authService.login.bind(this);
},
async created() {
try {
await authApi.session();
await this.$router.replace('/articles');
} catch (e) {
console.log(e);
}
},
methods: {
submit: async function(evt) {
evt.preventDefault(); evt.preventDefault();
const { email, password } = this; const {email, password} = this;
await authService.login(email,password); await authService.login(email, password);
}, }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<form @submit="register"> <form @submit="register">
<input type="email" v-model="email" placeholder="Email"> <input type="email" v-model="email" placeholder="Email"/>
<input type="text" v-model="name" placeholder="Name"> <input type="text" v-model="name" placeholder="Name"/>
<input type="password" v-model="password" placeholder="Password"> <input type="password" v-model="password" placeholder="Password"/>
<button type="submit">확인</button> <button type="submit">확인</button>
</form> </form>
</div> </div>
@@ -17,43 +17,34 @@
name: "Register", name: "Register",
data() { data() {
return { return {
email: '', email: "",
name: '', name: "",
password: '' password: ""
};
},
beforeCreate() {
authApi.register = authApi.register.bind(this);
authApi.session = authApi.session.bind(this);
authService.register = authService.register.bind(this);
},
async created() {
try {
await authApi.session();
await this.$router.replace("/articles");
} catch (err) {
console.log(err);
} }
}, },
beforeCreate() { methods: {
authApi.register = authApi.register.bind(this); register: async function (evt) {
authApi.session = authApi.session.bind(this);
authService.register = authService.register.bind(this);
},
async created() {
try {
await authApi.session();
await this.$router.replace("/articles");
} catch (err) {
console.log(err);
}
},
methods: {
register: async function(evt) {
evt.preventDefault(); evt.preventDefault();
const { email, name, password } = this; const {email, name, password} = this;
await authService.register({email, name, password}); await authService.register({email, name, password});
// try {
// await authApi.register({email, name, password});
// } catch (err) {
// if (err.response.status === 409) {
// alert('이미 존재하는 이메일입니다.');
// }
// }
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@@ -25,24 +25,23 @@
export default { export default {
name: "Info", name: "Info",
data() { data() {
return { return {
user: null, user: null,
init: false init: false
} };
}, },
async beforeCreate() { async beforeCreate() {
authApi.bind(this); authApi.bind(this);
try { try {
const { data } = await authApi.session(); const {data} = await authApi.session();
this.user = data; this.user = data;
} catch (err) { } catch (err) {
await this.$router.replace('/auth/login'); await this.$router.replace("/auth/login");
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@@ -12,37 +12,37 @@ import Info from "../pages/me/Info";
Vue.use(VueRouter); Vue.use(VueRouter);
export const router = new VueRouter({ export const router = new VueRouter({
mode: 'history', mode: 'history',
routes: [ routes: [
{ {
path: '/', path: '/',
component: Welcome component: Welcome
}, },
{ {
path: '/auth/login', path: '/auth/login',
component: Login component: Login
}, },
{ {
path: '/auth/register', path: '/auth/register',
component: Register component: Register
}, },
{ {
path: '/articles', path: '/articles',
component: Articles component: Articles
}, },
{ {
path: '/articles/write', path: '/articles/write',
name: 'WriteArticle', name: 'WriteArticle',
component: WriteArticle component: WriteArticle
}, },
{ {
path: '/articles/:id', path: '/articles/:id',
name: 'DetailArticle', name: 'DetailArticle',
component: DetailArticle component: DetailArticle
}, },
{ {
path: '/me', path: '/me',
component: Info component: Info
} }
] ]
}); });

View File

@@ -3,71 +3,74 @@ import commonUtil from "../utils/commonUtil";
import authApi from "../api/authApi"; import authApi from "../api/authApi";
export default { export default {
async getArticles({page = 0, size = 10}) { async getArticles({page = 0, size = 10}) {
try { try {
const result = await articleApi.getArticles({page, size}, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))); const result = await articleApi.getArticles({
return result.data; page,
} catch (err) { size
alert('문제가 발생하였습니다.'); }, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
console.log(err.response); return result.data;
} } catch (err) {
}, alert('문제가 발생하였습니다.');
async getArticle(articleId) { console.log(err.response);
try { }
const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')); },
const result = await articleApi.getArticle({articleId}, authorization); async getArticle(articleId) {
return result.data; try {
} catch (e) { const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
alert('문제가 발생하였습니다.'); const result = await articleApi.getArticle({articleId}, authorization);
console.log(e); return result.data;
} } catch (e) {
}, alert('문제가 발생하였습니다.');
async removeArticle(articleId) { console.log(e);
try { }
const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')); },
await articleApi.removeArticle({articleId}, authorization); async removeArticle(articleId) {
await this.$router.push('/articles'); try {
} catch (e) { const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
alert('문제가 발생하였습니다.'); await articleApi.removeArticle({articleId}, authorization);
console.log(e); await this.$router.push('/articles');
} } catch (e) {
}, alert('문제가 발생하였습니다.');
async postArticle(data) { console.log(e);
try { }
await articleApi.postArticle(data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))); },
await this.$router.push('/articles'); async postArticle(data) {
} catch (err) { try {
alert('문제가 발생하였습니다.'); await articleApi.postArticle(data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
console.log(err); await this.$router.push('/articles');
} } catch (err) {
}, alert('문제가 발생하였습니다.');
async updateArticle(id, data) { console.log(err);
try { }
await articleApi.updateArticle(id, data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))); },
await this.$router.push("/articles/" + id); async updateArticle(id, data) {
} catch (err) { try {
alert('문제가 발생하였습니다.'); await articleApi.updateArticle(id, data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
console.log(err); await this.$router.push("/articles/" + id);
} } catch (err) {
}, alert('문제가 발생하였습니다.');
async doseSessionHasPermission(user) { console.log(err);
let session = null; }
},
async doseSessionHasPermission(user) {
let session = null;
try { try {
const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))); const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
session = result.data; session = result.data;
} catch (err) { } catch (err) {
alert('문제가 발생하였습니다.'); alert('문제가 발생하였습니다.');
return; return;
} }
try { try {
if (user.id !== session.id) { if (user.id !== session.id) {
throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다."); throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다.");
} }
} catch (err) { } catch (err) {
alert(err.message); alert(err.message);
await this.$router.replace("/articles/" + this.$route.query.id); await this.$router.replace("/articles/" + this.$route.query.id);
}
} }
}
} }

View File

@@ -2,48 +2,48 @@ import authApi from "../api/authApi";
import commonUtil from "../utils/commonUtil"; import commonUtil from "../utils/commonUtil";
export default { export default {
async login(email, password) { async login(email, password) {
try { try {
const result = await authApi.login({email, password}); const result = await authApi.login({email, password});
const { token } = result.data; const {token} = result.data;
this.$cookie.set('accessToken', token, 1000); this.$cookie.set('accessToken', token, 1000);
await this.$router.push('/articles'); await this.$router.push('/articles');
} catch (err) { } catch (err) {
const message = err.response.data.message; const message = err.response.data.message;
if (~message.indexOf('패스워드')) { if (~message.indexOf('패스워드')) {
alert('패스워드가 일치하지 않습니다.'); alert('패스워드가 일치하지 않습니다.');
} }
} }
}, },
async register(data) { async register(data) {
try { try {
await authApi.register(data); await authApi.register(data);
alert('가입이 완료되었습니다. 로그인 해 주세요'); alert('가입이 완료되었습니다. 로그인 해 주세요');
await this.$router.push('/auth/login'); await this.$router.push('/auth/login');
} catch (err) { } catch (err) {
if (err.response.status === 409) { if (err.response.status === 409) {
alert('이미 존재하는 이메일입니다.'); alert('이미 존재하는 이메일입니다.');
} }
} }
}, },
async logout() { async logout() {
try { try {
this.$cookie.set('accessToken', null, 0); this.$cookie.set('accessToken', null, 0);
await this.$router.push('/'); await this.$router.push('/');
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}, },
async progressIfUserAuthenticated() { async progressIfUserAuthenticated() {
}, },
async banishIfUserUnAuthenticated() { async banishIfUserUnAuthenticated() {
try { try {
await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))); await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
} catch (e) { } catch (e) {
alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
await this.$router.replace('/'); await this.$router.replace('/');
} }
}, },
} }

View File

@@ -1,6 +1,5 @@
export default { export default {
getAuthenticationHeaderBearer(accessToken) { getAuthenticationHeaderBearer(accessToken) {
return 'Bearer ' + accessToken; return 'Bearer ' + accessToken;
} }
}; };