• 当前频道:程序开发

Nuxt.js客户端、服务端设置请求头

依赖:cookieparser、@nuxtjs/axios 在 plugins/axios.js 中设置请求头: import { Message } from 'element-ui' const cookieparser = process.server ? require('cookieparser') : undefined // eslint-disable-next-line prettier/prettier export default function (ctx) { ctx.$axios.onRequest((config) => { // 客户端设置token if (process.client) { if (ctx.store.state.auth) { config.headers.Authorization = 'bearer ' + ctx.store.state.auth.access_token config.headers.token = ctx.store.state.auth.access_token } } // 服务端设置token if (process.server) { if (ctx.req.headers.cookie) { const parsed = cookieparser.parse(ctx.req.headers.cookie) try { const auth = JSON.parse(parsed.auth) config.headers.Authorization = 'bearer ' + auth.access_token config.headers.token = auth.access_token } catch (err) { // 找不到有效的Cookie } } } // 开发模式打印 URL if (process.env.NODE_ENV !== 'production') { console.log('Making request to ' + config.url) // console.log('Making request to ', config) } }) ctx.$axios.onResponse((res) => { // console.log('onResponse ', res) const code = res.data.code || null const msg = res.data.msg || '' if (code) { if (code !== 0) { Message.error(msg) return Promise.reject(msg) } } }) ctx.$axios.onError((error) => { const code = parseInt(error.response && error.response.status) if (code === 400) { ctx.redirect('/400') } }) } 然后在 store 的

2019-07-26 11:00:43 54 0 0
阅读详情

js网络图片通过canvas获取图片颜色

