您的位置：首页 > Web前端

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

2016-01-05 18:02 369 查看

一：富文本的配置总结。

由于最近要实现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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航