Vue+springboot系统快速搭建管理系统

今天主要介绍如何利用 Vue 搭建前端，利用 Springboot 搭建后端进行系统的研发，会从需要的研发工具以及涉及到的框架，配置，进行讲解。

前端（VUE）

环境搭建

如果只是简单的应用可以直接通过引用的方式接入 vue.js，目前直接利用 NPM 进行安装，安装参考：

https://cn.vuejs.org/v2/guide/installation.html#NPM

安装完 Vue 之后，还需要再安装其他几个框架

Vuex，用于共享状态管理，安装：https://vuex.vuejs.org/zh/installation.html
vue-router，用于页面路由管理，页面跳转会比较方便，安装：https://router.vuejs.org/zh/installation.html
axios，网络加载库，参考：http://www.axios-js.com/
vuetify，ui 组件库，安装：https://vuetifyjs.com/en/getting-started/installation/

在已有的项目中直接 npm install 试试

开发工具

开发工具使用的 Visual Studio Code，官网：https://code.visualstudio.com/

安装插件：Vetur，Axios Snippets

Vetur 用于支持 Vue 框架语言，增强代码提示，提高编码效率；
Axios Snippets 用于支持 axios 代码提示，提高编码效率。

跨域配置

利用 axios 进行网络加载时，因前后端分离，会出现跨域问题，详细可以去查看浏览器的同源策略，那前端如何配置解决跨域问题呢？通过配置 vue.config.js 文件如下：

// 区分开发环境和线上环境
const idc = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
    open: false, //是否自动弹出浏览器页面
    host: "localhost",
    port: '8080',
    https: false,
    hotOnly: false,
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8800/api', //API服务器的地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
  }
}

其中 proxy 的配置会把 /api 的请求转换到 target 进行请求，这样就可以跨域问题。

运行

当以上环境准备完成之后，通过命令行到工程根目录执行： npm run serve ，这样项目就可以跑起来了

Vue+springboot系统快速搭建管理系统

文章目录

前端（VUE）

环境搭建

开发工具

跨域配置

运行

后端(springboot+mybatis)

环境搭建

开发工具