关于前端框架的配置和使用问题

来源：互联网发布：网络客服的职责有哪些编辑：程序博客网时间：2024/06/03 15:52

一：富文本的配置总结。

由于最近要实现web项目的上传文本、图片等功能，这时候就需要借助要富文本这个东西了，
然而网上的一些讲解配置的东西看的都不是很清楚，摸索之后还是自己总结了下。
    1：首先，去网上下载一个Ueditor或者是kindEditor（推荐使用）；

    2：将下载好的文档解压，整个导入到你的项目中去，记住你导入的路径；

    3：在文件里面找到file_manager_json.jsp文件，修改里面的图片上传地址（推荐使用绝对路径）；

   4：找到upload_json.jsp文件，修改里面的文件保存地址（绝对路径）；

   5：打开你实现功能的前台页面（jsp），声明你要用上的js和css，

   6：然后在head里面加上这段代码，就可以实现文件的上传了。

       var editor;
       KindEditor.ready(function(K) {
           window.editor = K.create('#editor_id');
       });
       var options = {
           cssPath :"static/editor/themes/qq/qq.css",
           filterMode : true,
           themeType:"common",
           uploadJson :

               '<%=request.getContextPath()%>/admin/upload_json.jsp',

               fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',

               allowFileManager : true
       };
       var editor = K.create('textarea[name="content"]', options);

二：pintuer遇到的问题以及总结
   在进行web项目开发的时候，一定会遇到前台的问题，而pintuer是一款优秀的响应式的前端开源框架，
   会让前端开发变得得心应手。总结一下使用拼图的经验吧，
   首先我在网上下载了pintuer的包，解压之后将js和css放入项目中相应的包中，
   在jsp文件里面声明你所要用上的css和js，（路径要改成在项目中的绝对路径）
   然后在pintuer里面找你所需要的模块，参考里面的代码，根据它里面的代码实现你所想要实现的
   功能模块。其实，pintuer没什么好讲的。



三：Echarts
   echarts在我的理解中，就是一个适用于图形化工具的创建的一个插件（理解的比较片面哈）
   然而echarts使用起来真的狠狠狠强大，
   不想提的就是每次都要去网上下载包，下完还要解压，解压完了还要往项目里面导，
   导完了也就算了吧，但是你又要配置，哦，对了。这个不需要配置了，把文件整个的导入项目后，
   你有一个你想在某个页面上实现功能的jsp页面，在这jsp页面里面加上下面这段代码：
   <!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    
    <div id="main" style="height:400px"></div>
    
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    </script>
</body>

   至于下面的代码部分就是你想要实现的什么样的图表了，然后在根据你想要实现的，来修改代码中的
   内容。
   哦，对了对了，js和css这些东西要是要注意，同上面的那些东西。


ss

3 0