AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Axios与Springboot+Mysql通信

2022-01-17 535
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
日志服务 SLS，月写入数据量 50GB 1个月
简介： Axios与Springboot+Mysql通信

Axios通信

一、后端接口SpringBoot+Mysql搭建

项目目录

image.png

maven依赖pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.sxau</groupId>
    <artifactId>sringbootjwt</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>sringbootjwt</name>
    <description>token</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--    mysql-connector-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--        mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.0</version>
        </dependency>
        <!--        lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!-- p6spy 打印sql分析依赖-->
        <dependency>
            <groupId>p6spy</groupId>
            <artifactId>p6spy</artifactId>
            <version>3.9.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>
        <!--        代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.2</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>
application.yaml
server:
  port: 10086
#数据库配置
spring:
  datasource:
    username: root
    password: 123456
    #p6spy 驱动url
    url: jdbc:p6spy:mysql://localhost:3306/mybatis_plus?userSSL=false&useUnicode=true&CharacterEncoding=utf-8&serverTimezone=GMT%2B8
    #    p6spy 驱动
    driver-class-name: com.p6spy.engine.spy.P6SpyDriver
#  profiles:
#    active: dev
#mybatis-plus日志配置文件
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      logic-delete-field: flag  # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
spy.properties
#3.2.1以上使用
modulelist=com.baomidou.mybatisplus.extension.p6spy.MybatisPlusLogFactory,com.p6spy.engine.outage.P6OutageFactory
# 自定义日志打印
logMessageFormat=com.sxau.sringbootjwt.utils.P6SpySqlLog
#日志输出到控制台
appender=com.baomidou.mybatisplus.extension.p6spy.StdoutLogger
# 使用日志系统记录 sql
#appender=com.p6spy.engine.spy.appender.Slf4JLogger
# 设置 p6spy driver 代理
deregisterdrivers=true
# 取消JDBC URL前缀
useprefix=true
# 配置记录 Log 例外,可去掉的结果集有error,info,batch,debug,statement,commit,rollback,result,resultset.
excludecategories=info,debug,result,commit,resultset
# 日期格式
dateformat=yyyy-MM-dd HH:mm:ss
# 实际驱动可多个
#driverlist=org.h2.Driver
# 是否开启慢SQL记录
outagedetection=true
# 慢SQL记录标准 2 秒
outagedetectioninterval=2
利用代码生成器生成对应的文件
package com.sxau.sringbootjwt;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.po.TableFill;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import java.util.ArrayList;
// 代码自动生成器
public class test {
    public static void main(String[] args) {
        // 需要构建一个 代码自动生成器 对象
        AutoGenerator mpg = new AutoGenerator();
        // 配置策略
        // 1、全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir(projectPath+"/src/main/java/SpringBoot主启动项目名");
        gc.setAuthor("张晟睿"); gc.setOpen(false);
        gc.setFileOverride(false);
        // 是否覆盖
        gc.setServiceName("%sService");
        // 去Service的I前缀
        gc.setIdType(IdType.ID_WORKER);
        mpg.setGlobalConfig(gc);
        //2、设置数据源
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/mybatis_plus?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8");
                dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("123456");
        dsc.setDbType(DbType.MYSQL);
        mpg.setDataSource(dsc);
        //3、包的配置
        PackageConfig pc = new PackageConfig();
        //只需要改实体类名字 和包名 还有 数据库配置即可
        pc.setModuleName("");
        pc.setParent("com.sxau");
        pc.setEntity("entity");
        pc.setMapper("mapper");
        pc.setService("service");
        pc.setController("controller");
        mpg.setPackageInfo(pc);
        //4、策略配置
        StrategyConfig strategy = new StrategyConfig();
        //在此处添加包名
        strategy.setInclude("user");
        // 设置要映射的表名
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
        strategy.setEntityLombokModel(true);
        // 自动lombok；
        strategy.setLogicDeleteFieldName("deleted");
        // 自动填充配置
        TableFill gmtCreate = new TableFill("gmt_create", FieldFill.INSERT);
        TableFill gmtModified = new TableFill("gmt_modified",FieldFill.INSERT_UPDATE);
        ArrayList<TableFill> tableFills = new ArrayList<>();
        tableFills.add(gmtCreate); tableFills.add(gmtModified);
        strategy.setTableFillList(tableFills);
        // 乐观锁
        strategy.setVersionFieldName("version");
        strategy.setRestControllerStyle(true);
        strategy.setControllerMappingHyphenStyle(true);
        // localhost:8080/hello_id_2
        mpg.setStrategy(strategy);
        mpg.execute(); //执行
    }
}
UserController.java
package com.sxau.sringbootjwt.controller;
import com.alibaba.fastjson.JSON;
import com.sxau.sringbootjwt.mapper.UserMapper;
import com.sxau.sringbootjwt.pojo.User;
import com.sxau.sringbootjwt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author 张晟睿
 * @since 2021-07-05
 */
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    @CrossOrigin
    @RequestMapping("/getAllUser")
    public String getAllUser(){
        Map<String,Object> resultData=new HashMap<String, Object>();
        List<User> users = userService.selectAllUser();
        resultData.put("ret","1");
        resultData.put("data",users);
        resultData.put("msg","成功");
        return JSON.toJSONString(resultData);
    }
    @CrossOrigin
    @RequestMapping("/findUserById")
    public String findUserById(Integer id){
        Map<String,Object> resultData=new HashMap<String, Object>();
        User userById = userService.findUserById(id);
        resultData.put("ret","1");
        resultData.put("data",userById);
        resultData.put("msg","成功");
        return JSON.toJSONString(resultData);
    }
    @RequestMapping("/findUserByAge")
    public String findUserByAge(Integer age){
        Map<String,Object> resultData=new HashMap<String, Object>();
        List<Map<String, Object>> userListAge = userService.findUserListAge(age);
        resultData.put("ret","1");
        resultData.put("data",userListAge);
        resultData.put("msg","成功");
        return JSON.toJSONString(resultData);
    }
    @RequestMapping("/hello")
    public String hello(){
        return "hello,springboot";
    }
}
UserMapper.java
package com.sxau.sringbootjwt.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sxau.sringbootjwt.pojo.User;
public interface UserMapper extends BaseMapper<User> {
}
User.java
package com.sxau.sringbootjwt.pojo;
import com.baomidou.mybatisplus.annotation.*;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    //主键自增配合 数据库主键自增使用
    @TableId(type = IdType.AUTO)
    private Long id;
    private String name;
    private int age;
    private String email;
    @TableLogic
    private Integer deleted;    //逻辑删除
    @TableField(fill = FieldFill.INSERT)
    private Date createTime;   //开始时间
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date updateTime;  //更新时间
}
UserService.java
package com.sxau.sringbootjwt.service;
import com.sxau.sringbootjwt.pojo.User;
import java.util.List;
import java.util.Map;
/**
 * <p>
 *  服务类
 * </p>
 *
 * @author 张晟睿
 * @since 2021-07-05
 */
