搜索到
104
篇与
的结果
-
微信小程序后端无法保持session的原因及解决办法问题 最近在开发一个小程序遇到一个问题，后端接口的登录验证通过postman调试是可以成功的，后端采用了session机制验证token信息，因为postman可以调试通过，那么可以排除是后端没开启session的问题，最后发现，原来浏览器会自动维护cookie，而小程序的wx.request不会。这涉及到session与cookie的关系及保存机制的问题。首先，cookie是保存在客户端的信息，而session是保存在服务器的信息。那服务器如何识别单独用户的session，在一次连接下，如何判别该用户是属于哪一个session。机制是，服务器生成一个sessionid辨别用户，并在相应中的cookie带上该sessionid值。在用户下一次请求时，请求头中cookie理应也带上该sessionid，以便服务器辨别用户会话。其中辨别机制和session存储机制涉及到序列和反序列化，在session.save_path中，为每一个session单独创建一个文件，文件名为sessionid，内容则是此次会话保存的session。而wx.request并不会在请求中带上cookie，所以导致每次请求都被服务器分配一个新的sessionid，造成会话不能保持的后果。解决办法应在wx.request中带上该sessionid，或者重新封装wx.request。我采用了在请求头中的Cookie字段带上sessionid的方式自己维护一个header，在wx.request中保存和发送Cookie。首先在app.js中存储一个全局变量，存放header。globalData: { header: { "content-type": "application/x-www-form-urlencoded", 'Cookie': '' } }然后在每一次wx.request中的请求参数中带上该header。在每一次响应中检测并保存Cookie到header。wx.login({ success: (res) => { getToken({ data: { code: res.code, Cookie: getApp().globalData.cookie }, success: (res) => { console.log(res); // 注：此处的resHeader是在请求方法中封装好返回的返回体中的ResponseHeader if (res.resHeader["Set-Cookie"] != null) { //设置cookie This.globalData.Cookie += res.resHeader["Set-Cookie"] } const token = res.data.token; console.log('getToken success', res); This.globalData.token = token; wx.setStorage({ key: 'token', data: token}) }, }) } })其他请求的请求头中带上Cookie信息 header: { token: res.data, Cookie: getApp().globalData.Cookie },测试第一次请求接口-登录接口RequestHeader: Accept: */* Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9 Connection: keep-alive content-type: application/json Cookie: Host: marvengong.natapp1.cc Referer: https://servicewechat.com/wx66bf3980d8d1660f/devtools/page-frame.html token: D3F3CD0A-FB1C-6B30-8C5B-41A8AAA2A799 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 wechatdevtools/1.03.2011120 MicroMessenger/7.0.4 Language/zh_CN webview/ 第一次请求的响应ResponseHeaderCache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Connection: Keep-Alive Content-Type: text/html; charset=utf-8 Date: Wed, 06 Jan 2021 14:22:52 GMT Expires: Thu, 19 Nov 1981 08:52:00 GMT Keep-Alive: timeout=5, max=100 Pragma: no-cache Server: Apache/2.4.39 (Win64) OpenSSL/1.1.1b mod_fcgid/2.3.9a mod_log_rotate/1.02 Set-Cookie: PHPSESSID=t3fk6bpkrj2njiejsp0qva9fv1; path=/ Transfer-Encoding: chunked X-Powered-By: PHP/5.6.9第二次请求--提交用户信息接口RequestHeaderAccept: */* Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9 Connection: keep-alive Content-Length: 842 content-type: application/json Cookie: PHPSESSID=t3fk6bpkrj2njiejsp0qva9fv1; path=/ Host: marvengong.natapp1.cc Origin: http://127.0.0.1:23460 Referer: https://servicewechat.com/wx66bf3980d8d1660f/devtools/page-frame.html token: 88845DB7-DDA4-D515-1BC0-EE812B5142D9 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 wechatdevtools/1.03.2011120 MicroMessenger/7.0.4 Language/zh_CN webview/可以看到第二次请求带上了Cookie信息，其中的重要信息就是PHPSESSID，这是客户端和服务端会话的票据以上方法基本能解决微信小程序Cookie问题。 -
postman设置全局token信息并在登录完成自动设置最新的token 在使用postman调试接口的时候，通常会遇到一个问题，除了登录和其他某些特殊接口以外，几乎所有的接口都需要带上登录态信息和其他额外公共请求参数，比如token或者其他网关请求头。但是我们每次登录接口返回的token又是随机的，那么我们每次去调试其他接口的时候都要从登录接口的返回体里复制token粘贴到其他请求体或者请求头里面去，其实，我们可以采用下面的方案来减少这些重复工作1、创建集合，将请求组合到统一文件夹，并为其配置全局变量1）、点击右上角设置按钮进入设置2）、点击下面的Globals按钮进入全局变量配置页面，输入key（如：token）和value并保存（这里的value可以不填）2、在登录接口成功后设置token全局变量的值，后续接口直接访问全局变量即可1）、在登录接口的Tests栏添加脚本，获取token并设置到全局变量。图片中的代码如下（懒人复制专用）：// 获取登录接口的返回数据 var jsondata=pm.response.json() // 判断登录是否成功 if (jsondata.code === '0000') { // 获取token并设置到环境变量token的值 var token=jsondata.token pm.environment.set("token",token) } else { console.error(jsondata.msg); }2）、在其他接口需要携带token的地方引用{{token}}全局变量即可，比如下图我需要在header中携带
-
关闭vscode目录的收缩 用vscode时间长了的朋友应该会发现，如果我们的一层目录下面只有一个目录的时候，我左侧目录树上，目录层级就只会显示一层，并通过 fold-a/fold-b 的形式展示，如下图有时候我们并不喜欢vscode这样，第一影响了我们目录层级结构的直观性。第二想在SnapshotIndex下面或者上层目录新建文件或者目录时也没有那么方便。可以通过下面的设置，禁止掉vscode的这个功能打开 preferences->settings 在搜索栏搜索Compact FoldersExplorer: Compact Folders???? Controls whether the explorer should render folders in a compact form. In such a form, single child folders will be compressed in a combined tree element. Useful for Java package structures, for example.取消掉前面的勾选即可我们目录就会恢复成正常的树形结构了
-
gitbook出现TypeError: cb.apply is not a function解决办法 执行gitbook serve的时候出现如下错误> fastmock-doc@1.0.0 serve /Users/gongminghua/Public/03private/fastmock-docs > gitbook serve Live reload server started on port: 35729 Press CTRL+C to quit ... /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287 if (cb) cb.apply(this, arguments) ^ TypeError: cb.apply is not a function at /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18 at FSReqCallback.oncomplete (fs.js:169:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! fastmock-doc@1.0.0 serve: `gitbook serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the fastmock-doc@1.0.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/gongminghua/.npm/_logs/2020-12-23T02_00_45_660Z-debug.log 按照提示中的路径，/usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js 打开polyfills.js文件，找到这个函数function statFix (orig) { if (!orig) return orig // Older versions of Node erroneously returned signed integers for // uid + gid. return function (target, cb) { return orig.call(fs, target, function (er, stats) { if (!stats) return cb.apply(this, arguments) if (stats.uid < 0) stats.uid += 0x100000000 if (stats.gid < 0) stats.gid += 0x100000000 if (cb) cb.apply(this, arguments) }) } }在第62-64行调用了这个函数fs.stat = statFix(fs.stat) fs.fstat = statFix(fs.fstat) fs.lstat = statFix(fs.lstat)把这三行代码注释掉就解决报错了
-
react 使用 useEffect 方法替代生命周期API componentDidMount，componentDidUpdate 和 componentWillUnmount useEffect 是react 新版本推出的一个特别常用的 hooks 功能之一，useEffect 可以在组件渲染后实现各种不同的副作用，它使得函数式组件同样具备编写类似类组件生命周期函数的功能.因为useEffect只在渲染后执行，所以useEffect只能替代render后的生命周期函数。即componentDidMount，componentDidUpdate 和 componentWillUnmount1、只传入回调函数的useEffect -> componentDidUpdate。只为useEffect传入回调函数一个参数时，回调函数会在每次组件重新渲染后执行，即对应于componentDidUpdate。使用方法如下useEffect(() => console.log('updated...'));在使用这个方式的useEffect时，要特别注意在回调函数内部避免循环调用的问题，比如useEffect回调函数内部改变了state，state的更新又触发了useEffect。2、传入第二个数组类型的参数指定要响应的state数据为useEffect传入第二个参数，第二个参数是一个包含了state对象的数组，useEffect只会在数组内的一个或多个state发生变化并且重新渲染了组件后执行传入的回调函数const [count, setCount] = useState(0); useEffect(()=>{ console.log(count); }, [count])如上代码，只有在count的值发生更改时，回调函数才会执行，或者会跳过。用这个方法可以减少不必要的操作。3、传入第二个参数[]这个方式依托于上面的方式理解说简单也简单说不简单也不简单。官方的解释是如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直拥有其初始值。这样理解就相对简单了，意思就是只会在组件初始化时执行一次，后面的state和props的改变都不会执行了。这就会让我们很自然想到我们用得几乎最多的componentDidMount钩子函数了。代码如下const [count, setCount] = useState(0); useEffect(()=>{ console.log(count); }, [])4、在useEffect的回调函数中return一个匿名函数实现componentWillUnmount这个使用方法是固定用法，就不做过多说明，示例也粘贴至官网示例，这里大概提一下：结合上面的方法，如果在示例中传入和不传入第二个参数的区别不传第二个参数：return函数中的清除操作发生在下一次effect之前传入第二个参数：return函数中的清除操作发生在下一次effect之前，只是下个effect多了一个state控制。传入空数组，相当于useEffect回调函数=>componentDidMount - return的函数=>componentWillUnmountfunction FriendStatus(props) { // ... useEffect(() => { // ... ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; });
-
react Cannot find module 'node_modules/_react-scripts/config/webpack.config.dev 原来运行得好好的react项目，突然运行不成功了，提示如下错误$ npm start > react-app-rewired start internal/modules/cjs/loader.js:589 throw err; ^ Error: Cannot find module 'D:\my_project\node_modules\react-scripts/config/webpack.config.dev.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15) at Function.Module._load (internal/modules/cjs/loader.js:513:25) at Module.require (internal/modules/cjs/loader.js:643:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (D:\my_project\node_modules\react-app-rewired\scripts\start.js:18:23) at Module._compile (internal/modules/cjs/loader.js:707:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10) at Module.load (internal/modules/cjs/loader.js:605:32) at tryModuleLoad (internal/modules/cjs/loader.js:544:12) at Function.Module._load (internal/modules/cjs/loader.js:536:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my_project@0.1.0 start: `react-app-rewired start --scripts-version react-scripts-ts` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my_project@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\...\AppData\Roaming\npm-cache\_logs\2019-01-19T10_56_58_751Z-debug.log经过四处寻找，在github找到了原因解释，只不过他的解释是针对使用了ts下的react项目，但是原理相同内容如下This has been caused by recent changes to CRA (2.1.2) where they merged the webpack.config.dev.js and webpack.config.prod.js into a single file webpack.config.js. See #343 and #345 for more details on the change.The adjustment to paths made in react-app-rewired in order to continue to be able to be used with CRA looks for a react-scripts version number greater than or equal to 2.1.2. The react-scripts-ts version number has been higher than that for the last ~18 months, so react-app-rewired is treating it according to the merged webpack config instead of the split one.To solve it, you'll need to install an older version of react-app-rewired that doesn't have this change. I believe the last version of react-app-rewired that will be compatible with react-scripts-ts is version 1.6.2. The versions for 2.x have the breaking change to support CRA 2.1.2 and beyond that is misfiring on react-scripts-ts.Use yarn add react-app-rewired@1.6.2 or npm install react-app-rewired@1.6.2 to step back to the last of the 1.x versions of react-app-rewired - it will install the older version and lock the version number to exactly that version so that it doesn't get upgraded to a newer version accidentally in future.大致意思就是react-app-rewired这个插件升级导致了不会单独生成dev和prod配置文件了，所以导致文件找不到。需要将react-app-rewired版本固定在1.6.2，这样处理能解决上面的问题，但是又出现了一个新问题，大致内容是can not find module react_script/package.json 分析应该也是版本问题导致的，所以通过git版本回退找到了以前的代码的package.json中react_script的使用版本是2.0.3，所以将版本也固定在了2.0.3删掉node_modules目录，重新执行npm install npm start 启动项目，成功启动并打开浏览器tab页。
-
微信公众平台、微信公众平台.小程序、微信.开放平台三者关系及unionid 一、微信公众平台、微信公众平台.小程序、微信.开放平台登录地址 项目 微信公众平台 微信公众平台.小程序 微信。开放平台 登录地址 https://mp.weixin.qq.com https://mp.weixin.qq.com https://open.weixin.qq.com 登录账号 xxx@**** xxx**** xxx**** 简称 公众号平台 小程序平台 开放平台 这三个平台必须使用不同的账号申请，因为账号是邮箱地址，所以，必须使用3个不同的邮箱地址作为账号，如果某个邮箱地址已经是微信公众平台的账号，则这个邮箱地址就不能用于另外的两个平台。事实上，微信公众平台为了和微信公众平台.小程序区分开来，也可以称作微信公众平台.公众号。以下简称：公众号平台、小程序平台、开放平台。二、三者之间的关系如果需要搞清楚三者之间的关系，就涉及到unionid。关于unionid，在【微信官方文档.公众号】是这样描述的：开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。综上：1、公众号平台负责管理公众号；2、小程序平台负责管理小程序；3、每个平台对于某个用户都会产生一个OpenID,在单独的平台上这个OpenID是唯一的，但是如果某个用户既要使用公众号，又有小程序，那么在公众号和小程序平台上OpenID是分别不一样的。4、此时就需要开放平台，凡是在开放平台登记的应用，对于这个开放平台都将使用一个统一的unionID。这样就可以在不同的平台上唯一确定某个用户了。这么理解，公众号平台和小程序平台是相互独立的平台，可以各自开发各自的应用，如果是一个独立的应用，那么只需要使用OpenID就可以区别用户，例如如果只是使用公众号，不使用小程序，那么直接使用公众号的OpenID就可以了，繁殖对于小程序来说也是一样的。同一个用户在公众号平台和在小程序平台上的OpenID是不一样的，但是实际应用是经常会需要公众号和小程序同时使用，这样就需要使用开放平台来统一OpenID，最终出现了unionid。这个是唯一的，不变的！三、小程序开发中关于使用Session_Key可以解开得到unionid问题按照官方文档的说明，前端是可以通过 wx.login 获取到 code 登录凭证，然后在后台通过 auth.code2Session 换取openid,session_key,unionid，需要说明的是，unionid是用户在开放平台的唯一标识符，在满足 UnionID 下发条件的情况下会返回。那么满足什么样的条件会直接返回unionid呢？答案是注册认证微信开放平台，注意一定要认证，也就是说要交300元通过认证，这样后台就会直接返回unionid。否则，按照官方说的如果没有返回unionid，也可以通过session_key在后台进行解密，解密需要的相关参数需要前端通过wx.getUserInfo调用获取到userInfo，rawData，signature，encryptedData，iv，cloudID参数。后台通过加密算法解密，最终可以得到unionid。 我测试的时候，如果没有通过开放平台认证，密文数据中始终没有返回unionid，不知道不认证的情况下满足什么样的条件才会返回。————————————————版权声明：本文为CSDN博主「sensor_WU」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/sensor_WU/java/article/details/103976716
-
vscode常用插件和设置 常用设置打开新文件不替换当前未修改的文件 "workbench.editor.enablePreview": false常用插件vue-helper vue开发增强工具 按ctrl和左键跳转定义vscode-elm-jump 跳转常规定义Auto Close Tag html标签自动关闭Auto Rename Tag 修改html开始标签，结束标签自动修改Eslint eslint检测和修复工具Git History git查看提交历史工具HTML CSS Support html css自动补全HTML SnippetsMarkdown All in One markdown增强工具Path Autocomplete / Path Intellisense 图片，样式，js引入路径提示Vetur vue开发基本工具Vue 2 Snippets vue2.x代码提示Element UI Snippets vue element-ui代码提示Surround 生成包围选中内容的代码，如ifelse 等Power Mode vscode输入特效Output Colorizer 日志，控制台代码颜色标识Todo Tree 可以在左侧菜单生成特定注释的树，方便定位GitLens — Git supercharged 可以直接看到当前光标所在行的代码被哪个改过TypeScript Importer ts对象或者方法自动生成import（已经有export）code runner 在vscode里面直接运行代码。Live Server 增加一个快速预览html文件并能实时更新的右键菜单。方便本地调试htmlPrettier - Code formatter 代码自动检测并格式化工具Code Runner Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, Typescript ...
-
-
HTTP缓存优先级问题 HTTP缓存主要有两种缓存：强缓存和对比缓存（也叫协商缓存）。强缓存：只要请求了一次，在有效时间内，不会再请求服务器（请求都不会发起），直接从浏览器本地缓存中获取资源。主要字段有（expires：date（过期日期）、cache-control： max-age=time（毫秒数，多久之后过期） |no-cache|no-store）。如果expires和cache-control同时存在，cache-control会覆盖expires。建议两个都写，cache-control是http1.1的头字段，expires是http1.0的头字段，都写兼容会好点。对比缓存：无论是否变化，是否过期都会发起请求，如果内容没过期，直接返回304，从浏览器缓存中拉取文件，否则直接返回更新后的内容。主要字 段有：服务器端返回字段 Etag： xxxx (一般为md5值) 对应客户端匹 配字段为， If-None-Match: w/xxx(xxx的值和上面的etag的xxx一样则返 回304，否则返回修改后的资源)。服务器端返回字段：Last-Modifieddate(日期),对应客户端匹配字段If-Modified-Since:date（如果服务器date小于等于客户端请求date则返回304，否则返回修改后的资源））。同时存在各种缓存头时，各缓存头优先级及生效情况:强缓存和对比缓存同时存在，如果强缓存还在生效期则强制缓存覆盖对比缓存，对比缓存不生效；如果强缓存不在有效期，对比缓存生效。即：强缓存优先级 > 对比缓存优先级强缓存expires和cache-control同时存在时，则cache-control会覆盖expires，expires无论有没有过期，都无效。 即：cache-control优先级 > expires优先级。对比缓存Etag和Last-Modified同时存在时，则Etag会覆盖Last-Modified，Last-Modified不会生效。即：ETag优先级 > Last-Modified优先级。当然还有一种缓存pragma，和cache-control类似，前者是http1.0内容后者是http1.1内容，并且pragma优先级 > cache-control优先级，不过前者目前基本不使用。针对不同的项目，如果css和js在打包时加了md5值，建议直接使用强缓存，并且expires和cache-control同时使用，建议设置时长为7天较为妥当。图片文件如果没有加md5值，建议采用对比缓存，html文件也建议采用对比缓存。ps: 当我们不设置cache-control，只设置对比缓存，在不同浏览器下会有不同的表现。chrome会直接从本地缓存获取，其他会请求服务器返回304.这时候有两种方式让他们的响应一致。1、设置cache-control: public, max-age=0;记住，这里的public是关键。因为默认值是private，表示其他代理都不要缓存，只有服务器缓存，而max-age又为0，所以每次都会发起200的请求。设置public的意思就是允许其他各级代理缓存资源，因此如果资源没改变会返回304。 2、直接设置max-age=1000。即是一秒之后内容过期，目的是触发浏览器缓存。也能达到想要304的效果。本文转载自：https://www.imooc.com/article/details/id/22841
