BVDHNDL 学习贴-阿里云开发者社区

博主越学越觉得自己垃圾，想来20多了，还是一个无法经济独立的垃圾

新建个帖子，再次巩固一下自己的学习的内容，提高一下自己。

什么是BVDHNDL

这是目前比较流行的几个框架的缩写

Bootstarp

Vue.js

Djanjo

Hbase

Nginx

Docker

Linux

编写过程中的阶段性代码

tfjs ssd 物体检测

https://code.aliyun.com/734449600/tfjscocossd/repository/archive.zip?ref=master`

下载代码后运行 index.html 即可

docker 查看查看效果部署服务器

docker run -p 10080:80 -d --name tfjsssd   registry.cn-hangzhou.aliyuncs.com/mkmk/nginx:tfjsssd

访问10080 端口

效果

构建过程主要命令

docker cp C:\Users\73444\Desktop\githubstudy\tfjscocossd\tfjs   tfjsssd:/
docker cp  C:\Users\73444\Desktop\111\nginx.conf  tfjsssd:/etc/nginx/nginx.conf 
docker commit tfjsssd  registry.cn-hangzhou.aliyuncs.com/mkmk/nginx:tfjsssd
docker push  registry.cn-hangzhou.aliyuncs.com/mkmk/nginx:tfjsssd

记录一个nginx 代理单个html

nginx.config

user  nginx;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  _ ;
        #配置跨域
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
       root /tfjs/;
       index index.html;
    }
}

他们有什么联系

Bootstarp 样式好看前端ui，Vue 绑定数据发送前端请求，Django 后台响应数据，

Hbase 是个容量很大的数据库，Nginx 是前端代理工具，Docker 是部署开发工具， Linux 是服务器的操作系统

Bootstarp and vue

学习官网 https://bootstrap-vue.js.org/

安装npm

https://nodejs.org/en/

安装yarn

国外镜像不可用

yarn config set registry https://registry.npm.taobao.org -g

yarn add vue bootstrap-vue bootstrap

创建vue-cli3 项目并引入 bootstrap

下载编辑器Hbuildx ,

创建vue项目，导入 vue-router

目录结构如下

安装jQuery

bootstrap是基于jQuery的，在使用之前我们先安装一下jQuery包

自己手动添加也可以

yarn install jquery -S

install -S -D -g 有什么区别

npm install module_name -S 即 npm install module_name --save 写入dependencies

npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies

npm install module_name -g 全局安装(命令行使用)

npm install module_name 本地安装(将安装包放在 ./node_modules 下)

/*
*Vue-CLI项目的核心配置文件
*/
const webpack = require("webpack");
module.exports = {
 configureWebpack: {
   plugins: [
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery",
       Popper: ["popper.js", "default"]
     })
   ]
 }
};

安装bootstrap

yarn install bootstrap

在main.js中导入bootstrap

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入bootstrap
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

测试vue-cli中是否已经导入了bootstrap

新建 mybs1.vue 配置路由后查看效果，文件摘自菜鸟教程

<template>
<div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>我的第一个 Bootstrap 4 页面</h1>
  <p>重置浏览器窗口大小查看效果！</p> 
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">导航</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>    
    </ul>
  </div>  
</nav>
<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>关于我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg">这边插入图像</div>
      <p>关于我的介绍..</p>
      <h3>一些链接</h3>
      <p>说明文本</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">激活状态</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">禁用</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
      <br>
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
    </div>
  </div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部内容</p>
</div>
</div>
</template>
<script>
export default{
  name: 'mybs1',
  data:function () {
      return {
        a:"12223",
      b:["asdfg"]
      };
    },
  mounted(){
    this.a +="444"
    this.a=this.addstr(this.a,this.b[0])
    // that.a = "232323"
  },
  methods:{
  addstr: function(str1,str2){
    var str3=str1+str2
    return str3
  }
  }
}
</script>
<style>
</style>

