Mr.Pu 个站博客

起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用； Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。 本文章以Vue2的角度学习Vue3的语法，让你快速理解Vue3的Composition Api 本文章第十四节为状态库 Pinia 的安装、使用讲解 文件结构Vue2中，<template> 标签中只能有一个根元素，在Vue3中没有此限制 1234567891011<template> // ...</template><script setup> // ...</script><style lang="scss" scoped> // 支持CSS变量注入v-bind(color)</style> data1234567891011121314151617181920<script setup ...

一、supervisor简介Supervisor是用Python开发的一套通用的进程管理程序，能将一个普通的命令行进程变为后台daemon，并监控进程状态，异常退出时能自动重启。它是通过fork/exec的方式把这些被管理的进程当作supervisor的子进程来启动，这样只要在supervisor的配置文件中，把要管理的进程的可执行文件的路径写进去即可。也实现当子进程挂掉的时候，父进程可以准确获取子进程挂掉的信息的，可以选择是否自己启动和报警。supervisor还提供了一个功能，可以为supervisord或者每个子进程，设置一个非root的user，这个user就可以管理它对应的进程。 二、supervisor安装配置好yum源后，可以直接安装 12yum install epel-release #安装yum源yum install -y supervisor 修改配置文件 123456789101112131415161718192021222324252627$ /etc/supervisord.conf[unix_http_server]file=/var/run/su ...

Jenkinsfile解读一个文本文件，用于描述 Jenkins 的 Pipeline Job ，可以被 Groovy 解释器执行。 在 Jenkins 上编辑 Job 时，可以通过 Web 表单填写多种配置参数。 使用 Jenkinsfile 时，可以将大部分 Web 表单的配置参数用代码描述，更灵活，容易迁移。 每执行一次 Jenkinsfile ，Jenkins 会自动识别其中的配置参数，导入相应的 Web 表单中，实现向下兼容。 不过，有的配置参数是 Jenkinsfile 独有的，不支持导入。 Jenkinsfile 有两种写法： 脚本式（Scripted Pipeline）：将流水线定义在 node{} 中，内容为可执行的 Groovy 脚本。 声明式（Declarative Pipeline）：将流水线定义在 pipeline{} 中，内容为声明式的语句。本文采用这种写法。 所有 Pipeline Job 的 Web 页面中都有一个名为 “流水线语法” 的链接，点击之后可以查看一些关于 Pipeline 的帮助文档。 比如可以使用 “片段生成器” ，将 We ...

Golang mod使用GitLab私有仓库 介绍：在Go开发过程中我们经常使用的包来源都是GitHub，但是在内部开发中某些内部的包不可能放到GitHub公共仓库中，大部分企业会选择放在GitLab来使用，这里就介绍Golang如何使用GitLab当做私有仓库。 下面所示go.mod中，以git.putianhui-local.cn开头的地址，是我们的GitLab私有仓库，这里混合使用了公共包和内部私有包。 1234567891011module go_testgo 1.16require ( git.putianhui-local.cn/ops/ops-test v0.0.0-20220802013626-1e9ec900c37b // 这个是内部私有包 github.com/google/uuid v1.3.0 github.com/hashicorp/errwrap v1.1.0 // indirect github.com/tidwall/gjson v1.14.1 golang.org/x/net v0.0.0-20220615171555-694bf12d69de // ...

记一次HTTP Status 307缓存的处理​ 今天遇到使用HTTP访问某个域名时Chrome自动返回307，重定向到HTTPS去了。 ​ 由于是开发调试，这是本不希望的情况经研究发现，现代浏览器和服务器都开始支持HSTS(HTTP Strict Transport Security)功能，即自动将不安全的 HTTP 请求使用 307 Internal Redirect 跳转到 HTTPS 请求。 ​ 这是由Chrome内部HSTS缓存导致的。Chrome 会自动记住每个域的 HSTS 设置，也就是说HSTS只要在理论上的第一次暴露后，后来就不经网页服务器返回，浏览器会查询本地数据，直接伪造 HSTS 307 跳转到安全的 HTTPS，以此来加强网络访问的安全性。 ​ 这的确是个很先进的功能，但对开发人员的调试环境就带来了麻烦，一旦网页服务器设置了 HSTS，且在理论上的第一次无意或有意访问过，这就被浏览器缓存住了。此后，浏览器自行决定将不会再访问该域的 HTTP了，哪怕服务端已经修改了相关配置。 解决方法：在Chrome打开 chrome://net-internals/#hst ...

最近搞一个demo服务，需要把项目部署在域名的二级目录下，并且是用vue-router的history的模式。 我们都知道vue-router 的两种前端基本访问模式 hash和history 。hash 模式后面带#，打包的时候只需要把绝对路径(/)换成相对路径（./），就可以部署在任何地方，不需要服务器配合，但是不好看，所以我们一般选择history 模式，但是history 模式需要配合服务器的部署。 本文主要是在vue-cli4版本下，对部署在域名的二级目录下做四处的配置: 1、vue-router 路由的文件的配置，根据自己部署的二级目录填写 123export default new VueRouter({ mode: "history", base: "/web", 2、在vue.config.js配置文件（如果没有新建一个，项目根目录下） 注意: baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath 123module.exports = { publicPath: &qu ...

认识前端路由路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。 后端路由阶段早期开发的网站，整个html是由服务器来进行渲染的，服务器直接生产渲染好对应的html页面，然后当浏览器发起请求时，后台会根据url路径来渲染页面返回给前端，前端拿到后台返回的页面数据然后进行展示。这就是后端路由。 优点： 不需要单独加载js和css文件，有利于seo优化。 缺点是： 整个前端页面需要后台开发人员来维护。 如果前端开发人员想要开发页面，需要通过java,php来开发。 html代码和数据对应的逻辑混合在一起，编写和维护都非常糟糕。 前后端分离阶段前后端分离阶段，就是前端一些文件放到静态资源服务器中(html + css + js)，此时后台服务器只需要提供一些 ...

Vue跨域代理配置本案例需要下载axios库npm install axios 配置参考文档 Vue-Cli devServer.proxy vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写 方法一在vue.config.js中添加如下配置 12345module.exports = { devServer:{ proxy:"http://localhost:5000" }} 说明 优点：配置简单，请求资源时直接发给前端（8080）即可 缺点：不能配置多个代理，不能灵活的控制请求是否走代理 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，才会将请求会转发给服务器 （优先匹配前端资源） 方法二编写vue.config.js配置具体代理规则 12345678910 ...

ref属性 ref被用来给元素或子组件注册引用信息（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象vc 使用方式 打标识：<h1 ref="xxx"></h1>或<School ref="xxx"></School> 获取：this.$refs.xxx 123456789101112131415161718192021222324252627282930<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch" /> </div>< ...

初始化脚手架说明 Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 最新的版本是 4.x 文档地址： Vue CLI 具体步骤 如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taobao.org 全局安装 @vue/cli npm install -g @vue/cli 切换到创建项目的目录，使用命令创建项目vue create xxx 选择使用vue的版本 启动项目npm run serve 打包项目npm run build 暂停项目 Ctrl+C Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行vue inspect > output.js 脚手架文件结构1234567891011121314151617.文件目录├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── l ...