SpringBoot+MyBatisPlus+Vue 앞 뒤 분리 프로젝트 빠 른 구축 과정(전단 편)

백 엔 드
SpringBoot+MyBatisPlus+Vue 전후 단 분리 프로젝트 빠 른 구축[백 엔 드 편]
전단 편
 vue 프로젝트 만 들 기
1.폴 더 를 찾 아 명령 행 에 들 어가 고 입력:vue create vue-front
在这里插入图片描述
2.바로 차 로 돌아 가 잠시 기다리다 가 조금 오래 걸 립 니 다.
在这里插入图片描述
3.제시 명령 에 따라 테스트
在这里插入图片描述
在这里插入图片描述
브 라 우 저 열기 입력:http://localhost:8080/
在这里插入图片描述
설치 에 필요 한 도구
설치 하 는 도구 가 좀 많 을 수 있 습 니 다.더 좋 은 확장 성 을 제공 하기 위해 자발적으로 설치(권장 하지 않 음)를 선택 할 수 있 습 니 다.뒤의 코드 는 모두 사용 되 었 습 니 다.설치 하지 않 고 제 코드 에 따라 쓰 면 오류 가 발생 할 수 있 습 니 다.설 치 를 권장 합 니 다.이렇게 하면 확장 성 이 더욱 높 습 니 다.
1.vue-router 설치
npm install vue-router
在这里插入图片描述
在这里插入图片描述
2,설치 요소-ui
npm i element-ui -S
在这里插入图片描述
在这里插入图片描述
3.axios 설치
npm install axios
在这里插入图片描述
在这里插入图片描述
4.vuex 설치
npm install vuex --save
在这里插入图片描述
在这里插入图片描述
5.axios-utils 설치
npm i axios-utils
在这里插入图片描述
在这里插入图片描述
6.vuex-persistedstate 설치
npm i -S vuex-persistedstate
在这里插入图片描述
在这里插入图片描述
인 코딩 시작
在这里插入图片描述
1.루트 디 렉 터 리 에 vue.config.js 파일 추가
在这里插入图片描述
vue.config.js:

module.exports = {
    lintOnSave:false, //           
    devServer:{
        port: 81//      
    }
}
2.main.js 작성

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from '@/utils/axiosutils.js'
import store from '@/vuex'
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.axios = axios
new Vue({
	router,
  render: h => h(App),
}).$mount('#app')
3.App.vue 작성

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>

<script>


export default {
	
  name: 'App',
  components: {   }
}
</script>

<style>
*{
	padding: 0;
	margin: 0; 
}
</style>
4.axiosutils.js 작성
src 디 렉 터 리 에 utils 디 렉 터 리 를 만 들 고 utils 디 렉 터 리 에 xiosutils.js 를 만 듭 니 다.

import axios from 'axios'
import store from '../vuex'
axios.defaults.baseURL = 'http://127.0.0.1:80'
if (store.getters.getToken) {
  axios.defaults.headers.common['token'] = store.getters.getToken
}
axios.defaults.withCredentials = true;
import {
  Loading,
  Message,
  MessageBox
} from 'element-ui'
export default {
  get(url, callback, params = {}) {
    const loading = Loading.service({
      lock: true,
      text: '     ',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    })
    axios.get(url, {
      params: params
    }).then(response => { 
      if (response.data.code === 200) {
        callback(response.data)
      } else {
        Message.error(response.data.message)
      }
    }).catch(err => {
      Message.error(err);
    }).finally(() => {
      loading.close()
    })
  },
  post(url, callback, params = {},msg) {
    const formData = new FormData()
    for (let key in params) {
      formData.append(key, params[key])
    }
    const loading = Loading.service({
      lock: true,
      text: '     ',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    })
    setTimeout(() => {
      loading.close()
    }, 10000)
    axios.post(url, formData)
      .then(response => {
        if (response.data.code === 200) {

          if(msg===undefined  ){
              Message.success(response.data.message)
          }else if(msg != null && msg.length != 0 ){
            Message.success(msg)
          }

 
          callback(response.data)
        } else {
          Message.error(response.data.message)
        }
      }).catch(err => {
        Message.error(err)
      }).finally(() => {
        loading.close()
      })
  },
  setToken(token) {
    axios.defaults.headers.common['token'] = token
  }
}
5.components 디 렉 터 리 에 menu.vue 를 작성 합 니 다.

<template>
	<div>
		<el-menu default-active="2" class="el-menu-vertical-demo" router background-color="#545c64" text-color="#fff"
			active-text-color="#ffd04b">
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>    </span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/user">    </el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			
		</el-menu>



	</div>
