• 当前标签:Vue

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
阅读详情

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
阅读详情

vue 中对城市列表根据首字母进行排序

vue中根据城市的首字母a-z进行排序 先安装 js-pinyin 依赖: npm i --save js-pinyin 然后在组件中引入: import pyjs from 'js-pinyin' export default { async mounted() { let city = [ { name: '北京' }, { name: '上海' }, { name: '广州' }, { name: '武汉' }, { name: '浙江' }, { name: '海口' } ] // 城市列表 let blocks = [] // 新列表 let p, c let d = {} city.forEach(item => { p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0, 1) c = p.charCodeAt(0) // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 if (c > 97 && c < 123) { // 小写的 a-z if (!d[p]) { d[p] = [] } d[p].push(item.name) } }) for(let [k, v] of Object.entries(d)) { blocks.push({ title: k.toUpperCase(), city: v }) } blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) console.log(blocks) // 得出结果 } }

2018-12-14 11:11:34 17 0 0
阅读详情

Vue、JavaScript原生 回顶部

基于图标来自 element ui ,js原生写法: <template>   <div     id="BackTop"     @click="BackTop">     <i class="el-icon-caret-top"/>   </div> </template> <script> export default {   methods: {     BackTop() {       this.smoothscroll()     },     // 回顶部     smoothscroll() {       const currentScroll =         document.documentElement.scrollTop || document.body.scrollTop       if (currentScroll > 0) {         window.requestAnimationFrame(this.smoothscroll)         window.scrollTo(0, currentScroll - currentScroll / 5)       }     }   } } </script> <style lang="scss" scoped> #BackTop {   background-color: #fff;   position: fixed;   right: 100px;   bottom: 150px;   width: 40px;   height: 40px;   border-radius: 20px;   cursor: pointer;   transition: 0.3s;   box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);   z-index: 5;   &:hover {     transform: scale(1.2);   }   i {     color: #409eff;     display: block;     line-height: 40px;     text-align: center;     font-size: 18px;   } } </style>

2018-10-18 18:10:17 17 2 0
阅读详情

Nuxt中使用富文本编辑器vue-quill-editor + 图片上次quill-image-extend-module

首先在 nuxt.config.js 中配置: module.exports = {     // some nuxt config...     plugins: [       { src: '~plugins/nuxt-quill-plugin.js', ssr: false }     ],     // some nuxt config...     css: [       'quill/dist/quill.snow.css',       'quill/dist/quill.bubble.css',       'quill/dist/quill.core.css'     ],     // some nuxt config...   } 然后在 plugins 文件夹中新建 nuxt-quill-plugin.js 文件,写入一下内容: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 然后在页面中调用: <template> <div>     <!-- 用 v-if 来确保在设定了 editorOption 后才渲染 v-quill -->   <div     v-if="editorOption"     class="quill-editor"     v-model="content"     @change="onEditorChange($event)"     @blur="onEditorBlur($event)"     @focus="onEditorFocus($event)"     @ready="onEditorReady($event)"     v-quill:myQuillEditor="editorOption">   </div> </div> </template> <script> import Vue from "vue"; export default {   beforeMount() {     const VueQuillEditor = require("vue-quill-editor/dist/ssr");     const Quill = require("quill");     const { container, ImageExtend, QuillWatch } = require("quill-image-extend-module");     Quill.register("modules/ImageExtend", ImageExtend);     Vue.use(VueQuillEditor);     this.editorOption = {         // some quill options         modules: {           ImageExtend: {             // 如果不作设置,即{}  则依然开启复制粘贴功能且以base64插入             name: "img", // 图片参数名             size: 3, // 可选参数 图片大小,单位为M,1M = 1024kb             action: "", // 服务器地址, 如果action为空,则采用base64插入图片             // response 为一个函数用来获取服务器返回的具体图片地址             // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}             // 则 return res.data.url             response: res => {               return res.info;             },             headers: xhr => {               // xhr.setRequestHeader('myHeader','myValue')             }, // 可选参数 设置请求头部             sizeError: () => {}, // 图片超过大小的回调             start: () => {}, // 可选参数 自定义开始上传触发事件             end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败             error: () => {}, // 可选参数 上传失败触发的事件             success: () => {}, // 可选参数  上传成功触发的事件             change: (xhr, formData) => {               // xhr.setRequestHeader('myHeader','myValue')               // formData.append('token', 'myToken')             } // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData           },           toolbar: {             // 如果不上传图片到服务器,此处不必配置             container: container, // container为工具栏,此次引入了全部工具栏,也可自行配置             handlers: {               image: function() {                 // 劫持原来的图片点击按钮事件                 QuillWatch.emit(this.quill.id);               }             }           }         }       }   },   data() {     return {       content: "",       editorOption: null     };   },   methods: {     onEditorBlur(editor) {       console.log("editor blur!", editor);     },     onEditorFocus(editor) {       console.log("editor focus!", editor);     },     onEditorReady(editor) {       console.log("editor ready!", editor);     },     onEditorChange({ editor, html, text }) {       console.log("editor change!", editor, html, text);       this.content = html;     }   } }; </script> 感谢 @amoshydra 提供帮助

2018-09-03 14:32:54 46 0 0
阅读详情

Vue图片上传裁剪插件 vue-cropper

一个挺好用的图像裁剪插件 vue-cropper 使用挺简单的,而且还提供demo对照查看 插件地址:https://github.com/xyxiao001/vue-cropper 首先安装插件: npm install vue-cropper --save 然后在使用的页面引入 import VueCropper from "vue-cropper" 在设置component export default {   components: {     VueCropper   }, } template中插入(外面需要套一个div,用于设置插件显示的大小) <vueCropper   ref="cropper"   :img="option.img"   :outputSize="option.size"   :outputType="option.outputType" ></vueCropper> data(){   return{      option:{         img: 'imgUrl', // img的URL或者base64         size: 1,         outputType: 'png',      }   } } 其他的看官方文档 内置方法 通过this.$refs.cropper 调用 this.$refs.cropper.startCrop() 开始截图 (如果没有设置截图框的话,通过这个启动截图框) this.$refs.cropper.stopCrop() 停止截图 this.$refs.cropper.clearCrop() 清除截图 this.$refs.cropper.getCropData() 获取截图信息 (得到截图的URL或者base64) // 获取截图的base64 数据 this.$refs.cropper.getCropData((data) => {   // do something   console.log(data) }) // 获取截图的blob数据 this.$refs.cropper.getCropBlob((data) => {   // do something   console.log(data) })

2018-06-28 13:45:33 46 0 0
阅读详情

Vue使用websocket即时通信

在Vue中可以使用socket.io插件,不过这里使用的是js原生的WebSocket 首先再 data 中定义一个ws: data() {    return {      ws: "",    };  }, 然后在method中设置相关函数 methods: { // ws S     onopen() {       console.log("连接成功");       let login_data = {}       console.log("websocket握手成功,发送登录数据:", login_data);       this.ws.send(login_data);     },     onmessage(e) {       console.log(JSON.parse(e.data));       switch (data["type"]) {         case "ping":           this.ws.send('{"type":"pong"}');           break;         // 登录 更新用户列表         case "login":           break;         // 发言         case "say":           break;       }     },     onclose() {       console.log("连接关闭");     },     onerror() {       console.log("出现错误");     }, } 然后在created 初始化: created() {   this.ws = new WebSocket("ws://2020.9jm9.com:7272");   this.ws.onopen = this.onopen;   this.ws.onmessage = this.onmessage;   this.ws.onclose = this.onclose;   this.ws.onerror = this.onerror; },  

2018-06-26 14:11:07 44 0 0
阅读详情
  • 1
  • 2
  • 3
前往