webpack4 构建vue全家桶

最近使用vue-cli用的人有点傻,所以今天没什么事情干,就自己构建一个vue的全家桶来玩玩。

首先:

# 新建目录,并且进入
mkdir mc-webpack && cd mc-webpack
# 创建 package.json
npm init -y
# 安装 vue 依赖
npm i vue
# 安装 webpack 和 webpack-cli 开发依赖
npm i webpack webpack-cli -D
# 安装 babel
npm i babel-loader @babel/core @babel/preset-env -D
# 安装 loader
npm i vue-loader vue-template-compiler -D
# 安装 html-webpack-plugin
npm i html-webpack-plugin -D
# 安装 clean-webpack-plugin 用来删除生成的文件夹
npm i clean-webpack-plugin --D

运行完上面的命令后应该是一下画面:

{
  "name": "mc-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6"
  }
}

接着创建

#创建src目录,和进入目录
mkdir src
cd src
#创建App.vue主文件
echo *>App.vue
#创建入口js文件
echo *>index.js
#创建主html文件
echo *>index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>mc-webpack</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.js

import Vue from "vue"
import App from "./App"

//阻止启动生产消息,常用作指令。
Vue.config.productionTip = false

new Vue({
  //简写 render:h=>h(App)
  render:function(createElement)
  {
    return createElement(App)
  }
}).$mount("#app")

App.vue

<template>
  <div class="main">
    {{title}}
  </div>
</template>
<script>
export default {
   data() {
      return {
        title:"Hello world!"
      }
   }
}
</script>
<style>
</style>

接着就是配webpack了 (记得是根目录哦)

echo *>webpack.config.js

输入以下代码

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");//相关地址:https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
module.exports = {
  resolve:{
    //这里设置了 import的时候不用添加的后缀名
    extensions:['*','.js','.vue']
  },
  module:{
    rules:[
      //使用babel加载js exclude为不需要在node_modules目录下查找,增加效率
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:{
          loader:'babel-loader'
        }
      },
      //使用vue的loader加载vue文件
      {
        test:/\.vue$/,
        loader:'vue-loader'
      }
    ]
  },
  plugins:[
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      //模板html路径 src/index.html
      template:'./src/index.html',
      //输出文件名
      filename:'index.html'
    }),
    //删除生成的文件夹
    new CleanWebpackPlugin()
  ]
}

运行npx webpack

如无问题就会出现此目录

运行下

接着我们来完善它

我们首先引入vue-router 官网:
https://router.vuejs.org/zh/installation.html

安装:

npm install vue-router
#接着 cd src目录 新建router.js文件
echo *>router.js

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@page/home/home'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

接着新建pages目录 创建home目录 创建home.vue文件

home.vue文件

<template>
   <div class="main">
      dddd
   </div>
</template>
<script>
export default {
   data() {
      return {
      }
   },
   created()
   {
   },
   mounted()
   {
   }
}
</script>
<style>

</style> 

接着修改webpack.config.js 添加别名

resolve: {
    alias: {
      "@page": path.resolve(__dirname, 'pages/'),
    },
    extensions: ['*', '.js', '.vue']
  },

修改App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

修改index.js

import Vue from "vue"
import App from "./App"
import router from "./router"

//阻止启动生产消息,常用作指令。
Vue.config.productionTip = false

new Vue({
  router,
  //简写 render:h=>h(App)
  render:function(createElement)
  {
    return createElement(App)
  }
}).$mount("#app")

npx webpack 运行

接着安装css和stylus 安装 mini-css-extract-plugin 插件

npm i css-loader style-loader --save-dev
npm i stylus stylus-loader --save-dev

修改webpack配置文件

引入 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

      //加载style
      {
        test: /\.styl/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader']
      },
      //加载css
      {
        test: /\.css/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },

plugins添加

//拆分css样式
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })

修改home.vue

<template>
  <div class="main">
    ddd
  </div>
</template>
<script>
export default {
   data() {
      return {
      }
   }
}
</script>
<style lang="stylus">
div.main
  color red
  font-size 12px
</style>

运行

接着安装 加载静态文件模块(这里我只写了图片加载)

#生成文件模块
npm i -D file-loader url-loader
#图片压缩模块 这个模块比较大因为它包里加载了 其他类型的 压缩程序
npm i -D image-webpack-loader