</template>

<script>
	export default {
		name: 'Menu',
		components: {

		},
		data() {
			return {}
		},
		methods: {

		},
		created() {}
	}
</script>

<style>
</style>
7.router 디 렉 터 리 에 router.js 를 작성 합 니 다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({

	routes: [
		{
			path: '/',
			name: 'Home',
			component: () => import('@/views/home/home'),
			children: [{
					path: '/user',
					name: 'User',
					component: () => import('@/views/user')
				}
				
			]
		}
		
	]
})
8.src 디 렉 터 리 에 vuex 를 만 듭 니 다.
1.getters.js 작성

export default {
  getToken: state => {return state.token}
}
2,index.js 작성

import Vuex from 'vuex'

import Vue from 'vue'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })],
  state,
  mutations,
  getters
})
3.mutations.js 작성

export default {
  setToken: (state,token) => {state.token = token}
}
4、state.js 작성

export default {
  token: ''
}
9.home.vue 작성
views 디 렉 터 리 에 홈 디 렉 터 리 를 만 들 고 홈 디 렉 터 리 에 홈 vue 를 만 듭 니 다.

<template>
  <div>
  <el-container class="wrap" >
    <el-header class="header" >      </el-header>
    <el-container>
      <el-aside width="260px" class="aside">
		    
		  <Menu></Menu>
		 
	  </el-aside>
      <el-main class="main">
		  
		  <router-view></router-view>
		  	  
	  </el-main>
    </el-container>
  </el-container>
  	
  
  </div>
</template>

<script>
	
	import Menu from '@/components/menu'
	
  export default {
    name: 'Home',
    components: {
		Menu
    },
    data() {
      return {
      }
    },
    methods: {

    },
    created() { }
  }
</script>

<style >
	
	.wrap{
			height: 80vh;
			
		}
		.header{
			background-color: grey;
		}
		
		.aside{
			background-color: black;
		}
		.main{
			background-color: white;
		}
	
	
</style>
10.user 관련 코드 를 작성 합 니 다(전단 핵심 논리 코드,삭제 및 검사,그리고 모호 한 조회,논리 삭제 와 물리 삭제 포함)
views 디 렉 터 리 에 user 디 렉 터 리 를 만 들 고 홈 디 렉 터 리 에 index.vue 와 edit.vue 를 만 듭 니 다.
index.vue 작성

<template>
	<div>

		<el-row>

			<el-col :span="5">
				<el-button type="danger" icon="el-icon-delete" circle @click="batchdel"></el-button>
			</el-col>
			<el-col :span="9">
				<el-input v-model="search.name" placeholder="       "></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary"   @click="searchData">  </el-button>
				<el-tooltip class="item" effect="dark" content="    " placement="top-start">
					<el-button type="primary" @click="add">  </el-button>
				</el-tooltip>
			</el-col>
		</el-row>
		<el-divider><i ></i></el-divider>

		<el-table :data="tableData" style="width: 100% ;" stripe
			@selection-change="handleSelectionChange">

			<el-table-column type="selection">
			</el-table-column>
			<el-table-column label="  "  prop="userId">
			
			</el-table-column>
			<el-table-column label="  " prop="userName">
			
			</el-table-column>

			<el-table-column label="  " prop="password">

			</el-table-column>

			

			<el-table-column label="  " prop="userState" fixed="right">
				<template slot-scope="scope">
			
					<el-tag v-if="scope.row.userState == 1">  </el-tag>
					<el-tag type="danger" v-else-if="scope.row.userState == 0">   </el-tag>
			
				</template>
			</el-table-column>
			
			




			 
			<el-table-column label="  " fixed="right" width="150">
				<template slot-scope="scope">
					
						<el-button size="mini" @click="edit(scope.row.userId)">  </el-button>
					
					<el-button size="mini" type="danger" @click="del(scope.row.userId)">  </el-button>
				</template>
			</el-table-column>

		</el-table>





		<el-pagination @current-change="currentChange" :current-page.sync="query.current" :page-size="query.pageSize"
			background layout="total,  prev, pager, next, jumper" :total="total" style="text-align: center;">
		</el-pagination>
		
		<el-dialog title="  " :visible.sync="showEdit" :key="showNum">
			<UserEdit :showEdit.sync="showEdit" @list="list" :id="id"></UserEdit>
		</el-dialog>


	</div>
</template>


