月度归档: 2018 年 10 月

vue框架html中的script内容转换成.vue文件的script内容

问题:
1.因为前段时间学习vue,都是在一个index.html中添加<html>和<script>
2.如果使用.vue文件,<template>对应index.html<html>作为展示层,<script>作为逻辑层对应index.html的<script>
html中用的是new vue。而.vue文件中用的是export default。下面是对比

  • index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vueapp01</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
  .class1{
    background: #444;
    color: #eee;
  }
</style>
<body>
  <div id="app"></div>
  <div id='example-3'>
    <input type="checkbox" id="jack" value="白金会员" v-model="checkedNames">
    <label for="jack">白金会员</label>
    <input type="checkbox" id="john" value="黄金会员" v-model="checkedNames">
    <label for="john">黄金会员</label>
    <input type="checkbox" id="mike" value="王者会员" v-model="checkedNames">
    <label for="mike">王者会员</label>
    <br>
    <span>选择会员种类: {{ checkedNames }}</span>
  </div>
  <div id="app2">
    <input v-model="username" placeholder="用户名">
    <p>用户名是: {{ username }}</p>
    <input  type="password" v-model="password" placeholder="密码">
    <p>密码是: {{ password }}</p>
    <button v-on:click="login">登录</button>
  </div>
</body>
<script type="text/javascript">
  var chenames=new Vue({
    el: '#example-3',
    data: {
      checkedNames: []
    }
  })
  var user=new Vue({
    el :'#app2',
    data: {
      username:'',
      password:''
    },
    methods :{
      login:function(event){
        alert('用户名是:'+this.username+',密码是:'+this.password+',选择的是:'+chenames.checkedNames)
      }
    }
  })
</script>
</html>
  • .vue文件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id='example-3'>
    <input type="checkbox" id="jack" value="白金会员" v-model="checkedNames">
    <label for="jack">白金会员</label>
    <input type="checkbox" id="john" value="黄金会员" v-model="checkedNames">
    <label for="john">黄金会员</label>
    <input type="checkbox" id="mike" value="王者会员" v-model="checkedNames">
    <label for="mike">王者会员</label>
    <br>
    <span>选择会员种类: {{ checkedNames }}</span>
  </div>
  <div id="app2">
    <input v-model="username" placeholder="用户名">
    <p>用户名是: {{ username }}</p>
    <input  type="password" v-model="password" placeholder="密码">
    <p>密码是: {{ password }}</p>
    <button class="btn btn-large btn-primary" v-on:click="login">登录</button>
  </div>
  </div>
</template>
<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "欢迎来到测试开发笔记!",
      checkedNames:[],
      username: "",
      password: "",
    };
  },
  methods:{
    login(){
       alert('用户名是:'+this.username+',密码是:'+this.password+',选择的是:'+this.checkedNames)
    }
  }
};
</script>

python使用request库发送上传zip文件的post请求

使用工具:

  • python(2.7)
  • requests(2.18.4)
  • zip文件一个
  • chrome浏览器

第一步,通过chrome浏览器的开发者工具,获得发送的参数。


第二步,编写python代码

使用request库的post方法。注意的是要添加files参数,例如:

files ={'app_filename':open('portal-1.0-SNAPSHOT-fat.jar.zip','rb')}

zip压缩包用的后缀是application/x-zip-compressed,其他的文件是application/octet-stream
其中,’app_filename’是F12工具里抓出来的from data里的标有{binary}这一行的参数名。
portal-1.0-SNAPSHOT-fat.jar.zip是我自己电脑本地的一个zip文件。
rb是读二进制文件。因为这个form data是以二进制形式上传文件的
其余的常规参数,放到data参数里。例如上图的image_name:fff就是常规参数。
在header里注意添加cookies值或者Authorization值,这里我测试的网站用的是Authorization。如果没有该参数,会返回401
完整python request体参数如下:

path = os.path.split(os.path.realpath(__file__))[0]
url = host + '/dashboard/cicd/images'
headers = {
    'Authorization':'6bae7b70-8dae-4f74-9631-680b9501b52',
    'cookie': "_ga=GA1.3.733851079.1534745675; Hm_lvt_dde6ba2851f3db0ddc415ce0f895822e=1537859803; _ga=GA1.3.733851079.1534745675; Hm_lvt_dde6ba2851f3db0ddc415ce0f895822e=1537859803",
}
datat = {'image_name': 'abcd',
         'image_description': 'ccccvcc',
         'image_label': '1cc1fcc',
         'basic_image': 'openjdk:10',
         'store_path': '/opt/app/lzw/'}
