需求:在项目中需要每隔五秒请求一次接口 第一种方法:直接在mounted钩子函数中处理 mounted() { window.setInterval(() => { setTimeout(this.statusList(), 0); }, 5000); }, 第二种方法:利用watch 去检测数据是否改变了 在data中定义一个变量 resultList:[] 在methos方法中 写一个方法 timer() { return setTimeout(() => { this.statusLis

在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了.代码如下: 仔细检查后,代码没问题:于是在apiRouts中console.log()打印信息,运行没有打印信息,意味着根本没有运行这部分代码.于是想到会不会是webpack版本更新,配置发生了改变导致的.所以仔细看了配置后,发现webpack.dev.conf.

一.前言 我们前端很多时候在写vue项目的时候,会把后端的数据拿到本地来跑,在连接MySQL数据库的时候,可能出现一些问题,如: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password:YES) 二.原因分析 这个报错的意思是说我们的后端配置的数据库的密码和我们前端所连接的数据库密码不一致 三.解决方法 1.把我们前端所使用的数据库密码改和后端配置的一样. 2.如果我们所使用的数据库的密码

背景 vue-cli脚手架生成的webpack标准模板项目 HTTP库使用axios 一.开发环境跨域与API接口服务通信 整体思路: 开发环境API接口请求baseURL为本地http://localhost:8080 为本地请求配置代理,代理目标服务器设置为接口服务所在地址或域名 具体步骤如下: 1.config/dev.env.js文件中配置baseURL module.exports = merge(prodEnv, { NODE_ENV: '"development"', B

我们在做项目时,一切基础在于数据上面,所以接入api接口是关键. 访问接口是我们会遇到跨域,而,vue-cli给我们提供了反向代理,所以我们只需要配置一下就可以了. 在config文件中找到index.js,修改dev对象里面的proxyTable如图 然后我们在同个文件夹里面打开dev.env.js这个是生产环境配置文件,我们进行修改 再打开同文件夹中的prod.env.js,这个是我们正式环境的配置文件啦,我们项目上线后访问的就是他了 就这样,我们就可以在组件里面调用接口了 今天对于接口对接

众所周知,现在国内最火的前端框架非Vue莫属了,作为一个.net程序员,早就想体验一下了,但是无奈微软的项目模板不提供Vue的Spa模板,但是我们还是想用怎么办呢?下面来看下我的解决方案 目录 用vue-cli 创建一个项目 用VS创建一个React的应用程序 改造React项目适配Vue 配置Dockerfile 一.用vue-cli 创建一个项目 我这里贴的是直接创建好的项目,至于怎么创建,点击=>传送门 二.用VS创建一个React的应用程序 三.改造React项目适配Vue 修改 Sta

创建services文件夹 1.文件夹apis.index.request的三个文件. 2.apis文件放接口 export const apis = { checkDeviceNo: '/api/client/getEquipmentCode',//检查设备码是否存在 getSystemInfo: '/api/client/system/info',//登录二维码 heartbeat: '/api/client/heartbeat',//心跳检测 login: '/api/client/log

一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 url 构成:http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace 如上的 url 由以下部分组成:协议.域名.文件名称.get参数.锚点 1.http:// 规定了页面采用的协议. 2.www.feng

首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 引入sdk vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,就需要在每个路由地址都引入一遍. import wx from 'weixin-js-sdk' 在

在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案. 参考网站:http://blog.csdn.net/gebitan505/article/details/58166055; 在config文件夹里面有三个js文件,

vue项目中可以直接使用 1.常用工具类untils.js中 /* * 验证手机号是否合格 * true--说明合格 */ export function isPhone(phoneStr){ let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; } } /* * 验证身份证号是否合格 * true--说明合格 */ export fun

在接口调用中,有时会返回给我们一个函数回调,来自动执行我们在前端定义好的某个函数(多出现于通过回调的方式传递某个数值).在原生项目中,我们只要提供一下这个方法就好了,通过函数回调会自动执行.问题就出现在,我使用的是Vue项目,方法是定义在methods中的,这样返回给我的函数回调就没有办法执行这段函数. 接下来介绍一下,解决方式 :Vue的方法给原生调用,则需要把方法挂在Window下面 created() { //Vue的方法给原生调用,则需要把方法挂在Window下面 window.getm

本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.html 因为编者已经为该项目已经实现了VUE接口统一管理,所以接下来的讲解是在这个接口统一管理的环境下进行的 关于VUE接口统一管理,可以参照这里: 参照1:https://www.cnblogs.com/yingyigongzi/p/10863477.html 参照2:https://www.co

参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="area

基于前文,使用vue-cli脚手架工具构建项目,并使用了webpack,那么我在项目中遇到的一些与配置相关的问题将在这里进行汇总. 1.代码检查问题 由于我们在构建项目时,使用了Eslint对我们的项目做代码风格检查,那么不符合该风格的代码,将会发出警报,常见的就是空格的问题,如果没有按照Eslint的风格使用空格的话,将会在项目打包的时候发出警报:[vue/no-parsing-error] Parsing error: x-invalid-end-tag. 解决方法如下: 或者直接禁用该风格

缘起 本项目是基于之前学习的一个Dubbo+SSM分布式项目进行升级,基于此项目对前后端分离项目.微服务项目进一步深入学习.之前学习了vue.springBoot.springCloud后,没有进行更多实战练习,借助此机会,整合之前所学知识,搭建一套微服务电商系统.本项目纯属个人学习总结,如有错误之处,还希望大家能指出,共同讨论学习. 正文 1.项目依赖环境 工具:idea+vsCode 数据库:mysql 缓存:redis 消息中间件:ActiveMq 2.项目架构图(暂时留个位置) 3.整体

vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的"页面",component作为样式或者行为输出,你可以通过这三个东西来实现最基本的静态SPA网站.当然我在这里不谈vue全家桶这样宽泛的概念,我会如数家珍的把主要的技术点一一列举. 1.vue-cli:搭建基本的vue项目骨架,脚手架工具 2.sass-loader&node-sass:我

一.为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中.如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷. 因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等. websocket其他特点如下: (1)建立在 TCP 协议之上,服务器端的实现比较容易. (2)与 HTTP 协议有着良好的兼容性.默认端口也是80和4

原有vue项目接入typescript 为什么要接入typescript javascript由于自身的弱类型,使用起来非常灵活. 这也就为大型项目.多人协作开发埋下了很多隐患.如果是自己的私有业务倒无所谓,主要是对外接口和公共方法,对接起来非常头疼.主要表现在几方面: 参数类型没有校验,怎么传都有,有时会出现一些由于类型转换带来的未知问题. 接口文档不规范,每次都要通过读代码才能知道传什么,怎么传 接口编写符合规范,但是公共库中有大量的处理类型校验的代码 这就非常不利于工程标准化.于是我们决定

nginx + uwsgi 部署 Django+Vue项目 windows 本地 DNS 解析 文件路径 C:\Windows\System32\drivers\etc 单机本地测试运行方式,调用django第三方的wsgifef单机模块,性能很低 python3 manage.py runserver 0.0.0.0:8000 使用uwsgi 去启动django项目,支持并发更多 准备前后端代码 先从vue前端搞起 解决node环境 更改vue发送请求的接口地址, 这个vue发送的地址,应该是

前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会