html小Demo: js调用java后端提供的接口

最新推荐文章于 2021-11-25 21:02:13 发布
最新推荐文章于 2021-11-25 21:02:13 发布
阅读量7.7k 收藏 42
点赞数 6
分类专栏： Vue学习 文章标签： java javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daxiandan/article/details/108041749
版权

文章目录

html小Demo: js调用java后端提供的接口

  • 描述：springboot提供接口，ajax调用调用接口，html显示页面
  • 今晚困了，不知道写不写得完，有参的还没写，先放个未完成版的。
  • 2020/08/22 填上了上周的坑。使用原生ajax还是有些不太满意，使用了jQuery。只需在html中引入两个相应的js文件。那两个js文件的代码太长了，不能往博客上贴，我直接传GitHub了。于是干脆全部代码都扔GitHub算了。
  • WebDemo前后端代码

html常用的一些标签（初级版）以及对html的一些理解的笔记

  • 参考博客：

    html常用标签整理

  • <!doctype html>声明为html5文件，必须是html文档的第一行，在<html>标签之前;

  • <html>、</html>是文档开始和结束的标记,是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body);

  • <head>、</head>定义HTML文档开头部分,内容不会在浏览器窗口显示,包含文档元（meta）数据，配置信息等，是给浏览器看的;

  • <title>、</title>定义了网页标题，在浏览器标题栏显示（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）;

    • 这个标签修改的是浏览器标题栏,就是地址栏上面那个。改了之后ctrl+s，标题栏会变
      在这里插入图片描述

  • <body>、</body>之间的内容是可见的网页主体内容;

  • 注意：中文网页需要使用 <meta charset=“utf-8”> 声明编码，否则会出现乱码;有些浏览器是gbk，需手动设置为 <meta charset=“gbk”>；

head常用标签

  • 不是很懂，先放着吧。看着上面写的应该差不多了。

  • meta标签：(忽然看到这里有一个关于http头的说明，就是Header，这个在和后端交互中是用到的，先写下来吧)

    • <meta>元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词；
    • 标签位于文档的头部，不包含任何内容,提供的信息用户是看不见的；
    • meta标签组成：
      • http-equiv属性和name属性：
      • http-equiv属性：相当于http的文件头作用，向浏览器传回一些有用的信息，正确显示网页内容，与之对应的属性值content，content中的内容是各个参数的变量值；
      • 至于怎么用，后面用到再查，先知道在这配置就行了。

  • 对了，还有一个很重要的。html要定义相应的js，不然去哪儿调用接口呀。

    • 使用<script></script>标签

    • eg.

      <script type="text/javascript" src="test.js"></script>
body常用标签

  • 先记几个现在用到的

  • <b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

  • <p>段落标签</p> #独占一个段落

  • <h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

  • <!--换行-->
<br>

  • <!--水平线--><hr> #就是单独个一个水平线

JavaScript

Java springboot

  • 也没什么好说的，提供了一个不需要参数的接口，http方法是GET；和一个需要参数的接口，http方法是POST
  • 放一个IDEA创建一个springboot项目的链接（用eclipse的自查教程）：
    idea新建springboot项目
  • 随便找的一篇博客，如果要深入学习的话，自己查一下其他资料和视频。另外创建时可以用这个地址，会更快
    在这里插入图片描述

代码

java后端：
jdk 1.8
IDEA
springboot 2.x
  • package com.chenxp.webdemo.Utils.JsonUtils
package com.chenxp.webdemo.Utils;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.util.List;

/**
 * @Description:
 * @author: chenxp
 * @date: 2020/8/17 14:29
 * json工具类
 */
public class JsonUtils {
    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 响应业务状态
     *  200：表示成功
     *  400：表示错误，错误信息在msg字段中
     *  501：bean验证错误，不管多少个错误都以map形式返回
     *  502：拦截器拦截到用户token出错
     *  555：异常抛出信息
     */
    private Integer status;

    // 响应消息
    private String msg;

    // 响应中的数据
    private Object data;


    public static JsonUtils build(Integer status, String msg, Object data) {
        return new JsonUtils(status, msg, data);
    }

    public static JsonUtils ok(Object data) {
        return new JsonUtils(data);
    }
    public static JsonUtils ok() {
        return new JsonUtils(null);
    }

    public static JsonUtils errorMsg(String msg) {
        return new JsonUtils(400, msg, null);
    }

    public static JsonUtils errorMap(Object data) {
        return new JsonUtils(501, "error", data);
    }