修改webpack.config.js文件 添加到rules下

      //压缩图片
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'image-webpack-loader',
        enforce: 'pre'
      },
      //加载图片
      {
        test: /\.(jpe?g|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 3 * 1024,
            name: 'img/[name].[hash:7].[ext]'
          }
        }
      },

添加别名

'@img': path.resolve(__dirname, 'src/assets/img')

添加目录

修改home.vue

<template>
  <div class="main">
    <img src="~@img/adv.gif" alt="">
  </div>
</template>
<script>
export default {
   data() {
      return {
      }
   }
}
</script>
<style lang="stylus">
div.main
  color red
  font-size 12px
</style>

npx webpack 打包

运行

ok

接着是不是觉得每次修改点东西都要重新运行,接着我们就来解决这个问题

#安装
npm install webpack-dev-server --save-dev

接着修改webpack配置文件

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9000,
    hot: true,
    open: true
  },

运行 npx webpack-dev-server

你就会发现自动打开浏览器运行 接着你试着修改 home.vue文件,你就会发现页面发生了改变。

好了到这来是不是以为完了呢?其实还有一个vuex,没有引进来。

npm install vuex --save

在src目录下新建 store.js 文件 内容如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:"测试"
  },
  mutations: {
    setName(state,name)
    {
      state.name = name
    }
  },
  actions: {

  }
})

修改home.vue 文件

<template>
  <div class="main">
    <img src="~@img/adv.gif" alt="">
    ddd
  </div>
</template>
<script>
export default {
   data() {
      return {
      }
   },
   created()
   {
     console.log(this.$store.state.name)
   },
   mounted()
   {
     this.$store.commit("setName","测试1")
     console.log(this.$store.state.name)
   }
}
</script>
<style lang="stylus">
div.main
  color red
  font-size 12px
</style>

修改index.js文件

import Vue from "vue"
import App from "./App"
import router from "./router"
import store from "./store"

//阻止启动生产消息,常用作指令。
Vue.config.productionTip = false

new Vue({
  router,
  store,
  //简写 render:h=>h(App)
  render:function(createElement)
  {
    return createElement(App)
  }
}).$mount("#app")

ok完成

git地址
https://gitee.com/huxierong/zidingyiwebpack4yuvue

ubuntu ssh安全登录方法总结

1.禁止root登录,修改端口,新建用户赋予root权限

第一步、

添加用户 adduser 用户名 接着回车输入密码

接着打开vim /etc/sudoers

添加一行 用户名 ALL=(ALL:ALL) ALL

第二步、修改端口和禁止root登录

vim /etc/ssh/sshd_config

修改Port

把PermitRootLogin no 设置为no

注释掉#PermitRootLogin prohibit-password

重新打开一个ssh界面 就会发现root账号登录不了。

2.密钥登录(推荐,安全比较高)

如果服务器运营商提供了生成密钥服务,就用运营商的。

第一步、

首先在命令行输入ssh-keygen

接着一直回车就可以了,如果需要输入密码可自行输入。

我这里已经申请过了。

我们cd 到.ssh文件里面 这里我是用root账号申请的,就是/root/.ssh 如果是其他账号就是 /账号/.ssh。

接着 cat id_rsa.pub >> authorized_keys

接着就是设置权限 chmod 700 authorized_keys 和 chmod 700 /root/.ssh

最后进去
/etc/ssh/sshd_config 看下 RSAAuthentication yes 和 PubkeyAuthentication yes 是否设置为yes

接着我们把id_rsa 拿到本地去用ssh工具去使用

我这里以xshell为例

点击确定。

ok没问题。

接着我们新开一个窗口
修改 /etc/ssh/sshd_config 里面的PasswordAuthentication no为no 这样就只能通过密钥来登录拉,接着service ssh restart重启。

(这里要特别注意哦,不然就危险了。)

python3 socket 上传文件

最近不想用ftp和lrzsz,就上网看下有没有关于socket上传教程。刚好看到有一篇python sokcet 上传图片教程,就试着编写下,结果挺简单的。

参考网址:
https://www.cnblogs.com/xiaokang01/p/9069048.html

