Vue2之axios在脚手架中的使用以及前后端交互

一、创建表smbms_user

CREATE TABLE `smbms_user`  (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `userCode` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '用户编码',
  `userName` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '用户名称',
  `userPassword` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT '0000000' COMMENT '用户密码',
  `gender` int NULL DEFAULT NULL COMMENT '性别（1:女、 2:男）',
  `birthday` datetime NULL DEFAULT NULL COMMENT '出生日期',
  `phone` varchar(15) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '手机',
  `address` varchar(30) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NULL DEFAULT NULL COMMENT '地址',
  `userRole` bigint NULL DEFAULT NULL COMMENT '用户角色（取自角色表-角色id）',
  `createdBy` bigint NULL DEFAULT NULL COMMENT '创建者（userId）',
  `creationDate` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `modifyBy` bigint NULL DEFAULT NULL COMMENT '更新者（userId）',
  `modifyDate` datetime NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 111 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_unicode_ci ROW_FORMAT = Dynamic;


--  向smbms_user表添加数据
INSERT INTO `smbms_user` VALUES (1, 'admin', '系统管理员', '1234567', 1, '1983-10-10 00:00:00', '13688889999', '北京市海淀区成府路207号', 1, 1, '2013-03-21 16:52:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (2, 'liming', '李明', '0000000', 2, '1983-12-10 00:00:00', '13688884457', '北京市东城区前门东大街9号', 2, 1, '2014-12-31 19:52:09', NULL, NULL);
INSERT INTO `smbms_user` VALUES (5, 'hanlubiao', '韩路彪', '0000000', 2, '1984-06-05 00:00:00', '18567542321', '北京市朝阳区北辰中心12号', 2, 1, '2014-12-31 19:52:09', NULL, NULL);
INSERT INTO `smbms_user` VALUES (6, 'zhanghua', '张华', '0000000', 1, '1983-06-15 00:00:00', '13544561111', '北京市海淀区学院路61号', 3, 1, '2013-02-11 10:51:17', NULL, NULL);
INSERT INTO `smbms_user` VALUES (7, 'wangyang', '王洋', '0000000', 2, '1982-12-31 00:00:00', '13444561124', '北京市海淀区西二旗辉煌国际16层', 3, 1, '2014-06-11 19:09:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (8, 'zhaoyan', '赵燕', '0000000', 1, '1986-03-07 00:00:00', '18098764545', '北京市海淀区回龙观小区10号楼', 3, 1, '2016-04-21 13:54:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (10, 'sunlei', '孙磊', '0000000', 2, '1981-01-04 00:00:00', '13387676765', '北京市朝阳区管庄新月小区12楼', 3, 1, '2015-05-06 10:52:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (11, 'sunxing', '孙兴', '0000000', 2, '1978-03-12 00:00:00', '13367890900', '北京市朝阳区建国门南大街10号', 3, 1, '2016-11-09 16:51:17', NULL, NULL);
INSERT INTO `smbms_user` VALUES (12, 'zhangchen', '张晨', '0000000', 1, '1986-03-28 00:00:00', '18098765434', '朝阳区管庄路口北柏林爱乐三期13号楼', 3, 1, '2016-08-09 05:52:37', 1, '2016-04-14 14:15:36');
INSERT INTO `smbms_user` VALUES (13, 'dengchao', '邓超', '0000000', 2, '1981-11-04 00:00:00', '13689674534', '北京市海淀区北航家属院10号楼', 3, 1, '2016-07-11 08:02:47', NULL, NULL);
INSERT INTO `smbms_user` VALUES (14, 'yangguo', '杨过', '0000000', 2, '1980-01-01 00:00:00', '13388886623', '北京市朝阳区北苑家园茉莉园20号楼', 3, 1, '2015-02-01 03:52:07', NULL, NULL);
INSERT INTO `smbms_user` VALUES (15, 'zhaomin', '赵敏1', '0000000', 1, '1992-01-01 00:00:00', '18099897657', '北京市昌平区天通苑3区12号楼', 2, 1, '2015-09-12 12:02:12', NULL, NULL);
INSERT INTO `smbms_user` VALUES (103, '1', '1', '1', 1, '2025-07-17 16:34:35', '1', '1', 1, 1, '2025-07-17 16:34:35', 1, '2025-07-17 16:34:35');
INSERT INTO `smbms_user` VALUES (104, '1', '1', '1', 1, '2025-07-17 16:35:57', '1', '1', 1, 1, '2025-07-17 16:35:57', 1, '2025-07-17 16:35:57');
INSERT INTO `smbms_user` VALUES (105, '1', '1', '1', 1, '2025-07-17 16:36:11', '1', '1', 1, 1, '2025-07-17 16:36:11', 1, '2025-07-17 16:36:11');
INSERT INTO `smbms_user` VALUES (109, '张三33', '李明娜那', NULL, 1, '2009-07-01 00:00:00', '18454652145', '还上课回访客户哭', 2, NULL, '2025-08-05 14:23:26', NULL, '2025-08-05 14:28:11');

二、后端使用springboot搭建项目

关于springboot的项目创建可以参考我之前的博客==> 创建springboot项目

注意: 上面我是基于sqpringboot写的。大家可以使用ssm或者javaweb进行搭建

2.0 项目结构目录如下

2.1 application.properties

#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.hsh.mybatis.entity
# 应用服务 WEB 访问端口
server.port=8080

# 数据库连接信息
spring.datasource.url=jdbc:mysql://localhost:3306/smbms?useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

2.2 pojo

2.2.1 user

package com.hsh.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.time.LocalDateTime;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private static final long serialVersionUID = -51406178192925231L;
    /**
     * 主键ID
     */
    private Long id;
    /**
     * 用户编码
     */
    private String userCode;
    /**
     * 用户名称
     */
    private String userName;
    /**
     * 用户密码
     */
    private String userPassword;
    /**
     * 性别（1:女、 2:男）
     */
    private Integer gender;
    /**
     * 出生日期
     */
    private LocalDateTime birthday;
    /**
     * 手机
     */
    private String phone;
    /**
     * 地址
     */
    private String address;
    /**
     * 用户角色（取自角色表-角色id）
     */
    private Long userRole;
    /**
     * 创建者（userId）
     */
    private Long createdBy;
    /**
     * 创建时间
     */
    private LocalDateTime creationDate;
    /**
     * 更新者（userId）
     */
    private Long modifyBy;
    /**
     * 更新时间
     */
    private LocalDateTime modifyDate;

}

2.2.2 RespResult

package com.hsh.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class RespResult {
    private int code;
    private String msg;
    private Object data;
    public static RespResult ok(Object data){
        return new RespResult(200,"操作成功",data);
    }
    public static RespResult error(String msg){
        return new RespResult(500,msg,null);
    }
}

2.3 mapper

package com.hsh.mapper;

import com.hsh.pojo.User;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserMapper {
    /**
     * 获取所有用户
     * @return 所有用户
     */
    @Select("select * from smbms_user")
    List<User> getAllUsers();
}

2.4 Service层

2.4.1 UserService

package com.hsh.service;

import com.hsh.pojo.User;
import org.springframework.stereotype.Service;

import java.util.List;

public interface UserService {
    public List<User> getAllUsers();
}

2.4.2 UserServiceImpl

package com.hsh.service.impl;

import com.hsh.mapper.UserMapper;
import com.hsh.pojo.User;
import com.hsh.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public List<User> getAllUsers() {
        List<User> allUsers = userMapper.getAllUsers();
        return allUsers;
    }
}

2.5 controller层

package com.hsh.controller;

import com.hsh.pojo.RespResult;
import com.hsh.pojo.User;
import com.hsh.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author xrkhy
 * @date 2025/8/13 21:39
 * @description
 */
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    @GetMapping("/getUserList")
    @CrossOrigin // 这个注解解决跨域问题。
    public RespResult getUserList(){
        List<User> users = userService.getAllUsers();
        System.out.println(users);
        return RespResult.ok(users);
    }

}

2.6 编写启动类

@MapperScan("com.hsh.mapper")

2.7 测试

打开网页输入http://127.0.0.1:8080/user

三、使用cli脚手架创建前端项目

新建项目

1. 检查版本
   node版本：20.18.0
@vue/cli版本：5.0.8
2. 新建文件夹，输入cmd回车打开命令行窗口
   
3. 命令行窗口：输入指令vue create 项目名
   

选择模块安装

vscode工具打开 初始化文件

删除src/assets文件下的所有内容

删除src/components文件下的所有内容

删除src/views文件下的所有内容

修改src/app.vue

<template>
  <div id="app">初始化成功</div>
</template>

<style lang="scss"></style>

修改src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

修改.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential', // Vue.js 相关规则
    'eslint:recommended', // ESLint 推荐规则
    'plugin:prettier/recommended' // Prettier 代码格式化规则
  ],
  parserOptions: {
    parser: '@babel/eslint-parser' // 使用 Babel 解析器
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境禁止 console
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境禁止 debugger
    'prettier/prettier': [
      // Prettier 配置
      'warn',
      {
        singleQuote: true, // 使用单引号
        semi: true, // 使用分号
        printwidth: 80, // 每行最大字符数
        trailingComma: 'none', // 不使用尾随逗号
        endOfLine: 'auto' // 自动换行
      }
    ],
    // Eslint配置如下
    // vue文件多单词命名
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index', 'Aa'] // 忽略的组件名称
      }
    ],
    //
    'vue/no-setup-props-destructure': 'off' // 关闭 setup props 解构警告
  }
};