    public static JsonUtils errorTokenMsg(String msg) {
        return new JsonUtils(502, msg, null);
    }

    public static JsonUtils errorException(String msg) {
        return new JsonUtils(555, msg, null);
    }

    public JsonUtils() {

    }


    public JsonUtils(Integer status, String msg, Object data) {
        this.status = status;
        this.msg = msg;
        this.data = data;
    }
    public JsonUtils(Object data) {
        this.status = 200;
        this.msg = "OK";
        this.data = data;
    }


    /**
     * @Author chenxp
     * @Description 将json结果集转化为JsonUtils对象
     *     		    需要转换的对象是一个类
     * @Date 14:51 2020/8/17
     * @Param
     * @return
     */
    public static JsonUtils formatToPojo(String jsonData, Class<?> clazz) {
        try {
            if (clazz == null) {
                return MAPPER.readValue(jsonData, JsonUtils.class);
            }
            JsonNode jsonNode = MAPPER.readTree(jsonData);
            JsonNode data = jsonNode.get("data");
            Object obj = null;
            if (clazz != null) {
                if (data.isObject()) {
                    obj = MAPPER.readValue(data.traverse(), clazz);
                } else if (data.isTextual()) {
                    obj = MAPPER.readValue(data.asText(), clazz);
                }
            }
            return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
        } catch (Exception e) {
            return null;
        }
    }

    /**
     * @Author chenxp
     * @Description 没有object对象的转化
     * @Date 14:52 2020/8/17
     * @Param
     * @return
     */
    public static JsonUtils format(String json) {
        try {
            return MAPPER.readValue(json, JsonUtils.class);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * @Author chenxp
     * @Description //Object是集合转化
     *          	   需要转换的对象是一个list
     * @Date 14:53 2020/8/17
     * @Param
     * @return
     *
     */
    public static JsonUtils formatToList(String jsonData, Class<?> clazz) {
        try {
            JsonNode jsonNode = MAPPER.readTree(jsonData);
            JsonNode data = jsonNode.get("data");
            Object obj = null;
            if (data.isArray() && data.size() > 0) {
                obj = MAPPER.readValue(data.traverse(),
                        MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
            }
            return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
        } catch (Exception e) {
            return null;
        }
    }

    public Boolean isOK() {
        return this.status == 200;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

}
  • package com.chenxp.webdemo.Utils.WebAppConfigurer ;
package com.chenxp.webdemo.Utils;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * @Description:
 * @author: chenxp
 * @date: 2020/8/16 19:02
 解决跨域问题 配置类
 */
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE","OPTIONS")
                .maxAge(3600);
    }
}
  • package com.chenxp.webdemo.Utils.SwaggerApp;
package com.chenxp.webdemo.Utils;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

/**
 * @Description:
 * @author: chenxp
 * @date: 2020/8/14 17:25
 */
@Configuration
@EnableSwagger2
public class SwaggerApp {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                //为当前包路径
                .apis(RequestHandlerSelectors.basePackage("com.chenxp.webdemo.Controller"))
                .paths(PathSelectors.any())
                .build();
//        return new Docket(DocumentationType.SWAGGER_2).select().apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class)).build();
    }
    //构建 api文档的详细信息函数,注意这里的注解引用的是哪个
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                //页面标题
                .title("Spring Boot 使用 Swagger2 构建RESTful API")
                //创建人
                .contact(new Contact("chenxp", "https://chenxp38.github.io/", ""))
                //版本号
                .version("1.0")
                //描述
                .description("API 描述")
                .build();
    }
}
  • package com.chenxp.webdemo.pojo.User;
package com.chenxp.webdemo.pojo;

import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.annotation.JsonInclude;

/**
 * @Description:
 * @author: chenxp
 * @date: 2020/8/17 17:04
 */
public class User {
    private String uid;
    private String openid;
    @JsonInclude(JsonInclude.Include.NON_NULL)
    private String name;
    /**
     * @JsonIgnore在post返回user时，忽略password的属性
     */
    @JsonIgnore
    private String password;
    private Integer balance;
    @JsonInclude(JsonInclude.Include.NON_NULL)
    private String sex;
    private String phone;
    //@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss a", locale="zh", timezone="GMT+8")
    //private Date birthday;


    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getOpenid() {
        return openid;
    }

