본문 바로가기
728x90
반응형

전체 글421

[ 조은글 5216호 - 내 인생의 돌부리 ] 한 소년이 있었습니다. 화창한 날에 기분 좋게 언덕을 올라가던 소년은 길에 튀어나와 있던 돌에 걸려 넘어지고 말았습니다. “이런 돌덩이가 왜 사람들 다니는 길에 있지?” 소년은 삽으로 돌부리를 캐내기 시작했습니다. 파헤치자 점점 돌의 크기가 드러났습니다. 땅 위에 보이는 돌은 사실 큰 바위의 일부였던 것입니다. 소년은 놀랐지만 결심했습니다. “다시는 다른 사람들이 돌부리에 걸리지 않도록 파내겠어!” 소년은 분한 마음 반, 정의감 반으로 거대한 돌에 달려 들었습니다. 해가 뉘엿뉘엿 지기 시작했습니다. 소년은 삽을 놓았습니다. “안 되겠다, 포기하자.” 소년은 파놓았던 흙으로 돌이 있던 자리를 덮기 시작했습니다. 그러자 소년이 걸려 넘어졌던 돌부리도 흙에 덮여 보이지 않게 되었습니다. 소년은 중얼거렸습니다... 2021. 9. 2.
store 저장소 처리 전역적으로 설정하여 값을 가져 가기 위해서는 store 설정을 하여야 한다. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { memberInfo: JSON.parse(localStorage.getItem('member')), drawer: false, siteTitle: '', appBarShow: true, sb: { act: false, msg: '', color: 'error' }, user: { name: '관리자', id: '없음', img: 'https://randomuser.me/api/portraits/men/85.jpg' } }, mutations: { ge.. 2021. 9. 1.
router 설정 화면에서 메뉴 클릭시 라우터를 거쳐서 해당 페이지를 호출한다. import Vue from 'vue' import Router from 'vue-router' import axios from 'axios' Vue.use(Router) Vue.prototype.$axios = axios const apiRootPath = process.env.NODE_ENV === 'production' ? '/rice/' : '/rice/' Vue.prototype.$apiRootPath = apiRootPath axios.defaults.baseURL = apiRootPath const originalPush = Router.prototype.push Router.prototype.push = function push.. 2021. 9. 1.
로그인시 rsa 암호화 적용하기 위에서 만든 rsa 스크립트 사용방법이다. 로그인시에 암호화 한다. 로그인을 하기 위한 껍데기를 먼저 만든다. views\login\index.vue 파일을 만든다. 로그인 실체 components 파일을 만든다. components\login\login.vue 로그인 로그인 rsa 암호화 사용 방법은 만들어 놓은 js 파일을 import 한다. import RSAKey from '@/js/rsa/rsa.js' 최초 로딩시 자바 컨트롤러 호출하여 공개키를 가지고 온다. getRsaKey () { this.$axios.get('grain/mbr/axiosRsaKey.do') .then((r) => { this.pubRsaKey = r.data }) .catch((e) => { if (!e.response).. 2021. 9. 1.
vue에서 rsa암호화 하여 자바와 통신하기 로그인시에 아이디와, 패스워드를 rsa로 암호화 하여 자바와 통신한다. 먼저 자바에서 rsa로 암호화에 필요한 공개키를 발행하여 vue단으로 넘긴다. vue에서는 공개키를 이용하여 rsa암호화 하여 자바로 보내면, 자바에서 프라이빗 키로 복호화 하여 처리한다. rsa 암호화 자바스크립트는 있는데 vue용으로 만들어진 rsa암호화 모듈이 없어서, rsa.js를 vue에서 사용할수 있도록 약간 컨버트 하였다. 소스는 총4개의 js파일이다. js\rsa 폴더를 만든후에 1. jsbn.js 파일을 만들어서 저장한다. /* eslint-disable */ const BigInteger = (function () { 'use strict' // Bits per digit let dbits // JavaScript .. 2021. 9. 1.
vue 폴더구조 폴더구조는 대충 이렇게 잡았다. src -- assets -- components -- js -- plugins -- router -- store -- views App.vue main.js 이렇게 잡고서 vue는 컴포넌트 개념이라서 views 폴더에는 화면에 표시해 주는 껍데기만 보여주고 실제 작업은 components 폴더에 작업하여 import 하여 처리한다. js 라이브러리는 js 폴더에 모아 놓았다 plugins는 vue에서 제공하는 plugins기능을 모아 놓았다 router는 화면분기시 필요하다. store는 전역변수로 전체에서 접근이 필요할때 필요하다. 2021. 9. 1.
App.vue main.js가 진입점이면 App.vue는 말 그대로 보여주는 모든것을 관리한다. App.vue에서 전체화면을 관리하는 프레임이라고 보면 된다. {{$store.state.siteTitle}} mdi-home {{$store.state.user.name}} {{item.title}} {{ subItem.title}} © {{ new Date().getFullYear() + ' ' + siteCopyright}} {{ $store.state.sb.msg }} 닫기 2021. 9. 1.
엔트리 포인트 진입점 main.js public폴더에 index.html 에 최초이겠지만. 실제 진입점은 main.js로 보면 된다. 기본적인것 import 한다. import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import vuetify from './plugins/vuetify' import VuetifyDialog from 'vuetify-dialog' import 'vuetify-dialog/dist/vuetify-dialog.css' import Autocomplete from 'v-autocomplete' import 'v-autocomplete/dist/v-autocomplete.cs.. 2021. 9. 1.
package.json 의존성 관리를 한다. 기본 로그인과 mvc 적용된 설정이다. { "name": "vpn", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@mdi/font": "5.9.55", "axios": "0.21.1", "material-design-icons": "3.0.1", "typeface-roboto": "1.1.13", "v-autocomplete": "1.8.2", "vue": "^2.6.11", "vue-router": "^3.2.0", "vu.. 2021. 9. 1.
vue.config.js vue로 개발시 개발환경에서 크로스 도메인 안 생기게 작업을 할려면 vue.config.js 파일에 설정을 해줘야 한다. 프로젝트시 빌드 패스, 배포패스, 프록시 서버 설정을 해줘야 한다. module.exports = { transpileDependencies: [ 'vuetify' ], outputDir: 'c:/eGovFrameDev-3.9.0-64bit/workspace/GGM/src/main/webapp/vpn', publicPath: process.env.NODE_ENV === 'production' ? '/rice/vpn' : '/', devServer: { proxy: { '^/rice': { target: 'http://localhost:9080', ws: true, changeOrigi.. 2021. 9. 1.
728x90
반응형

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
loading

티스토리툴바