如果报错 按两次crtl+s
第一次Eslint生效
第二次prettier生效

vscode运行项目

快捷键打开终端Ctrl + Shift + 反引号 打开终端。反引号是tab键上面那个
运行如下指令启动项目

npm run serve

运行结果如下

四、axios引入和使用

关于axios的语法讲解请看我之前的博客Vue2之axios的使用

安装

打开终端输入以下命名安装axios

npm install axios

新建src/utils/request.js文件

import axios from 'axios';
// 这里可以导入store，也可以不导入，根据需求来

const baseURL = 'http://localhost:8080';

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 5000
});

// 配置请求拦截器 即在请求之前做一些事情
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    // if (userStore.token) {
    //   config.headers.Authorization = userStore.token;
    // }
    return config;
  },
  (err) => Promise.reject(err)
);

// 配置响应拦截器 即在响应之后做一些事情
instance.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    // 这里的后端响应 res.data.code 的类型是int类型
    // 所以这里的===代表 数值相等且类型相等
    if (res.data.code === 200) {
      // console.log(111);
      return res.data;
    }
    // TODO 3. 处理业务失败 可使用ELementUI的Message组件提示
    alert(res.data.message || '服务异常');
    return Promise.reject(res.data);
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况  => 401权限不足 或者token过期 => 跳转到登录页
    if (err.response?.status === 401) {
      // ?. 允许你安全地访问一个可能为 null 或 undefined 的对象的嵌套属性或方法。
      // 如果问号前面的部分是 null 或 undefined，整个表达式不会抛出错误，而是直接返回 undefined。
      // push('/login');
      // 上面的跳转需要导入 import router from '@/stores';
    }

    // 错误的默认情况 => 只用给提示 可使用ELementUI的Message组件提示
    alert(err.response.data.message || '服务异常');
    return Promise.reject(err);
  }
);