    public void setOpenid(String openid) {
        this.openid = openid;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Integer getBalance() {
        return balance;
    }

    public String getSex() {
        return sex;
    }

    public void setBalance(Integer balance) {
        this.balance = balance;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getPhone() {
        return phone;
    }

}
  • package com.chenxp.webdemo.Controller.HelloController;
package com.chenxp.webdemo.Controller;

import com.chenxp.webdemo.Utils.JsonUtils;
import com.chenxp.webdemo.pojo.User;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import io.swagger.models.auth.In;
import org.springframework.web.bind.annotation.*;


/**
 * @Description:
 * @author: chenxp
 * @date: 2020/8/1416:54
 */
@Api(value = "测试返回数据")
@RestController
@RequestMapping("/value")
public class HelloController {

    @ApiOperation("获取测试返回String类型数据")
    @GetMapping("/string")
    public JsonUtils getHello() {
        int count = 0;
        System.out.println("count: " + count++);
        return JsonUtils.ok("HelloWorld");

    }
    @ApiOperation("测试有参数的接口swagger")
    @PostMapping("/sum")
    public JsonUtils getSum(@ApiParam @RequestParam(value = "integer1") int integer1,@ApiParam @RequestParam(value = "integer2") int integer2) {
        return JsonUtils.ok(integer1 + integer2);
    }

    @ApiOperation("测试有参数的接口2-swagger")
    @PostMapping("/object")
    public JsonUtils get(@ApiParam @RequestBody User user) {
        System.out.println("hhh");
        return JsonUtils.ok(user);
    }

}
  • 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>
    <groupId>com.chenxp</groupId>
    <artifactId>webdemo</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <name>webdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.0.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <!-- swagger -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.5.0</version>
        </dependency>
        <!-- swagger-ui -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.5.0</version>
        </dependency>
        <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>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.0.RELEASE</version>
                <configuration>
                    <mainClass>com.chenxp.webdemo.WebdemoApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>
前端
  • 只写了html和js，没有写css
test.js

// //import是ES6的功能，Node.js尚未完全支持它，您应该使用require
// const express = require('express')
// //var express = express('./express.js')
// var app = express()
// //设置跨域请求
// app.all('*', function (req, res, next) {
//     res.header("Access-Control-Allow-Origin", "*");
//     res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
//     res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
//     res.header("X-Powered-By", ' 3.2.1')
//     res.header("Content-Type", "application/json;charset=utf-8");
//     next();
//   });
/**
 * window.onload = function() {}是页面的加载函数
 * 
*/
window.onload = function() {
    var head1 = document.getElementById('head1')
    var content1 = document.getElementById('content1')
    var title = document.getElementById('title')
    head1.innerText = "text1"
    content1.innerText = "text2"
    // title.innerText = "text_title"
    // alert("js已生效")


function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != 'undefined') {
        var version = [
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; version.length; i++) {
            try {
                return new ActiveXObject(version[i]);
            } catch (e) {
                throw new Error();
            }
        }
    } else{
        throw new Error('系统或浏览器不支持XHR对象');
    }
  }
  
//Get
document.getElementById('button1').addEventListener('click', loadText)

function loadText() {
    var xhr = new createXHR();
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
                console.log(JSON.parse(xhr.responseText));
            }
        }
    }
    xhr.open('get', 'http://localhost:8080/value/string');
    xhr.send(null);
}

// 有参1
document.getElementById('button2').addEventListener('click', loadSum)
function loadSum() {
    var params = {
        "integer1": 4,
        "integer2": 5,
    }
    $.ajax({
        type : 'POST',
        url : 'http://localhost:8080/value/sum',
        contentType : "application/x-www-form-urlencoded",
        data : params,
        dataType : 'JSON',
        success : function(data, status) {
            var rstate = data.result;
            alert(data.data)
            if (rstate == "0") {
                if (rstate == "0") {
                    alert('接口调用成功！');
                } else {
                    alert('接口调用失败！');
                }
            }
        },
        error : function(data, status, e) {
            alert('接口调用错误！');
        }
        });
}

