SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建過程(前端篇)
更新時(shí)間：2021年05月02日 08:20:44 作者：牛哄哄的柯南
這篇文章主要介紹了SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建過程(前端篇),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
后端篇
SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建【后端篇】【快速生成后端代碼、封裝結(jié)果集、增刪改查、模糊查找】【畢設(shè)基礎(chǔ)框架】
前端篇
創(chuàng)建vue項(xiàng)目
1、找個(gè)文件夾進(jìn)入命令行，輸入：vue create vue-front
2、直接回車，等待片刻，稍微有點(diǎn)小久
3、根據(jù)提示指令測(cè)試
打開瀏覽器輸入：http://localhost:8080/
安裝所需工具
安裝的工具會(huì)有點(diǎn)多，為了提供更好的拓展性，可以自主選擇安裝（不建議），后面的代碼中都是使用到了，不安裝然后按照我的代碼寫可能會(huì)報(bào)錯(cuò)，建議安裝，這樣拓展性更高。
1、安裝vue-router
npm install vue-router
2、安裝 element-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, //關(guān)閉代碼格式化校驗(yàn)工具
devServer:{
port: 81//修改啟動(dòng)端口
}
}
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目錄下創(chuàng)建utils目錄，并在utils目錄創(chuàng)建axiosutils.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: '數(shù)據(jù)加載中',
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: '數(shù)據(jù)提交中',
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>系統(tǒng)管理</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目錄下創(chuàng)建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目錄下創(chuàng)建home目錄，在home目錄下創(chuàng)建home.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相關(guān)代碼（前端核心邏輯代碼、增刪改查還有模糊查詢，包括邏輯刪除和物理刪除）
在views目錄下創(chuàng)建user目錄，在home目錄下創(chuàng)建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="請(qǐng)輸入賬號(hào)查找"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" @click="searchData">查詢</el-button>
<el-tooltip class="item" effect="dark" content="添加數(shù)據(jù)" 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="序號(hào)" prop="userId">
</el-table-column>
<el-table-column label="賬號(hào)" prop="userName">
</el-table-column>
<el-table-column label="密碼" prop="password">
</el-table-column>
<el-table-column label="狀態(tài)" 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 = '添加基礎(chǔ)數(shù)據(jù)';
this.id = null;
this.showNum++;
this.showEdit = true;
},
edit(id) {
this.title = '修改基礎(chǔ)數(shù)據(jù)';
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'
});
//刷新頁(yè)面
this.list();
}
}, {
id: id
});
},
handleSelectionChange(val) {
this.selectedrow = val
},
batchdel() {
console.log(this.selectedrow);
if (this.selectedrow.length === 0) {
this.$message('沒有任何被選中的數(shù)據(jù)');
} else {
const ids = []
console.log("選中了一些！")
console.log("選中個(gè)數(shù)："+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="賬號(hào)">
<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="狀態(tài)">
<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>
啟動(dòng)前后端測(cè)試效果 啟動(dòng)后端
啟動(dòng)前端
測(cè)試
訪問：http://127.0.0.1:81/，點(diǎn)擊系統(tǒng)管理中的用戶管理
注意：不能訪問：http://localhost:81/，因?yàn)樵诤蠖私鉀Q跨域請(qǐng)求哪里寫的是:127.0.0.1:81
添加測(cè)試
刪除測(cè)試（物理刪除）
禁用測(cè)試（邏輯刪除）
模糊查找測(cè)試
以上就是SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建【前端篇】【快速生成后端代碼、封裝結(jié)果集、增刪改查、模糊查找】【畢設(shè)基礎(chǔ)框架】的全部?jī)?nèi)容。
到此這篇關(guān)于SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建過程(前端篇)的文章就介紹到這了,更多相關(guān)SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
java實(shí)現(xiàn)國(guó)產(chǎn)sm4加密算法
這篇文章主要介紹了java實(shí)現(xiàn)國(guó)產(chǎn)sm4加密算法的步驟，幫助大家更好的理解和使用Java，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Java二叉樹查詢?cè)?，二叉查找樹，又稱二叉排序樹，亦稱二叉搜索樹，是數(shù)據(jù)結(jié)構(gòu)中的一類。在一般情況下，查找效率比鏈表結(jié)構(gòu)要高2022-11-11
解決springMVC 跳轉(zhuǎn)js css圖片等靜態(tài)資源無(wú)法加載的問題
下面小編就為大家?guī)?lái)一篇解決springMVC 跳轉(zhuǎn)js css圖片等靜態(tài)資源無(wú)法加載的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
這篇文章主要介紹了Java類的繼承原理與用法,結(jié)合實(shí)例形式分析了java類的繼承相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
SpringBoot2.x配置多數(shù)據(jù)源方式
這篇文章主要介紹了SpringBoot2.x配置多數(shù)據(jù)源方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Spring @Profile注解實(shí)現(xiàn)多環(huán)境配置
這篇文章主要介紹了Spring @Profile注解實(shí)現(xiàn)多環(huán)境配置,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了如何利用泛型封裝通用的service層，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
文章介紹了Java中的包、抽象類、接口以及實(shí)現(xiàn)多個(gè)接口的概念,包用于組織類,避免命名沖突,抽象類用于定義不能被實(shí)例化的類,可以包含抽象方法,接口則定義了一組抽象方法,可以被類實(shí)現(xiàn),實(shí)現(xiàn)多個(gè)接口可以實(shí)現(xiàn)類似多繼承的效果,感興趣的朋友一起看看吧2025-02-02
本文詳細(xì)介紹了如何在Windows、macOS和Linux操作系統(tǒng)上安裝、配置Java開發(fā)環(huán)境（JDK）,并展示了如何編寫、編譯和運(yùn)行Java程序,同時(shí),還提供了常見問題的解決方案,正確配置Java環(huán)境對(duì)Java開發(fā)至關(guān)重要,是進(jìn)行Java編程的基礎(chǔ)2025-02-02
Spring Cache和EhCache實(shí)現(xiàn)緩存管理方式
這篇文章主要介紹了Spring Cache和EhCache實(shí)現(xiàn)緩存管理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06