精华内容
下载资源
问答
  • 需要解决问题:前端JavaScript对象 传递到 Java后端 前端代码如下: var fac= new Object(); facilities.facCode = "fac9527"; facilities.facType = "社会设施"; facilities.regionCode = "320106"; facilities...

    需要解决问题:前端JavaScript对象 传递到 Java后端

    前端代码如下:

    var fac= new Object();
    
    facilities.facCode = "fac9527";
    facilities.facType = "社会设施";
    facilities.regionCode = "320106";
    facilities.facName = "玄武湖";
    facilities.facType = "重要建筑";
    
    console.log(typeof facilities);//object类型
    
    var a = JSON.stringify(facilities)
    console.log(typeof a)//string类型
    
    var fac = $.toJSON(facilities);//需要添加jquery.json.js
    console.log(typeof fac)//string类型 
    
    $.ajax({
       url : $("#cfx").val() + "/admin/testController/testAdd",
       type : "POST",
       dataType : "JSON",
       contentType : "application/json",
       data : a,
       success: function (data) {
          console.log(data)
          console.log(data.status)
       },
       error : function (data) {
          console.log(data)
          console.log(data.status)
       }
    })

    后端代码如下:

        @CrossOrigin(origins = "*",maxAge = 3600)
        @ResponseBody
        @RequestMapping(value="/facilitiesAdd", method = RequestMethod.POST)
        @SystemControllerLog(operationType= WebConstant.TYPE_GOPAGE, operationName="设施管理新增")
        public OperateResult<Boolean> facilitiesAdd(HttpServletRequest request,@RequestBody Facilities facilitiesInfo){
    
            logger.info("facilitiesInfo的值:"+facilitiesInfo);
            logger.info("getFacilitiesType的值:"+facilitiesInfo.getFacilitiesType());
            OperateResult<Boolean> result = null;
    
            try {
                logger.info("进入设施管理新增");
                
                result = facService.facilitiesAdd(facilitiesInfo);
                
                logger.info("result:"+result);
                logger.info("设施管理新增成功");
            } catch (Exception e) {
                e.printStackTrace();
                logger.error("设施管理新增失败");
            }
    
            return result;
        }

    遇到问题报错清楚如下:

    问题1

    后端报错信息:Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

    前端报错信息:415

    解决:Ajax中添加    contentType : "application/json",

    ps:注意大小写,由于contentType  写成 ContentType,也报错

    问题2

    后端报错信息:Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unrecognized token 'facilitiesInfo': was expecting 'null', 'true', 'false' or NaN; nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'facilitiesInfo': was expecting 'null', 'true', 'false' or NaN
     at [Source: java.io.PushbackInputStream@2cce1290; line: 1, column: 16]

    前端报错信息:400

    解决:把

    data : {facilitiesInfo:a}

    改成

    data : a,// var a = JSON.stringify(facilities)

    查询链接:https://blog.csdn.net/qq_36802726/article/details/88419297

    https://www.cnblogs.com/ilinuxer/p/6869933.html

    问题3 

    后端接受问题:刚开始使用

    ObjectMapper om = new ObjectMapper();
        
    String facilitiesInfo = request.getParameter("facilities");
    
    Facilities facilities = om.readValue(facilitiesInfo,Facilities.class);

    这样使用前端要这么写

    $.ajax({
                url : $("#cfx").val() + "/admin/testController/testAdd",
                type: "POST",
                data: {
                    'facilities': JSON.stringify(facilities)
                },
                dataType: "json",
                success: function (ret) {
                    if (ret && ret.Code == "1") {
                        reaffirm("新增成功");
                        window.location.href = "../content/index?mid=4"
                    } else {
                        reaffirm("新增失败,请刷新页面重试!")
                        return false
                    }
                }
            })

    使用情况未添加:contentType : "application/json",

     

    以上情况是通过Ajax和Java后端测试交互。

    由于实行前后端分离,故vue和Java后端交互情况未知。

    续1:(未使用过vue前端框架,表述可能存在问题)2019-08-19

    vue和Java后端数据解决方案:

    (1)显示的在post请求中定义contentType : "application/json",

    (2)传递的参数对象转换成json字符串格式

    (3)后端通过@RequestBody获取数据

    不明白为什么通过postman或者通过JSP页面去传递参数的时候不需要设置这些,后端也不需要通过@RequestBody去获取数据就能传递参数过去,这种contentType应该是application/x-www-form-urlencoded这样的。

    总感觉有点怪怪的,不知道是不是因为接触的太少,准备周末再看看这方面的知识点。

    待续.......

    感谢查阅过的博客信息。

     

     

     

     

     

     

     

     

    展开全文
  • 一、 Spring mvc与Json数据交互 背景知识: 以前(单体项目):一个项目中既包含后端的controller接口还有视图(jsp/html)。 现在(前后端分离项目):后端使用Java开发,通过json将数据返回给前端、而前端使用前端...

    一、 Spring mvc与Json数据交互

    背景知识:

    以前(单体项目):一个项目中既包含后端的controller接口还有视图(jsp/html)。
    现在(前后端分离项目):后端使用Java开发,通过json将数据返回给前端、而前端使用前端框架开发的项目如vue.js 、angular.js、layui等,部署在前端服务器上通过Ajax请求,请求后端接口的数据。

    二、Controller方法返回值为JSON格式数据 与请求参数为JSON格式数据

    1. @RequestBody

    作用:

    @RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内容转换为json、xml等格式的数据并绑定到controller方法的参数上。

    2. @ResponseBody

    作用:

    该注解用于将Controller的方法返回的对象,通过HttpMessageConverter接口转换为指定格式的数据如:json,xml等,通过Response响应给客户端。

    三、RequestMapping限制接口的请求方式

    @RequestMapping(value=“test/jsonObj”,method=RequestMethod.GET)
    表明这个接口使用get方式进行请求,其他非get请求,无法访问这个接口。

        @RequestMapping(value="test/jsonObj",method=RequestMethod.GET)
        @ResponseBody  //注解的作用 1.将返回的结果序列化为json字符串 2.不会使用视图解析器
        public List<Users> testJsonObj() {
             List<Users> users = iUsersService.list(1, 3);
            return users;
        }
    
       @RequestMapping(value="/save/user",method=RequestMethod.POST)
        @ResponseBody  //注解的作用 1.将返回的结果序列化为json字符串 2.不会使用视图解析器
        public  ServerResponse<Users>  saveUser(@RequestBody Users users) {
            System.out.println("users==>"+users);
            //1.逻辑操作......
            
            return ServerResponse.SuccessResponse();
        }
    

    四、序列化和反序列化

    4.1 什么是序列化和反序列化

    序列化:将对象数据转为二进制数据。
    反序列化:将二进制数据转为对象数据。

    4.2 .什么时候需要序列化和反序列化
    1. 要将对象数据保存磁盘或缓存(内存)。
    2. 需要将对象通过网络传输,网络上只能按字节传。
    4.3.序列化的方式
    		实现Serializable接口
    

    五、JSON序列化

    1、controller方法的返回如果是自定义类型,需要在类上加上JSON序列化的注解
      @JsonSerialize(include =  JsonSerialize.Inclusion.NON_NULL)
       public class ServerResponse<T> implements Serializable{
          include =  JsonSerialize.Inclusion.NON_NULL:非null属性才会被json序列化
                
      }
    
    2、如果类的某个属性希望被json序列化,如何处理?
      @JsonIgnore
      private int age;//不想被JSON序列化 
    
    展开全文
  • 2.后端接收的方式,为json类型时需要进行解析 3.接收到的是一个字符串,可以转为list类型,在sql语句中注意collection的参数要自定义的类型相匹配 4.在dao接口中的参数要xml中实际传递的参数匹配 5.前端设置一个...

    单个删除功能已经实现了,批量删除弄了很久也没弄好,来试一下。弄了很久终于把批量删除实现了!
    结果:
    在这里插入图片描述
    在这里插入图片描述
    点击确认后,将看见表中已经少了两条数据。
    实现的关键是:1.正确传递数据给后端的js语句
    2.后端接收的方式,为json类型时需要进行解析
    3.接收到的是一个字符串,可以转为list类型,在sql语句中注意collection的参数要与自定义的类型相匹配
    4.在dao接口中的参数要与xml中实际传递的参数匹配
    5.前端设置一个多选框选项数组,每选中一个就把这个加入到数组中。
    关键代码:
    js:

      multipleSelection: [],
    
      deleteHandler(id) {
          this.$confirm("确定删除题目吗?删除后无法恢复","Warning",{
            confirmButtonText: '确定删除',
            cancelButtonText: '算了,留着吧',
            type: 'danger'
          }).then(()=> { //确认删除
            this.$axios({
              url: `/deleteerror/${id}`,
              method: 'delete',
            }).then(res => {
              this.initJls();
            })
          }).catch(() => {
    
          })
          },
     deleteMany() {
          this.$confirm('此操作将永久删除【' + this.multipleSelection.length
              + '】条记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let ids = '?';
            var nums = new Array();
            this.multipleSelection.forEach(item => {
             // ids += 'ids=' + item.id + '&';
              nums.push(item.id)
            })
            var wNums=nums.toString()
            console.log(wNums)
            this.$axios({
              url: `/deletemany`,
              method: 'post',
    
                data : {id:wNums},
    
            }).then(res => {
              this.initJls();
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }, //处理选中多选框
    

    要注意这句:
    data : {id:wNums},
    发现当id为其他字符(如num)时,无法批量删除自己增加的错题,可能是因为这个id须与后端数据库的id字段相同才能正确删除。

    elementui渲染:
    (包含单个删除部分)

       <el-table-column type="selection" width="55">
            </el-table-column>
       <el-table-column
       (这样写之后第一列会出现选择框)
                label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="small"
                           @click="showEditView(scope.row.id)">编辑</el-button>
                <el-button size="small" type="danger"
                           @click="deleteHandler(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
    
     <el-button type="danger" size="small" style="margin-top: 10px"
                     :disabled="multipleSelection.length==0"
                     @click="deleteMany">批量删除
          </el-button>
    

    java处理:
    xml:

       <delete id="delete" parameterType="java.lang.Integer">
            delete from errorbook where id=#{id}
        </delete>
     <delete id="doRemoveeMore" parameterType="java.util.List">
            <!-- delete from emp where empno in(7789,7790) -->
            <!-- forEach : 用来循环 collection : 用来指定循环的数据的类型 可以填的值有:array,list,map item
                : 循环中为每个循环的数据指定一个别名 index : 循环中循环的下标 open : 开始 close : 结束 separator : 数组中元素之间的分隔符 -->
    
            delete from errorbook
            where id in
            <foreach collection="list" item="item" index="index" open="(" close=")" separator=",">
                #{item}
            </foreach>
        </delete>
    
    

    接口:

      public int delete(Integer id);
        public boolean doRemoveeMore(List<String> arr);
    

    controller:

     @DeleteMapping("/deleteerror/{id}")
        public String deleteUser( @PathVariable("id")Integer id){
            System.out.println(id);
            int i = errorBookDao.delete(id);
            String str = i >0?"success":"error";
            return str;
        }
     @PostMapping("/deletemany")
    
        public boolean deletebatch(@RequestBody String nums) {
            System.out.println(nums);
            Map<String, Object> jsonMap = JSON.parseObject(nums);
            System.out.println(jsonMap.get("id"));
          //class  m =jsonMap.get("id").getClass();
    
    //        System.out.println(object.getJSONObject("id"));
         //  int wNums = errorBook.getId();
        String[] ns=jsonMap.get("id").toString().split(",");
            List<String> wNums=new ArrayList<String>();
            for(int i=0;i<ns.length;i++){
                wNums.add(ns[i]);
            }
    //        System.out.println(wNums);
      boolean doremove=errorBookDao.doRemoveeMore(wNums);
         
           return true;
        }
    

    bean层:

    public class ErrorBook {
        private Integer id;
    
        //private String datee;
        private String content;
        private String answer;
        private String reason;
        private String master;
        private String subject;}//省略了getter setter
    
    展开全文
  • 今日内容通过axios实现数据请求...所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互。注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制。下载地址:在网页中打开,ctr...

    今日内容

    • 通过axios实现数据请求
    • json
    • ajax
    • 数据接口
    • ajax的使用
    • 同源策略
    • 跨域解决方法
    知乎视频www.zhihu.com

    4.通过axios实现数据请求

    vue.js默认没有提供ajax功能的。

    所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

    注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制。

    下载地址:

    在网页中打开,ctrl+s保存成文件

    https://unpkg.com/axios@0.18.0/dist/axios.js
    https://unpkg.com/axios@0.18.0/dist/axios.min.js

    使用文档:https://www.kancloud.cn/yunye/axios/234845

    axios提供发送http请求的常用方法有两个:axios.get() 和 axios.post() 。

    增 post

    删 delete

    改 put/patch

    查 get

    // 发送get请求
        // 参数1: 必填,字符串,请求的数据接口的url地址,例如请求地址:http://www.baidu.com?id=200
        // 参数2:可选,请求参数和请求头内容,json对象,要提供给数据接口的参数
        axios.get('服务器的资源地址',{ // http://www.baidu.com
            params:{
                参数名:'参数值key'  'value', // id: 200,
            },
            headers:{
                选项名:'选项值', // 请求头
            }
    
        }).then(response=>{ // 请求成功以后的回调函数
                console.log("请求成功");
                console.log(response.data); // 获取服务端提供的数据
    
        }).catch(error=>{   // 请求失败以后的回调函数
                console.log("请求失败");
                console.log(error.response);  // 获取错误信息
        });
    
        // 发送post请求,参数和使用和axios.get()类似。
        // 参数1: 必填,字符串,请求的数据接口的url地址
        // 参数2:必填,json对象,要提供给数据接口的参数,如果没有参数,则必须使用{}
        // 参数3:可选,json对象,请求头信息
        axios.put('服务器的资源地址',{
            username: 'xiaoming',
            password: '123456'
        },{
            headers:{
                选项名:"选项值",
            }
        })
        .then(response=>{ // 请求成功以后的回调函数
          console.log(response);
        })
        .catch(error=>{   // 请求失败以后的回调函数
          console.log(error);
        });
    
    
        // b'firstName=Fred&lastName=Flintstone'
    
    注意:
    axios.delete()的用法和参数与axios.get()一样
    axios.put() 或者axios.patch的用法和参数与axios.post()一样
    在http协议中,不同的请求动作都有不同的含义,例如:
    get代表向目标服务器请求获取数据
    post代表向目标服务器请求上传数据
    put代表向目标服务器请求更新数据【修改全部数据】
    patch代表向目标服务器请求更新数据【修改部分数据】
    delete代表向目标服务器请求删除数据

    4.1 json

    json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式。

    json的作用:在不同的系统平台,或不同编程语言之间传递数据。

    4.1.1 json数据的语法

    json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持undefined,值还可以是数组或者json对象。

    // 原生的js的json对象
    var obj = {
      age:10,
      sex: '女',
      work:function(){
        return "好好学习",
      }
    }
    // json数据的对象格式,json数据格式,是没有方法的,只有属性,属性值:字符串,数值(整数,浮点数,布尔值), json,
    {
        "name":"tom",
        "age":18
    }
    
    // json数据的数组格式:
    ["tom",18,"programmer"]
    

    复杂的json格式数据可以包含对象和数组的写法。

    {
      "name":"小明",
      "age":200,
      "is_delete": false,
      "fav":["code","eat","swim","read"],
      "son":{
        "name":"小小明",
        "age":100,
        "lve":["code","eat"]
      }
    }
    
    // 数组结构也可以作为json传输数据。

    json数据可以保存在.json文件中,一般里面就只有一个json对象。

    总结:

    1. json文件的后缀是.json
    2. json文件一般保存一个单一的json数据
    3. json数据的属性不能是方法或者undefined,属性值只能:数值[整数,小数,布尔值]、字符串、json和数组
    4. json数据只使用双引号、每一个属性成员之间使用逗号隔开,并且最后一个成员没有逗号。
       {
          "name":"小明",
          "age":200,
          "fav":["code","eat","swim","read"],
          "son":{
            "name":"小小明",
            "age":100
          }
        }

    工具:postman可以用于测试开发的数据接口。

    4.1.2 js中提供的json数据转换方法

    javascript提供了一个JSON对象来操作json数据的数据转换.

    | 方法      | 参数     | 返回值   | 描述                             
    | | --------| -------- | -------- | -------------------------------- | 
    | stringify | json对象 | 字符串   | json对象转成字符串               |
    | parse     | 字符串   | json对象 | 字符串格式的json数据转成json对象 |
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        // json语法
        let humen = {
            "username":"xiaohui",
            "password":"1234567",
            "age":20
        };
    
        console.log(humen);
        console.log(typeof humen);
    
        // JSON对象提供对json格式数据的转换功能
        // stringify(json对象)  # 用于把json转换成字符串
        let result = JSON.stringify(humen);
        console.log(result);
        console.log(typeof result);
    
        // parse(字符串类型的json数据)  # 用于把字符串转成json对象
        let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
        console.log(json_str)
        console.log(typeof json_str)
    
        let json_obj = JSON.parse(json_str);
        console.log(json_obj);
        console.log(typeof json_obj)
    
        console.log(json_obj.age)
    </script>
    </body>
    </html>

    4.2 ajax

    ajax,一般中文称之为:"阿贾克斯",是英文 “Async Javascript And Xml”的简写,译作:异步js和xml数据传输数据技术。

    ajax的作用: ajax可以让js代替浏览器向后端程序发送http请求,与后端通信,在用户不知道的情况下操作数据和信息,从而实现页面局部刷新数据/无刷新更新数据。

    所以开发中ajax是很常用的技术,主要用于操作后端提供的数据接口,从而实现网站的前后端分离

    ajax技术的原理是实例化js的XMLHttpRequest对象,使用此对象提供的内置方法就可以与后端进行数据通信。

    axios或者jQuery提供的ajax,本质上就是XMLHttpRequest对象操作的封装。

    4.2.1 数据接口

    数据接口,也叫api接口,表示后端提供操作数据/功能的url地址给客户端使用。

    客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般:增删查改】

    同时在工作中,大部分数据接口都不是手写,而是通过函数库/框架来生成。

    4.2.3 ajax的使用

    ajax的使用必须与服务端程序配合使用,但是目前我们先学习ajax的使用,所以暂时先不涉及到服务端python代码的编写。因此,我们可以使用别人写好的数据接口进行调用。

    jQuery将ajax封装成了一个函数$.ajax(),我们可以直接用这个函数来执行ajax请求。

    | 接口 | 地址 |

    | ------------ | ------------------------------------------------------------ |

    | 天气接口 | http://wthrcdn.etouch.cn/weather_mini?city=城市名称 |

    | 音乐接口搜索 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲标题 |

    | 音乐信息接口 | http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音乐ID |

    编写代码获取接口提供的数据:

    jQ版本

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
        $(function(){
            $("#btn").on("click",function(){
                $.ajax({
                    // 后端程序的url地址
                    url: 'http://wthrcdn.etouch.cn/weather_mini',
                    // 也可以使用method,提交数据的方式,默认是'GET',常用的还有'POST'
                    type: 'get', 
                    dataType: 'json',  // 返回的数据格式,常用的有是'json','html',"jsonp"
                    data:{ // 设置发送给服务器的数据,如果是get请求,也可以写在url地址的?后面
                        "city":'北京'
                    }
                })
                .done(function(resp) {     // 请求成功以后的操作
                    console.log(resp);
                })
                .fail(function(error) {    // 请求失败以后的操作
                    console.log(error);
                });
            });
        })
        </script>
    </head>
    <body>
    <button id="btn">点击获取数据</button>
    </body>
    </html>

    vue版本:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="city">
            <button @click="get_weather">点击获取天气</button>
        </div>
        <script>
            let vm = new Vue({
                el:"#app",
                data:{
                    city:"",
                },
                methods:{
                    get_weather(){
                        // http://wthrcdn.etouch.cn/weather_mini?city=城市名称
                        axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                            .then(response=>{
                                console.log(response);
    
                            }).catch(error=>{
                                console.log(error.response)
                        });
                      // 上面的参数写法,也可以是下面这种格式:
                      // axios.get("http://wthrcdn.etouch.cn/weather_mini",{
                      //     // get请求的附带参数
                      //     params:{
                      //         "city":"广州",
                      //     }
                      // }).then(response=>{
                      //     console.log(response.data);  // 获取接口数据
                      // }).catch(error=>{
                      //     console.log(error.response); // 获取错误信息
                      // })
                    }
                }
            })
        </script>
    </body>
    </html>

    4.2.4 同源策略

    同源策略,是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址(例如服务端接口地址与浏览器客户端页面地址)之间比较,是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有得到服务端的明确授权的情况下,浏览器会拒绝显示服务端信息提供给前端ajax。

    ajax本质上还是javascript,是运行在浏览器中的脚本语言,所以会被受到浏览器的同源策略所限制。

    | 前端地址:http://www.oldboy.cn/index.html | 是否同源 | 原因 |

    | ------------------------------------------- | -------- | ------------------------ |

    | http://www.oldboy.cn/user/login.html | 是 | 协议、域名、端口相同 |

    | http://www.oldboy.cn/about.html | 是 | 协议、域名、端口相同 |

    | https://www.oldboy.cn:443/user/login.html | 否 | 协议不同 ( https和http ) |

    | http:/www.oldboy.cn:5000/user/login.html | 否 | 端口 不同( 5000和80) |

    | http://bbs.oldboy.cn/user/login.html | 否 | 域名不同 ( bbs和www ) |

    同源策略针对ajax的拦截,代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="music"><button @click="get_music">查询歌曲</button>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    music:"", // 歌曲标题
                },
                methods:{
                    get_music(){
                        axios.get(`http://tingapi.ting.baidu.com/v1/restserver/ting`,{
                            params:{
                                method:"baidu.ting.search.catalogSug",
                                query:this.music,
                            }
                        }).then(response=>{
                            console.log("查询数据成功!");
                        }).catch(error=>{
                            console.log("查询数据失败!");
                        })
                    }
                }
            })
        </script>
    </body>
    </html>

    上面代码运行错误如下:

    Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?
    method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD
    %E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked
     by CORS policy: No 'Access-Control-Allow-Origin' header is present on 
    the requested resource.
    

    上面错误,关键词:Access-Control-Allow-Origin

    只要出现这个关键词,就是访问受限。出现同源策略的拦截问题。

    4.2.5 ajax跨域(跨源)方案之CORS

    ajax跨域(跨源)方案:服务端授权[CORS],jsonp,服务端代理

    ​ CORS是一个W3C标准,全称是"跨域资源共享",它允许浏览器向跨源的后端服务器发出ajax请求,从而克服了AJAX只能同源使用的限制。

    ​ 实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。

    django的视图[伪代码]

    def post(request):

    ​ response = new Response()

    ​ response .set_header("Access-Control-Allow-Origin","http://localhost:63342")

    ​ return response;

    // 在响应行信息里面设置以下内容:
    Access-Control-Allow-Origin: ajax所在的域名地址
    
    Access-Control-Allow-Origin: www.oldboy.cn  # 表示只允许www.oldboy.cn域名
    的客户端的ajax跨域访问
    
    // * 表示任意源,表示允许任意源下的客户端的ajax都可以访问当前服务端信息
    Access-Control-Allow-Origin: *

    总结:

    0. 同源策略:浏览器的一种保护用户数据的一种安全机制。
       浏览器会限制ajax不能跨源访问其他源的数据地址。
       同源:判断两个通信的地址之间,是否协议,域名[IP],端口一致。
    
       ajax:  http://127.0.0.1/index.html
       api数据接口:  http://localhost/index
    
       这两个是同源么?不是同源的。是否同源的判断依据不会根据电脑来判断,而是通过协议、域名、端口的字符串是否来判断。
    
    1. ajax默认情况下会受到同源策略的影响,一旦受到影响会报错误如下:
         No 'Access-Control-Allow-Origin' header is present on the requested resource
    
    2. 解决ajax只能同源访问数据接口的方式:
       1. CORS,跨域资源共享,在服务端的响应行中设置:
          Access-Control-Allow-Origin: 允许访问的域名地址
       2. jsonp
            jsonp本质上来说不是ajax技术,jsonp的核心实现是依靠script本身加载外部js文件来实现的
            当然,实现jsonp技术也需要服务端的配合
       3. 是否服务端代理
          思路:通过python来请求对应的服务器接口,客户端和python处于同源,那么就实现了服务端代理

    练习

    1. 在作业.html的代码基础上,完成商品数量的加减,注意商品数量如果低于0个,则自动删除当前商品
    2. 在作业.html的代码基础仧,完成购物车总价格的计算。
    3. 使用ajax获取北京天气,并把昨天和未来5天天气情况以表格格式展示到html页面中。

    一演示:

    3696bdf1c3ad2c0a410967083b0c7b15.gif

    3696bdf1c3ad2c0a410967083b0c7b15.gif

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    
        <style>
            table {
                border: black 1px solid;
    
            }
            .box{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: #eee;
            width: 280px;
            height: 160px;
            padding: 40px 80px;
        }
        </style>
    </head>
    <body>
    
    <div id="app">
        <button value="" @click="is_show=true">添加商品</button>
    
        <br><br>
    <table>
        <thead>
            <tr>
                <th>商品id</th>
                <th>商品标题</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody v-for="args, index in mylist">
            <tr>
                <td>{{index+1}}</td>
                <td>{{args.title}}</td>
                <td>
                    <button @click="down(index)">-</button>
                    <input type="text" size="2" v-model="args.num">
                    <button @click="up(index)">+</button>
                </td>
                <td>{{args.price.toFixed(2)}}</td>
                <td>
                    <button value="" @click="update(index)">编辑</button>
                    <button value="" @click="del(index)">删除</button>
                </td>
            </tr>
    
        </tbody>
        <tr>
            <td colspan="5">总计{{tot}}</td>
        </tr>
    </table>
    
    <div class="box" name="change" v-if="is_show">
        <p>商品标题:<input type="text" v-model="c_title"></p>
        <p>商品数量:<input type="text" v-model="c_num"></p>
        <p>商品价格:<input type="text" v-model="c_price"></p>
        <button @click="save">保存</button>
        <button @click="huanYuan">取消</button>
    </div>
    
    </div>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                mylist: [
                    {'title':'python入门', 'num':10, 'price':15.5},
                    {'title':'python进阶', 'num':15, 'price':26.5},
                ],
                is_show: false,
                c_title: '',
                c_num: '',
                c_price: '',
                is_index: -1,
            },
            methods:{
                update(index){
                    this.is_show=true;
                    this.c_title=this.mylist[index].title;
                    this.c_num=this.mylist[index].num;
                    this.c_price=this.mylist[index].price;
                    this.is_index=index
                },
                huanYuan(){
                    this.c_title='';
                    this.c_num='';
                    this.c_price='';
                    this.is_show= false;
                    this.is_index=-1;
                    },
                del(index){
                    this.mylist.splice(index, 1)
                },
                save(){
                    if (this.is_index==-1){
                        this.mylist.push({
                                "title":this.c_title,
                                "num":parseInt(this.c_num),
                                "price":parseFloat(this.c_price)
                        });
                    }else{
                        this.mylist[this.is_index].title=this.c_title;
                        this.mylist[this.is_index].num=parseInt(this.c_num);
                        this.mylist[this.is_index].price=parseFloat(this.c_price);
                        }
                    this.huanYuan()
                },
                up(index){
                    this.mylist[index].num++
                },
                down(index){
                    if (this.mylist[index].num==1){
                        this.del(index)
                    }else{
                        this.mylist[index].num--
                    }
                },
            },
            computed:{
                tot(){
                    this.total = 0;
                    var i = 0;
                    while (i<this.mylist.length){
                        this.total += (parseFloat(this.mylist[i].num) * parseFloat(this.mylist[i].price));
                        i++
                    }
    
                    return parseFloat(this.total)
                }
            },
        })
    </script>
    
    </body>
    </html>

    二演示:

    39625fad45d590b45b364a7d3ca217a7.gif

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
        <script src="axios.min.js"></script>
    </head>
    <body>
    
    <div id="app">
        <p>输入城市查看天气:
            <input type="text" v-model="city">
            <button @click="sele">点我</button>
            <span v-show="is_show" style="color: red">{{war}}</span>
        </p>
    
    
        <table>
            <thead>
                <tr>
                    <td>日期</td>
                    <td>最高温度</td>
                    <td>最低温度</td>
                    <td>风向</td>
                    <td>天气</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{yesday.date}}</td>
                    <td>{{yesday.high}}</td>
                    <td>{{yesday.low}}</td>
                    <td>{{yesday.fx}}</td>
                    <td>{{yesday.type}}</td>
                </tr>
                <tr v-for="x in mylist">
                    <td>{{x.date}}</td>
                    <td>{{x.high}}</td>
                    <td>{{x.low}}</td>
                    <td>{{x.fx}}</td>
                    <td>{{x.type}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                city: '',
                mylist : null,
                war: '',
                is_show: false,
                yesday: '',
            },
            methods:{
                sele(){
                axios.get('http://wthrcdn.etouch.cn/weather_mini',{
                    params: {
                        'city': this.city
                    }
                    }
                ).then(
                    response=>{
                        this.mylist = response.data.data.forecast;
                        this.yesday = response.data.data.yesterday;
                        console.log(this.mylist)
                    }
                ).catch(error=>{
                    this.is_show = true;
                    this.war = '请求失败啦,弟弟'
                    }
    
                )
                }
            }
        })
    </script>
    
    </body>
    </html>
    展开全文
  • 前面的学习基本上已经满足了我们开发一个 vue 单机项目了,但是在实际的开发中,我们还需要与后端交互,从后端获取我们需要展示的数据。于是我们需要学习 Axios 。Axios 是什么Axios 是一个基于 promise 的 HTTP 库...
  • Vue学习笔记

    2018-11-28 19:28:20
    Vue与后端数据交互: 需要引入库:vue-resource 使用this.$http.get('请求地址')来发送请求 使用this.$http.get('data/cartData.json')获取json中的数据,后面可加参数。 then()方法异步执行,就是当then()前面...
  • Vue-Projects:Vue的Web项目

    2021-05-11 14:49:37
    第三方组件: vue-router开发单页面应用,vue-resource与后端数据交互,stylus编写模块化css 设计模式: 解决移动端1px边框问题,运用移动端经典的css sticky footer布局,采用flex布局 预览: 3. vue-music 音乐...
  • vue学习笔记(一)this.$http.get()

    万次阅读 2017-12-07 13:19:12
    Vue与后端数据交互: 需要引入库:vue-resource 使用this.$http.get('请求地址')来发送请求 我在做购物车功能页面时,使用this.$http.get('data/cartData.json')获取json中的数据,后面可加参数。 then()方法异步...
  • vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以...
  • 第三方组件: vue-router开发单页面应用,vue-resource与后端数据交互,stylus编写模块化css 设计模式: 解决移动端1px边框问题,运用移动端经典的css sticky footer布局,采用flex布局 预览: ...
  • 参考之前几篇文章中我经历的坑,其实可以通过很简单的方式来解决vue日期组件java当中的date格式类型的数据交互的问题 之前遇到的问题主要是在格式化上,数据出后端服务会以时间戳的格式,接受的时候也必须以时间戳...
  • vue中axios插件使用

    2020-10-09 16:28:12
    在一个网站项目开发中,前端需要和后端人员进行产品数据交互,你可以理解为:后端人员在项目中好比是飞机零部件加工方(用户是生产方),ui设计师提供成型的产品图纸,而前端人根据设计图纸用零部件组装成飞机!...
  • Vue学习笔记 —— axios

    2020-10-07 16:14:06
    主要用来实现ajax与后端服务器的数据交互。 axios具有有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 ...
  • vue-flow-topology 可以看做是一个独立的 Vue 项目(大数据流水线拓展流程工作台)纯前端Demo(通过JSON与后端交互),也可以嵌入到其他vue项目中使用,新版会作为优先版本持续迭代。 特性 支持画布重绘、拖拽、...
  • vue创建页面时,假如设置的端口是8080,而后台端口是40000,当用axios进行数据交互时就会出现跨域问题。解决的办法很简单,这里做一个笔记,就是在vue项目中package.json文件同级的目录下新建一个文件vue.config....
  • 后端又分为业务模块和推荐模块,业务模块前端交互,接收反馈数据。推荐模块监听卡夫卡的用户行为数据,然后进行实时计算,将结果写回的MongoDB,并周期性执行离线计算,根据用户最近的操作记录进行离线推荐,...
  • vue中post请求报400的错误

    千次阅读 2020-02-27 13:44:36
    出现了400错误,一般是前后端交互的方法参数不一致,发生此错误需要仔细检查前端传递的参数数据的参数名、参数数目、参数类型是否与后端保持一致。 我看了我提交的参数和路径,和后台都一样,而且用ostman可以获取到...
  • 现在大部分的系统都采用前后端分离的方式来实现系统的开发,以前...首先我们创建一个前端的vue工程,然后打开我们的package.json文件引入axios依赖用于与后端进行交互: "axios": "^0.15.3", 编写后端交互的axios工具.
  • Axios的基本使用

    2021-05-07 07:35:23
    vue 中,用来发ajax请求,与后端交互。 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 ...
  • Restful-api实现

    2019-03-26 16:02:00
    前端是独立的web,比如vue,专注于页面表现,数据通过接口(json/xml)从后端获取 后端是独立的web,比如flask,专注逻辑和数据的操作,可以和众多前端交互,前端可以是网站、客户端、移动端都可 前后端理论上约定...
  • │ ├── api // 数据交互统一调配 │ │ ├── ajax // ajax封装 │ │ ├── index // 获取数据的统一调配文件,对接 │ │ ├── utils // 工具函数 │ │ ├── index // 获取数据的统一调配文件,对接口...
  • JWT / 基于Redis可配置单设备登录Token交互 任意切换 提供开放平台、OAuth2认证中心 支持点单登录 JPA + Mybatis-Plus 任意切换 操作日志记录方式任意切换Mysql或Elasticseach记录 Java、Vue、SQL代码生成...
  • ASP.NET Core 的知识能确保你可以看懂和了解后端是如何实现和工作的,而 Vue.js 框架则是前端实现的基石,当然 iView 这个基于 Vue.js 的 UI 框架也是必须要了解的,因为 DncZeus 正是基于 iview-admin(iView 的一个...
  • 前后端通过接口进行数据交互。我们也不再需要在各个后端语言里面写着难以维护的 HTML。网页的复杂度也由后端的 Web Server 转向了浏览器端的 JavaScript。也正因如此,开始有了前端工程师这个职位。 <p><a ...
  • 数据持久化 - CSV文件概述 / csv模块的应用 / JSON数据格式 / json模块的应用 Day12 - 字符串和正则表达式 字符串高级操作 - 转义字符 / 原始字符串 / 多行字符串 / in和 not in运算符 / is开头的方法 / join和...
  • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/... CommonJS Modules/AMD HTML5/CSS3 Semantic Web MicroData RDFa Web Accessibility WCAG Role Attribute WAI-ARIA 性能 JSPerf YSlow 35 rules PageSpeed ...
  • 响应式用户交互组件库 https://github.com/bh-lay/UI sweetalert-有css3动画弹出层 http://t4t5.github.io/sweetalert CSS 地址 CSS 语法参考 http://tympanus.net/codrops/css_reference CSS3动画...
  • ✅ 相见易:允许用户在手机上、网页上自主设计表单、图表,存储和查询数据、网页手机端的数据互通(演示用户:13510928305,密码:123456) ✅ 自由地呼吸:一款呼吸训练、规律动作训练+心事倾述+呼吸康复学堂,...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

vue与后端json数据交互

vue 订阅