### Vue中的组件

首先注册组件：

        Vue.component("my-btn", {
            data:function() {
                return {
                    count:0
                }
            },
            template:"#mybtn"
        });

需要一个组件名称和组件的代码模板，组件中的数据和Vue实例的数据不同，一个组件的data选项必须是一个函数。

定义模板

    <template id="mybtn">
        <button v-on:click="count++">已经点击了{{ count }}次！</button>
    </template>

编写Vue实例，完整代码如下：


    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>
    <template id="mybtn">
        <button v-on:click="count++">已经点击了{{ count }}次！</button>
    </template>

    <div id="app">
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
    </div>

    <script>
        Vue.component("my-btn", {
            data:function() {
                return {
                    count:0
                }
            },
            template:"#mybtn"
        });

        vm = new Vue({
            el:'#app'
        })

    </script>

如上，就可以实现一个全局的组件注册，可以重复使用。

Vue快速学习笔记(3)Vue的组件

### Vue中的监听

`watch`用来监听`Vue`实例中数据的变化，然后可以出发一个事件。
例如，反转字符串：



    <script src="assets/plugins/vue.js"></script>
    <div id="app">
        <input type="text" v-model="vt">
        <p v-text="nvt"></p>
    </div>

   
    <script>
       var vm = new Vue({
            el:"#app",
            data:{
                vt:"",
                nvt:""
            },
            watch: {
                vt:function(val){
                    this.nvt=this.vt.split('').reverse().join('')

                }
            },
        })

    </script>

除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。


### Vue中的计算属性

计算属性和监听有些相似，有的时候作用都差不多吧。

下边的例子就是采用Vue的计算属性，

 
    <script src="assets/plugins/vue.js"></script>

    <div id="app1">
        <p>计算属性</p>
        <input type="text" v-model="vt">
        <p v-text="rtvt"></p>
    </div>

   
    <script>


        var vm1 = new Vue({
            el :"#app1",
            data:{
                vt:""
            },
            computed: {
                rtvt:function(){
                    return this.vt.split("").reverse().join("")
                }
            },

        })

    </script>


感觉计算属性要比监听简单直观些。

Vue快速学习笔记(2)Vue中的监听与计算属性

## Vue.js 简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

## 第一个Vue实例



    
    <script src="https://suiyan.cc/assets/plugins/vue.js"></script>

    <div id="v1" v-bind:title="title">
    {{ msg }}
    <p v-text="vtext"></p>
    <div v-html="vhtml"  v-on:click="alt"></div>

    <input type="text" v-model="tx">
    <p v-text="tx"></p>
    </div>

    <script>
        var v = new Vue({
            el: "#v1",
            data:{
                msg:"Hello Vue!",
                title:"试试把鼠标放上去。",
                vtext:"我是通过v-text绑定的数据",
                vhtml:"<h1>哈哈哈字是不是好大？",
                tx:"v-model绑定数据，修改试试吧"
            },
            methods:{
                alt :function(){
                    alert("是不是有提示了？")
                }
            }
        })
    </script>

这是一个声明式渲染 `{{ msg  }}`类似于模板便签被插在HTML中。
`v-text,v-html`是另外两种数据绑定方式。

`v-bind:title`Vue中的特殊指令，可以简写为`:title`,

`v-on:click`绑定点击事件

`v-model` 可以双向绑定数据，试试修改程序中的数据。

## MVVM

MVVM是一种架构模式，并非一种框架，是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。

在MVVM中，View和View Controller是联系在一起，可以把它们视为一个组件，View和View Controller都不能直接引用Model，而是通过引用视图模型（ViewModel），ViewModel是存放View Controller所需要数据的地方（View Controller敢要，ViewModel就敢给），使用MVVM会轻微的增加代码量，但总体上减少了代码的复杂性、耦合性。

Vue快速学习笔记(1)Vue实例基础



<a href='https://gitee.com/J_Sky/suiyan/stargazers'><img src='https://gitee.com/J_Sky/suiyan/badge/star.svg?theme=dark' alt='star'></img></a>

