前端阻止冒泡事件将项目打包并安装在当前环境中请求路径参数传递方式JQ触发动态添加元素position绝对定位和相对定位js中动态添加idCorpus项目部署上线

Posted 2020-12-17 能扛事，就是最了不起的才华!

一、前端阻止冒泡事件

举例：button里面有个span标签，button和span都绑定了点击事件，点击span不会触发button的点击事件

思路：阻止冒泡到上一层
在内部标签span中加入：event.stopPropagation();

二、将项目打包并安装在当前环境中

将本地python项目代码打包成包并安装在环境中，具体的setup.py文件写法还需要百度了解，这里只提供思路

进入项目目录，项目目录存在setup.py文件
打包命令：python setup.py install

三、请求路径参数传递，常见的两种

1.前端请求地址："/search_label?label="+inputvalue
后端请求地址写法：
@bp.route("/search_label",method=["GET","POST"])
　　request.values["label"]      #通过request获取传递的参数

2.前端请求地址："/label_detail/"+label_name
后端请求地址写法：
@bp.route("/label_detail/<string:label_name>",methods=["POST","GET"])
def label_detail(label_name):    #能直接通过视图函数传参
　　pass

不同点在于：
1.前端请求地址?后面的参数，然后通过request方法获取参数
2.第二种方法不加问号的，在后端都需要用<>包裹参数值，可以不设置参数数据类型，直接用<>,不需要通过request获取，直接通过视图函数传参

四、Jquery append动态添加元素后，不触发定义好的事件怎么解决

动态生成的元素，使用.on绑定事件，
$(父节点).on(“事件”，“目标节点”，function(){}) 
比如：$(document).on("click",".divclick",function(){})
如果不绑定父节点，可以直接绑定body(是一个通用的方法)
$(this)  和 this 区别，$(this) 代表jquery对象，等同通过选择器如$("#id")获取的对象；而 this 代表的是html元素本身

举例：动态加入的标签删除按钮，点击删除触发

$("body").on("click", ".delete", function () {
        
      其他代码
});

五、position绝对定位和相对定位

position 绝对定位和相对定位

1.left和top都要写
absolute:绝对定位    即将对象从文档流中拖出
ralative相对定位     正常文档流中偏移位置，对象原来占有的位置保留，后面的对象按原来的文档任然保持原来的位置

六、js中动态添加id

注意：最好用一个字符串和id拼接，不然容易出错误

在遍历中动态添加id: "<ul id=‘ul"+i+"‘></ul>"

代码示例：通过append方式添加html页面的情况
for (var i in results) {
     var text =
          "<button class="label label-primary" style="line-height:30px; margin: 8px; padding-left: 15px; padding-right: 15px;font-size: 16px;background-color: #337ab7" class="label" id=" + "postId_" + i + " >" + "<span class="label_name">" + results[i] + " </span>" + "<span style="position: relative;top: -8px;left: 13px;font-size: 16px;" class="delete">" + "X" + "</span>" + "</button>";
       $("#label_content").append(text);
 }

七、Corpus项目部署上线

yufeng账号
1.lsof -i:5050    #查看5050端口的进程号
2.kill 进程号     #随意删除一个进程号
3.cd workpace/corpus/corpus  git pull    #在项目目录下拉取git提交的项目
4.sh startup.sh    #脚本重启项目（就是切换环境和启动项目）
5.页面查看是否能正常访问

corpus服务器重新部署项目

1.git clone xxx.git     #这个是将master分支的代码clone下来，需要master分支是最新的代码
2.建立环境    python -m venv venv    #在base环境下创建，进入项目创建，比如这个需要进corpus
3.激活环境  . venv/bin/activate  #激活环境的同时就进去环境
4.安装环境目录     pip install 模块
5.安装服务器模块   pip install gunicorn 
6.启动项目      gunicorn -b 127.0.0.1:5050 "flaskr:create_app(‘production‘)"    #不用-D，代表守护进程
7.安装项目缺少的logs和instance文件夹
  log查看错误，到logs文件下：tail log