033 - 회원가입폼 서버로 전송
남기용 793

이제 회원가입폼이 다 만들어 졌으니 서버로 데이터를 전송해 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;
	}
}

회원로그인 후 댓글을 작성하실 수 있습니다. 로그인
© 2024 ezcode all right reserved.