文章目录
博主越学越觉得自己垃圾，想来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">×</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 添加出现以及消失的动画 ```
打开模态框
开始我们的应用
我们来做一个安全帽识别的网页应用吧
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">×</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>