export default instance;
export { baseURL };

新建 src/api/xxx.js

这里的xxx代表那个模块。分模块开发有助于维护。

import request from '@/utils/request';

export const userLoginService = () => {
  return request.post('/user/login', {});
};
export const userRegisterService = () => {
  return request.post('/user/register', {});
};

// 调用这个接口，获取用户列表
export const getUserListService = () => {
  return request.get('/user/getUserList');
};

在app.vue中使用

<template>
  <div id="app">{{ userList }}</div>
</template>

<script>
import { getUserListService } from '@/api/user.js';
export default {
  name: 'App',
  data() {
    return {
      userList: []
    };
  },
  methods: {
    async getUserList() {
      const res = await getUserListService();
      // console.log(res);
      this.userList = res.data;
    }
  },
  mounted() {
    this.getUserList();
  }
};
</script>

<style lang="scss"></style>

注意

解决页面出现webpack-dev-server 的 overlay(错误遮罩层)

如果你的页面登录失败，在request.js文件中的axios的全局拦截器的返回的return Promise.reject(res.data);会导致页面出现如下错误。 webpack-dev-server 的 overlay（错误遮罩层）在页面上显示

在vue.config.js中修改如下配置，记得重启否则不生效。

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    client: {
      overlay: false
    }
  }
});

解决控制台的Uncaught (in promise)

这个也是由于在request.js文件中的axios的全局拦截器的返回的return Promise.reject(res.data);造成的。
解决办法：在main.js中添加如下配置

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/assets/css/base.css";

// 在应用的最开始处添加
window.addEventListener("unhandledrejection", function (event) {
  event.preventDefault();
  if (event.reason && event.reason.isAxiosError) {
    event.preventDefault();
  }
});

Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount("#app");