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

文章目录

一、创建表smbms_user
二、后端使用springboot搭建项目
- [2.0 项目结构目录如下](#2.0 项目结构目录如下)
- [2.1 application.properties](#2.1 application.properties)
- [2.2 pojo](#2.2 pojo)
- - [2.2.1 user](#2.2.1 user)
  - [2.2.2 RespResult](#2.2.2 RespResult)
- [2.3 mapper](#2.3 mapper)
- [2.4 Service层](#2.4 Service层)
- - [2.4.1 UserService](#2.4.1 UserService)
  - [2.4.2 UserServiceImpl](#2.4.2 UserServiceImpl)
- [2.5 controller层](#2.5 controller层)
- [2.6 编写启动类](#2.6 编写启动类)
- [2.7 测试](#2.7 测试)
三、使用cli脚手架创建前端项目
- 新建项目
- 选择模块安装
- [vscode工具打开初始化文件](#vscode工具打开初始化文件)
- vscode运行项目
四、axios引入和使用
- 安装
- 新建src/utils/request.js文件
- [新建 src/api/xxx.js](#新建 src/api/xxx.js)
- 在app.vue中使用

一、创建表smbms_user

sql 复制代码

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

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

java 复制代码

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

java 复制代码

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

java 复制代码

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

java 复制代码

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

java 复制代码

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层

java 复制代码

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脚手架创建前端项目

新建项目

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

选择模块安装

vscode工具打开初始化文件

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

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

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

修改src/app.vue

html 复制代码

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

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

修改src/router/index.js

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文件

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键上面那个

运行如下指令启动项目

bash 复制代码

npm run serve

运行结果如下

四、axios引入和使用

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

安装

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

bash 复制代码

npm install axios

新建src/utils/request.js文件

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代表那个模块。分模块开发有助于维护。

js 复制代码

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中使用

html 复制代码

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

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

文章目录

一、创建表smbms_user

二、后端使用springboot搭建项目

2.0 项目结构目录如下

2.1 application.properties

2.2 pojo

2.2.1 user

2.2.2 RespResult

2.3 mapper

2.4 Service层

2.4.1 UserService

2.4.2 UserServiceImpl

2.5 controller层

2.6 编写启动类

2.7 测试

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

新建项目

选择模块安装

vscode工具打开 初始化文件

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

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

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

修改src/app.vue

修改src/router/index.js

修改.eslintrc.js文件

vscode运行项目

四、axios引入和使用

安装

新建src/utils/request.js文件

新建 src/api/xxx.js

在app.vue中使用

vscode工具打开初始化文件