axios

1. Vue-cli3.0项目节省了很多文件，比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中。 2. 在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置： const express = require('express') const app = express() var singer = require('./src/db/data/singer.json') //本地json文件数据 var recommend=require('./src/db/data/recommend.json') var apiRoutes = express.Router(); app.use('/api',apiRoutes) module.exports = { devServer:{ before(app) { app.get('/api/singer', (req, res) => { res.json({ errno: 0, // 这里是你的json内容 data: singer }) }) app.get('/api/recommend', (req, res) => { res.json({ errno: 0, //

一、思路分析和效果图 　　用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路： 根据加载数据的顺序，依次追加标签展示效果； 选择哪种方式实现瀑布流，这里选择绝对定位方式； 关键问题 ：由于每张图片的宽高不一样，而瀑布流中要求所有图片的宽度一致，高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高度的情况下，每个图片所在的item盒子不好绝对定位。因此在渲染页面前先获取所有图片的高度，是解决问题的关键点！这里选择用JS中的Image类，通过预加载图片的方式提前获取图片宽高，另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后，开始渲染页面。 页面渲染后，获取所有图片所在的盒子，循环计算盒子的高度，开始设置每个盒子item的绝对定位。 页面渲染时，会出现闪烁的现象。如何解决这个问题呢？这里用了一个动画样式。不过在第一次加载的时候，还是会有一点闪烁的感觉。 然后就是下拉刷新和上拉加载更多的效果，这里用了有赞的vant组件PullRefresh和List这套组合组件来实现。 先看个效果动图： 静态截图： 二、具体实现步骤 2.1、页面结构设计，测试数据准备。 　　本地准备一个json文件数据，放在项目public文件夹下。注意，本地测试数据必须放在public文件夹下

