当前位置： 首页 > news >正文

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

news 2025/8/31 6:17:56

文章目录

  • 一、创建表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中使用

一、创建表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 {@Autowiredprivate UserMapper userMapper;@Overridepublic 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 {@Autowiredprivate 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>

在这里插入图片描述

http://www.dtcms.com/a/358330.html

相关文章：

  • RabbitMQ 和 Kafka
  • 函数（2）
  • 并发编程——08 Semaphore源码分析
  • 免费在线图片合成视频工具 ，完全免费
  • 文件夹命名软件，批量操作超简单
  • 美团8-30:编程题
  • 深入解析前缀和算法：原理、实现与应用
  • 医疗AI时代的生物医学Go编程：高性能计算与精准医疗的案例分析(六)
  • react组件
  • C++优先级队列priority_queue的模拟实现
  • Trailing Zeros (计算 1 ~ n 中质因子 p 的数量)
  • Java全栈开发面试实战：从基础到高并发的全面解析
  • Redis数据类型概览：除了五大基础类型还有哪些？
  • leetcode643. 子数组最大平均数 I
  • AI-调查研究-65-机器人 机械臂控制技术的前世今生：从PLC到MPC
  • vscode+cmake+mingw64+opencv环境配置
  • wpf之依赖属性
  • 具有类人先验知识的 Affordance-觉察机器人灵巧抓取
  • C++_多态和虚构
  • 卡片一放，服务直达！实现信息零层级触达
  • Python实现京东商品数据自动化采集的实用指南
  • （双指针）Leetcode283.移动零-替换数字类别+Leetcode15. 三数之和
  • UI前端大数据可视化实战策略：如何设计符合用户认知的数据可视化界面？
  • 【计算机网络】HTTP是什么？
  • Ansible Playbook 调试与预演指南：从语法检查到连通性排查
  • 一体化步进伺服电机在汽车线束焊接设备中的应用案例
  • MongoDB 源码编译与调试：深入理解存储引擎设计 内容详细
  • HarmonyOS元服务开发
  • 深入解析HarmonyOS：UIAbility与Page的生命周期协同
  • TensorFlow 面试题及详细答案 120道（71-80）-- 性能优化与调试