Vue3.2 setup语法糖、Composition API、状态库Pinia总结
起初 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简介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解读详解
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私有仓库
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 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 ...
Vue打包部署在域名二级目录的配置
最近搞一个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 ...
【Vue学习笔记-高级】vue-router理解及使用
认识前端路由路由其实是网络工程中的一个术语,在架构一个网络时,非常重要的两个设别是路由器和交换机。当然,目前在我们生活中路由器也是越来越被大家所熟知,因为我们生活中都会用到路由器,事实上,路由器主要维护的是一个映射表,映射表会决定数据的流向。路由的概念在软件工程中出现,最早是在后端路由中实现的,原因是web的发展主要经历了这样一些阶段:后端路由阶段,前后端分离阶段,单页面复应用(SPA)阶段。
后端路由阶段早期开发的网站,整个html是由服务器来进行渲染的,服务器直接生产渲染好对应的html页面,然后当浏览器发起请求时,后台会根据url路径来渲染页面返回给前端,前端拿到后台返回的页面数据然后进行展示。这就是后端路由。
优点:
不需要单独加载js和css文件,有利于seo优化。
缺点是:
整个前端页面需要后台开发人员来维护。
如果前端开发人员想要开发页面,需要通过java,php来开发。
html代码和数据对应的逻辑混合在一起,编写和维护都非常糟糕。
前后端分离阶段前后端分离阶段,就是前端一些文件放到静态资源服务器中(html + css + js),此时后台服务器只需要提供一些 ...
【Vue学习笔记-高级】axios&跨域代理&插槽
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 ...
【Vue学习笔记-高级】ref&props&mixin&plugin&scoped属性
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学习笔记-高级】CLI初始化脚手架
初始化脚手架说明
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 ...