最近，在开发的时候遇到一个问题，让我对vue中nextTick()的用法加深了了解～ 下面是在组件中引用的一个拖拽的组件： <vue-draggable- resizable class ="drag-img" :w ="coordinate[0].width" :h ="coordinate[0].height" :x ="coordinate[0].abs" :y ="coordinate[0].ord" @dragging ="onDragAvator" @resizing ="onResizeAvator" @dragstop ="onDragstopAvator" @onDragStart ="onDragStartAvator" :min -width="50" :min -height="50" :handles ="['tl','tr','br','bl']" :lock -aspect-ratio="true" :parent ="true"> <img @click="setAvatorDafault" src="@/assets/img/icon_touxiang@2x.png" alt=""> </vue-draggable-resizable> 这个拖拽组件的横坐标和纵坐标、宽高是由data的一个数据控制的： data() { return {

安装使用 使用npm安装： $ npm install axios 使用CDN： < script src ="https://unpkg.com/axios/dist/axios.min.js" ></ script > get与post使用示例 执行 GET 请求： // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345' ) .then( function (response) { console.log(response); }) . catch ( function (error) { console.log(error); }); // 可选地，上面的请求可以这样做 axios.get('/user' , { params: { ID: 12345 } }) .then( function (response) { console.log(response); }) . catch ( function (error) { console.log(error); }); 执行 POST 请求： axios.post('/user' , { firstName: 'Fred' , lastName: 'Flintstone' }) .then( function (response) { console.log(response);

问题：在本地使用了proxyTable代理可以正常跨域请求后台数据，打包上传后就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量，请求的时候进行判断，话不多说上干货 1、dev.env.js 进行配置 module.exports = merge(prodEnv, { NODE_ENV: '"development"' API_HOST:"//localhost:8080/api/" }) 2、prod.env.js进行配置 module.exports = { NODE_ENV: '"production"', API_HOST:'""' } 3、main.js进行配置 let base = process.env.NODE_ENV === 'production' ?'http://192.168.1.252:8080':'http://localhost:8080'; Vue.prototype.baseURL = base; 4、配置完成进行请求 Header.vue axios.get(this.baseURL + '/api/graphql?', { params: { } } 配置完成打包成功上传部署就可以访问后台的数据了！ 来源： oschina 链接： https://my.oschina.net/u/3371661

如何利用封装好的axios调接口 先来看一下装好的axios源码 import axios from 'axios' import { Message } from 'iview' // 统一请求路径前缀 // // const base = '/crdp'; // const base = '/ccma-server/api' // 服务器地址/ const base = '/api' // 本地// // 超时设定 axios.defaults.timeout = 15000 axios.interceptors.request.use(config => { return config }, err => { Message.error('请求超时') return Promise.resolve(err) }) // http response 拦截器 axios.interceptors.response.use(response => { const data = response.data // 根据返回的code值来做不同的处理(和后端约定) switch (data.code) { case 401: // 未登录 清除已登录状态 Cookies.set('userInfo', '') setStore('accessToken', '') if (router

　　一、需求 　　1，需求 　　我们在做网站开发时，登录页面很多情况下是可以用手机号接收短信验证码，然后实现登录的，那我们今天就来做一做这一功能。 　　伪代码： 进入登录页面，点击短信登录 输入手机号码，点击获取验证码，后端在redis里保存验证码 用户把手机收到的验证码输入，点击登录，会把手机号和验证码发往后端，然后进行验证 　　2，依赖 　　要想发送短信，让用户收到短信，我们的借助一个容联云的接口，注册一个账号。 　　使用时需要的一些参数： 　　下载sdk 　　1.。。。。。。。 　　2.。。。。。。 　　3.。。。。。。。 　　下载完成后，解压。放入我们drf项目的apps里的libs里 　　二、sdk参数配置 　　1，目录结构 　　2，配置sms.py文件 # -*- coding:utf-8 -*- from .CCPRestSDK import REST # 说明：主账号，登陆云通讯网站后，可在"控制台-应用"中看到开发者主账号ACCOUNT SID _accountSid = ' xxxxxxxxxxxxx ' # 8a216da863f8e6c20164139687e80c1b # 说明：主账号Token，登陆云通讯网站后，可在控制台-应用中看到开发者主账号AUTH TOKEN _accountToken = ' xxxxxxxxxxxxx ' #

一、前言 1、动态获取图片验证码 2、实现手机验证码登录（工具准备） 3、手机验证码登录（后台实现） 3、前台实现 二、主要内容 1、动态获取图片验证码 （1）请求的接口如下，返回的是一张svg的图片 ## 获取一次性验证码 ### 请求URL： http: // localhost:3000/captcha ### 请求方式： （2）初次显示图片，可以直接在image中的src中请求路径直接得到 <!-- 第一次显示直接请求http://localhost:4000下面的 --> <!-- 点击图片的时候要更新图片，注册一个点击事件 --> < input type ="text" maxlength ="11" placeholder ="验证码" v-model ="captche" > < img class ="get_verification" src ="http://localhost:4000/captcha" alt ="captcha" @click ='getCaptcha' > （3）点击图片的时候更新，methods中调用方法 // 获取图片验证码 getCaptcha(event){ console.log( this ) console.log(event.target) event.target.src = "http://localhost

0 前后端分离下的用户信息认证 前端使用Vue+axios，后端使用SpringBoot+SpringSecurity。 为了解决http无状态的问题，我采用jwt(json web token)保存用户信息，前端每次发起请求时带上，交给后端做用户认证。此时需要解决的问题是后端如何将生成的jwt返回前端，以及前端在拿到jwt后如何在每次请求时携带jwt。个人还是推荐 shiro做的权限认证，方便省事，不需要这么麻烦，并且也能做菜单和按钮权限，项目案例: www.1b23.com 。 1 后端校验用户成功以后，将生成的token写到响应头里 response.addHeader("Authorization", "Bearer " + jwt); jwt就是自己生成的token，是String类型。 <!-- jwt依赖 --> < dependency > < groupId > io.jsonwebtoken </ groupId > < artifactId > jjwt </ artifactId > < version > 0.9.0 </ version > </ dependency > // 完整代码 /** * 登录验证 * 登录成功就生成token并放入响应头 */ public class JwtLoginFilter extends

壹周回顾 哈喽，又是元气满满的一个周一，又与大家见面了，周末就是团圆节了，正好咱们的前后端也要团圆了，为什么这么说呢，因为以后的开发可能就需要前后端一起了，两边也终于会师了，还有几天Vue系列就基本告一段落了，大家也好好加油鸭，今天将的内容呢，其实细心的你看到题目应该就能大家猜到了，前提是一直看本系列的小伙伴们，包括之前.net core部分，这里先简单说下上周咱们都说了什么： 周一：《 十九║Vue基础: 样式动态绑定+生命周期 》重点说了下 Vue 开发中的八个 生命周期 ，这个是一个重点，希望大家可以多看看，这个在以后的开发中会经常遇到； 周二：《 二十║Vue基础终篇：组件详解+项目说明 》重点说了下 组件 的使用，包括定义、传值、使用等等，这个更是重中之重，组件的使用在 Vue 的开发中必不可少； 周三：《 二十一║Vue实战：开发环境搭建【详细版】 》详细的说了下 开发环境 的搭建，不仅讲了如何搭建，还详细的说明了每一个工具、插件的使用意义； 周四：《 二十二║Vue实战：个人博客第一版(axios+router) 》根据周三搭建的环境，第一次创建了咱们第一版的个人博客，封装了 axios ，第一次连接上了咱们之前的 .net core api； 周五：《 二十三║Vue实战：Vuex 其实很简单 》通过一个小 DEMO 说明了 Vuex 是如何对我们的 Vue