public interface UserService {
    List<User> selectAllUser();
    User findUserById(Integer id);
    List<Map<String, Object>> findUserListAge(Integer age);
}
UserServiceImpl.java
package com.sxau.sringbootjwt.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.sxau.sringbootjwt.mapper.UserMapper;
import com.sxau.sringbootjwt.pojo.User;
import com.sxau.sringbootjwt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
/**
 * <p>
 *  服务实现类
 * </p>
 *
 * @author 张晟睿
 * @since 2021-07-05
 */
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserMapper userMapper;
    @Override
    public List<User> selectAllUser() {
        List<User> users = userMapper.selectList(null);
        return users;
    }
    @Override
    public User findUserById(Integer id) {
        User user = userMapper.selectById(id);
        return user;
    }
    @Override
    public List<Map<String, Object>> findUserListAge(Integer age) {
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper.gt("age",age);
        List<Map<String, Object>> maps = userMapper.selectMaps(wrapper);
        return maps;
    }
}
输出格式化P6SpySqlLog.java
package com.sxau.sringbootjwt.utils;import com.p6spy.engine.spy.appender.MessageFormattingStrategy;import java.text.SimpleDateFormat;import java.util.Date;public class P6SpySqlLog implements MessageFormattingStrategy {    private SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS");    @Override    public String formatMessage(int connectionId, String now, long elapsed, String category, String prepared, String sql, String s4) {        return !"".equals(sql.trim()) ? this.format.format(new Date()) + " | cost " + elapsed + " ms | " + category + " | connection " + connectionId + "\n " + sql + ";" : "";    }}
SpringBoot主启动类
package com.sxau.sringbootjwt;import org.mybatis.spring.annotation.MapperScan;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.context.annotation.ComponentScan;@MapperScan("com.sxau.sringbootjwt.mapper")//@ComponentScan("com.sxau.sringbootjwt.handle")@SpringBootApplication(scanBasePackages = "com")public class SringbootjwtApplication {    public static void main(String[] args) {        SpringApplication.run(SringbootjwtApplication.class, args);    }}
数据库表设计

image.png

插入数据

    INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (1, 'Jone', 18, 'test1@baomidou.com', 0, NULL, NULL);
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (2, 'Jack', 20, 'test2@baomidou.com', 0, NULL, NULL);
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (3, 'Tom', 28, 'test3@baomidou.com', 0, NULL, NULL);
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (4, 'Sandy', 21, 'test4@baomidou.com', 0, NULL, NULL);
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (5, 'Billie', 24, 'test5@baomidou.com', 0, NULL, NULL);
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (201916129, '张三', 20, '1016942589@qq.com', 1, NULL, '2021-07-03 16:15:38');
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (201916137, '李丽1', 20, '1016942589@qq.com', 0, '2021-07-03 18:21:56', '2021-07-04 11:49:51');
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (201916141, '渣渣辉1', 50, '1016942589@qq.com', 0, '2021-07-04 14:49:04', '2021-07-04 14:49:04');
        INSERT INTO `user` (`id`, `name`, `age`, `email`, `deleted`, `create_time`, `update_time`) VALUES (201916142, '渣渣辉2', 10, '1016942589@qq.com', 0, '2021-07-04 14:49:48', '2021-07-04 14:49:48');

测试后端接口

image.png

image.png

image.png

二、axios基本使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<!--使用默认方式发送无参请求--> 
<script>    
axios({url: 'http://localhost:10086/user/getAllUser'}).then(res=>{
console.log(res);
})  
</script>

axios发送get请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--使用get方式发送无参请求-->
<script>
  axios({
    url: 'http://localhost:10086/user/getAllUser',
    method: 'get'
  }).then(res=>{
    console.log(res);
  })
</script>
第一种：使用get方式发送有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--使用get方式发送有参请求-->
    <script>
      axios({
        url: 'http://localhost:10086/user/findUserById?id=1',
        method: 'get'
      }).then(res=>{
        console.log(res);
      })
</script>
第二种：使用get方式发送有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--使用get方式发送有参请求-->
    <script>
      axios({
        url: 'http://localhost:10086/user/findUserById',
        method: 'get',
        params:{
          id: '1'
        }
      }).then(res=>{
        console.log(res);
      })
    </script>

axios发送post请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--使用post方式发送无参请求-->
<script>
axios({url: 'http://localhost:10086/user/getAllUser',method:'post'})
.then(res=>{
console.log(res);
})
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--使用post方式发送有参请求--> 
<script>    
axios({url: 'http://localhost:10086/user/findUserByAge',      data:{age:'20'},
method: 'post'
}).then(res=>{
console.log(res);
})
</script>

后台控制器接收到的name null axios使 用post携带参数请求默认使用application/ json

解决方式- : params属性进行数据的传递

解决方式二: "name=张三”

解决方式三:服务器端给接收的参 数加上@reques tBody

三、axios简写使用

<!--使用get方式发送单个参请求-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   
<script>      
axios.get('http://localhost:10086/user/findUserById',{params:{id:1}})
.then(res=>{
console.log(res);
}).catch(err=>{
console.log("timeout");       
console.log(err);     
})
</script>
<!--使用get方式发送多个参数请求-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   
<script>      
  axios.get('http://localhost:10086/user/findUserById',{params:
  {id:1,name:zhangsan}})
  .then(res=>{        
  console.log(res);     
  }).catch(err=>{       
  console.log("timeout");       
  console.log(err);     
  })
</script>

推荐使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>    
axios.post('http://localhost:10086/user/findUserById','id=1')
.then(res={     
console.log(res);   
}).catch(err=>{
console.log("timeout");     
console.log(err);   
})
</script>
//发送post请求携带参数  直接使用'id=1&name=jack'
//这种情况下通过data传值  值能传递过去 但是拿到的值为not found
//使用data传递数据后台需要将axi so自动装换的json数据装换为java对象//修改后台代码
接受参数用@requestBody注解
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      axios.post('http://localhost:10086/user/findUserById',{id: 1}).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log("timeout");
        console.log(err);
      })
