前端学习(1872)vue之电商管理系统电商系统之完善登录之后的操作

目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'Vue.use(Router)const router= new Router({routes:[{path:'/',redirect:'/login'},{path:'/login',component:Login},{path:'/home',component:Home}]
})
//挂载路由导航守卫
router.beforeEach((to,from,next)=>{if(to.path==='/login') return next();//获取tokenconst tokenStr=window.sessionStorage.getItem('token')if(!tokenStr) return next('/login')next();
})export default router

login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表单区域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登录区域--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div>
</div></template><script>
export default{data(){return{//这是登录表单的数据loginForm:{username:'geyao',password:'12345678'},// 表单验证loginFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入用户密码', trigger: 'blur' },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }]}}},methods:{resetLoginForm(){// console.log(this)this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{if(!valid) return;const {data:res}=await this.$http.post('login',this.loginForm);if(res.meta.status!==200) return this.$message.error('登录失败');this.$message.success('登录成功');// 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; //   1.1 项目中出现了登录之外的其他API接口,必须在登陆之后才能访问//   1.2 token 只应在当前网站打开期间生效,所以将token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通过编程式导航跳转到后台主页, 路由地址为:/homethis.$router.push('/home')});}}
}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff;
}.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: center;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'import axios from 'axios'
Vue.prototype.$http=axios
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
Vue.config.productionTip=false;
new Vue({router,render: h => h(App)
}).$mount('#app')

global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}

element.js

import Vue from 'vue'
import { Button } from 'element-ui'
import {Form,FormItem} from 'element-ui'
import {Input} from 'element-ui'
//弹框提示
import {Message} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message=Message

Home.vue

<template>
<div>
Home 组件
</div>
</template><script>
</script>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码审计之配置

register_globals:php<5.4.0 PHP_INI_ALL:可在任何地方设置<?phpif($user admin){echo true;}?> allow_url_include:在5.2.0及以后默认off PHP_INI_ALL:可在任何地方设置&#xff08;allow_url_fopen&#xff09;<?phpinclude $_GET[a];?>ahttp://127.0.0.…

前端学习(1873)vue之电商管理系统电商系统之实现退出功能

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

wangeditor修改图片上传和视频上传

视频上传:https://blog.csdn.net/m0_37885651/article/details/83656437 https://www.cnblogs.com/wjwj/p/10871350.html 图片批量上传: https://blog.csdn.net/kongfanyu/article/details/85706834

深入理解构造函数和原型链

使用构造函数初始化对象的过程function Base(){} //函数声明var basenew Base() //对象初始化执行Base()的过程&#xff1a; 创建一个名为Base的function对象&#xff1a; 执行function Base(){函数体}本质上相当于var Basenew Function("函数体")&#xff1b;所以Ba…

前端学习(1874)vue之电商管理系统电商系统之处理项目中eslint语法报错

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

eclipse 安装git

eclipse 安装git&#xff1a;https://blog.csdn.net/u012604299/article/details/82390468 windows安装gitlab客户端:https://www.cnblogs.com/xwgcxk/p/9209237.html GitLab添加ssh-key&#xff0c;操作无需每次输入账号密码&#xff1a;https://blog.csdn.net/qq_40861368/…

Android一个自定义的进度环:ProgressChart

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/ProgressChart.zip 因项目需要,自己尝试定义了一个进度环,用于显示进度,实现效果如下: 主要代码如下: public class ProgressChart extends View {private Context context;//圆环背景画笔private Paint pain…

前端学习(1876)vue之电商管理系统电商系统之整体布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

0414-复利计算再升级

目录 项目简介更新内容设计概要估算工作量任务分配github地址演示总结一、项目简介 项目名复利计算5.1版本号5.1开发语言java开发工具eclipse、IDEA、mysql更新内容功能完善开发人员颜文生、林集团二、更新内容 界面美化 改善交互 三、概要设计 加载图片美化界面&#xff0c;利…

前端学习(1874)vue之电商管理系统电商系统之修改element-ui组件的按需导入

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

java 8 删选集合 和取集合中的字段重组成集合的使用

Overridepublic GoodsBaseInfoEpcVO selectEpcGoodsBaseInfo(CarConfig carconfig, String realCarDKText, String realCarAgeText) {// 查询变速箱油信息GoodsBaseInfoEpcVO vo new GoodsBaseInfoEpcVO();if (carconfig null) {return new GoodsBaseInfoEpcVO();}List<St…

1.名字忘了

1.h5文档类型和字符集是&#xff1f;<!DOCTYPE html><meta charset"utf-8" /> 2.请描述h5的canvascanvas是HTML5中的新元素&#xff0c;你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。canvas 元素本…

前端学习(1877)vue之电商管理系统电商系统之头部布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

springMVC 后端代码 如何用 @requestParam() 接收前台传过来的数组

https://blog.csdn.net/bigtree_3721/article/details/71479667 https://www.jb51.net/article/130922.htm https://blog.csdn.net/gao454917848/article/details/46355877 第二种 &#xff1a; serviceWorkOrderList.search function () {var queryData {};queryData[wo…

.net 任务(Task)

1. Task &#xff08;任务&#xff09;&#xff1a; 很容易调用 ThreadPool.QueueUserWorkItem 实现异步操作&#xff0c;但是这个技术有许多 .net 引入Task类型来使用任务。 如下几种方式都是实现异步的方法&#xff1a; public static void Method(){ThreadPool.QueueUserWor…

前端学习(1878)vue之电商管理系统电商系统之左侧菜单布局

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…

Activiti工作流6.0表结构介绍

https://blog.csdn.net/qq_38011415/article/details/101127222

Ubuntu 16.04 搭建Android开发环境

1、Installing Java sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install oracle-java8-installer After that sudo apt-get install oracle-java8-set-default 2、Installing Android Studio (1) Download Android Studio from here or h…

前端学习(1879)vue之电商管理系统电商系统之通过axios拦截器添加token认证

目录结构 router.js import Vue from vue import Router from vue-router import Login from ./components/Login.vue import Home from ./components/Home.vueVue.use(Router)const router new Router({routes:[{path:/,redirect:/login},{path:/login,component:Login},{pat…