<script>
	import UserEdit from '@/views/user/edit';

	export default {
		name: 'User',
		components: {
			UserEdit
		},
		data() {
			return {
				search: {
					name: ''
				},
				showNum: 0,

				total: 0,
				id: null,
				showEdit: false,
				query: {
					pageSize: 10,
					current: 1,
					userName: ''
				},

				tableData: [],
				selectedrow: [],
				title: ''


			}
		},
		methods: {
			list() {
				// console.log("list")
				// console.log("=========")
				// console.log(this.query)
				// console.log("=========")

				this.axios.get('/user/list', response => {
					let page = response.obj;
					// console.log(page.records);
					this.tableData = page.records;
					this.current = page.current;
					this.pageSize = page.size;
					// console.log(this.tableData)
					this.total = page.total;
				}, this.query);


			},
			searchData() {
				this.query.userName = this.search.name;
				this.query.current = 1;
				this.list();
			},
			add() {
				this.title = '      ';
				this.id = null;
				this.showNum++;
				this.showEdit = true;
			},
			edit(id) {
				this.title = '      ';
				this.id = id;
				// console.log(this.id);
				this.showNum++;
				this.showEdit = true;
			},
			currentChange() {

				this.list();
			},
			del(id) {
				// console.log("========")
				// console.log(id)
				// console.log("========")
				this.axios.get('/user/del', response => {
					if (response) {
						this.$alert("    ", "  ", {
							type: 'success'
						});
						//    
						this.list();
					}
				}, {
					id: id
				});
			},
			handleSelectionChange(val) {
				this.selectedrow = val
			},
			batchdel() {
				console.log(this.selectedrow);
				if (this.selectedrow.length === 0) {
					this.$message('          ');
				} else {
					const ids = []
					console.log("     !")
					console.log("    :"+this.selectedrow.length)
					for (let i = 0; i < this.selectedrow.length; i++) {
						ids.push(this.selectedrow[i].userId)
					}
					this.axios.get('/user/delByIds', response => {
						this.list();
					}, {
						id: ids.join(",")
					});
				}
			}
		},
		created() {
			this.list();
		}
	}
</script>

<style>

</style>
edit.vue 작성

<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
			
			<el-form-item label="  ">
				<el-input v-model="form.userName"></el-input>
			</el-form-item>
			<el-form-item label="  ">
				<el-input v-model="form.password"></el-input>
			</el-form-item>
			<!-- <el-form-item label="  ">
				<el-input v-model="form.packageState"></el-input>
			</el-form-item> -->
			
			<el-form-item>
				<el-button type="primary" @click="save('form')" style="font-size: 20px;">  </el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios';
	axios.defaults.baseURL = 'http://127.0.0.1:80';
	
	export default {
		name: 'UserEdit',
		components: {
			
		},
		props: [
			'showEdit',
			'id'
		],
		data() {
			return {
				form: {
					userName:'',
					password:'',
					
				},
				value: ''
			}
		},
		methods: {
				save(form1) {
					this.$refs[form1].validate((valid) => {
						if (valid) {
							this.axios.post('/user/save', response => {
								this.$emit("update:showEdit", false);
								this.$emit('list')
							}, this.form)
						} else {
							console.log('error submit!!');
							return false;
						}
					});
					
		
				}
			},
			created() {
				// alert(this.id)
				if (this.id) {
		
					this.axios.get('/user/getById', response => {
						let page = response.obj;
						this.form = page;
					}, {
						id: this.id
					});
		
				}
			}
		}
</script>

<style>
</style>
시작 전후 단 테스트 효과 시작 백 엔 드
在这里插入图片描述
시작 전단
在这里插入图片描述
테스트
접근:http://127.0.0.1:81/시스템 관리 중인 사용자 관리 클릭
在这里插入图片描述
메모:접근 불가:http://localhost:81/,백 엔 드 에서 크로스 도 메 인 요청 을 해결 하기 때문에 어디 에 썼 습 니까?127.0.0.1:81
테스트 추가
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
테스트 삭제(물리 삭제)
在这里插入图片描述
在这里插入图片描述
테스트 사용 안 함(논리 삭제)
在这里插入图片描述
在这里插入图片描述
모호 찾기 테스트
在这里插入图片描述
이상 은 SpringBoot+MyBatisPlus+Vue 전후 단 분리 프로젝트 의 빠 른 구축[전단 편][빠 른 백 엔 드 코드 생 성,패 키 징 결과 집합,추가 삭제 검사,모호 찾기][기본 프레임 워 크 완료]의 모든 내용 입 니 다.
SpringBoot+MyBatisPlus+Vue 앞 뒤 분리 프로젝트 의 빠 른 구축 과정(전단 편)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.SpringBoot+MyBatisPlus+Vue 앞 뒤 분리 프로젝트 의 구축 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

좋은 웹페이지 즐겨찾기