SpringBoot+MyBatisPlus+Vue 앞 뒤 분리 프로젝트 빠 른 구축 과정(전단 편)
20536 단어 SpringBootMyBatisPlusVue앞 뒤 분리
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//
}
}
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')
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: { }
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
</style>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
}
}
<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>
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')
}
]
}
]
})1.getters.js 작성
export default {
getToken: state => {return state.token}
}
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
})
export default {
setToken: (state,token) => {state.token = token}
}
export default {
token: ''
}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>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>
<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 앞 뒤 분리 프로젝트 의 구축 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Java・SpringBoot・Thymeleaf】 에러 메세지를 구현(SpringBoot 어플리케이션 실천편 3)로그인하여 사용자 목록을 표시하는 응용 프로그램을 만들고, Spring에서의 개발에 대해 공부하겠습니다 🌟 마지막 데이터 바인딩에 계속 바인딩 실패 시 오류 메시지를 구현합니다. 마지막 기사🌟 src/main/res...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
