前端学习（2017）vue之电商管理系统电商系统实现表单的预先认证前端

目录结构

文章图片

router.js

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' import Users from './components/user/Users.vue' import Right from './components/power/Right.vue' import Roles from './components/power/Roles.vue' import Cate from './components/goods/Cate.vue' import Params from './components/goods/Params.vue' import List from './components/goods/List.vue' Vue.use(Router)const router = new Router({ routes: [{ path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', children: [{ path: '/welcome', component: Welcome }, { path: '/users', component: Users }, { path: '/rights', component: Right }, { path: '/roles', component: Roles }, { path: '/categories', component: Cate }, { path: '/params', component: Params }, { path: '/goods', component: List } ] } ] }); //挂载路由导航守卫 router.beforeEach((to, from, next) => { if (to.path === '/login') return next(); //获取token const tokenStr = window.sessionStorage.getItem('token') if (!tokenStr) return next('/login') next(); })export default router

.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; }

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 TreeTable from "vue-table-with-tree-grid" import axios from 'axios'Vue.prototype.$http=axios axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/" // 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息 axios.interceptors.request.use(config => { // console.log(config) // 为请求头对象，添加token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem('token') // 在最后必须 return config return config }) Vue.config.productionTip=false; Vue.component('tree-table',TreeTable)Vue.filter('dataFormat', function (originVal) { const dt = new Date(originVal)const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0') const mm = (dt.getMinutes() + '').padStart(2, '0') const ss = (dt.getSeconds() + '').padStart(2, '0') // yyyy-mm-dd hh:mm:ss return `${y}-${m}-${d} ${hh}:${mm}:${ss}` }) new Vue({ router, render: h => h(App) }).$mount('#app')

global.css

/* 全局样式 */ html, body, #app { height: 100%; margin: 0; padding: 0; }.el-breadcrumb { margin-bottom: 15px; font-size: 12px; }.el-card { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; }.el-table { margin-top: 15px; font-size: 12px; }.el-pagination { margin-top: 15px; }

element.js

import Vue from 'vue'//弹框提示 import { Message, Button, Form, FormItem, Input, Container, Header, Aside, Main, Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Container) Vue.use(Header) Vue.use(Aside) Vue.use(Main) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItemGroup) Vue.use(MenuItem) Vue.use(Breadcrumb) Vue.use(BreadcrumbItem) Vue.use(Card) Vue.use(Row) Vue.use(Col) Vue.use(Table) Vue.use(TableColumn) Vue.use(Switch) Vue.use(Tooltip) Vue.use(Pagination) Vue.use(Dialog) Vue.use(Tag) Vue.use(Tree) Vue.prototype.$confirm=MessageBox Vue.prototype.$message = Message

Home.vue

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

.prettierrc

{ "semi":false, "singleQuote":true }

eslintrc.js

module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'space-before-function-paren':0} }

welcome.vue

Users.vue

Right.vue

Roles.vue

.el-tag { margin: 7px; }.bdtop { border-top: 1px solid #eee; } .bdbottom { border-bottom: 1px solid #eee; } .vcenter { display: flex; align-items: center; }