From bdb82b80ad0a458ea7e67ea12aa5432292539424 Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期日, 31 十月 2021 11:28:41 +0800 Subject: [PATCH] 完成登录功能 --- /dev/null | 121 ------------------------------ public/index.html | 2 src/assets/css/global.css | 18 ---- src/plugins/element.js | 50 +----------- src/router.js | 10 -- 5 files changed, 7 insertions(+), 194 deletions(-) diff --git a/public/index.html b/public/index.html index 4a90934..20fab4f 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> - <title>vue_shop</title> + <title>鏂扮綉涓庝紶鎾闄㈢綉绔�</title> </head> <body> <noscript> diff --git a/src/assets/css/global.css b/src/assets/css/global.css index 95d2c0f..7d4f9e3 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -5,20 +5,4 @@ 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: 13px; -} -.el-pagination { - margin-top: 15px; -} +} \ No newline at end of file diff --git a/src/assets/qinaide.jpg b/src/assets/qinaide.jpg deleted file mode 100644 index 15675fe..0000000 --- a/src/assets/qinaide.jpg +++ /dev/null Binary files differ diff --git a/src/components/Home.vue b/src/components/Home.vue deleted file mode 100644 index ef195e3..0000000 --- a/src/components/Home.vue +++ /dev/null @@ -1,147 +0,0 @@ -<template> - <el-container class="home-container"> - <el-header> - <div> - <img src="../assets/heima.png" alt="" /> - <span>鐢靛晢鍚庡彴绠$悊绯荤粺</span> - </div> - <el-button type="info" @click="logout">閫�鍑�</el-button> - </el-header> - <el-container> - <el-aside :width="isCollapse ? '64px' : '200px'"> - <div class="toggle-button" @click="toggleCollapse">|||</div> - <el-menu - background-color="rgb(50, 55, 67)" - text-color="#fff" - active-text-color="rgb(61, 159, 243)" - unique-opened - :collapse="isCollapse" - :collapse-transition="false" - router - :default-active="activePath" - > - <!-- 涓�绾ц彍鍗� --> - <el-submenu - :index="item.id + ''" - v-for="item in menulist" - :key="item.id" - > - <template slot="title"> - <i :class="iconsObj[item.id]"></i> - <span>{{ item.authName }}</span> - </template> - <!-- 浜岀骇鑿滃崟 --> - <el-menu-item - :index="'/' + subItem.path" - v-for="subItem in item.children" - :key="subItem.id" - @click="saveNavState('/' + subItem.path)" - > - <template slot="title"> - <i class="el-icon-menu"></i> - <span>{{ subItem.authName }}</span> - </template> - </el-menu-item> - </el-submenu> - </el-menu> - </el-aside> - <el-main> - <router-view></router-view> - </el-main> - </el-container> - </el-container> -</template> - -<script> -export default { - data() { - return { - //宸︿晶鑿滃崟鏁版嵁 - menulist: [], - iconsObj: { - 125: 'iconfont icon-user', - 103: 'iconfont icon-tijikongjian', - 101: 'iconfont icon-shangpin', - 102: 'iconfont icon-danju', - 145: 'iconfont icon-baobiao' - }, - isCollapse: false, - //琚縺娲荤殑閾炬帴鍦板潃 - activePath: '' - } - }, - created() { - this.getMenuLsit() - this.activePath = window.sessionStorage.getItem('activePath') - }, - methods: { - logout() { - //娓呯┖token - window.sessionStorage.clear() - //璺宠浆鍒扮櫥褰曢〉 - this.$router.push('/login') - }, - // 鑾峰彇鎵�鏈夎彍鍗� - async getMenuLsit() { - const { data: res } = await this.$http.get('/menus') - // 濡傛灉璇锋眰澶辫触 鎶婇敊璇秷鎭墦鍗板嚭鏉� - if (res.meta.status !== 200) return this.$message.error(res.meta.msg) - //濡傛灉璇锋眰鎴愬姛锛屽皢鑾峰彇鐨勬暟鎹嬁杩囨潵鍗冲彲 - this.menulist = res.data - console.log(res.data) - }, - toggleCollapse() { - this.isCollapse = !this.isCollapse - }, - //淇濆瓨閾炬帴鐨勬縺娲荤姸鎬� - saveNavState(activePath) { - window.sessionStorage.setItem('activePath', activePath) - this.activePath = activePath - } - } -} -</script> - -<style lang="less" scoped> -.home-container { - height: 100%; -} -.el-header { - background-color: rgb(55, 61, 63); - display: flex; - justify-content: space-between; - padding-left: 0; - align-items: center; - color: #fff; - font-size: 20px; - > div { - display: flex; - justify-content: center; - align-items: center; - span { - margin-left: 15px; - } - } -} -.el-aside { - background-color: rgb(50, 55, 67); - .el-menu { - border-right: none; - } -} -.el-main { - background-color: rgb(233, 237, 240); -} -.iconfont { - margin-right: 10px; -} -.toggle-button { - background-color: rgb(72, 81, 98); - color: white; - text-align: center; - font-size: 10px; - line-height: 26px; - letter-spacing: 0.2em; - cursor: pointer; -} -</style> diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue deleted file mode 100644 index cbb6d8b..0000000 --- a/src/components/Welcome.vue +++ /dev/null @@ -1,15 +0,0 @@ -<template> - <div> - <h3>娆㈣繋锛�</h3> - </div> -</template> - -<script> -export default { - -} -</script> - -<style lang="less" scoped> - -</style> \ No newline at end of file diff --git a/src/components/user/Users.vue b/src/components/user/Users.vue deleted file mode 100644 index 22f4a17..0000000 --- a/src/components/user/Users.vue +++ /dev/null @@ -1,121 +0,0 @@ -<template> - <div> - <!-- 闈㈠寘灞戝鑸尯 --> - <el-breadcrumb separator-class="el-icon-arrow-right"> - <el-breadcrumb-item :to="{ path: '/home' }">棣栭〉</el-breadcrumb-item> - <el-breadcrumb-item>鐢ㄦ埛绠$悊</el-breadcrumb-item> - <el-breadcrumb-item>鐢ㄦ埛鍒楄〃</el-breadcrumb-item> - </el-breadcrumb> - <!-- 鍗$墖瑙嗗浘鍖� --> - <el-card class="box-card"> - <!-- 鎼滅储涓庢坊鍔犲尯鍩� --> - <el-row :gutter="50"> - <el-col :span="8"> - <el-input placeholder="璇疯緭鍏ュ唴瀹�"> - <el-button slot="append" icon="el-icon-search"></el-button> - </el-input> - </el-col> - <el-col :span="4"> - <el-button type="primary">娣诲姞鐢ㄦ埛</el-button> - </el-col> - </el-row> - <!-- 鐢ㄦ埛鍒楄〃鍖� --> - <el-table :data="userlist" border stripe> - <el-table-column type="index"></el-table-column> - <el-table-column label="濮撳悕" prop = 'username'></el-table-column> - <el-table-column label="閭" prop = 'email'></el-table-column> - <el-table-column label="鐢佃瘽" prop = 'mobile'></el-table-column> - <el-table-column label="瑙掕壊" prop = 'role_name'></el-table-column> - <el-table-column label="鐘舵��"> - <template slot-scope="scope"> - <!-- 鍗曠嫭鎷垮埌鏁版嵁 --> - <!-- {{ scope.row }} --> - <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔"> - <template> - <!-- 淇敼鎸夐挳 --> - <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> - <!-- 鍒犻櫎鎸夐挳 --> - <el-button type="danger" icon="el-icon-delete" size="mini"></el-button> - <!-- 鍒嗛厤瑙掕壊鎸夐挳 --> - <el-tooltip effect="dark" content="鍒嗛厤瑙掕壊" placement="top" :enterable="false"> - <el-button type="warning" icon="el-icon-setting" size="mini"></el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> - <!-- 鐢ㄦ埛鍒嗛〉鍖� --> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="queryInfo.pagenum" - :page-sizes="[1, 2, 5, 10]" - :page-size="queryInfo.pagesize" - layout="total, sizes, prev, pager, next, jumper" - :total="total"> - </el-pagination> - </el-card> - </div> -</template> - -<script> -export default { - data() { - return { - //鑾峰彇鐢ㄦ埛鍒楄〃鐨勫弬鏁板璞� - queryInfo: { - query: '', - pagenum: 1, - pagesize: 2 - }, - userlist: [], - total: 0 - } - }, - // 鐢熷懡鍛ㄦ湡鍑芥暟 - created() { - this.getUserList() - }, - methods: { - async getUserList() { - const { data: res } = await this.$http.get('/users', { - params: this.queryInfo - }) - // console.log(res); - if (res.meta.status !== 200) { - return this.$message.error('鑾峰彇鐢ㄦ埛鍒楄〃澶辫触') - } - this.userlist = res.data.users - this.total = res.data.total - }, - // 鐩戝惉pagesize鏀瑰彉鐨勪簨浠� - handleSizeChange(newSize) { - // console.log(newSize) - this.queryInfo.pagesize = newSize - this.getUserList() - - }, - // 鐩戝惉椤电爜鍊兼敼鍙樼殑浜嬩欢 - handleCurrentChange(newPage) { - // console.log(newPage) - this.queryInfo.pagenum = newPage - this.getUserList() - }, - //鐩戝惉switch 寮�鍏崇姸鎬佺殑鏀瑰彉 - async userStateChanged(userinfo) { - console.log(userinfo); - const { data: res } = await this.$http.put(`users/${ userinfo.id }/state/${ userinfo.mg_state }`) - if(res.meta.status !== 200){ - userinfo.mg_state =! userinfo.mg_state - return this.$$message.error('鏇存柊鐢ㄦ埛鐘舵�佸け璐�') - } - this.$message.success('鏇存柊鐢ㄦ埛鐘舵�佹垚鍔�') - } - } -} -</script> - -<style lang="less" scoped> -</style> \ No newline at end of file diff --git a/src/plugins/element.js b/src/plugins/element.js index 7cdc8a7..c34ec8c 100644 --- a/src/plugins/element.js +++ b/src/plugins/element.js @@ -1,48 +1,6 @@ import Vue from 'vue' -import { - Button, - Form, - FormItem, - Input, - Message, - Container, - Header, - Aside, - Main, - Menu, - Submenu, - MenuItem, - Breadcrumb, - BreadcrumbItem, - Card, - Row, - Col, - Table, - TableColumn, - Switch, - Tooltip, - Pagination -} from 'element-ui' +// 鍏ㄥ眬瀵煎叆灏辫 +import Element from 'element-ui' +import 'element-ui/lib/theme-chalk/index.css' -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(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.prototype.$message = Message +Vue.use(Element) diff --git a/src/router.js b/src/router.js index 2526437..24a57f1 100644 --- a/src/router.js +++ b/src/router.js @@ -1,21 +1,13 @@ 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 - }] } + { path: '/login', component: Login } ] }) -- Gitblit v1.8.0