files = {'app_filename': (
    'portal-1.0-SNAPSHOT-fat.jar.zip', open(os.path.join(path, 'portal-1.0-SNAPSHOT-fat.jar.zip'), 'rb'),
    'application/x-zip-compressed')}
# files ={'app_filename':open('portal-1.0-SNAPSHOT-fat.jar.zip','rb')} 和上面的功能一样
result = requests.post(url, files=files, data=datat, headers=headers)
r1 = result.text
print(result.text)

注意:千万不要在head里加入 ‘Content-Type’:’multipart/form-data;参数。

如何使用Vue获得多个input和多选框的值,以及双向绑定

需求分析

1.有三个多选框选项。当选择不同的按钮时,界面上会实时展示所选的参数
2.有用户名和密码,当输入用户名和密码时,界面上会实时展示所输入的参数
3.当点击登录按钮的时候,会弹出alert,展示当前所选的所有参数

实现代码

通过v-model实时获得input的输入值。通过v-on监听login事件。完整代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vueapp01</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
  .class1{
    background: #444;
    color: #eee;
  }
</style>
<body>
  <!-- <div id="app"></div> -->
  <div id='example-3'>
    <input type="checkbox" id="jack" value="白金会员" v-model="checkedNames">
    <label for="jack">白金会员</label>
    <input type="checkbox" id="john" value="黄金会员" v-model="checkedNames">
    <label for="john">黄金会员</label>
    <input type="checkbox" id="mike" value="王者会员" v-model="checkedNames">
    <label for="mike">王者会员</label>
    <br>
    <span>选择会员种类: {{ checkedNames }}</span>
  </div>
  <div id="app2">
    <input v-model="username" placeholder="用户名">
    <p>用户名是: {{ username }}</p>
    <input  type="password" v-model="password" placeholder="密码">
    <p>密码是: {{ password }}</p>
    <button v-on:click="login">登录</button>
  </div>
</body>
<script type="text/javascript">
  var chenames=new Vue({
    el: '#example-3',
    data: {
      checkedNames: []
    }
  })
  var user=new Vue({
    el :'#app2',
    data: {
      username:'',
      password:''
    },
    methods :{
      login:function(event){
        alert('用户名是:'+this.username+',密码是:'+this.password+',选择的是:'+chenames.checkedNames)
      }
    }
  })
</script>
</html>

electron实例(一个例子教你入门)

总览

electron是目前最流行的桌面级开发框架。作为一个老测开,不能停下学习的脚本。下面我用一个electron制作了一个登陆的例子,用到的功能包含简单的ipc通信,页面跳转,引入jquery,bootstrap。下面开始我们的分解动作。

文件目录


该工程是我下载了github上的quick-start的工程,自己修改了main.js和index.html。添加了一个web-content/welcome.html页面。

  • main.js是后端主进程文件
  • index.html是首页
  • welcome.html是登录成功之后的页面

main.js(主进程)

main.js也就是主进程。这里我贴出用处最大的ipc前后端通信的代码。
讲解:后端用的是ipcMain。前端用的是ipcRender,这个开发模式是发布/订阅模式。ipc.on()发布一个‘login’的监听消息。当前端发起‘login’的请求时,触发后台的funtion()。mainWindow控制页面跳转。mainWindow.loadFile(‘./web-content/welcome.html’)用当前窗口打开一个welcome页面。

let mainWindow
const ipc = require('electron').ipcMain
ipc.on('login', function(event, user_name,user_password) {
  result='登录失败';
  console.log(user_name,user_password);  // 打印 "用户名密码"
  if(user_name=="1" && user_password=="2"){
     result='登录成功';
     console.log(result);
     //登录成功之后打开welcome页面
     mainWindow.loadFile('./web-content/welcome.html')
  }else{
    console.log(result);
  }
  //因为是同步策略,所以用event.returnValue
  event.returnValue = result;
  console.log("end");
});

index.html(首页)


首页效果如上图,用户名输入1,密码输入2,点击submit按钮开始登陆。
为了引用bootstrap,我们在最前面的<head>下加入bootstrap和jquery

<head>
    <title>测试开发笔记</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
    <script>if (window.module) module = window.module;</script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
