이제 회원가입폼이 다 만들어 졌으니 서버로 데이터를 전송해 DB에 입력해야 합니다.
SignUpForm을 다음과 같이 수정합니다.
<template>
<v-form @submit.prevent="save" ref="form" v-model="valid" lazy-validation>
<!-- 생략 -->
<!-- 버튼에 로딩 속성 추가 -->
<v-btn type="submit" block color="primary" :loading="isLoading">회원가입</v-btn>
</v-form>
</template>
<script>
// 생략 ...
export default {
// 생략 ...
props: {
// 생략 ...
isLoading : Boolean, // 추가
},
methods: {
async save() {
this.$refs.form.validate();
await this.$nextTick();
if (!this.valid) return;
if (!this.$refs.id.validate()) return;
if (!this.$refs.email.validate()) return;
this.$emit('onSave', this.form); // 추가
},
},
};
</script>
Join.vue에서 다음과 같이 수정합니다.
<template>
<!-- 생략 -->
<!-- @onSave 속성, isLoading 속성 추가 -->
<sing-up-form
:cbCheckId="checkId"
:cbCheckEmail="checkEmail"
@onSave="save"
:isLoading="isLoading"
/>
<!-- 생략 -->
</template>
<script>
// 생략 ...
export default {
// 생략 ...
data() {
return {
isLoading: false,
};
},
methods: {
...mapActions("user", ["duplicateCheck", 'createMember']),
// 생략...
async save(form) {
this.isLoading = true;
this.createMember(form);
this.isLoading = false;
},
},
};
</script>
vuex의 user.js 의 actions에 createMember 함수를 추가합니다.
export const actions = {
// 생략...
async createMember(ctx, form) {
const { $axios } = Vue.prototype;
const data = await $axios.post('/api/member', form);
return data;
},
}
이제 서버쪽에서 받아줘야 하기 때문에 먼저 라우터를 만들고 Body파서를 추가합니다.
// 앱 초기화
// 생략
// 파서
app.use(express.json());
app.use(express.urlencoded({extended: true}));
// 정적 폴더
// 생략
api/member.js 에 라우터를 추가합니다.
router.post('/', async (req, res)=>{
const result = await modelCall(memberModel.createMember, req);
res.json(result);
});
시간관련 라이브러리 moment를 추가하고 설정파일을 생성합니다.
yarn add moment
moment 설정파일 추가
const moment = require('moment');
require('moment/locale/ko');
moment.locale('ko');
moment.updateLocale('ko', {
longDateFormat: {
L : 'YYYY-MM-DD',
LT : 'YYYY-MM-DD HH:mm:ss',
}
});
module.exports = moment;
ip를 얻어오는 함수를 util/lib.js에 추가 합니다.
const lib = {
// 생략...
getIp(req) {
return req.ip.replace('::ffff:', '');
}
}
회원레벨을 정의 하는 파일을 생성합니다.
const level = {
LV: {
BLOCK : 0,
AWAIT : 1,
MEMBER : 2,
VIP : 4,
ADMIN : 6,
SUPER : 10,
},
LV_LABEL : (lv) => {
if(lv >= level.LV.SUPER) {
return '최고관리자';
} else if(level.LV.ADMIN <= lv && lv < level.LV.SUPER ) {
return '관리자';
} else if(level.LV.VIP <= lv && lv < level.LV.ADMIN ) {
return '우수회원';
} else if(level.LV.MEMBER <= lv && lv < level.LV.VIP ) {
return '일반회원';
} else if(level.LV.AWAIT == lv ) {
return '대기회원';
} else {
return '차단/비 회원';
}
},
LV_COLOR : (lv) => {
if(lv >= level.LV.SUPER) {
return 'light-blue accent-4';
} else if(level.LV.ADMIN <= lv && lv < level.LV.SUPER ) {
return 'green lighten-1';
} else if(level.LV.VIP <= lv && lv < level.LV.ADMIN ) {
return 'green lighten-2';
} else if(level.LV.MEMBER <= lv && lv < level.LV.VIP ) {
return 'lime lighten-3';
} else if(level.LV.AWAIT == lv ) {
return 'red accent-2';
} else {
return 'red accent-4';
}
},
};
module.exports = level;
memberModel.js에 getDefaultMemberLevel 함수를 추가하고 memberModel객체에 createMember함수를 추가 합니다.
// 생략 ...
const { LV } = require('../../../util/level');
const moment = require('../../../util/moment');
const { getIp } = require('../../../util/lib');
async function getDefaultMemberLevel() {
const sql = sqlHelper.SelectSimple(
TABLE.MEMBER,
null,
['COUNT(*) AS cnt']
);
const [[{cnt}]] = await db.execute(sql.query);
return cnt == 0 ? LV.SUPER : LV.MEMBER;
}
const memberModel = {
// 생략 ...
async createMember(req) {
console.log("createMember", req.body);
const at = moment().format('LT');
const ip = getIp(req);
// console.log('IP', ip, at);
const payload = {
...req.body,
// mb_password : 암호화
mb_level : await getDefaultMemberLevel(),
mb_create_at : at,
mb_create_ip : ip,
mb_update_at : at,
mb_update_ip : ip,
};
const sql = sqlHelper.Insert(TABLE.MEMBER, payload);
// console.log(sql);
return req.body;
}
}
회원로그인 후 댓글을 작성하실 수 있습니다. 로그인