Mr.Pu 个站博客

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 ...

模块与组件、模块化与组件化 模块 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件 为什么：js 文件很多很复杂 作用：复用、简化 js 的编写，提高 js 运行效率 组件 定义：用来实现局部功能的代码和资源的集合（html/css/js/image…） 为什么：一个界面的功能很复杂 作用：复用编码，简化项目编码，提高运行效率 模块化 当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用 组件化 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用 非单文件组件 非单文件组件：一个文件中包含有 n 个组件 单文件组件：一个文件中只包含有 1 个组件 基本使用Vue中使用组件的三大步骤 定义组件 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别 el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器 data必须写成函数，避免组件被复用时，数据存在引用关系 ...

内置指令之前学过的指令： v-bind 单向绑定解析表达式，可简写为: v-model 双向数据绑定 v-for 遍历数组 / 对象 / 字符串 v-on 绑定事件监听，可简写为@ v-show 条件渲染 (动态控制节点是否展示) v-if 条件渲染（动态控制节点是否存存在） v-else-if 条件渲染（动态控制节点是否存存在） v-else 条件渲染（动态控制节点是否存存在） v-text指令作用：向其所在的节点中渲染文本内容 与插值语法的区别：v-text会替换掉节点中的内容，则不会，更灵活 12345678910111213141516171819<title>v-text指令</title><script type="text/javascript" src="../js/vue.js"></script><div id="root"> <div>你好，{{name}} ...

收集表单数据收集表单数据 若<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值 若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性 若<input type="checkbox"/> 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值） 配置了value属性 v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） v-model的初始值是数组，那么收集的就是value组成的数组 v-model的三个修饰符 alazy 失去焦点后再收集数据 bnumber 输入字符串转为有效的数字 ctrim 输入首尾空格过滤 12345678910111213141516171819202122232425262728293031323334353637383940414243444 ...