精华内容
下载资源
问答
  • 第一步、引用vue富文本组件quillEditor所需的一些配置文件 import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill....

    第一步、引用vue富文本组件quillEditor所需的一些配置文件

    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    

    富文本初始化

    props: {
        /* 编辑器的内容 */
        value: {
          type: String
        },
        /* 图片大小 */
        maxSize: {
          type: Number,
          default: 16777216 //kb
        }
      },
      components: { quillEditor }
    

    第二步、编写视图代码
    在这里插入图片描述
    代码中需要说的是quillEditor富文本上传图片我这边是借助vue的原生组件el-upload 当然也可以用其他上传文件组件实现,这里为了兼容性选择了原生大家也可以尝试其他的组件。
    这里需要说一下几个重点属性
    1.el-upload
    action: 绑定上传服务器的地址
    headers: 请求的头文件
    on-success: 上传成功回调
    on-error: 上传错误回调
    before-upload: 上传图片前回调
    2.quill-editor
    v-model: 数据双向绑定
    options: 组件定义
    @blur: 失去焦点事件
    @focus: 获得焦点事件
    @change: 内容改变事件
    第三步、编写javascript代码
    1.el-upload
    在js中定义上传图片服务器地址

    uploadImgUrl: VUE_APP_BASE_API + "/admin/uploadImage"
    

    引用头文件

    headers: {
            Authorization: 'xxx' + getToken()
          }
    

    上传成功回调(很重要)用于将上传成功的图片url地址存入富文本中

    quillImgSuccess(res, file) {
          // res为图片服务器返回的数据
          // 获取富文本组件实例
          let quill = this.$refs.quillEditor.quill;
          // 如果上传成功
          if (res.code == 200) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片  res.url为服务器返回的图片地址
            quill.insertEmbed(length, "image", res.data.fileUrl);
            // 调整光标到最后
            quill.setSelection(length + 1);
          } else {
            this.$message.error("图片插入失败");
          }
        }
    

    上传图片错误的回调
    在这里插入图片描述
    上传图片前回调(主要负责判断文件类型等等)

    handleBeforeUpload(file) {
          let fileType = file.type;
          if(fileType === 'image/jpeg' || fileType === 'image/png'){
            return true;
          }else {
            this.$message.error('请插入图片类型文件(jpg/jpeg/png/gif)');
            return false;
          }
        }
    

    2.quill-editor
    组件定义

    editorOption: {
            placeholder: "",
            theme: "snow", // or 'bubble'
            placeholder: "请输入内容",
            modules: {
              toolbar: {
                container: toolbarOptions,
                handlers: {
                  image: function(value) {
                    if (value) {
                      // 触发input框选择图片文件
                      document.querySelector(".quill-img input").click();
                    } else {
                      this.quill.format("image", false);
                    }
                  }
                }
              }
            }
          }
    

    定义了组件还需要在引用的地方定义一下富文本的工具栏toolbarOptions

    const toolbarOptions = [
      ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
      ["blockquote", "code-block"],                    // 引用  代码块
      [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
      [{ indent: "-1" }, { indent: "+1" }],            // 缩进
      [{ size: ["small", false, "large", "huge"] }],   // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
      [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
      [{ align: [] }],                                 // 对齐方式
      ["clean"],                                       // 清除文本格式
      ["link", "image", "video"]                       // 链接、图片、视频
    ]
    

    下面是焦点以及内容事件

        onEditorBlur() {
          //失去焦点事件
        },
        onEditorFocus() {
          //获得焦点事件
        },
        onEditorChange() {
          //内容改变事件
          this.$emit("input", this.content);
        }
    

    最后将v-model绑定的数据提交到后端就能实现富文本中内容的存储了。

    展开全文
  • 前端JSON数据传值到后端接收方式

    万次阅读 2019-06-18 09:32:00
    前端发送的数据: 前端JS请求: 1 //demo为JSON格式数据 2 let para ={ ...5 //这一段是Vue封装的方法,本质就是一条url 6 this.$http.post('${webRoot}/demo?list', para,{emulateJSON: tr...

    前端发送的数据:

    前端JS请求:

    1  //demo为JSON格式数据
    2  let para ={
    3      dataJ: JSON.stringfiy(demo);
    4  }
    5  //这一段是Vue封装的方法,本质就是一条url
    6  this.$http.post('${webRoot}/demo?list', para,{emulateJSON: true}); 

    后端Controller接收数据:

     1 @RequestMapping(params = "list")
     2 @ResponseBody
     3 public void treeList(String treedata , HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid){
     4 //      request.getParameterValues("treedata");
     5         JSONArray jsonArray = JSONArray.fromObject(treedata);
     6         for (Object o : jsonArray) {
     7             JSONObject jo = (JSONObject)o;
     8             System.out.println(jo.getString("parent"));
     9         }
    10 }

    =================分割线===========================

    反之

    后端Controller封装数据:

     1     @RequestMapping(params = "query")
     2     public void query(HttpServletRequest request) {
     3         //父级
     4         Map<String,Object> parentMap=new HashMap<String, Object>();
     5         parentMap.put("id", "001");
     6         parentMap.put("name", "王某");
     7         //子级
     8         Map<String,Object> childMap=new HashMap<String, Object>();
     9         childMap.put("id", "child001");
    10         childMap.put("name", "王孩子");
    11         //将子级Map封装成List
    12         List<Map<String,Object>> ChildMapList=new ArrayList<Map<String,Object>>();
    13         ChildMapList.add(childMap);
    14         //将子级MapList写进父级Map中
    15         parentMap.put("children", ChildMapList);
    16         //将父级Map封装成List
    17         List<Map<String,Object>> parentMapList=new ArrayList<Map<String,Object>>();
    18         parentMapList.add(parentMap);
    19         //将封装好的数据转换成Json
    20         JSONArray arr = JSONArray.fromObject(parentMapList);
    21         request.setAttribute("mapList", arr);
    22 
    23         request.setAttribute("mapList", arr);
    24         
    25     }

    前端页面el表达式接收 ${mapList}  后数据格式:

    ----------展开后:

     

    我是应用在树形菜单的,这一部分代码就不展示了。效果如下:

     

    转载于:https://www.cnblogs.com/ic710/p/11043486.html

    展开全文
  •  在做员工系统时,前端传递图片文件给后端后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存后端数据库中...

    问题背景

     在做员工系统时,前端传递图片文件给后端,后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存到了后端数据库中。因为后端返回的图片路径不变,导致前端图片不会重新请求数据。

    解决办法

     我们需要使图片路径不完全相同,才会使得img标签会重新请求新的图片,这时我加入了随机数进行更改图片的完整路径,但不影响图片向真正的地址去请求数据。
    代码:

     		/* 上传头像成功时的回调 */
            handleAvatarSuccess(res, file) {
                console.log(res,file)
                if(res.code == 200){
                    this.$message.success("上传成功")
                }
    	 		//在请求到的图片路径后方加入随机数,使得每次渲染的完整图片路径都不相同,使得图片重新加载
                this.imageAvatarUrl = res.data + '?'+ Math.random();
                
            },
    

     问题解决~

    展开全文
  • 各位大佬,前端vue小白,现在已经获取要key,vue要怎么写帮这个值传给后台并返回查询的数据。 前端 ``` methods: { viewInfo(data) { if (data && data.length > 0 && data[0].leaf) { this....
  • 文章目录#1.vue+axios保存后端发来的token#1.1根据接口文档来保存#1.2使用localstroage或者cookie或者sessionStroage保存token#2.vue+axios取出保存的token,向后端发送请求#2.1使用cookie携带token(获取之后,再...

    #1.vue+axios保存后端发来的token

    #1.1根据接口文档来保存

    这是接口文档中后端返回的token数据和类型,以及过期时间
    在这里插入图片描述
    下面我将使用这个接口文档进行模拟token的保存和发送到后端

    #1.2使用localstroage或者cookie或者sessionStroage保存token

    1.下面我使用loaclStroage()来举例。
    首先介绍一下localStroage()的使用方法。
    存值:window.localStroage.setItem(“key”,“value”)
    取值:window.localStroage.getItem(“key”)
    介绍一下session.Stroage()的使用方法和loaclStroage()是一样的
    存值:window.sessionStroage.setItem(“key”,“value”)
    取值:window.sessionStroage.getItem(“key”)

    this.axios({
              url:"",
              method:"post",
            })
            .then(function(res){
              //如果成功,直接保存
              //保存token的值,res是接收到后端返回的全部数据,使用res.access_token取出(其他同理)
              window.localStroage.setItem("access_token","res.access_token");
              window.localStroage.setItem("token_type","res.token_type");
              window.localStroage.setItem("expires_in","res.expires_in"); 
            }.bind(this))
    

    最后我再说说cookie的使用
    cookie是储存在用户本地终端上的数据。
      在我们登陆网站时有记录密码,也有时间限制比如说7天,5天等等这都是我们利用cookie来写的,
      这就是利用了cookie的会话周期,但cookie同时又是不安全的我们可以打开网页看到用户输入的密码,而且又是依赖于服务器环境的,
      再写cookie时还要设置储存路径,而我们获取出来的值又是字符串,同时它又是非常小的,只有4kb,
      下面我们来封装一下coookie

    封装设置cookie:
      function setCookie(name,value,iDay) {  //传值为名,值,过期时间    if(iDay){ //如果有过期时间的话则执行这个条件
           var oDate=new Date(); //获取当且的事件戳
            oDate.setDate(oDate.getDate()+iDay); //设置过期事件
            document.cookie=name+"="+value+"; path=/; expires="+oDate;//设置cookie
        }else {//如果有过期时间的话则执行这个条件 设置cookie
            document.cookie=name+"="+value+"; path=/"; //名,值以及根目录
        }
    }
     
    获取cookie值
    
    function getCookie(name) {
        var arr1=document.cookie.split("; ");  获取cookie值并且用”; “来进行切割成数组
        for(var i=0;i
            var arr2=arr1[i].split("="); //再次利用split()方法进行切割为二维数组
            if(arr2[0]==name){  //循环二维数组,当第一个值为你所传的值则返回本数组的第二个值
                return arr2[1];
            }
        }
        return " ";
    }
    
    删除cookie
    
    function removeCookie(name) {
        setCookie("jack","1234",-1);  //再次调用setCookie,关键是把过期时间设置为负值
    }
    

    #2.vue+axios取出保存的token,向后端发送请求

    首先看一下后端返回的token类型,以及token放在哪个地方进行携带到后端
    在这里插入图片描述
    然后我们再来模拟:以localStorage()为例,sessionStroage()一样

    this.axios({
              url:"",
              method:"post",
            } 
            //配置请求头,在请求头中携带token
            headers: {
            //"Authorization" 与要求的请求头类型相同
            //'Bearer' 这个是token类型,也就是  localStorage.getItem("token_type")。 
                 "Authorization":'Bearer'+localStorage.getItem("access_token");
     //如果是sessionStroage()
               // "Authorization":'Bearer'+localStorage.getItem("access_token");            
     //如果是cookie,只保存了一个键值对,   如果是多值的话,看2.1使用封装的方法,逐个取出值即可.       
                 "Authorization":'Bearer'+document.cookie
            })
            .then(function(res){
              //如果成功,直接保存
              
            }.bind(this))
    

    #2.1使用cookie携带token(获取到之后,再进行传值即可)

    2.封装一个获取 cookie 的方法
    
    function getCookie( key ) {
    var str = document.cookie; // 获取所有cookie
    var arr = str.split("; "); // ["name=pengpeng", "age=18", "desc=shuai"]
    
    // 遍历数组, 找出 键===key时的 value值
    for ( var i = 0; i < arr.length; i++ ) {
    var data = arr[i].split("="); // ["name", "pengpeng"]
    
    if ( data[0] === key ) {
    // 如果相等, 说明找到了
    return data[1];
    }
    
    }
    
    }
    

    #3.如果这篇文章对你有帮助,请点个赞吧?有疑问或者我有写的不对的地方欢迎交流,指正。

    展开全文
  • 关于Vue后端数据后props子组件数值为空的问题 当从后端数据后,确实有数据 但是在子组件中props传值后 控制台打印props的值发现为空 是因为刚初始化的时候,默认introduces为空,props的值还没有被传输...
  • 后端 后端都大同小异,方法上没有区别,在这里以柱状图为例。 sql:数据库的表格先写好,名称、类型、数据,然后连接数据库 用的是Navicat写,表名:sys_mapbar 在IDEA里,写XML文件,与数据库调用直接相关的语句 &...
  • 上传成功后传值到vue

    2020-12-06 09:42:53
    应该如何把url绑定到vue页面?有什么好的方法?this的指向问题吗?求大佬们指点一下,本人主要做后端的,前段不太懂</p><p>该提问来源于开源项目:qiniu/js-sdk</p></div>
  • 问题: 父组件props传值给子组件,子组件在created中获取不传过来的值 关于props传值,这里不赘述直接看官网:https://cn.vuejs.org/v2/guide/components-props.html 分析:因为父组件props传给子组件的值是通过...
  • 2、 将后端的数据库数据显示页面中 1.传递本地json文件数据: 1.首先导入axios包: import axios from "axios"; 2.在方法中写入代码: data中: data(){ return{ DataList:[], orderId:this.orderId
  • vue父子组件间传值

    2019-01-23 18:03:00
    最近因项目需求接触了vue,本人是后端开发,对vue很是陌生,别人的代码,搜索与列表是写成了两个vue组件,导致列表中的分页查询拿不搜索框中的值,研究了两天,在这里记录一下,谁曾想到一个后端程序员写的第一篇...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
关键字:

vue传值到后端

vue 订阅