</script>

四、axios并发

第一种方式
//通过并发拿到all里面的两个get请求的数组
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      axios.all([
        axios.get('http://localhost:10086/user/getAllUser'),
        axios.get('http://localhost:10086/user/findUserByAge',{params:{age:20}})
      ]).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log("timeout");
        console.log(err);
      })
</script>

image.png

第二种方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      axios.all([
        axios.get('http://localhost:10086/user/getAllUser'),
        axios.get('http://localhost:10086/user/findUserByAge',{params:{age:20}})
      ]).then(
        axios.spread((res1,res2)=>{
          console.log(res1);
          console.log(res2);
        })
      ).catch(err=>{
        console.log("timeout");
        console.log(err);
      })
    </script>

image.png

五、全局配置

<script>
    axios.defaults.baseURL='htttp://localhost:10086/user';
    axios.defaults.timeout=5000;
    axios.get('getAllUser').then(res=>{
      console.log(res);
    });
    axios.post('findUserById','id=1').then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
</script>


文章标签：
云数据库 RDS MySQL 版
日志服务
Java
Maven
数据格式
数据库
JSON
关键词：
Spring boot MySQL
Spring Boot axios
云数据库 RDS MySQL 版springboot
Spring Boot通信
axios springboot
相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL，然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
java厂长
目录
相关文章
高端源码库
|
21天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码，采用SpringBoot、Vue、MySQL技术开发
基于B/S架构，采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统，适用于三甲医院，支持二次开发。该系统能自动监测全院患者药物不良反应，通过移动端和PC端实时反馈，提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块，确保精准、高效地处理ADR事件。
高端源码库
36 1
一位隐者
|
26天前
|
Java 关系型数据库 MySQL
如何将Spring Boot + MySQL应用程序部署到Pivotal Cloud Foundry (PCF)
如何将Spring Boot + MySQL应用程序部署到Pivotal Cloud Foundry (PCF)
一位隐者
47 5
刘大猫.
|
1月前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
刘大猫.
57 8
刘大猫.
|
1月前
|
SQL 前端开发 关系型数据库
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
刘大猫.
66 9
刘大猫.
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
刘大猫.
58 2
刘大猫.
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
刘大猫.
40 0
刘大猫.
|
1月前
|
关系型数据库 MySQL Java
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
刘大猫.
34 0
众所周知
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
190 1
众所周知
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，创建并配置 Spring Boot 项目，实现后端 API；然后，使用 Ant Design Pro Vue 创建前端项目，配置动态路由和菜单。通过具体案例，展示了如何快速搭建高效、易维护的项目框架。
众所周知
119 62
疯狂的猿
|
13天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统，基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化，提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合，但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI，既能利用Vue的快速开发优势，
疯狂的猿
78 13

