SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码(3)
写在最后
为了这次面试，也收集了很多的面试题！
以下是部分面试题截图
需要这份系统化的资料的朋友，可以点击这里获取
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-table :data=“tableData” style=“width: 100% ;” stripe
@selection-change=“handleSelectionChange”>
正常
禁用中
编辑
禁用
<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;”>
