SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码(3)

写在最后

为了这次面试，也收集了很多的面试题！

以下是部分面试题截图

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

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

4、编写axiosutils.js

在src目录下创建utils目录，并在utils目录创建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: ‘数据加载中’,

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

<el-menu default-active=“2” class=“el-menu-vertical-demo” router background-color=“#545c64” text-color=“#fff”

active-text-color=“#ffd04b”>

系统管理

用户管理

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目录下创建home目录，在home目录下创建home.vue

牛哄哄的柯南

10、编写user相关代码（前端核心逻辑代码、增删改查还有模糊查询，包括逻辑删除和物理删除）

在views目录下创建user目录，在home目录下创建index.vue和edit.vue

编写index.vue

<el-button type=“danger” icon=“el-icon-delete” circle @click=“batchdel”>

<el-button type=“primary” @click=“searchData”>查询

<el-button type=“primary” @click=“add”>添加

<el-table :data=“tableData” style=“width: 100% ;” stripe

@selection-change=“handleSelectionChange”>

正常

禁用中

<el-button size=“mini” @click=“edit(scope.row.userId)”>编辑

<el-button size=“mini” type=“danger” @click=“del(scope.row.userId)”>禁用

<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;”>

<UserEdit :showEdit.sync=“showEdit” @list=“list” :id=“id”>