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图片反值完整代码

获取图片真实大小

前端核心代码

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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