SpringBoot+Vue项目启动

1.项目部署

安装脚手架

npm install -g @vue/cli 全局安装

创建项目

命令行创建：vue create

图形界面创建： vue ui 可进行安装插件的修改

Idea编译器配置

Add Configuration中选择package.json并添加npm run

在package.json中的scripts中的serve中添加--open后，运行自动打开页面

 

2.项目编码

下载与引入ElementPlus

终端下载：npm install element-plus --save

页面引入：在main.js中根据官网代码引入

vue引入components

export default{
	name:"Layout",
	components:{
		Header,
		Aside
	}
}

设置合适的长度

min-height:calc(100vh-50px)

页面架构

App.vue总体结构中规定主体内容区 views文件夹中Home.vue etc.

 

3.后台搭建

start.spring.io 可视化创建 jdk8

添加依赖： Web+MySQL Driver+Lombok

工程中右键创建maven，下一步创建文件夹的maven工程，并将demo.zip文件夹中的src和pom复制到此文件夹中

后台配置启动端口

springboot——src——resources——application.properties

server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/springboot-vue?useUnicode=true
spring.datasource.username=root
spring.datasource.password=rootroot

 

4.后台架构

文件夹名称	作用
common	插件配置
controller	接口 对数据库的操作 前后台数据交互
entity	实体类
mapper	interface

·common文件夹

分页插件

安装依赖

com.example.demo-common-MybatisPlusConfig

Mybatis核心功能-分页插件 见官网

结果插件

Result是返回给前台的一个包装类，后台返回给前台一般是一个json。code成功or失败，json定义为T范型，任何数据类型都可以用。

·controller文件夹

一般是controller中引入service，service中引入mapper

·entity文件夹

·mapper文件夹

5.前后台数据交互

axios数据交互封装

cd vue
npm install axios -S

vue - src - utils - request.js 工具类封装

import axios from 'axios'

const request = axios.create({
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

跨域请求

8080->9090 前段->后台

vue->vue.config.js

module.exports={
  devServer:{
    port:9876,//前段端口改为了9876
    proxy:{
      '/api':{
        target:'http://localhost:9090',//目标访问到9090
        changeOrigin:true,
        pathRewrite:{
          '/api':''
        }
      }
    }
  }
}