初識

• 使用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模拟后台数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。