## 介绍
碎言这个名称取自与"碎言片语"，码兄累了吗？累了就休息一下，为未来的自己留下一些碎言片语吧。
演示： [碎言博客](http://j_sky.gitee.io/suiyan)

![](https://suiyan.cc/assets/images/fabu.png)

## 安装

首先克隆下载碎言静态博客

* [Gitee](https://gitee.com/J_Sky/suiyan.git)
* [GitHub](https://github.com/bosichong/suiyan.git)

可以通过`git clone https://gitee.com/J_Sky/suiyan.git`下载，也可以通过下载.zip压缩包下载后解压缩即可。

## 创建码云代码仓库

登录码云注册账号，然后开始创建自己的代码仓库用来存放博客的页面。

### 1. 创建

![](https://suiyan.cc/assets/images/blog/Snip20200108_1.png)

填写相关选项创建一个新的代码仓库

![](https://suiyan.cc/assets/images/blog/Snip20200108_3.png)


### 2.关联本地代码仓库

如果你对`Git`操作非常了解，可以跳过此步骤。

进入你本地博客的根目录：
先配置`Git`的基本信息

    $ git config --global user.name "你的名字或昵称"
    $ git config --global user.email "你的邮箱"

然后绑定远程代码仓库下边的仓库地址换成你刚刚建好的代码仓库的远程地址

    $ git init 
    $ git remote add origin https://gitee.com/用户个性地址/HelloGitee.git

### 3.创建你的第一篇博客

在终端进入你的本地博客目录运行

    python z.py

这个时候会打印一些关于`z.py`命令行的一些帮助信息，仔细看看可以了解一些基本操作。

未完待续



使用碎言静态博客依托码云Pages搭建自己的免费博客


## 发布了碎言静态博客的功能完整第一个版本

经过这段时间的努力，终于把博客成功的更换成了自己开发的碎言静态博客，也算是对这段时间学习JavaScript的一个总结。
后续还要继续开发维护，添加一些使用的功能，目前来说，对这个版本最大的满意就是界面的美化和网站的加载速度。
后续还会继续优化。

## 未来需要添加的功能

* 支持在线一件换肤。
* 更好的拓展功能。
* 更实用的功能。
* 吸引更多的程序员兄弟前来提交代码。

加油2020！！

经过这段时间的努力，终于把博客成功的更换成了自己开发的碎言静态博客，也算是对这段时间学习JavaScript的一个总结。

今天是个好日子发行了碎言静态博客的功能完整版


## 遇到的问题

由于项目总是有一些小BUG，回想了一下项目中的JS文件的组织问题，估计应该是JS文件分散造成的加载不稳定，有时会造成一些变量莫名的未定义，事已至此，只有将这些文件打包到一个文件中就可以很好的解决这个问题，但是今天在网上搜了一些都是最近流行的打包工具，感觉功能过于丰富，以当前的项目来说用这些流行的打包工具有些大材小用了，而且学习成本高了一些，后来看了一下手头上的两JavaScript本书都推荐`Ant`打包，所以决定按书上的来吧，省时省力。

## 项目目录结构

书上说项目主要有三个目录：

* `bulid`用来放置最终构建的文件，理想情况下这个目录不应该提交
* `src`用来存放所有的源文件，包括用来进行文件分组的子目录
* `test` 测试文件。

## Ant打包

ant的安装教程很多，这里就不在重复了。

前端构建需要明白自己要做的是什么，其实打包构建的工具很多的，但是有些打包工具的功能太多了，学习成本很大的，所以选择适合的工具也是很重要的。

ant通过配置`build.xml`来执行一系列`target`,任务的类型选择很多，依据目前项目的选择，有打包，校验，压缩等。

这里就不在贴代码了，具体可以查看`suiyan`根目录下的`build.xml`参考，网上的教程也很多的。





由于项目总是有一些小BUG，回想了一下项目中的JS文件的组织问题，估计应该是JS文件分散造成的加载不稳定，有时会造成一些变量莫名的未定义，事已至此，只有将这些文件打包到一个文件中就可以很好的解决这个问题，但是今天在网上搜了一些都是最近流行的打包工具，感觉功能过于丰富，以当前的项目来说用这些流行的打包...

前端项目构建打包的一些学习笔记


## PyWordTest

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/11/3tai.jpg)

## 介绍

孩子的学习总是让父母担忧，英语学习也是让家长的头疼之事，做为程序员老爸不能整天忙于编程而忽视了孩子的教育，我们也要搞点事情。孩子英文单词到底背的怎么样了？别怕，用PyWordTest,创建题库，轻松搞定孩子的英语单词拼写情况。

 **_> 本软件非英语单词学习软件，只是通过在线答题来检测孩子对单词拼写的掌握。_** 

软件通过在线考试，记录考试结果及每个单词的拼写对错情况，最后通过一些算法分析孩子对单词拼写熟练度。

通过易错单词了解孩子哪些单词没有掌握，通过自建题库加强孩子对生疏单词的反复练习，更多功能还在研发中。

程序截图：

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/11/1.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/11/2.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/11/3.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/11/4.jpg)


## 软件架构
基于Django构建的小学生英文单词背写检测考试系统。

环境需求：
python (3.6.1) 
Django (2.2.7) 
Pillow 


## 安装教程

进入程序目录后，运行python3 manage.py runserver

后台管理地址http://127.0.0.1:8000/admin/

管理员登陆:

用户名：admin 密码：17python.com

前台地址http://127.0.0.1:8000/

## 使用说明

程序已经采集了近1000小学生常用单词，后台可以根据自己的需要进行添加题库进行测试。

建议新建一个帐号用来考试建题库使用。

## 参与贡献

非常欢迎有想法的程序员参与提交代码，程序还很不完善！希望大家多多参与！


## 源码下载：

+ [github](https://github.com/bosichong/WordTest)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/WordTest)

孩子的学习总是让父母担忧，英语学习也是让家长的头疼之事，做为程序员老爸不能整天忙于编程而忽视了孩子的教育，我们也要搞点事情。孩子英文单词到底背的怎么样了？别怕，用PyWordTest,创建题库，轻松搞定孩子的英语单词拼写情况。

基于Django构建的小学生英文单词背写检测考试系统。


## 引言
在`Python`程序的编写中，我们经常要为程序配置一个`配置文件`，有了配置文件，可以记录一些应用的参数配置，方便下次使用时直接调用。
那么如何为自己的`Python`应用制作一个配置文件并方便的使用呢？这篇博文就是用来讨论这个简单的问题的。

**本博文仅为作者对配置文件使用的一些见解，错误难免，如有问题请指教。**

相关链接：
[PythonINI配置文件读写的简单方法](http://www.17python.com/blog/14)

本文重点讨论如何在程序中使用配置文件，`ConfigParser`类的具体使用，请参考上文。

## 需求
前一阵子做了个口算题的生成的应用，但是每次打开应用时都是加载的程序默认的参数，非常不方便，所以就要考虑为程序添加一个配置文件。
具体需求如下：

1. 保存程序设置参数
2. 功能使用配置文件的参数
3. 组织以上功能封装成为一个类，方便以后功能的扩展。

## 分析

先上一个配置文件的工作流程图

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/06/111.png)

通过流程图我们可以总结出配置文件类中需要的方法：

1. 创建(若ini文件不存在)及加载本地配置文件
2. 程序加载配置项参数
3. 修改参数的时候保存配置项到ini文件
4. 整理配置项参数为程序功能所用。


## 构建APPconfig类

首先导入必须的包：


    import os
    from configparser import ConfigParser


然后确定ini配置文件的物理位置，这里可以引用`Django`配置文件加载的方法。


        #ini程序所在目录，也是当前程序的根目录
       BASE_DIR = os.path.dirname(os.path.abspath(__file__))
       #INI文件地址
      INI_PATH = os.path.join(BASE_DIR, 'config.ini')



## 创建INI文件

若程序是首次启动，可以判断配置文件ini是否存在，**若不存在可以创建一个带有默认数据参数的配置文件。**
为类添加一个方法`def create_ini(self)`，此方法用来创建配置文件ini。
当在类启动方法中创建了`ConfigParser`对象后，就可以利用这个对象来编辑修改配置文件了。

## 加载及保存配置文件

若文件存在，即可直接加载了。

        def readINI(self):
            """ ini文件读取，返回一个INI配置对象
             或是用来更新内存中的配置文件数据
             """
             self.c.read(self.INI_PATH, encoding='utf-8')

创建一个方法，用来读取配置文件，因为在程序运行中需要随时加载更新内存中的参数，所以弄个方法存在也是必要的。

有读取了，我们还需要保存参数到配置文件里，在建一个保存的方法：


    def saveINI(self):
        '''保存或是更新ini文件'''
        with open(self.INI_PATH, mode='w', encoding='utf-8') as ini:
            self.c.write(ini)

这样，只要修改了参数，结尾就可以调用这个方法来保存配置文件。


## 修改并保存配置文件参数

为每一个参数指定一个方法，用来修改并保存当前参数到配置文件，当触发需要修改参数的事件是，直接调用当前方法即可修改配置文件里对应的参数了。

范例：

    def saveNumber(self,number):
        '''保存口算题个数设置数据'''
        self.c.set('config','number',number)
        self.saveINI()

## 读取参数

当创建完`ConfigParser`对象后，就可以使用该对象方便的操作配置文件的读取和保存了，具体方法这里不再敷衍，可以参考[PythonINI配置文件读写的简单方法](http://www.17python.com/blog/14)
也可以单独建立一个方法，用来返回一组数据供程序的功能使用。

有关配置文件的讨论就到此为止，以上也只是自己的一些浅显理解，详细代码请参考以下源码。

## 本文源码下载：

+ [github](https://github.com/bosichong/PrimarySchoolMathematics/blob/master/APPconfig.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/PrimarySchoolMathematics/blob/master/APPconfig.py)

在Python程序的编写中，我们经常要为程序配置一个配置文件，有了配置文件，可以记录一些应用的参数配置，方便下次使用时直接调用。

如何在Python程序中使用配置文件.ini(ConfigParser)


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/Snip20190514_1.png)

转眼间我的`blog`PV流量已经达到10万+了，2017年8月25日 01:09，我发布了网站更新记录，至此`blog`运行已有快二年了，没想到PV会达到10万。

回想学习`Python`大约也有二年多了，这一路走来也是蛮辛苦的，自学需要自己填坑补洞修bug，痛苦与快乐并存吧。

贴几张近作，显吧一下吧

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/Cache_69e1f243303b4652..jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-03025e852e1db8f2f9cf69fbd946b69c_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-608fc943d8709a1c640f02a8fc46fae6_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-fa357d4314c4f66b46318982526ef88a_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-9497459b80fafa67937c205e373c05f7_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-f27fcee295b83b010b1029a145dc1554_hd.jpg)


为什么要提到画画，去年的夏天给孩子报了美术班，然后自己也就随便画画，然后就一发不可收拾，坚持画画一直到现在，感触也是蛮多的。

编程和画画的思考方式在某些方面还是有相同点的，例如编程的架构就好比画画的草稿，草稿打好了才可以细致的刻画。若程序的需求本身是一幅画，那么打好草稿，细致刻画细节，就可以使程序本身更人性化，更符合预期的要求。**有的时候我就觉得，程序员本身真的应该的体验一下绘画带来的乐趣**。

自学画画一年感觉要比编程10年前的成就感强很多，这些年编程没写过多少像样的应用，五个手指都能算出来，或许编程要比绘画更严谨，更需要思考。

未来还有很多打算，包括编程初期的一些梦想都想去实现，比如开发一款游戏，自己原画角色，场景，并利用现有的游戏框架编写成型。完成现有的程序代码的编写，继续优化维护，继续坚持画画强化绘画技能，或许能力的提高会更加丰富原有的梦想。

还有三年的时候`blog`PV达到百万（是不是有点飘了？），下半年继续更新`blog`，继续学习`Python Django PYgame`等。

写在我的博客PV10万时：聊聊编程与画画。

写在我的博客PV10万时：聊聊编程与画画


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/01/Snip20190105_13.png)

## wx.FileDialog文件选择框

'FileDialog'是一个文件选择框，我们可以根据弹出框选择文件，确定后返回该文件的地址。


## 创建


    dlg = wx.FileDialog(parent, message=None, defaultDir=None, defaultFile=None, wildcard=None, style=None, pos=None, size=None, name=None)
    dlg.GetPath()#返回文件地址字符串
    
    
其打开方式和其它弹出窗口一样有模态和非模态，当按下确认按钮后，返回一个文件地址字符串。

我做了一个测试，代码下边跑跑看吧，希望能帮助到你。



    import wx
    import os
    import time
    
    class MyFrame(wx.Frame):
        def __init__(self, *args, **kwds):
    
            kwds["style"] = kwds.get("style", 0) | wx.DEFAULT_FRAME_STYLE
            wx.Frame.__init__(self, *args, **kwds)
            self.SetSize((400, 300))
            self.text_ctrl_1 = wx.TextCtrl(self, wx.ID_ANY, "")
            self.button_1 = wx.Button(self, wx.ID_ANY, u"选择文件")
            self.text_ctrl_2 = wx.TextCtrl(self, wx.ID_ANY, "")
    
            self.__set_properties()
            self.__do_layout()
    
    
        def __set_properties(self):
    
            self.SetTitle("frame")
            self.button_1.Bind(wx.EVT_BUTTON,self.onButton_1)
    
        def __do_layout(self):
    
            sizer_1 = wx.BoxSizer(wx.VERTICAL)
            sizer_3 = wx.BoxSizer(wx.HORIZONTAL)
            sizer_2 = wx.BoxSizer(wx.HORIZONTAL)
            sizer_2.Add(self.text_ctrl_1, 1, wx.ALL, 0)
            sizer_2.Add(self.button_1, 0, 0, 0)
            sizer_1.Add(sizer_2, 0, wx.ALL | wx.EXPAND, 0)
            sizer_3.Add(self.text_ctrl_2, 1, wx.ALL | wx.EXPAND, 0)
            sizer_1.Add(sizer_3, 1, wx.ALL | wx.EXPAND, 0)
            self.SetSizer(sizer_1)
            self.Layout()
    
        def onButton_1(self,e):
            print("按钮事件")
            dlg = wx.FileDialog(self, message="选择一个文件", defaultDir=os.getcwd(), style=wx.FD_OPEN)
            ret = dlg.ShowModal()
            if ret == wx.ID_OK:
                print(dlg.GetPath())  # 文件地址
                self.text_ctrl_1.SetValue(dlg.GetPath())
    
                fp = os.path.join(dlg.GetPath())  # 组装文件地址
                ###输出到弹出信息窗口的字符拼装。
                retstr = str(self.get_FileSize(fp)) + "\n" + self.get_FileAccessTime(fp) + "\n" + self.get_FileCreateTime(
                    fp) + "\n" + self.get_FileModifyTime(fp)
                self.text_ctrl_2.SetValue(retstr)
    
            dlg.Destroy()
    
    
        # 把时间戳转化为时间: 1479264792 to 2016-11-16 10:53:12
        def TimeStampToTime(self, timestamp):
            timeStruct = time.localtime(timestamp)
            return time.strftime('%Y-%m-%d %H:%M:%S', timeStruct)
    
        # 获取文件的大小,结果保留两位小数，单位为MB
        def get_FileSize(self, filePath):
            fsize = os.path.getsize(filePath)
            return fsize
    
        # 获取文件的访问时间
        def get_FileAccessTime(self, filePath):
            t = os.path.getatime(filePath)
            return self.TimeStampToTime(t)
    
        # 获取文件的创建时间
        def get_FileCreateTime(self, ilePath):
            t = os.path.getctime(ilePath)
            return self.TimeStampToTime(t)
    
        # 获取文件的修改时间
        def get_FileModifyTime(self, filePath):
            t = os.path.getmtime(filePath)
            return self.TimeStampToTime(t)
    class MyApp(wx.App):
        def OnInit(self):
            self.frame = MyFrame(None, wx.ID_ANY, "")
            self.SetTopWindow(self.frame)
            self.frame.Show()
            return True
    
    
    if __name__ == "__main__":
        app = MyApp(0)
        app.MainLoop()




## 本文源码下载：

+ [github](https://github.com/bosichong/wxPythonTest/blob/master/wxpy10.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/wxPythonTest/blob/master/wxpy10.py)

FileDialog是一个文件选择框，我们可以根据弹出框选择文件，确定后返回该文件的地址。

wxPython编程学习笔记(10)wx.FileDialog文件选择框


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/01/Snip20190103_12.png)
### Menu 菜单

菜单是程序经常用到的小部件，我们来看看如何创建。


        self.menubar = wx.MenuBar()#创建一个程序菜单
        self.fileMenu = wx.Menu()#创建一个一级菜单，这个菜单里可以继续加入菜单，就可以产行二级菜单
        self.new = wx.MenuItem(self.fileMenu,9,"new")#创建菜单项
        self.fileMenu.Append(self.new)#添加菜单项

以上这几个操作就可以创建一个菜单及菜单项了

## wxPython 右键菜单

创建方法，可以先创建一个菜单类`class MyPopupMenu(wx.Menu)`
然后再类中添加菜单项，最后在窗口程序中添加右键绑定一个事件：`self.Bind(wx.EVT_RIGHT_DOWN, self.OnRightDown)`
然后事件函数中生成这个菜单`self.PopupMenu(MyPopupMenu(self), e.GetPosition())`
这样，窗口程序中就有一个右键菜单了，完整的代码再下边，可以跑跑试试



    import wx
    
    class MyPopupMenu(wx.Menu):
    
        def __init__(self, parent):
            super(MyPopupMenu, self).__init__()
    
            self.parent = parent
    
            mmi = wx.MenuItem(self, wx.NewId(), 'Minimize')
            self.Append(mmi)
            self.Bind(wx.EVT_MENU, self.OnMinimize, mmi)
    
            cmi = wx.MenuItem(self, wx.NewId(), 'Close')
            self.Append(cmi)
            self.Bind(wx.EVT_MENU, self.OnClose, cmi)
    
    
        def OnMinimize(self, e):
            self.parent.Iconize()
    
        def OnClose(self, e):
            self.parent.Close()
    
    class HelloFrame(wx.Frame):
        def __init__(self, *args, **kw):
            #调用父类的创建方法
            super(HelloFrame, self).__init__(*args, **kw)
    
            self.menubar = wx.MenuBar()#创建一个程序菜单
            self.fileMenu = wx.Menu()#创建一个一级菜单，这个菜单里可以继续加入菜单，就可以产行二级菜单
            self.new = wx.MenuItem(self.fileMenu,9,"new")#创建菜单项
            self.fileMenu.Append(self.new)#添加菜单项
    
            self.editMenu = wx.Menu()
            self.copyItem = wx.MenuItem(self.editMenu, 100, text="copy", kind=wx.ITEM_NORMAL)
            self.editMenu.Append(self.copyItem)
            self.cutItem = wx.MenuItem(self.editMenu, 101, text="cut", kind=wx.ITEM_NORMAL)
            self.editMenu.Append(self.cutItem)
            self.pasteItem = wx.MenuItem(self.editMenu, 102, text="paste", kind=wx.ITEM_NORMAL)
            self.editMenu.Append(self.pasteItem)
    
            self.fileMenu.Append(22, "Edit", self.editMenu)
            self.fileMenu.AppendSeparator()
            self.fileMenu.AppendSeparator()#分隔线
            self.qmi = wx.MenuItem(self.fileMenu, 1, '&Quit\tCtrl+Q')
            self.fileMenu.Append(self.qmi)
    
            self.Bind(wx.EVT_MENU, self.OnQuit, id=1)
    
            self.menubar.Append(self.fileMenu, '&File')
            self.SetMenuBar(self.menubar)
    
            self.Bind(wx.EVT_RIGHT_DOWN, self.OnRightDown)
    
        def OnRightDown(self, e):
            self.PopupMenu(MyPopupMenu(self), e.GetPosition())
    
        def OnQuit(self, e):
            self.Close()
    
    def main():
        app = wx.App(False)
        frm = HelloFrame(None, title='wx.MenuBar 菜单',)
        frm.Show()#显示窗口
        app.MainLoop()#持续更新窗口
    
    
    if __name__ == '__main__':
            main()

## 本文源码下载：

+ [github](https://github.com/bosichong/wxPythonTest/blob/master/wxpy09.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/wxPythonTest/blob/master/wxpy09.py)

菜单是程序经常用到的小部件，我们来看看如何创建。

wxPython编程学习笔记(09)wx.Python Menu 菜单


import os
    file = os.path.join(os.path.dirname(__file__),'17python888.txt')
    os.mknod(file)#运行到此处，就会报错

    # 解开注释，用下边的方法试试
    # with open(file, mode='a',encoding='utf-8') as f:
    #     pass

前几天因为要创建一个文件，但是osx下边却发生了错误，可以运行上边的代码试试

    os.mknod(file)#运行到此处，就会报错
    PermissionError: [Errno 1] Operation not permitted

这个错误是由于linux系统权限不够，这可真是一个坑。

那么怎么办?

网上查了一下，可以用`open()`方法，咱试试。

通过测试，使用`open()`方法`mode="a"`即可搞定文件的创建。

Python os.mknod 运行报错无法创建文件


## wx.ListBox 下拉列表框

wx.ListBox是以中数据展示的小部件，使用方便简单，可以用来展示比较单一的数据，例如：各种地址，名称列表等。
这次准备了一个基于wx.ListBox构建的小小通讯录，实现了增删改但是木有查，为什么没有查？因为我没写，就这样了。
具体效果展示如下：
![输入图片说明](https://suiyan.cc/assets/images/media/upload/2018/12/Snip20181227_7.png)

## wx.ListBox的创建及一些方法

创建

    listbox = wx.ListBox(panel,choices=ls)

ListBox 有些常用的方法，用来处理列表中的数据

    listbox.Append(text) 添加
    listbox.GetSelection() 获取索引
    listbox.GetString(sel) 通过索引获取字符串
    listbox.Delete(sel) 删除当前索引
    listbox.Insert(renamed, sel) 在当前索引处添加新的值，返回当前索引
    listbox.SetSelection(item_id) 根据索引值选择项
    listbox.Clear() 清空当前列表

## 通讯录的数据保存

作为一个简单的通讯录应该能保存数据，处于简单化处理，我只保存一个文本到目录下，若是需要可以使用数据库。
通讯录在操作的同时我们要更新保存数据，所以，我建了三个方法，分别处理新建数据文本，打开读取，保存数据。
分别对应：newFile openFile saveFile,这样配合这几个方法就可以实现一个简单的通讯录了。

具体代码如下，可以跑跑看啦：

## 本文源码下载：

+ [github](https://github.com/bosichong/wxPythonTest/blob/master/wxpy08.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/wxPythonTest/blob/master/wxpy08.py)

wx.ListBox是以中数据展示的小部件，使用方便简单，可以用来展示比较单一的数据，例如：各种地址，名称列表等。

wxPython编程学习笔记(08)wx.ListBox 下拉列表框


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2018/12/Snip20181225_6.png)
### wxPython dialogs 弹出对话框

程序中经常会遇到弹出对话框询问操作的场景，wxPython dialogs为此提供了应用的支持，
wxPython dialogs有几种，常用的比如：wx.MessageBox wx.MessageDialog wx.Dialog wx.adv.AboutBox等。

### dialog的创建

一般dialog都会配合Button使用，当按钮绑定事件后，在绑定事件的函数中创建应用即可，代码如下：

    wx.MessageDialog(None, 'Download completed', 'Info', wx.OK)

其它类型的Dialog创建也类似如下代码，其中风格参数如下：

    flag	meaning
    wx.OK	show OK button
    wx.CANCEL	show Cancel button
    wx.YES_NO	show Yes, No buttons
    wx.YES_DEFAULT	make Yes button the default
    wx.NO_DEFAULT	make No button the default
    wx.ICON_EXCLAMATION	show an alert icon
    wx.ICON_ERROR	show an error icon
    wx.ICON_HAND	same as wx.ICON_ERROR
    wx.ICON_INFORMATION	show an info icon
    wx.ICON_QUESTION	show a question icon

可以根据自己的需要进行组合，例如组合YES和NO，yes默认选择，并且加带图标的代码：wx.YES_NO|wx.YES_DEFAULT | wx.ICON_INFORMATION

### MessageDialog 获取返回值

当点击对话框上的按钮后窗口就会关闭，我们需要获得关闭后的返回值，可以通过如下代码获得：

        dial = wx.MessageDialog(None, 'Are you sure to quit?', 'Question',
            wx.YES_NO | wx.YES_DEFAULT | wx.ICON_QUESTION)
        ret = dial.ShowModal()
        if ret == wx.ID_YES:
            print("YES")
        else:
            print("NO")

好啦，完整的代码在下边，大家可以跑跑看看。

### Dialog和窗口间传递数据

遇到过一个在主窗口弹出Dialog的需求，因为是第一次用wxPython，所以不知道数据如何传送给主窗口，后来网上扒了扒发现了一些答案。
我这里的解决方案：

1. 先在Dialog窗口中创建类属性，然后通过类属性传递给主窗口
2. Dialog中创建一个属性self.ret=0，当点击按钮的时候设置其值为1，这样判断一下这个值，用来接收数据，如果为0就不接收。

具体可以参考下边的代码


    import wx
    
    
    class MyDialog(wx.Dialog):
        def __init__(self, *args, **kw):
            super(MyDialog, self).__init__(*args, **kw)
            self.ret = 0
            hbox = wx.BoxSizer(wx.HORIZONTAL)
            self.st = wx.TextCtrl(self, wx.ID_ANY, "111")
            self.bt = wx.Button(self, wx.ID_ANY, "提交数据")
            self.bt.Bind(wx.EVT_BUTTON,self.onButton)
            hbox.AddMany([(self.st),(self.bt)])
            self.SetSizer(hbox)
    
        def onButton(self,e):
            self.ret=1
            self.EndModal(1)
    
    class HelloFrame(wx.Frame):
        def __init__(self, *args, **kw):
            # 调用父类的创建方法
            super(HelloFrame, self).__init__(*args, **kw)
    
            hbox = wx.BoxSizer(wx.VERTICAL)
            bt0 = wx.Button(self, 1, "wx.Dialog")
            bt1 = wx.Button(self, 1, "wx.Dialog")
            bt2 = wx.Button(self, 1, 'Error')
            bt3 = wx.Button(self, 1, 'Question')
            bt4 = wx.Button(self, 1, 'Alert')
    
            bt0.Bind(wx.EVT_BUTTON, self.onModal0)
            bt1.Bind(wx.EVT_BUTTON, self.onModal1)
            bt2.Bind(wx.EVT_BUTTON, self.showMessage1)
            bt3.Bind(wx.EVT_BUTTON, self.showMessage2)
            bt4.Bind(wx.EVT_BUTTON, self.showMessage3)
    
            hbox.AddMany([(bt0, 1, wx.EXPAND | wx.ALIGN_TOP), (bt1, 1, wx.EXPAND), (bt2, 1, wx.EXPAND), (bt3, 1, wx.EXPAND),
                          (bt4, 1, wx.EXPAND), ])
            self.SetSizer(hbox)
    
        def onModal0(self, event):
            '''模态'''
            myDialog= MyDialog(None, 22, title="Dialog")
            myDialog.ShowModal()
            if myDialog.ret == 1:
                print(myDialog.st.GetValue())
            else:
                print("888888")
            myDialog.Destroy()
    
        def onModal1(self, event):
            '''无模态'''
            wx.Dialog(self, 1, "Dialog", pos=(100, 100)).Show()
    
        def showMessage(self, e):
            smd = wx.MessageDialog(None, "This is a Message Box", "Message",
                                   wx.YES_NO | wx.YES_DEFAULT | wx.ICON_INFORMATION)
            smd.ShowModal()
    
        def showMessage1(self, event):
            dial = wx.MessageDialog(None, 'Download completed', 'Info', wx.OK)
            ret = dial.ShowModal()
            if ret == wx.OK:
                print("OK")
    
        def showMessage2(self, event):
            dial = wx.MessageDialog(None, 'Are you sure to quit?', 'Question',
                                    wx.YES_NO | wx.YES_DEFAULT | wx.ICON_QUESTION)
            ret = dial.ShowModal()
            if ret == wx.ID_YES:
                print("YES")
            else:
                print("NO")
    
        def showMessage3(self, event):
            dial = wx.MessageBox('Download completed', 'Info',
                                 wx.OK | wx.ICON_INFORMATION)
            ret = dial
            if ret == wx.OK:
                print("OK")
    
    
    def main():
        app = wx.App()
        frm = HelloFrame(None, title='wxPython Button', )
        frm.Show()  # 显示窗口
        app.MainLoop()  # 持续更新窗口
    
    
    if __name__ == '__main__':
        main()


### 本文源码下载：

+ [github](https://github.com/bosichong/wxPythonTest/blob/master/wxpy07.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/wxPythonTest/blob/master/wxpy07.py)

wxPython编程学习笔记(07)wxPython Dialog 弹出对话


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2018/12/Snip20181224_2.png)
## wx.ComboBox下拉列表框

下拉列表框，可以通过下拉列表选择内容，在使用中可以为内容节省不少空间，是GUI中比较常用的小部件。

## wx.ComboBox的创建与绑定


        #创建ComboBox
        l = ["Python","Django","Flask","wxPython","Java"]
        cb = wx.ComboBox(pnl, pos=(20, 20), choices=l,style=wx.CB_READONLY)
        cb.Bind(wx.EVT_COMBOBOX, self.OnSelect)

通过以上方法即可简单的创建`ComboBox`与绑定事件.

具体代码再下边，跑下即可了解。

    import wx
    
    class HelloFrame(wx.Frame):
        def __init__(self, *args, **kw):
            #调用父类的创建方法
            super(HelloFrame, self).__init__(*args, **kw)
            pnl = wx.Panel(self)
            hbox = wx.BoxSizer(wx.VERTICAL)
    
            #创建ComboBox
            l = ["Python","Django","Flask","wxPython","Java"]
            cb = wx.ComboBox(pnl, pos=(20, 20), choices=l,style=wx.CB_READONLY)
            cb.Bind(wx.EVT_COMBOBOX, self.OnSelect)
            hbox.Add(cb,0,wx.CENTER|wx.EXPAND,20)
    
            #创建一个静态文本用来显示上拉列表框选择的内容
            self.st = wx.StaticText(pnl, label='请点选ComboBox')
            hbox.Add(self.st,0,wx.CENTER|wx.TOP,20)
    
    
            pnl.SetSizer(hbox)
    
        def OnSelect(self,e):
            s = e.GetString()
            self.st.SetLabel(s)
    
    
    def main():
        app = wx.App()
        frm = HelloFrame(None, title='wxPython Button',)
        frm.Show()#显示窗口
        app.MainLoop()#持续更新窗口
    
    
    if __name__ == '__main__':
            main()

## 本文源码下载：

+ [github](https://github.com/bosichong/wxPythonTest/blob/master/wxpy06.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/wxPythonTest/blob/master/wxpy06.py)

下拉列表框，可以通过下拉列表选择内容，在使用中可以为内容节省不少空间，是GUI中比较常用的小部件。

wxPython编程学习笔记(06)wx.ComboBox下拉列表框


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2018/12/Snip20181223_1.png)

## wxPython单选及多选按钮

单选及多选按钮也是程序中经常使用到的互动小部件，使用频率也是很高的，对于选择按钮，我们重点需要了解的就是触发事件，
通常，单选我们需要得到一组按钮中的选择项值或是键值，多选，我们只要知道每一项返回的布尔值即可。

##多选按钮wx.CheckBox

创建及绑定事件

    cb1=wx.CheckBox(pnl, label='hello', )
    self.Bind(wx.EVT_CHECKBOX,self.onCheckBox)

这里的`self.Bind`是指绑定了当前窗口中所有的多选按钮，如果需要单独绑定，则需要为每一个多选按钮做单独的事件绑定。

## 单选按钮组wx.RadioBox

这里我直接介绍`wx.RadioBox`，因为单选按钮基本上是一组呈现的，所以直接使用单选按钮组即可，还方便。

创建及绑定

    self.radio_box_1 = wx.RadioBox(pnl, wx.ID_ANY, u"请选择", choices=["aaa", "bbb", "ccccc", "ddddd"], majorDimension=1,
                                  style=wx.RA_SPECIFY_ROWS)
    self.radio_box_1.Bind(wx.EVT_RADIOBOX,self.onRadiobox)

代码很直观，`majorDimension`表示单选钮的排列方式：0横向，1竖向。

好了，完整的代码在下边，可以跑跑看。

    import wx
    
    class HelloFrame(wx.Frame):
        def __init__(self, *args, **kw):
            #调用父类的创建方法
            super(HelloFrame, self).__init__(*args, **kw)
            pnl = wx.Panel(self)
    
    
            hbox3 = wx.StaticBoxSizer(wx.StaticBox(pnl, label='多选及单选测试',), wx.VERTICAL)
            cb1=wx.CheckBox(pnl, label='hello', )
            cb2=wx.CheckBox(pnl, label='world', )
            self.Bind(wx.EVT_CHECKBOX,self.onCheckBox)
            self.radio_box_1 = wx.RadioBox(pnl, wx.ID_ANY, u"请选择", choices=["aaa", "bbb", "ccccc", "ddddd"], majorDimension=1,
                                      style=wx.RA_SPECIFY_ROWS)
            self.radio_box_1.Bind(wx.EVT_RADIOBOX,self.onRadiobox)
    
            hbox3.AddMany([(cb1),(cb2),(self.radio_box_1, 0, wx.EXPAND|wx.TOP, 10)])
    
            btn = wx.Button(pnl, label='Ok', pos=(90, 185), size=(60, -1))
    
            btn.Bind(wx.EVT_BUTTON, self.OnClose)
    
            pnl.SetSizer(hbox3)
    
    
        def onRadiobox(self,e):
            rb = e.GetEventObject()
            print(rb.GetSelection(),rb.GetStringSelection())#打印当前单选按钮的选项
    
        def onCheckBox(self,e):
            cb = e.GetEventObject()
            if cb.GetValue():
                print(cb.GetLabel())
    
        def OnClose(self, e):
            self.Close(True)
    
    
    
    
    def main():
        app = wx.App()
        frm = HelloFrame(None, title='wxPython Button',)
        frm.Show()#显示窗口
        app.MainLoop()#持续更新窗口
    
    
    if __name__ == '__main__':
            main()

## 本文源码下载：

+ [github](https://github.com/bosichong/wxPythonTest/blob/master/wxpy05.py)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/wxPythonTest/blob/master/wxpy05.py)

单选及多选按钮也是程序中经常使用到的互动小部件，使用频率也是很高的，对于选择按钮，我们重点需要了解的就是触发事件， 通常，单选我们需要得到一组按钮中的选择项值或是键值，多选，我们只要知道每一项返回的布尔值即可。