首先是服务端:(不太清楚的可以看看 慕课网的
https://www.imooc.com/video/17674 这个教程哦)

import socket

sk = socket.socket()

port = ("0.0.0.0",8998)

sk.bind(port)

sk.listen(5)

conn,addr = sk.accept()

#获取传递过来的文件名称
filename = conn.recv(1024)

while True:
    #插进文件
    fp = open(filename, 'wb')
    print("start...")
    #循环获取传递过来的数据
    while True:
        #获取文件数据10240 (10240这个数越大获取数据越多 (- -) 其实不是这样的,但是现在先理解成这样)
        filedata = conn.recv(10240)
        #写入数据
        fp.write(filedata)
        #判断传递过来的数据是否存在,不存在跳出循环
        if not filedata:
            break
    #关闭文件
    fp.close()
    break
#关闭socket
sk.close()
print("上传成功哦 ,文件名称:", filename)

客户端:

import socket
import os
import time

#输入上传文件路径
file_name = input("请输入完整路径文件名称:")

#判断文件是否存在
if not os.path.exists(file_name):
    print("文件不存在!")
    exit()

#获取文件名称
name = os.path.basename(file_name)

sk = socket.socket()

port = ("127.0.0.1",8998)

sk.connect(port)

#发送文件名称
sk.send(name.encode())

#停止1秒 (可以把它注释掉看看哦)
time.sleep(1)

#获取文件大小
file_all_size = os.path.getsize(file_name)

#文件下载大小初始化
file_down_size = 0

#打开文件
fp = open(file_name, 'rb')

#输出的下载百分比是否相同
last_size = 0

while True:
    #循环读取文件
    filedata = fp.read(10240)

    #文件读取完退出循环
    if not filedata:
      break

    #发送文件数据
    sk.sendall(filedata)

    #获取文件下载大小
    file_down_size = file_down_size+len(filedata)
    #转为2个小数点
    size = float(format(file_down_size/file_all_size,'.2f'))
    #当前下载百分比
    down_size = int(size*100)

    #判断输出的下载百分比是否相同 相同赋值当前百分比,否则输出上传百分比
    if down_size==last_size:
        last_size = down_size
    else:
        print(str(down_size)+"%")
        last_size = down_size

#关闭文件
fp.close()

我们运行下:

先运行 服务端

在运行 客户端

切换到服务端

ok,完成!

elasticsearch 基本用法。

环境 elasticsearch6.0 kibana-6.0.0

进入
elasticsearch /bin 目录下

下载对应版本的ik分词(我这里是6.0版本)

elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v6.0.0/elasticsearch-analysis-ik-6.0.0.zip

运行
kibana 运行默认端口5601 开始代码把!

1.CURD

#1.新建数据库(索引)
#number_of_shards 分片的数量 默认5(一旦创建完成不能改)
#number_of_replicas 副本的数量 默认1
PUT blog
{
  "settings":{
    "index":{
      "number_of_shards":5,
      "number_of_replicas":1
    }    
  }
}
#2.获取索引消息
GET _all
GET blog
#3.添加表和数据
POST blog/article
{
  "title":"我是博客",
  "msg":{
    "author":"admin",
    "position":"程序员"
  },
  "desc":"i like you",
  "create_time":"2019-07-12",
  "look":50,
  "like":100
}
#4.获取数据(这里先简写后面详细讲解)
GET blog/article/_search
#5.修改数据
PUT blog/article/0PkS5msBS7MmrBYMH0SR
{
  "title":"我是程序员",
  "msg":{
    "author":"admin",
    "position":"程序员"
  },
  "desc":"i like you",
  "create_time":"2019-07-12",
  "look":50,
  "like":100
}
#5.1 修改数据
POST blog/article/0PkS5msBS7MmrBYMH0SR/_update
{
  "doc":{
    "title":"i like work ( fuck you ) "
  }
}
#6.delete (无法删除表,可以删除索引)
DELETE blog/article/0PkS5msBS7MmrBYMH0SR
DELETE blog
#7. 批量操作(同时执行增删改查)
(
格式 添加 {"index":{"_index":"索引名称","_type":"表名称","_id":"id(可不传入)"}}
接着下面填写数据
修改 {"update":{"_id":"id","_type":"表名称","_index":"索引名称"}}
接着下面修改数据
删除 {"delete":{"_id":"id","_type":"表名称","_index":"索引名称"}}
)
POST _bulk
{"index":{"_index":"blog","_type":"article","_id":1}}
{"title":"我是程序员","msg":{"author":"admin","position":"程序员"},"desc":"i like you","create_time":"2019-07-12","like":100}
{"index":{"_index":"blog","_type":"article","_id":2}}
{"title":"我是程序员","msg":{"author":"admin","position":"程序员"},"desc":"i like you","create_time":"2019-07-12","like":100}
{"update":{"_id":2,"_type":"article","_index":"blog"}}
{"doc":{"like":101}}
{"delete":{"_id":1,"_type":"article","_index":"blog"}}
#8.设置插入类型
( text字符串类型 keyword字符串类型(不分词) properties一个对象 date日期 format日期显示格式 integer数字 analyzer选择分词 )
PUT blog
{
  "mappings": {
    "article": {
      "properties": {
        "title":{
          "type": "text",
          "analyzer": "ik_max_word"
        },
        "msg":{
          "properties": {
            "author":{
              "type":"keyword"
            },
            "position":{
              "type":"keyword"
            }
          }
        },
        "desc":{
          "type": "text"
        },
        "create_time":{
          "type": "date",
          "format": "yyyy-MM-dd"
        },
        "like":{
          "type": "integer"
        }
      }
    }
  }
}

执行GET blog 效果如下:
{
  "blog": {
    "aliases": {},
    "mappings": {
      "article": {
        "properties": {
          "create_time": {
            "type": "date",
            "format": "yyyy-MM-dd"
          },
          "desc": {
            "type": "text"
          },
          "like": {
            "type": "integer"
          },
          "msg": {
            "properties": {
              "author": {
                "type": "keyword"
              },
              "position": {
                "type": "keyword"
              }
            }
          },
          "title": {
            "type": "text",
            "analyzer": "ik_max_word"
          }
        }
      }
    },
    "settings": {
      "index": {
        "creation_date": "1562935455291",
        "number_of_shards": "5",
        "number_of_replicas": "1",
        "uuid": "IQ0B-zsNSmeV26mNjb8i_w",
        "version": {
          "created": "6000099"
        },
        "provided_name": "blog"
      }
    }
  }
}
#1.match查询 (根据分词查询对应数据)
GET blog/article/_search
{
  "query":{
    "match":{
      "title":"python"
    }
  }
}
#2.term查询 (不会对搜索解析)
GET blog/article/_search
{
  "query": {
    "term":{
      "title":"python"
    }
  }
}
#3.terms查询 (数组内有一个满足就查询出来)
GET blog/article/_search
{
  "query": {
    "terms": {
      "title": [
        "php",
        "网站"
      ]
    }
  }
}
#4.分页查询
GET blog/article/_search
{
  "query":{
    "match":{
      "title":"python"
    }
  },
  "from": 0,
  "size": 1
}
#5.全部查询
GET blog/article/_search
{
  "query": {
    "match_all": {}
  }
}
#6.多字段查询 multi_match
GET blog/article/_search
{
  "query": {
    "multi_match": {
      "query": "程序员",
      "fields": ["title","msg.position"]
    }
  }  
}
#7.指定返回字段 (要在设置类型时设置 "store": true)
GET blog/article/_search
{
  "stored_fields":["title","desc"],
  "query": {
    "match": {
      "title": "php"
    }
  }
}
#8.sort排序 
GET blog/article/_search
{
  "query": {
    "match_all": {}
  },
  "sort": [
    {
      "like": {
        "order": "desc"
      }
    }
  ]
}
#9. 查询范围  
GET blog/article/_search
{
  "query": {
    "range": {
      "like": {
        "gte": 10,
        "lte": 20
      }
    }
  }
}

组合查询

#1. filter查询
#select * from article where like=50;
GET blog/article/_search
{
  "query": {
    "bool": {
      "must": {"match_all": {}},
      "filter": {
        "term": {
          "like": "50"
        }
      }
    }
  }
}
#should 或者 must必须 must_not取反 exists是否存在
GET blog/article/_search
{
  "query": {
    "bool": {
      "should": [
        {"term":{"title":"python"}}
      ],
      "must": [
        {"term":{"like":50}}
      ]
    }
  }
}

android9.0 hb 离线打包 plus.runtime.install 失败处理

参考网站:
http://ask.dcloud.net.cn/article/35703

第一步:下载最新的sdk 把libs里用上的 覆盖 到 自己的app

第二步:在application 下添加

<provider
            android:name="android.support.v4.content.FileProvider"
            android:authorities="x.x.x.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_provider" />
</provider>

把x换成包名。

C语言编写 hbX 自动生成在线app资源和android打包。

最近离线打包的时候,每一次离线生成app资源时,都要对应修改json文件里的唯一编号,这样如果只有几个还好,但是安卓市场那么多,还是写个自动化操作脚本好点。

好了不逼逼,看下实现步骤先。

  1. 首先是用鼠标点击到hbX 标题栏

2. 修改json文件里的 打包唯一标识

3.执行 alt+U alt+L alt+R 生成本地app资源

4. 把生成的 app资源 复制到 app项目的 assets\apps 目录下

5. 执行 gradle assembleRelease

6. 重命名app-release.apk 为 当前唯一标识 名称

接下来:就是代码的实现了 (我已经把注释写上了)

#include <stdio.h>
#include <stdlib.h>
#include <windows.h>
#include <unistd.h>

/* 修改json配置文件 */
void setPackAgeJson(char *codeName)
{
  char *reStr = "{\"packageCode\":";
  char *packageCode = (char *) malloc(strlen(codeName) + strlen(reStr));
  //拼接 唯一标识
  sprintf(packageCode,"%s%s",reStr,codeName);
  //修改配置文件
  FILE *fp = fopen("F:\\xx\\xx\\xx\\xx\\xx\\xx\\xx\\packageCode.json","w");
  //把唯一标识 覆盖到 配置文件中
  fputs(packageCode,fp);
  fclose(fp);
  free(packageCode);
}

void gradleApk(char *codeName,char *name)
{

  setPackAgeJson(codeName);

  //设置鼠标位置为 50,0
  SetCursorPos(50, 0);
  //鼠标单击 
  mouse_event(MOUSEEVENTF_LEFTDOWN, 0, 0, 0, 0); //左键按下
  mouse_event(MOUSEEVENTF_LEFTUP, 0, 0, 0, 0);   //左键松开

  //按下alt+U
  keybd_event(18, 0, 0, 0);
  keybd_event(85, 0, 0, 0);
  //释放U键
  keybd_event(85, 0, KEYEVENTF_KEYUP, 0);
  //按下alt+L
  keybd_event(76, 0, 0, 0);
  //释放L键
  keybd_event(76, 0, KEYEVENTF_KEYUP, 0);
  //按下alt+R
  keybd_event(82, 0, 0, 0);
  //释放R键
  keybd_event(82, 0, KEYEVENTF_KEYUP, 0);
  //最后释放ALT键
  keybd_event(18, 0, KEYEVENTF_KEYUP, 0);

  //HBX导出app资源 时等 20秒
  Sleep(20000);

  //把导出的资源 复制到 android离线项目上
  system("xcopy F:\\xx\\xx\\xx\\xxx\\xxx\\xxx\\xx\\H5F3683FF F:\\xx\\xx\\app\\src\\main\\assets\\apps\\H5F3683FF\\ /E/Y");
  
  //把当前目录切换到android离线项目上
  chdir("F:\\yigonglaAndroid\\yigongla\\app");

  //执行 打包命令
  system("gradle assembleRelease");

  //打包完成后切换至 生成apk包目录
  chdir("F:\\xxx\\xxx\\app\\build\\outputs\\apk\\release");
  //获取生成的app名称
  char *oldname = "app-release.apk";
  //获取修改生成的app名称
  char *newname = name;
  //把生成的app名称 修改为 newname
  rename(oldname, newname);
}

int main()
{
  //要修改的唯一标识
  char name[5][100] = {"\"111114\"}","\"111115\"}","\"111116\"}","\"111117\"}","\"111118\"}"};
  //重命名apk
  char *newName[5] = {"111114.apk","111115.apk","111116.apk","111117.apk","111118.apk"};
  for(int i=0;i<5;i++)
  {
    gradleApk(*(name+i),*(newName+i));
  }
  
}

效果运行:(记得运行的时候要把 hbx 露出了,不然鼠标点不到)

运行完后的效果(运行是的效果我就不放出来,因为涉及到隐私。)