热门文章

最新文章

  • 1
    MySQL数据库下载安装教程（Windows&Linux）
  • 2
    MySQL常用函数：IF、SUM等用法
  • 3
    Python处理数据库：MySQL与SQLite详解 | python小知识
  • 4
    从新手到高手：彻底掌握MySQL表死锁
  • 5
    MySQL事务隔离级别及默认隔离级别的设置
  • 6
    Liunx部署java项目Tomcat、Redis、Mysql教程
  • 7
    Mysql索引：深入理解InnoDb聚集索引与MyisAm非聚集索引
  • 8
    MySQL导入.sql文件后数据库乱码问题
  • 9
    MySQL的插件式认证到底是干什么的？
  • 10
    数据库数据恢复—MYSQL数据库文件损坏的数据恢复案例
  • 1
    springboot 启动原理、启动过程、启动机制的介绍
    523
  • 2
    springboot实现文件防盗链设计
    129
  • 3
    Spring Boot中一般如何使用线程池？
    767
  • 4
    Spring Boot 源码面试知识点
    103
  • 5
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    256
  • 6
    深入探索Spring Boot Web应用源码及实战应用
    111
  • 7
    ruoyi-nbcio从spring2.7.18升级springboot到3.1.7，java从java8升级到17（二）
    360
  • 8
    springboot数据库回滚失败原因
    64
  • 9
    springboot全局自定义异常
    44
  • 10
    springBoot+rabbit消息获取和消息确认
    129

    • 相关课程

    更多
  • 云数据库MySQL版快速上手教程
  • 阿里云云原生数据仓库AnalyticDB MySQL版 使用教程
  • MySQL实战进阶
  • Springboot项目云开发快速迁移
  • 数据库及SQL/MySQL基础
  • 云数据库MySQL快速入门

    • 相关电子书

    更多
  • One Box： 解读事务与分析一体化数据库 HybridDB for MySQL
  • One Box：解读事务与分析一体化数据库HybridDB for MySQL
  • 如何支撑HTAP场景-HybridDB for MySQL系统架构和技术演进

    • 相关实验场景

    更多
  • MySQL引擎及架构优化
  • 基于EBS部署高性能的MySQL服务
  • 5分钟上手Flink MySQL连接器
  • 云端MySQL的安装及应用
  • 手动部署MySQL数据库（Alibaba Cloud Linux 2）
  • 手动部署MySQL数据库（CentOS 7）

    • 推荐镜像

    更多
  • mysql
  • mariadb
  • postgresql
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)