zoukankan      html  css  js  c++  java
  • 【前端进阶】最新vue读取properties文件配置内容,最详细解锁

    简述

    在前后端配合开发的时候有的时候也会遇到,前端使用的api是需要读取后端用配置文件properties。这个格式是我们前端不太会碰到。同时网上关于读取这个文件的方案也比较少,我也是碰了不少坑才解决了这个问题。下面就上干货。

    准备工作

    读取properties文件需要配置jquery和它的插件jquery.i18n.properties。下面提供了两个文件的下载地址有需要的可以自己去下载。jquery版本不限制,这里提供2.1.4的。
    jquery2.1.4
    jquery.i18n.properties

    把这两个文件放在vue项目的static目录下,记住一定要放在static目录下,因为我们要在index.html页面直接引用,其他目录不能直接读取.
    同时也把需要读取的配置文件放这里,我这里是conf.properties,也放在了static文件里

    conf.properties 文件里我们要读取的内容是

    ####sts-api
    sts.api=XXX
    

    文件放置好后,在vue的index.html引用这两个文件,并开始调用方法读取配置文件。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>sts-vue</title>
             <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
             <script type="text/javascript" src="./static/jquery.i18n.properties-min-1.0.9.js"></script>
      </head>
      <body>
        <div id="app"></div>
        
        <script type="text/javascript">
    
           function loadProperties(){
           jQuery.i18n.properties({
           name:'conf',//文件名称
           path:'./static/',//具体路径位置
           mode:'map',//读取模式,这里用map
           callback: function() {//回调方法,你读取后要干什么都在这里
             let val = $.i18n.prop('sts.api')
            console.log(val);//其中sts.api为properties文件中需要查找到的数据的key值
            localStorage.setItem("api",val);//我这里存入localStorage
           }
           });
           }
           loadProperties();
          
        </script>
      </body>
    
    </html>
    
    

    总结

    读取properties文件的方式前端现在网上能找到的方法基本都是用这个jquery加插件的方式,我也是自己改良后这么干的,如果有更好的方式可以在评论区告知一下,谢谢。

  • 相关阅读:
    定义 : angular view 和controller 之前的 ng-init 由谁来负责
    pl/sql如何在云端服务器上新建数据库
    oracle连接服务器上数据库
    svn check下来的代码在eclipse中没有run on server
    sql server在修改表结构后不能保存
    用mybatis-generator自动生成代码报“前言中不允许有内容”
    启动Tomact时报failed to start conponent
    spring MVC中controller失效
    maven项目中连接sqlserver和mysql的区别
    DBCP连接池的配置
  • 原文地址:https://www.cnblogs.com/caominjie/p/14761882.html
Copyright © 2011-2022 走看看