springboot+vue前后端分离项目-项目搭建3

1.使用axios与后台交互，安装axios，npm i axios -S

 2.创建request.js，封装axios方法，在HomeView里完善save方法，将form传到后台，测试发现报错，出现跨域问题

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    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

 

 

 3.解决跨域问题，vue（根目录）下创建vue.config.js配置文件

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

 

 重启vue项目，新的配置文件才能生效，

一开始报错/api转换到http://localhost:9090失败，排查，后台不启动就无法成功转换

后来报错id没有默认值，插入失败，将数据库中的id也配置上自增，从1开始，之后插入成功

 

 5.配置后台查询功能，增加hutool工具依赖，增加密码值默认，增加get请求

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.26</version>
</dependency>

 效果：

 6.前台增加查询功能

优化查询和分页显示代码

增加load方法，页面创建时调用

 效果：

 7.实现编辑功能

后台：

@PutMapping
public Result<?> update(@RequestBody User user){
    userMapper.updateById(user);
    return Result.success();
}

前台：编辑方法复用新增方法的dialog，改造save方法，确定后提示成功，关闭dialog，刷新查询数据

 

 

 

 8.分页改变页码和每页个数生效，只需要这两个方法下重新load就行，因为分页触发时v-model已经绑定currentPage和pageSize，load的参数也会跟着变化

 

效果

  9.增加删除功能

后台：

 前台：

 

 效果：