依赖于 rgbaster 包, 安装rgbaster: yarn add rgbaster import analyze from 'rgbaster' export default { mounted() { this.getBackground() }, methods: { getBackground() { const that = this function getBase64Image(img, suffix) { let canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const dataURL = canvas.toDataURL('image/' + suffix) // 可选其他值 image/jpeg canvas = null // 释放 return dataURL } function getColors(src, cb) { const image = new Image() const splits = src.split('.') const suffix = splits[splits.length - 1] image.setAttribute('crossOrigin', 'anonymous') // 支持跨域图片 image.src = src + '?v=' + Math.random() // 处理缓存 image.onload = function () { const base64 = getBase64Image(image, suffix) cb && cb(base64) } } getColors('https://cdn.huangliangbo.com/wp-content/uploads/2019/04/zh-2.jpg', async function (base64) { const result = await analyze(base64, { scale: 0.6 }) // also supports base64 encoded image strings that.bgColor = result[0].color }) } } } 部分内容来着:canvas图片问题浅析、JS将图片转为base64编码

2019-07-11 14:36:24 46 1 0
阅读详情

nuxt.js中ssr报 客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记导致的,例如在<p>中嵌套块级元素,或者缺少<tbody>。排水和执行全面客户端渲染。 这是使用element-ui没有在ssr中使用导致,在nuxt.config.js中配置: plugins: [{ src: '@/plugins/element-ui', ssr: true }], 就可以不报这错了 解决方案来自:https://www.cnblogs.com/chenyablog/p/10278427.html

2019-07-03 11:29:48 27 0 0
阅读详情

Nuxt.js使用pm2服务端渲染应用部署nginx绑定域名

首先根据官方文档打包: nuxt build // 或者 npm run build 然后把 .nuxt, static, package.json, nuxt.config.js 这4个文件夹和文件上传至服务器 然后cd 到服务器的文件存放路径中,执行: npm i -production 配置nginx: upstream wwwserver { server 127.0.0.1:3000; #本地运行的端口 keepalive 2000; } server { listen 80; server_name www.domain.com; #外网访问的域名 client_max_body_size 1024M; location / { proxy_pass http://wwwserver/; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } access_log /server/log/www.domain.com/access.log; error_log /server/log/www.domain.com/error.log; } 安装pm2 : npm i pm2 -g 执行启动pm2:pm2 start npm --name "你的项目名" -- run start pm2常用命令: 启动进程: pm2 start app.js pm2 start app.py pm2 start npm -- start pm2 start [app-name] pm2 start all 进程列表: pm2 list 重启进程: pm2 restart [app-name] pm2 restart all 停止进程: pm2 stop [app-name] pm2 stop all 进程日志: pm2 logs pm2 logs [app-name] 服务器上如何开机自动启动: 在服务器端,在项目都通过pm2启动成功之后,(可以通过命令pm2 ls进行查看)我们希望直接通过服务器重启之后能自动启动,可以通过pm2 save命令将当前的启动项保存起来,下次重启系统就可以自动启动了。 文章部分来自:向宗亮的小站

2019-06-28 09:05:40 51 0 0
阅读详情

deepin v15.10.1 stable版安装nodejs

curl -sSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add - echo "deb https://mirrors.tuna.tsinghua.edu.cn/nodesource/deb_10.x stretch main" | sudo tee /etc/apt/sources.list.d/nodesource.list echo "deb-src https://mirrors.tuna.tsinghua.edu.cn/nodesource/deb_10.x stretch main" | sudo tee -a /etc/apt/sources.list.d/nodesource.list sudo apt-get update sudo apt-get install nodejs 来自: @name2001

2019-06-13 19:34:59 39 0 0
阅读详情

js获取USB扫码枪数据

前言 找了很多相关的教程不太好用,汲取各家之长总结精简了一下 原理 扫码枪扫描到的条形码每一位会触发一次onkeydown事件 比如扫描条码位‘1234567890’的条形码,会连续执行10次onkeydown事件 条码扫描到最后一位,会直接触发Enter 代码 支持vue data() { return { nextCode: '', lastTime: '', code: '' } }, created() { // 添加键盘监听事件 document.addEventListener('keydown', this.getBarCode) }, // 销毁页面时销毁监听 destroyed() { document.removeEventListener('keydown', this.getBarCode) }, methods: { // 通过扫码枪获取条形码 getBarCode(e) { let nextCode let nextTime = '' const lastTime = this.lastTime let code = this.code if (window.event) { // IE nextCode = e.keyCode } else if (e.which) { // Netscape/Firefox/Opera nextCode = e.which } nextTime = new Date().getTime() // 字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105 if ( (nextCode >= 48 && nextCode <= 57) || (nextCode >= 96 && nextCode <= 105) ) { const codes = { '48': 48, '49': 49, '50': 50, '51': 51, '52': 52, '53': 53, '54': 54, '55': 55, '56': 56, '57': 57, '96': 48, '97': 49, '98': 50, '99': 51, '100': 52, '101': 53, '102': 54, '103': 55, '104': 56, '105': 57 } nextCode = codes[nextCode] nextTime = new Date().getTime() } // 第二次输入延迟两秒,删除之前的数据重新计算

2019-05-23 17:32:21 23 0 0
阅读详情

vue qrcode 生成二维码并下载png图片

基于 qrcode 二维码生成插件, 先下载npm i --save qrcode 引用页: <rqcode :dialog="dialog" :uuid="uuid" :imei="imei" @dialogChange="dialog = false"/> import rqcode from "./componenrts/RQcode"; export default { components: { rqcode }, data() { return { dialog: false, imei: "", uuid: "", }; }, methods:{ // 生成二维码事件 getRQcode(){ this.uuid = id; this.imei = imei; // 以上为参数 ,可以自定义添加或者组合 this.dialog = true; }, } }; 生成二维码组件: <template> <el-dialog title="设备二维码" :visible="dialogVisible" width="30%" close-on-press-escape close-on-click-modal show-close > <div style="text-align: center;"> <canvas ref="myCanvas" id="msg"></canvas> <p>uuid: {{ uuid }}</p> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false; $emit('dialogChange', false)">关 闭</el-button> <el-button type="primary" @click="downRQcode">下 载</el-button> </span> </el-dialog> </template> <script> import QRCode from "qrcode"; export default { props: { uuid: { default: "" }, imei: { default: "" }, dialog: { default: false } }, data() { return { dialogVisible: false }; }, watch: { dialog(e) { this.dialogVisible = e; this.useqrcode(this.uuid) } }, methods: { // 生成二维码 useqrcode(val) { const that = this; setTimeout(() => { var canvas = document.getElementById("msg"); QRCode.toCanvas(canvas, val, function(error) {

2019-04-02 16:51:51 41 0 0
阅读详情

小程序canvas文字自动换行,回车符自动换行

const ctx = wx.createCanvasContext('customCanvas') // 文字自动换行 function fillText(height, text, cb) { var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; ctx.setFontSize(14) for (var a = 0; a < chr.length; a++) { if ((chr[a] == '\n') || (chr[a] == '↵') || (chr[a] == '\r') || (chr[a] == '\r\n')) { // 如果有回车符则换行 row.push(temp); temp = ""; } else if (ctx.measureText(temp).width < 295) { temp += chr[a]; } else { a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 // if (row.length > 2) { // var rowCut = row.slice(0, 2); // var rowPart = rowCut[1]; // var test = ""; // var empty = []; // for (var a = 0; a < rowPart.length; a++) { // if (ctx.measureText(test).width < 220) { // test += rowPart[a]; // } // else { // break; // } // } // empty.push(test); // var group = empty[0] + "..."//这里只显示两行,超出的用...表示 // rowCut.splice(1, 1, group); // row = rowCut; //

2019-03-28 19:36:09 15 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 25
前往