html最小化引入bootstrap

关键的是结尾三句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>

vue引入样式

在vue中引入外部的css文件

在项目的src文件下，新建一个style文件夹，存放css文件。

1.全局引入

将外部的css文件放到style文件下，引入外部文件只需在main.js文件中

import './style/reset.css'

我引入的是清除默认样式的css文件

2.局部引入

<style scoped>
  @import '../assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
</style>

vue数据初始化，监听加载完成，以及定义js方法

<template>
<div>js方法拼接改变a的内容{{a}}</div>
</template>
<script>
export default{
//这个vue的唯一名称
  name: 'mybs1',
  //初始化的数据
  data:function () {
      return {
        a:"12223",
      b:["asdfg"]
      };
    },
    //监听页面完成
  mounted(){
    this.a +="444"
    this.a=this.addstr(this.a,this.b[0])
    // that.a = "232323"
  },
  //本页的js方法
  methods:{
  addstr: function(str1,str2){
    var str3=str1+str2
    return str3
  }
  }
}
</script>
<style>
</style>

如何取消url中的#号

#号是特殊字符，不利于最后投入生产环境

在router.js 中添加 mode:“history”, 即可删除url中的#号

export default new Router({
  mode:"history",

一个完整的router.js 文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Page1 from './views/page1.vue'
import Mybs1 from './views/mybs1.vue'
Vue.use(Router)
export default new Router({
  mode:"history",
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

bootstrap 常用元素样式

平均宽度，平均高度

指定 class col 平均高度，指定row 平均宽度

   <div class="row">
        <div class="col">1</div>
        <div class="col">1</div>
        <div class="col">1</div>
    </div>
    <div class="row">
        <div class="col">1</div>
        <div class="col">1</div>
        <div class="col">1</div>
    </div>

字体

<h1> - <h6>  标题
<元素名称 class="display-1" > 获得更大字体
<small> 文字 </small> 获得较小文字
<mark> 高亮显示内容 </mark>  默认黄色的
<abbr> 下滑虚线 </abbr>
<blockquote> 引用内容 </blockquote> 自动添加--引用符号，并默认浅色字体
<code>span</code>,和 <code>div</code>  转义关键字
 <kbd>ctrl + p</kbd> 纯黑色关键提醒字体
 <pre>段落</pre> 保持换行
<pre class="pre-scrollable">文章</pre>  使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

颜色

字体颜色

<p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>

背景颜色

  <p class="bg-primary text-white">重要的背景颜色。</p>
  <p class="bg-success text-white">执行成功背景颜色。</p>
  <p class="bg-info text-white">信息提示背景颜色。</p>
  <p class="bg-warning text-white">警告背景颜色</p>
  <p class="bg-danger text-white">危险背景颜色。</p>
  <p class="bg-secondary text-white">副标题背景颜色。</p>
  <p class="bg-dark text-white">深灰背景颜色。</p>
  <p class="bg-light text-dark">浅灰背景颜色。</p>

常用表格属性

class="table" 默认
table-dark  黑色
table-hover  带悬停
table-striped  条纹
table-bordered 边框

<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
      </tr>
      <tr>
        <td>Mary</td>
      </tr>
      <tr>
        <td>July</td>
      </tr>
    </tbody>
</table>

图片

自适应图片，自动调节大小
<img src="https://paris.jpg" class="img-fluid">
.class="rounded" 类可以让图片显示圆角
 class="rounded-circle" 椭圆图片

背景框

<div class="jumbotron"></div>
没有圆角的全屏幕，可以在 .jumbotron-fluid 类

设置与关闭提示消息框

 class="alert alert-info"
 .alert 类, 后面加上
  .alert-success,  成功
  .alert-info,     消息
  .alert-warning,   警告
  .alert-danger,     危险
  .alert-primary,    重要
  .alert-secondary,   次要
  .alert-light      亮色
  .alert-dark      暗色

× 是 HTML 的符号（其实是乘号），看起来像 x

关闭提示框

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

各种按钮

按钮也可用于按钮类可用于 , , 或元素上:

btn-outline-描述仅仅把边框变成什么颜色

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

定义一组按钮

-sm 表示小号按钮， -lg表示大号按钮 
<div class="btn-group btn-group-sm">

垂直按钮组以及下拉菜单

class="btn-group-vertical" 垂直按钮组
toggle 切换
<div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      下来菜单标题
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">菜单内容一</a>
        <a class="dropdown-item" href="#">菜单内容二</a>
      </div>
    </div>

徽章

<span class="badge badge-pill badge-default">默认</span>
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-danger">危险</span>

进度条

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>
class="progress-bar progress-bar-striped progress-bar-animated"  动画进度条
可以带上 bg-success 属性切换背景颜色

常用分页

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

模态框

fade 添加出现以及消失的动画 ``` 打开模态框

  <!-- 模态框头部 -->
  <div class="modal-header">
    <h4 class="modal-title">模态框头部</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
  </div>
  <!-- 模态框主体 -->
  <div class="modal-body">
    模态框内容..
  </div>
  <!-- 模态框底部 -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  </div>
</div>

``` ### 可隐藏导航栏

开始我们的应用

我们来做一个安全帽识别的网页应用吧

wz_jsgraphics.js 在图片上画直线、圆、矩形

导入tfjs.js

使用JavaScript进行基本图形操作与处理

//创建图片 从组件中获取url
var img1=new Image();
//jqury获取方法
img1.url=$("#inputimg1").attr("src");
//原生js获取方法
const img0 = document.getElementById('inputimg1');
img1.url=img.src;

求png图片反值完整代码

//获得img对象
const img = document.getElementById('inputimg1');
//创建画布
var myCanvas = document.createElement("canvas");
//实现 缩放
var defaultsize=1500;
myCanvas.width = defaultsize;
myCanvas.height = defaultsize;
var context1 = myCanvas.getContext('2d'); 
//根据图片大小缩放画布
context1.scale(defaultsize/img.width,defaultsize/img.height);
//加载图片 到 画布
context1.drawImage(img,0,0);
    console.log("canvas",myCanvas);
    var imgdata = context1.getImageData(0, 0, defaultsize, defaultsize);
    //求图片反值  000 是纯黑  255 255 255 是纯白
    for(var i=0, len= imgdata.data.length; i<len; i+=4) {
        imgdata.data[i] = 255-imgdata.data[i];
        imgdata.data[i+1] = 255-imgdata.data[i+1];
        imgdata.data[i+2] = 255-imgdata.data[i+2];
    }
    // 把数据返回到 画布上
    context1.putImageData(imgdata, 0,0);
    console.log("imgdata",imgdata);
    var resimgurl = myCanvas.toDataURL();
     $("#resimg1").attr("src",resimgurl);
    // document.getElementById('resimg1').src = resimgurl;
    console.log("结果图像url",resimgurl);

效果

获取图片真实大小

画布一定要指定真实大小否则会出错

function getData64urldrawbox(img,boxes)
    var myCanvas = document.createElement("canvas");
    myCanvas.width=img.naturalWidth;
    myCanvas.height=img.naturalHeight;

前端核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
<!--<nav class="navbar navbar-expand-md bg-dark navbar-dark">-->
<div class="row bg-secondary">
    <div class="col-2 ">
    <nav class="navbar  bg-dark navbar-dark">
      <a class="navbar-brand" href="#">菜单</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
    </nav>
  </div>
    <div class="col-10 d-flex flex-row-reverse " >
    <nav class="navbar navbar-expand-sm  bg-secondary navbar-dark">
      <ul class="navbar-nav ">
      <li class="nav-item">
        <a class="nav-link text-white" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">帮助</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="#">登录</a>
      </li>
      </ul>
    </nav>
  </div>
</div>
<div class="row bg-light">
    <div class="col-3 collapse navbar-collapse  bg-dark navbar-dark" id="collapsibleNavbar">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">选择图像</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">拍摄</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">识别记录</a>
              </li>
            </ul>
    </div>
  <div class="col-9">
    <div class="d-flex flex-row">
      <div class="col-5 offset-1">
          <!-- <p>图片在头部 (card-img-top):</p> -->
        <div class="card ">
        <img id="inputimg1" class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
        <div class="card-body">
          <h4 class="card-title">原图像</h4>
          <p class="card-text">输入图像，应当清晰，明亮</p>
           <input id="input1" type="file" />
          <script type="text/javascript">
                      $('#input1').change(function(){
                        $('#inputimg1').attr("src",URL.createObjectURL($(this)[0].files[0] ));
                      });
          </script>
          <a href="https://static.runoob.com/images/mix/img_avatar.png" target="_blank"   class="btn btn-primary">上传识别</a>
        </div>
        </div>
      </div>
      <div class="col-5  ">
        <!-- <p>图片在头部 (card-img-top):</p> -->
        <div class="card " >
        <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
        <div class="card-body">
          <h4 class="card-title">识别图像</h4>
          <p class="card-text">识别结果分为person和hat</p>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
              放大图片
            </button>
          <div class="modal fade" id="myModal">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <!-- 模态框头部 -->
                  <div class="modal-header">
                    <h4 class="modal-title">模态框头部</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <!-- 模态框主体 -->
                  <div class="modal-body">
                   <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
                  </div>
                  <!-- 模态框底部 -->
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
        </div>
      </div>
      <div class="col-5 ">    
        <div class="alert alert-success">
           带头盔人数 <strong>10</strong> 
        </div> 
        <div class="alert alert-warning">
          未带头盔人数 <strong>3</strong> 
        </div>
        <div class="alert alert-danger">
          <strong>没有识别结果!</strong> 
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

BVDHNDL 学习贴

编写过程中的阶段性代码

tfjs ssd 物体检测

docker 查看查看效果部署服务器

他们有什么联系

创建vue-cli3 项目并引入 bootstrap

安装jQuery

安装bootstrap

测试vue-cli中是否已经导入了bootstrap

html最小化引入bootstrap

vue引入样式

vue数据初始化，监听加载完成，以及定义js方法

如何取消url中的#号

bootstrap 常用元素样式

平均宽度，平均高度

字体

颜色

常用表格属性

图片

背景框

设置与关闭提示消息框

各种按钮

垂直按钮组以及下拉菜单

徽章

进度条

常用分页

模态框

开始我们的应用

wz_jsgraphics.js 在图片上画直线、圆、矩形

导入tfjs.js

使用JavaScript进行基本图形操作与处理

求png图片反值完整代码

获取图片真实大小

前端核心代码

热门文章

最新文章

相关电子书

相关实验场景

BVDHNDL 学习贴

编写过程中的阶段性代码

tfjs ssd 物体检测

docker 查看查看效果部署服务器

他们有什么联系

创建vue-cli3 项目 并 引入 bootstrap

安装jQuery

安装bootstrap

测试vue-cli中是否已经导入了bootstrap

html最小化引入bootstrap

vue引入样式

vue数据初始化，监听加载完成，以及定义js方法

如何取消url中的#号

bootstrap 常用元素样式

平均宽度，平均高度

字体

颜色

常用表格属性

图片

背景框

设置与关闭提示消息框

各种按钮

垂直按钮组以及下拉菜单

徽章

进度条

常用分页

模态框

开始我们的应用

wz_jsgraphics.js 在图片上画直线、圆、矩形

导入tfjs.js

使用JavaScript进行基本图形操作与处理

求png图片反值完整代码

获取图片真实大小

前端核心代码

热门文章

最新文章

相关电子书

相关实验场景

创建vue-cli3 项目并引入 bootstrap