前言:这篇博客主要讲下这段时间遇到的小问题。比较杂,我自已当作总结了。真是尴尬,实习之前我是后台做的比较多,之前花了一个月较系统学了前端html,css,ajax,bootstrap这些,有兴趣可以看看我之前写的前端博客,感觉写得还可以,对初学者的话。前程明亮-前端系列。学知识嘛 ...
前言:这篇博客主要讲下这段时间遇到的小问题。比较杂,我自已当作总结了。
真是尴尬,实习之前我是后台做的比较多,之前花了一个月较系统学了前端html,css,ajax,bootstrap这些,有兴趣可以看看我之前写的前端博客,感觉写得还可以,对初学者的话。前程明亮-前端系列。学知识嘛,能系统地学习是最好的,出现问题比较容易分析。过去一个月主要是做前端的,so 这篇博客主要写前端部分。
一、Echarts
echarts是百度开发维护的一个 可视化插件。可视化在系统开发中相当重要,比如现在公司在开发的运维系统DBMS, 监控告警系统,前端都要根据后台传的数据,利用如echarts, vis.js插件将数据可视化。啥也不多说了,直接看官网吧http://echarts.baidu.com/index.html。第一次看感觉很牛逼! 而且文档还是中文的!! 即然是中文的,肯定能看懂啦。
在看官网时,有下面的例子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script src='/images/loading.gif' data-original="echarts.js"></script> 8 </head> 9 <body>10 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->11 <div id="main" style="width: 600px;height:400px;"></div>12 <script type="text/javascript">13 // 基于准备好的dom,初始化echarts实例14 var myChart = echarts.init(document.getElementById('main'));15 16 // 指定图表的配置项和数据17 var option = {18 title: {19 text: 'ECharts 入门示例'20 },21 tooltip: {},22 legend: {23 data:['销量']24 },25 xAxis: {26 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]27 },28 yAxis: {},29 series: [{30 name: '销量',31 type: 'bar',32 data: [5, 20, 36, 10, 10, 20]33 }]34 };35 36 // 使用刚指定的配置项和数据显示图表。37 myChart.setOption(option);38 </script>39 </body>40 </html>
View Code
用浏览器打开如下图:
异步加载
入门示例中的数据是在初始化后setOption
中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts
中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。下面是官网的代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src='/images/loading.gif' data-original="echarts.js"></script> 7 <script src='/images/loading.gif' data-original="../bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script> 8 </head> 9 <body>10 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->11 <div id="main" style="width: 600px;height:400px;"></div>12 <script type="text/javascript">13 14 var myChart = echarts.init(document.getElementById('main'));15 // 显示标题,图例和空的坐标轴16 myChart.setOption({17 title: {18 text: '异步数据加载示例'19 },20 tooltip: {},21 legend: {22 data:['销量']23 },24 xAxis: {25 data: []26 },27 yAxis: {},28 series: [{29 name: '销量',30 type: 'bar',31 data: []32 }]33 });34 35 // 异步加载数据36 $.get('data_test.json').done(function (data) {37 // 填入数据38 myChart.setOption({39 xAxis: {40 data: data.categories41 },42 series: [{43 // 根据名字对应到相应的系列44 name: '销量',45 data: data.data46 }]47 });48 });49 50 </script>51 </body>52 </html>
当然,我在html文件的同级目录下,也放下data_test.json文件:上面html代码36行是通过ajax的GET请求,到data_test.json文件取数据,然后可以通过data.xxx调用json文件的数据。
{ "categories": [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ], "data": [ 5, 20, 36, 10, 10, 20 ]}
但是我找到HTML文件,用浏览器打开,数据加载不出来:
这就懵比了,怀疑人生。看了下浏览器的错误信息:
WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是:
- 新建文件夹
- 新建需要的文件
- 在Sublime(或其他编辑器)中完成DEMO的编码
- 双击HTML文件,直接在浏览器中运行演示
如果此时Demo中有AJAX操作,浏览器就会报一个错:
file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
原因很简单,浏览器(Webkit内核)的安全策略决定了file协议访问的应用无法使用Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
跨域请求仅支持协议:http, data, chrome, chrome-extension, https, chrome-extension-resource
so, 我理解上面的意思是 因为HTML文件里面有ajax方法,你直接右键html文件,用浏览器打开是无法成功执行ajax方法的。你没有类似于服务器的东西。
最后我是直接用pycharm IDE打开的本地的echarts5.html,浏览器网址如下:
看到没,本地端口63342,后面还带了一堆参数,这其实是IDE用我们的本地电脑端口开的一个端口,当作"服务端"。
二、removeClass
移除class样式,一般我们只需移除一个class, eg:hidden. 但之前有个需求,要移除一个标签两个class样式,怎么做? 查了下jquery的API,果然找到了
要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称,多个 class 名称用空格分隔
三、数据库导入sql表
一天部门老大,给我发了份sql表,让我更新下,我也不知咋更新到数据库,气氛相当尴尬。
mysql> use bigo_cmdbmysql> source /tmp/instance_meta_info.sql;
说到底还是Linux不够6呗~_~
四、Django后台如何传数据给前端JS
这个问题是我用vis.js插件做拓扑图时遇到的,说到拓扑图,不禁得吹下牛,真得很屌,明天回公司去截个图给发上来。多个mysql之间有主从关系,我可以用箭头表示之间的关系(通过后台数据库的ID判断谁指向谁),前端我还自己写了JS生成拓扑图。有兴趣的可以留言,我可以分享部分代码。说多了,生成拓扑时我前端的javascript需要后端返回的数据,尼玛,一般是在html中获取后台返回的数据,要返回给JS,还真没遇过:
Django 数据json格式传输js
- 把一个 list 或者 dict 传递给 js文件,处理后显示到网页上, 直接在视图函数(views.py中的函数)中渲染一个 list 或 dict 的内容,和网页其它部分一起显示到网页上,一次请求一次传输。
- views.py中返回的函数中的值要用 json.dumps(xx)处理,参数xx需要字典或者列表。
- 在网页上要加一个 safe 过滤器。
一 、大致的流程
1、第一步,在view.py渲染
1 # -*- coding: utf-8 -*- 2 from __future__ import unicode_literals 3 import json 4 from django.shortcuts import render 5 def home(request): 6 List = ['列表1', '列表2'] 7 Dict = {'键1': '值1', '键2': '值2'} 8 return render(request, 'home.html', { 9 'List': json.dumps(List),10 'Dict': json.dumps(Dict)11 })
2、第二步,对应需要跳转的网页home.html :
1 <script type="text/javascript">2 var List = {{ List|safe }};//列表3 var Dict = {{ Dict|safe }};//字典4 </script>
ps: 注意分号不要漏了,需要模板语言两个大括号{{ }};
可参考: http://blog.csdn.net/agly_clarlie/article/details/50551807
五、Bootstrap-select
官网移步: http://silviomoreto.github.io/bootstrap-select/examples/
我对bootstrap-select算是有一定了解。为何? 这就要从模态框说起了,因为之前是在做运维系统,涉及到很多模态框。一个月前刚入职其实都还没了解模态框这鬼东西~_~ 模态框== 弹出框(我的理解)。先来学习下模态框: 移步bootstrap官网http://v3.bootcss.com/javascript/#modals
这是我之前根据官网博客写的小demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Bootstrap 实例 - 模态框(Modal)插件</title> 6 <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> 7 8 </head> 9 <body>10 11 <h2>创建模态框(Modal)</h2>12 <!-- 按钮触发模态框 -->13 <button data-toggle="modal" data-target="#myModal">14 开始演示模态框15 </button>16 <!-- 模态框(Modal) -->17 <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">18 <div >19 <div >20 <div >21 <button type="button" data-dismiss="modal" aria-hidden="true">22 ×23 </button>24 <h4 id="myModalLabel">25 模态框(Modal)标题26 </h4>27 </div>28 <div >29 在这里添加一些文本30 </div>31 <div >32 <button type="button" data-dismiss="modal">关闭33 </button>34 <button type="button" >35 提交更改36 </button>37 </div>38 </div><!-- /.modal-content -->39 </div><!-- /.modal -->40 </div>41 42 <script src='/images/loading.gif' data-original="../bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>43 <script src='/images/loading.gif' data-original="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>44 45 <!--46 <script>47 // 只需要点击 ESC 键,模态窗口即会退出。48 $(function() {49 $('#myModal').modal({50 keyboard: false51 })52 });53 </script>54 -->55 56 <script>57 $(function() {58 $('#myModal').modal('hide')59 });60 </script>61 62 <script>63 $(function() {64 $('#myModal').on('hide.bs.modal',65 function() {66 alert('嘿,我听说您喜欢模态框...');67 })68 });69 </script>70 71 </body>72 </html>
其实bootstrap已经封装得很牛逼了。模态框说白了就是一个div,但是它有个属性,div里面就是modal-content,通俗理解就是模态框的内容,内容又细分为三部分
- modal-header
- modal-body (modal是模态框的重点,一般用来放form表单)
- modal-footer
如果一个界面有多个模态框,你如何知道击A按钮就打开A模态框,而不是B模态框?? 很简单阿
data-target="#myModal"
给button加上data-target属性,属性值为需要打开的模态的的ID.
.modal('show')
手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal
事件之前)。
$('#myModal').modal('show')
.modal('hide')
手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal
事件之前)。
$('#myModal').modal('hide')
事件
Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
All modal events are fired at the modal itself (i.e. at the <div >
).
事件类型 | 描述 |
---|
show.bs.modal | show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。 |
shown.bs.modal | 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。 |
hide.bs.modal | hide 方法调用之后立即触发该事件。 |
hidden.bs.modal | 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。 |
loaded.bs.modal | 从远端的数据源 加载完数据之后触发该事件。 |
$('#myModal').on('hidden.bs.modal', function (e) { // do something...})
模态框学习告一段落,具体移步官网。
先回顾下原本的需求:
现在系统有一个mysql实例(包括很多信息IP, sql版本, 运维负责人....),我点击编辑按纽。比如下图:我点击按钮后弹出模态框如下图,怎么打开呢?肯定是调用一个onclick方法,JS方法里面再让模态框show一下。具体代码现在没有,明天回公司到SVN找找看。当然,不止编辑按纽,还有新增按钮,点击新增按纽也需要打开一个模态框,和下图一样布局与样式,新增的模态框的代码 复制 编辑模态框的代码就OK?傻呀,这代码太多了,所以稍微时智的方法就是新增框与编辑框用同一个模态框modal。
新增框与编辑框有不同,就是新增框form表单里面的input,select标签是没有数据的,编辑框是一调用onclick方法,前端发起Ajax方法,后台返回数据,前端再写JS给编辑框的form表单里面的input,select标签添加value。
先点击编辑按纽,打开模态框,关闭,再点击新增按钮,猜猜发生啥?天呐! 新增框里面有编辑框“残留”的数据。为什么呢?因为你关闭编辑模态框的时候没有清空form表单的数据。
如何清空form表单的数据,input标签很简单,令其value=""便可以,但是select标签就麻烦了。这里的select标签有使用了流行的bootstrap-select插件。待续……
六、ImportError: No module named runner
使用ansible api setup 收集服务器配置信息。公司是用python2.7 + django1.8版本开发,比较low....
from ansible.runner import Runner 出现ImportError: No module named runner
经一番折腾后发现原来是ansible版本升级后没有此模块,降为ansible 1.7.2后正常
新版本以后再折腾
七、杂
1、 Python 的内建函数 locals()
如果你是个喜欢偷懒的程序员并想让代码看起来更加简明,可以利用 Python 的内建函数 locals() 。它返回的字典对所有局部变量的名称与值进行映射。因此,前面的视图可以重写成下面这个样子:
def current_datetime(request): current_date = datetime.datetime.now() return render_to_response('current_datetime.html', locals())
上面的代码等于下面的
def current_datetime(request): now = datetime.datetime.now() return render_to_response('current_datetime.html', {'current_date': now})
2、That port is already in use.
我是在Linux下用pycharm开发的,数据库的API是用本地的8000端口,有时会出现8000端口已被使用。
netstat -ntlp
It will show something like this.
Active Internet connections (only servers)Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 127.0.0.1:8000 0.0.0.0:* LISTEN 6599/python tcp 0 0 127.0.0.1:27017 0.0.0.0:* LISTEN - tcp 0 0 192.168.124.1:53 0.0.0.0:* LISTEN - tcp 0 0 127.0.0.1:631 0.0.0.0:* LISTEN - tcp6 0 0 :::3306 :::* LISTEN
So now just close the port in which Django/python running already by killing the process associated with it.
kill -9 PID
in my case
kill -9 6599
Now run your Django app.
可参考:https://stackoverflow.com/questions/20239232/error-that-port-is-already-in-use
后期我没有使用模态框,再老大的建议下改用了layer弹出框,关于layer可以写的东西太多了,我打开留在下一篇博客写。下下篇博客会写表单验证,表单验证自己的折腾了很久,学习了很多验证的插件,都遇到一些问题,最后选用了jquery.validate.js插件。我自己封装了一个Layer+Jquery.validate.js+Ajax的方法,为部门开发的DBMS和监控项目节省了超多的代码。
原标题:实习总结
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。