vue前端页面
搭建一个前端工程(使用vue脚手架搭建)
在main.js中修改配置
javascriptimport Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' import router from './router' import axios from 'axios' //导入axios Vue.use(ElementUI) Vue.config.productionTip = false axios.defaults.baseURL = 'http://localhost:8088' //设置跳转地址前缀 Vue.prototype.$axios = axios //将axios放入Vue方法中,使用$axios调用 //设置响应拦截器 axios.interceptors.response.use(response => { if (response.data.code === 200) { Vue.prototype.$message.success(response.data.msg); return response; } else { Vue.prototype.$message.error(response.data.msg); return response; } }) //请求拦截器---设置携带token令牌--请求拦截器 axios.interceptors.request.use(config => { var token = sessionStorage.getItem("token"); if (token) { config.headers.token = token; } return config; }) //前置路由守卫 to: 即将要访问的路径 from: 从哪里来 next: 放行函数 前置路由守卫 router.beforeEach((to, from, next) => { //如果用户访问的是登录页面,直接放行 ===比较值和引用 if (to.path === "/login") { //放行 return next(); } //获取sessionStorage中保存的token值 const token = window.sessionStorage.getItem("token"); //如果token不存在,强制跳转到登录页面 if (!token) { return next("/login"); } //如果token存在,直接放行 next(); }) new Vue({ router, render: h => h(App) }).$mount('#app')
编写router下的index.js的内容
javascriptimport Vue from 'vue' import VueRouter from 'vue-router' // const originalPush = VueRouter.prototype.push // //修改原型对象中的push方法 // VueRouter.prototype.push = function push(location) { // return originalPush.call(this, location).catch(err => err) // } Vue.use(VueRouter) const routes = [ { path: '/', //重定向到login的路径 redirect: '/login' }, { path: "/login", name: "login", component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue') }, { path: "/index", component: () => import(/* webpackChunkName: "index" */ '../views/Index.vue') } ] const router = new VueRouter({ routes }) export default router
搭建页面
搭建登录页面
html<template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" label-width="80px"> <h2 class="login-title">Login</h2> <el-form-item label="Username" prop="username"> <el-input v-model="loginForm.username" placeholder="Enter your username"></el-input> </el-form-item> <el-form-item label="Password" prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="Enter your password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSubmit" :loading="loading">Login</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { loginForm: { username: '', password: '' }, rules: { username: [ { required: true, message: 'Please enter your username', trigger: 'blur' } ], password: [ { required: true, message: 'Please enter your password', trigger: 'blur' } ] }, loading: false }; }, methods: { handleSubmit() { this.$refs.loginForm.validate(valid => { if (valid) { this.$axios.post("/login?username=" + this.loginForm.username + "&password=" + this.loginForm.password).then(response => { if (response.data.code === 200) { sessionStorage.setItem("token", response.data.data); this.$router.push("/index"); } }) } }); } } }; </script> <style scoped> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f7fa; } .login-form { width: 300px; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); } .login-title { text-align: center; margin-bottom: 20px; } </style>
搭建登陆成功的测试页面
html<template> <div> <button @click="look">查看</button> <button @click="Myexport">导出</button> <button @click="logout">退出</button> </div> </template> <script> export default { methods: { logout() { this.$axios.post("/logout").then(res => { sessionStorage.removeItem("token") //跳转到登录页面 this.$router.push("/login") }) }, look() { this.$axios.get("/user/select").then(res => { console.log(res.data) }) }, Myexport() { this.$axios.get("/user/export").then(res => { console.log(res.data) }) } } } </script>