5.5、vue项目引入router
5.5.1、安装路由
cnpm install vue-router@4
5.5.2、在components文件夹下创建登录页面Login.vue
<template> <div class="login"> <el-card class="box-card"> <el-form label-width="80px" :model="form" ref="form" > <el-form-item label="用户名" prop="userId"> <el-input v-model="form.userId" ></el-input> </el-form-item> <el-form-item label="密码" prop="userPassword"> <el-input type="password" v-model="form.userPassword"></el-input> </el-form-item> <el-form-item> <el-button class="lo" type="primary" @click="login()" >登录</el-button> </el-form-item> </el-form> </el-card> <el-card> <el-button @click="select()" >查询</el-button> <br> <el-text>{{ message }}</el-text> </el-card> </div> </template> <script> import service from '../service.js' export default { data(){ return { form:{ userId:'', userPassword:'' }, message:'' } }, methods:{ login(){ service({ method: 'post', url: '/auth/login', data: this.form }).then(res => { console.log(res.data.data.token) this.$message({message:"登录成功！",type:"success"}) window.localStorage.setItem("token",res.data.data.token) }) }, select(){ service({ method: 'post', url: '/auth/getUserMessageByToken', headers: { "Content-Type":"application/json", "token":window.localStorage.getItem("token") } }).then(res => { console.log(res.data.data) this.message = res.data.data }) } } }; </script>
5.5.3、在sec文件夹下创建router文件夹
5.5.3.1、创建router.js
const routes = [ { path:'/', redirect:'/login', name: '登录页', hidden:true, component:()=>import('@/components/Login') //路由懒加载 }, { path:'/login', name: '登录页', hidden:true, component:()=>import('@/components/Login') //路由懒加载 } ] export default routes;
5.5.3.2、创建index.js
import { createRouter, createWebHistory } from "vue-router" import routes from "./routes" var router=createRouter({ history:createWebHistory(), routes }) export default router
5.6、在main.js文件中配置路由
5.7、在App.vue中配置起始页面及路由入口
<template> <Login/> <router-view></router-view> </template> <script> import Login from './components/Login.vue' export default { name: 'App', components: { Login } } </script>
5.8、vue项目引入axios
5.8.1、安装axios
npm install axios --save
5.8.2、在src文件夹下创建service.js文件
//axiosInstance.js //导入axios import axios from 'axios' //使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。 const service = axios.create({ baseURL:'http://localhost', //请求后端数据的基本地址，自定义 timeout: 2000 //请求超时设置，单位ms }) //导出我们建立的axios实例模块，ES6 export用法 export default service
5.8.3、登录页面引入service
5.8.4、service的使用
method：请求方式
url：请求地址
data：携带参数 // 注：若后端使用RequestBody对象接收参数，则用表单传递，若用String接收参数，需要用JSON.stringify(this.form)转为String类型的JSON格式
res：返回的内容
this.$message({message:“登录成功！”,type:“success”})：返回提示信息到前端页面，type有多种类型：success、error、wraning等
window.localStorage.setItem(“token”,res.data.data.token)：将返回的token值存入本地存储当中
5.9、启动vue项目
npm run serve
6、测试
6.1、输入用户名和密码点击登录
6.2、点击查询
7、结束
此项目以SpringCloud为基础，首先创建空的父类SpringCloud空工程，规范Spring boot、Spring Cloud、Spring Cloud Alibaba版本；集成前端Vue3、router、axios，使用JWT、Nacos微服务、openFeign、Gateway及GlobalFilter等根据，在网关层完成用户鉴权。
