初识

使用vue/cli搭建的项目可以在vue.config.js中,模拟一个后台(express写法)
vue.config.js

configureWebpack: {devServer: {// 模拟后台服务器 express写法before(app) {app.get('/api/login', function(req, res) {const { username, passwd } = req.query;console.log(username, passwd);if (username === 'admin' && passwd === '123456') {res.json({ code: 1, token: '奇怪的栗子' });} else {res.status(401).json({ code: 0, message: '用户名或密码错误' });}});}}
}

前端请求.

准备 /src/service/user.js
对用户接口进行管理

import axios from 'axios';export default {login(user) {return axios.get('/api/login', { params: user })}
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import us from './service/user';Vue.use(Vuex)export default new Vuex.Store({state: {isLogin: false},mutations: {setLoginState(state, b) {state.isLogin = b;}},actions: {login({ commit }, user) {// 登录请求return us.login(user).then(res => {const { code, token } = res.data;if (code) {// 登录成功commit('setLoginState', true);localStorage.setItem('token', token);}return code;})}},modules: {}
})

登录组件

login.vue
在其方法里面写(vue 2.x)

 methods: {handleLogin(e) {// 组织表单的默认提交行为e.preventDefault();// 登录请求this.$store.dispatch('login', this.model).then(code => {if (code) {// 登录成功,重定向const path = this.$route.query.redirect || '/';this.$router.push(path);}}).catch(error => {// 有错误发生或者登录失败const toast = this.$createToast({time: 2000,txt: error.message || error.response.data.message || '登录失败',type: 'error'});toast.show();})},}

故意输入错误的

输入正确则跳转

vue --- configureWebpack模拟后台数据相关推荐

vue项目模拟后台数据
这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立我这里为了演示这个过程所以自己编写了 ...
vue + webpack 模拟后台数据
一.在webpack-dev-conf.js文件中: 1.在const portfinder = require('portfinder')后添加如下内容 const express = requir ...
vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
vue 饿了么模拟后台数据
1创建好项目后先模拟一下提供的json文件数据,为后面的工作做准备.首先把data.json放到与package.json平级目录下 (这是我的目录结构) 2.查看data.json数据结构分为 ...
vue mock模拟后台接口数据
vue mock 一.Json server 二.Mock 服务 1.安装 2.创建 Mock 3.main.js引入 4.组件中axure请求一.Json server 轻量级,将已有的json文 ...
学习vue饿了吗之模拟后台数据
1.建立data.json,放置目录如下 2.安装vue-resource npm install vue-resource --save 在main.js中配置 import VueResource ...
vue模仿后台数据_Vue学习之Vue模拟后台数据
1 {2 "seller": {3 "name": "粥品香坊(回龙观)",4 "description": " ...
vue项目模拟假数据
开发vue项目的时候需要用到一些假数据,这里我就分享一下用json-server这个包来托管数据. 首先就是npm install -g json-server来全局安装. 之后新建一个json文件, ...
vue 获取php后台数据,vue.js框架，php做后台语言，ajax获取数据不鞥正常渲染
悬赏园豆:20 [已解决问题] 解决于 2016-11-21 15:11 //这是html结构<div class="box" id="box"> ...

vue --- configureWebpack模拟后台数据

初识

前端请求.

登录组件

vue --- configureWebpack模拟后台数据相关推荐

最新文章

热门文章