ipcRenderer连接后端,通过sendSync来同步发送消息,发送用户名和密码到后端,如果为真,新窗口打开github首页。用了jquery的$定位元素。用了.val()获得元素里填写的值,.afrer()在指定位置后添加元素。
<script>
  function connectMain() {
    const ipcRenderer = require('electron').ipcRenderer;
    var user_name=$("#input_username").val()
    var user_password=$("#input_userpassword").val()
    result=ipcRenderer.sendSync('login',user_name,user_password)
    if(result=="登录成功"){
      const remote = require('electron').remote;
      const BrowserWindow = remote.BrowserWindow;
      var win = new BrowserWindow({ width: 800, height: 600 });
      win.loadURL('https://github.com');
      // BrowserWindow.loadURL('https://github.com');
    }
    else{
      console.log($("#input_username"))
      var txt1="<div>密码错误</div>";
      $("#input_userpassword").after(txt1)
    }
    console.log(result)
  }
</script>

完整代码

main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow,Menu,shell} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
const ipc = require('electron').ipcMain
ipc.on('login', function(event, user_name,user_password) {
  result='登录失败';
  console.log(user_name,user_password);  // 打印 "用户名密码"
  if(user_name=="1" && user_password=="2"){
     result='登录成功';
     console.log(result);
     //登录成功之后打开welcome页面
     mainWindow.loadFile('./web-content/welcome.html')
  }else{
    console.log(result);
  }
  //因为是同步策略,所以用event.returnValue
  event.returnValue = result;
  console.log("end");
});
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', () => {
  createWindow()
})
// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
index.html
<!DOCTYPE html>
<html>
<head>
    <title>测试开发笔记</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
    <script>if (window.module) module = window.module;</script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1 class="page-header">electron-bootstrap实例</h1>
    <div class="row">
      <div class="col-md-offset-8 col-sm-offset-3 col-md-4 col-sm-6">
        <div class="panel panel-default">
          <div class="panel-body">
            <form>
              <div class="form-group">
                <label for="input_username">用户名</label>
                <input type="email" class="form-control" id="input_username" placeholder="Email">
              </div>
              <div class="form-group">
                <label for="input_userpassword">密码</label>
                <input type="password" class="form-control" id="input_userpassword" placeholder="Password">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住密码
                </label>
              </div>
              <button type="submit" id="abc" class="btn btn-default" onclick="connectMain()">开始登陆</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
<script>
  function connectMain() {
    const ipcRenderer = require('electron').ipcRenderer;
    var user_name=$("#input_username").val()
    var user_password=$("#input_userpassword").val()
    result=ipcRenderer.sendSync('login',user_name,user_password)
    if(result=="登录成功"){
      const remote = require('electron').remote;
      const BrowserWindow = remote.BrowserWindow;
      var win = new BrowserWindow({ width: 800, height: 600 });
      win.loadURL('https://github.com');
      // BrowserWindow.loadURL('https://github.com');
    }
    else{
      console.log($("#input_username"))
      var txt1="<div>密码错误</div>";
      $("#input_userpassword").after(txt1)
    }
    console.log(result)
  }
</script>
</body>
    <script src="./renderer.js"></script>
</html>
welcome.html
<!DOCTYPE html>
<html>
<head>
    <title>es2105的写法</title>
    <meta charset="utf-8">
</head>
<body>
hello,world
</body>
</html>
renderer.js
function connectMain() {
    const ipcRenderer = require('electron').ipcRenderer;
    var user_name=$("#input_username").val()
    var user_password=$("#input_userpassword").val()
    result=ipcRenderer.sendSync('login',user_name,user_password)
    if(result=="登录成功"){
      const remote = require('electron').remote;
      const BrowserWindow = remote.BrowserWindow;
      var win = new BrowserWindow({ width: 800, height: 600 });
      win.loadURL('https://github.com');
      // BrowserWindow.loadURL('https://github.com');
    }
    else{
      console.log($("#input_username"))
      var txt1="<div>密码错误</div>";
      $("#input_userpassword").after(txt1)
    }
    console.log(result)
  }
package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^2.0.0"
  },
  "dependencies": {
    "bootstrap": "^4.1.3",
    "electron-json-storage": "^4.1.4",
    "jquery": "^1.12.4",
    "popper.js": "^1.14.4"
  }
}

参考

https://wizardforcel.gitbooks.io/electron-doc/content/api/ipc-main.html
https://electronjs.org/docs/tutorial/first-app


苏ICP备18047533号-1