// 有参2
document.getElementById('button3').addEventListener('click', loadUser)
function loadUser() {
    var params = {
        "uid":"16340000",
        "opid":"openid",
        "name":"xiaoming",
        "password": "password",
        "balance":0,
        "sex": "man",
        "phone": "12315"
    }
    $.ajax({
        type : 'POST',
        url : 'http://localhost:8080/value/object',
        contentType : "application/json",
        data : JSON.stringify(params),
        dataType : 'JSON',
        success : function(data, status) {
            var rstate = data.result;
            alert(data.data.uid)
            if (rstate == "0") {
                if (rstate == "0") {
                    alert('接口调用成功！');
                } else {
                    alert('接口调用失败！');
                }
            }
        },
        error : function(data, status, e) {
            alert('接口调用错误！');
        }
        });
}

}
test.html
<!DOCTYPE html>
<!--lang表示语言，en表示页面以英文为主，zh-CN表示以中文为主-->
<html lang="zh-CN">
<head>
    <!--<head></head>定义HTML文档开头部分,内容不会在浏览器窗口显示,包含文档元（meta）数据，配置信息等，是给浏览器看的-->
    <!--中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码;有些浏览器是gbk，需手动设置为 <meta charset="gbk">-->
    <meta charset="UTF-8">
    <!--meta标签组成：-->
    <!--http-equiv属性：相当于http的文件头作用，向浏览器传回一些有用的信息，正确显示网页内容，与之对应的属性值content，content中的内容是各个参数的变量值-->
    <!--name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Html Learning</title>
    <script type="text/javascript" src="../js/test.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="div1">
        <h1 id="head1"></h1><br>
        <hr>
        <p id="content1"></p>
        <hr>
        <button id="button1">无参</button>
        <button id="button2">有参1</button>
        <button id="button3">有参2</button>
    </div>
</body>
</html>

遇到的问题以及解决

1. Cannot read property ‘addEventListener’ of null

解决方案：Cannot read property ‘addEventListener’ of null

2. 跨域问题
  • 第一个博客是我解决了这个问题所用的方法，跨域问题是安全问题，建议在后端解决。至于前端能不能处理，我不知道，我查了两天了，太菜了，也没能在前端解决，早知道何必钻牛角尖搞什么前端解决，后端解决分分钟。其他后端比如python什么的，也是后端解决，自行寻找教程。
  • 第二个是关于跨域问题的一些介绍
    前后端分离项目 遇到请求跨域问题
    前端常见跨域解决方案（全）
3.POST请求报“status 400 bad request”的问题
  • 原因1： 参数格式不对（有参2调用），需要调用JSON.stringify(params)。
    • 解决方法1：data传的数据需要JSON化处理，使用JSON.stringify(params)
  • 原因2： contentType不对（有参1调用），需要注意自己对应的是哪个contentType
    • 解决方法2：后端是@RequestBody这种的，一般是要"application/json"。若是@RequestParam这种的，一般是要"application/x-www-form-urlencoded"

最后放个效果图

  • 三个接口的调用都是 200的状态码
    在这里插入图片描述
