标签：put plugins prim local 项目 proc util 使用 store
最近心血来潮的学起来了vue 之前做了个表格增删的，今天来做一下vue+springboot 后端登录验证的 也是比较基础的（这里前后端都是没有做登录拦截的）
首先要安装一些基本的依赖
# (进入到项目根目录) vue add element (添加 element，一个 element 风格的 UI 框架) npm install axios (安装 axios，用于网络请求) npm install vuex --save(安装 Vuex，用于管理状态) npm install vue-router (安装 路由，用于实现两个 Vue 页面的跳转)
1.首先做个登录页在src文件夹下面创建一个views文件夹之后在创建个login.vue
<template> <div> <el-card class="login-form-layout"> <el-form autocomplete="on" :model="loginForm" ref="loginForm" label-position="left" > <div style="text-align: center"> <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon> </div> <h2 class="login-title color-main">vue 表基础操作</h2> <el-form-item prop="userName"> <el-input name="userName" type="text" v-model="loginForm.userName" autocomplete="on" placeholder="请输入用户名" > <span slot="prefix"> <svg-icon icon-class="user" class="color-main"></svg-icon> </span> </el-input> </el-form-item> <el-form-item prop="password"> <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autocomplete="on" placeholder="请输入密码" > <span slot="prefix"> <svg-icon icon-class="password" class="color-main"></svg-icon> </span> <span slot="suffix" @click="showPwd"> <svg-icon icon-class="eye" class="color-main"></svg-icon> </span> </el-input> </el-form-item> <el-form-item style="margin-bottom: 60px"> <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin" >登录</el-button> </el-form-item> </el-form> </el-card> </div> </template> <script> export default { name: "login", data() { return { loginForm: { userName: "blackCatFish", password: "123456" }, loading: false, pwdType: "password" }; }, methods: { showPwd() { if (this.pwdType === "password") { this.pwdType = ""; } else { this.pwdType = "password"; } }, handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true; this.$store .dispatch("Login", this.loginForm) .then(response => { this.loading = false; let code = response.data.code; if (code == 200) { this.$router.push({ path: "/success", query: { data: response.data.data } }); } else { this.$router.push({ path: "/error", query: { message: response.data.message } }); } }) .catch(() => { this.loading = false; }); } else { // eslint-disable-next-line no-console console.log("参数验证不合法！"); return false; } }); } } }; </script> <style scoped> .login-form-layout { position: absolute; left: 0; right: 0; width: 360px; margin: 140px auto; border-top: 10px solid #409eff; } .login-title { text-align: center; } .login-center-layout { background: #409eff; width: auto; height: auto; max-width: 100%; max-height: 100%; margin-top: 200px; } </style>
2.之后再创建个src下面创建一个router文件夹，router是路由守卫的意思
import Vue from ‘vue‘ //引入 Vue
import VueRouter from ‘vue-router‘ //引入 Vue 路由
Vue.use(VueRouter); //安装插件
export const constantRouterMap = [
//配置默认的路径，默认显示登录页
{ path: ‘/‘, component: () => import(‘@/views/login‘)},
//配置登录成功页面，使用时需要使用 path 路径来实现跳转
{ path: ‘/success‘, component: () => import(‘@/views/table‘)},
// //配置登录失败页面，使用时需要使用 path 路径来实现跳转
// { path: ‘/error‘, component: () => import(‘@/views/error‘), hidden: true }
]
export default new VueRouter({
// mode: ‘history‘, //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap //指定路由列表
})
关键的代码都有注释
3.将写好路由添加到程入口就是写入main.js中
import App from ‘./App.vue‘;
import Vue from ‘vue‘;
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
import router from ‘./router‘;
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
el: ‘#app‘,
render: h => h(App),
router,
})
4.配置了路由 要将路由加入到程序的出入口要在App.vue中添加一行代码
<template> <div id="app"> <!-- 程序路由出入口配置代码 --> <router-view/> </div> </template> <script> export default { name: ‘App‘ } </script>
5.启动项目 npm run dev 访问localhost：8086可看到登录页面就可以出来了
端口实在vue.configer.js中配置
devServer: {
port: 8086,
open: true,
compress: false, // 开启压缩
}
到这完成了一大部分
6.使用axios和vuex 进行网络请求，用于调用后台接口
创建一个request文件夹；里面建一个request.js文件
import axios from ‘axios‘ //引入 axios
import baseUrl from ‘../api/baseUrl‘ //使用环境变量 + 模式的方式定义基础URL
// 创建 axios 实例
const service = axios.create({
baseURL: baseUrl, // api 的 base_url
timeout: 15000, // 请求超时时间
})
export default service
let baseUrl = "";
switch (process.env.NODE_ENV) {
case ‘development‘:
baseUrl = "http://localhost:8081/" //开发环境url
break
case ‘serve‘:
baseUrl = "http://localhost:8089/" //生产环境url
break
}
export default baseUrl;
这里的development 不要写成了dev 不然会找不到
在创建个login.js 文件
import request from ‘@/util/request‘ //引入封装好的 axios 请求
export function login(userName, password) { //登录接口
return request({ //使用封装好的 axios 进行网络请求
url: ‘/user/login‘,
method: ‘post‘,
data: { //提交的数据
userName,
password
}
})
}
用于网络请求
import Vue from ‘vue‘ //引入 Vue
import Vuex from ‘vuex‘ //引入 Vuex
import user from ‘./modules/user‘ //引入 user module
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user //使用 user.js 中的 action
}
})
export default store
8.在 store 文件夹下创建一个 modules 文件夹，然后在此文件夹下创建一个 user.js 文件
import { login } from ‘@/api/login‘//引入登录 api 接口
const user = {
actions: {
// 登录
Login({ commit }, userInfo) { //定义 Login 方法，在组件中使用 this.$store.dispatch("Login") 调用
const userName = userInfo.userName.trim()
return new Promise((resolve, reject) => { //封装一个 Promise
login(userName, userInfo.password).then(response => { //使用 login 接口进行网络请求
commit(‘‘) //提交一个 mutation，通知状态改变
resolve(response) //将结果封装进 Promise
}).catch(error => {
reject(error)
})
})
},
}
}
export default user
这里的代码值得解释一下
1.首先引入 login 接口，之后使用登录接口进行网络请求。
2.定义一个 名为 Login 的 action 方法，Vue 组件通过 this.$store.dispatch("Login") 调用
3.Promise，这个类很有意思，官方的解释是“store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise”。这话的意思组件中的 dispatch 返回的仍是一个 Promise 类，因此推测 Promise 中的两个方法 resolve() 与 reject() 分别对应 dispatch 中的 then 与 catch。
9.在main.js中引入vuex
import Vue from ‘vue‘
import App from ‘./App.vue‘
import ‘./plugins/element.js‘
import router from ‘./router‘ //引入路由配置
import store from ‘./store‘ //引入 Vuex 状态管理
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router, //使用路由配置
store //使用 Vuex 进行状态管理
}).$mount(‘#app‘)
再次启动项目 访问登录页打卡资源管理器发F12 network会看到 页面会请求我们配置后端的地址:localhost:8081
这里后台还没有启动所以有包错
接下来就是要写后台代码部分后台文章地址（先占个位）
学习连接：https://blog.csdn.net/xiaojinlai123/article/details/90694372
https://vuex.vuejs.org/zh/guide/actions.html
https://blog.csdn.net/xiaojinlai123/article/details/90699565
标签：put plugins prim local 项目 proc util 使用 store
原文地址：https://www.cnblogs.com/blackCatFish/p/13225980.html
