快速搭建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、安装 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, //关闭代码格式化校验工具 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目录创建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 } }