叫我小鹏同学
关注
专栏目录
JavaWeb前后端交互。
huimoumou的博客
03-19 1065
前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 账号<input type='text' id="account"><...
html与java接口_接口测试-自动化-Java实现-HtmlFile
weixin_26706567的博客
02-27 248
接下来要对TestMain中的方法逐个进行分析：首先 是HtmlFile .java，在主方法中的应用为：HtmlFile hf = newHtmlFile();hf.createLog("C:/Code/1.html");看名称就知道，其实实现的东西很简单就是创建1.html作为Log输出文件。具体的实现代码如下：public class HtmlFile implementsIFile {pr...
js调用快递鸟接口DEMO.rar
06-04
纯JS实现快递鸟接口调用，完成100多家主流快递轨迹单号查询，不需要后端语言开发，DEMO实现了Md5加密，URL编码，数据签名
在html5中的api接口,HTML5自带的文件系统API接口DEMO
weixin_39957265的博客
06-07 283
HTML导入代码模板：.example {padding: 10px;border: 1px solid #CCC;}#example-list-fs ul {padding-left: 0;}#example-list-fs li {list-style: none;}#example-list-fs img {vertical-align: middle;}button {padding: 5...
【js调用后端接口】
黄大侠的博客
11-25 3344
接口的基本使用欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdo
前端调用后台接口实例
ailv6840的博客
01-31 2007
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的年终奖</title> <scrip1t src="http://code.jquer...
HTML使用极简的方式通过ajax请求实现前后端交互代码实现
06-17
HTML使用极简的方式通过ajax请求实现前后端交互。文中不使用form表，为了方便ajax拼接其他参数。
小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221).zip微信小程序模板源码
08-12
Java后端服务器通常基于HTTP或WebSocket协议与前端小程序进行通信，提供RESTful API接口供小程序调用。例如，游戏得分的提交、玩家信息的管理、实时排行榜的更新等，都需要后端的支持。 4. **项目结构分析**： - `...
小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221)
最新发布
11-19
在这个小程序完整DEMO中，我们将探讨如何使用HTML5的Canvas技术在微信小程序中实现这款游戏，并结合Java后端来构建一个完整的交互系统。 一、Canvas基础 Canvas是HTML5中的一种绘图元素，允许开发者通过JavaScript...
小程序完整demo：飞翔的小鸟：canvas实现&java后端
03-20
【飞翔的小鸟】小程序是一款基于canvas技术和Java后端开发的示例项目，旨在为初学者提供一个完整的小程序开发体验。这个项目的核心是利用canvas在前端实现游戏的主要功能，而后端则采用Java来处理数据交互和逻辑控制...
在JavaScript中调用Java类和接口的方法
11-23
前言 本文中所有的代码使用 JavaScript 编写，但你也可以用其他兼容 JSR 223 的脚本语言。这些例子可作为脚本文件也可以在交互式 Shell 中一次运行一个语句的方式来运行。在 JavaScript 中访问对象的属性和方法的语法与 Java 语言相同。 本文包含如下几部分： 1、访问 Java 类 为了在 JavaScript 中访问原生类型或者引用 Java 类型，可以调用 Java.type() 函数，该函数根据传入的完整类名返回对应对象的类型。下面代码显示如何获取不同的对象类型： var ArrayList = Java.type("java.util.ArrayLis
JSP以及Java后台接口Demo
03-02
1、（spring mvc+spring+Mybatis）框架整合 参考http://blog.csdn.net/u012532559/article/details/52786886 2、Intellijidea建javaWeb以及Servlet简单实现 参考http://blog.csdn.net/u012532559/article/details/51013400
vue-admin-html-java:spring boot + mybatis + vue + element-ui 实现后台管理API接口
05-30
前言 项目PHP前端地址： 项目JAVA前端地址： 项目JAVA后端地址： 项目PHP后端地址： 欢迎 star 整体效果 目前 v3.0.0 版本 更新日志 更新vue-cli为3.0版本 这里有篇文章 增加广告管理 优化路由控制 优化一些配置文件 登录用户信息存储改为 cookie 一键操作包 点击下载 集成环境搭建: windows 上面建议用 phpstudy ,其它环境自行百度 把两个文件放到网站根目录 把MySQL的root密码改为 root, 再新建数据库 vue-admin ,再把vue-admin.sql 文件导入到MySQL 打开浏览器 输入 http://localhost/vue-admin-html/dist/index.html v3.0.0 踩过的坑 这次更新后 vuex 开启严格模式后，出现浅拷贝的问题，就是变量引用的问题 这里有篇文章 还有
一个简化版的SSH后端接口框架demo
07-24
一个简化版的SSH后端接口框架demo，不需要引用大量的第三方工具包，只有三个很小的核心包
HTML5 api 调用示例
12-20
html5 w3c协议api 各种用法示例
微信小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221)-程序源码.zip
05-31
通过分析这个压缩包中的源码，开发者不仅可以学习到微信小程序的基本开发流程，还能深入理解如何结合Canvas技术和Java后端来构建一个互动性强、用户体验良好的小游戏。对于想要提升微信小程序开发技能的人来说，这是...
vue.js 调用java_Vue.js调用后端java接口的实例代码
weixin_36478447的博客
02-26 1628
Vue.js调用后端java接口的实例代码发布于 2020-11-30|复制链接分享一篇关于Vue调用后端java接口的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧前段时间 做了个学校的春萌项目，其中用到vue连接后端java接口。先上后端接口代码：```javapackage controller;import net.sf.json.JSONObject;impor...
前后端交互Demo练习
Yjh_pythonking的博客
08-30 1635
前面知识点大概都讲完了，今天来说一下星期天做的前后端交互的Demo，进行知识的汇总，查漏补缺。 这个Demo主要是把数据库中的信息展现到前端页面，用户通过点击按钮进行增删改查的操作。 流程图： 一、前端页面的搭建 工具：HBuilder X 语言：HTML、JS、CSS 框架：VUE 1.前端页面框架的搭建 1.1 项目结构vue基本框架搭建 <!DOCTYPE html> <html> <head> &lt...
html请求的几种方式,前端如何调用后端接口？有哪几种方式？
weixin_39936792的博客
06-20 9033
一般来讲，前端不会给后端接口，而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系，其实不合适的接口设计会极大地影响用户的页面体验。那么今天我们就来看看，前端如何调用后端接口？有哪几种方式？首先，要弄清楚前端提供一个接口或者调用后台接口，那么这个接口具体指什么？网上用户上传图片作为头像 这个需求需要后台人员处理，当用户登录 修改自己个人信息的时候，上传了头像。此时，后台处理该用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值