欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

快速搭建SpringBoot+MyBatisPlus+Vue的前后端分离项目 - 前端篇:一键生成后端代码和封装结果集,实现增删改查及模糊搜索,是毕业设计的基础框架!

最编程 2024-01-30 17:02:23
...

后端篇


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


14.png 15.png


6、安装vuex-persistedstate


npm i -S vuex-persistedstate

16.png 17.png



开始编码


18.png


1、在根目录下添加vue.config.js文件

19.png

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
  }
}


5、在components目录下编写menu.vue