前端学习(1898)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'
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}]}]
});
//挂载路由导航守卫
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/"
// 请求在到达服务器之前,先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {// console.log(config)// 为请求头对象,添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必须 return configreturn config
})
Vue.config.productionTip=false;
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
} 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.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();//获取tokenconst 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

<template><div><h3>欢迎</h3></div>
</template>

Users.vue

<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><el-row :gutter="20"><el-col :span="7"><el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"><el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="addDialogVisible=true">添加用户</el-button></el-col></el-row><el-table border stripe><el-table-column type="index"></el-table-column><el-table-column prop="username" label="姓名"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="mobile" label="电话"></el-table-column><el-table-column prop="role_name" label="角色"></el-table-column><el-table-column label="状态"><template slot-scope="scope"><el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180"><el-button type="primary" icon="el-icon-edit" size="mini" circle></el-button><el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button><el-tooltip class="item" effect="dark" content="角色分配" :enterable="false" placement="top"><el-button type="warning" icon="el-icon-setting" size="mini" circle></el-button></el-tooltip></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[2, 5, 10, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加用户的对话框 --><el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" ><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addDialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><style scoped="less" scoped>
</style><script>
export default {data() {return {queryInfo: {query: '',pagenum: 1,pagesize: 2,},userlist: [],total: 0,addDialogVisible:false}},created() {this.getUserList()},methods: {async getUserList() {const { data: res } = await this.$http.get('users', {params: this.queryInfo,})if (res.meta.status !== 200) {return this.$message.error('获取用户列表失败')}this.userlist = res.data.usersthis.total = res.data.totalconsole.log(res)},// 监听 pagesize改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pagesize = newSizethis.getUserList()},// 监听 页码值 改变事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pagenum = newSizethis.getUserList()},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_statereturn this.$message.error('更新用户状态失败')}this.$message.success('更新用户状态成功!')},},
}
</script>

 

运行结果

 

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

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

相关文章

前端学习(1899)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1900)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1901)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1902)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

git生成公钥和私钥

转自&#xff1a;http://blog.csdn.net/wqjsir/article/details/17386087/ 一、 Git windows 客服端&#xff08;MsysGit&#xff09;下载 下载地址&#xff1a;http://code.google.com/p/msysgit/ 二、从开始菜单中找到Git 点击Git Bash 弹出命令行窗体&#xff0c;如下图&…

前端学习(1903)vue之电商管理系统电商系统之调用api添加用户

目录结构 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 Vue.use(Router)const router new Router({routes: [{path: /,re…

每日站立会议08

会议图片&#xff1a; 会议内容&#xff1a;祖浩然&#xff1a;昨天&#xff1a;对数据库的操作有了大概的了解&#xff1b;今天&#xff1a;制作增加、修改、删除、查询学生信息功能&#xff0c;以及退出主界面&#xff1b;遇到的问题&#xff1a;如何将网页地址以超链接形式…

前端学习(1904)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1905)vue之电商管理系统电商系统之根据用户id查询对应的信息

目录结构 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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1906)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

linux6.4 安装oracle11g 出现错误ORA-01078和LRM-00109错误

在linux中oracle11g安装成功后&#xff0c;启动监听&#xff08;lsnrctl start&#xff09;后&#xff0c;运行sqlplus / as sysdba后连接 startup出现了如下图的错误ORA-01078和LRM-00109错误 解决方法&#xff1a; 我当时也上网百度了一下&#xff0c;基本也都大同小异&…

前端学习(1907)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1908)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1909)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1910)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1911)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 Vue.use(Router)const router new Router({routes: [{path: /,re…

超好:web app变革之rem

感谢你的阅读&#xff0c;本文由 腾讯ISUX 版权所有&#xff0c;转载时请注明出处&#xff0c;违者必究&#xff0c;谢谢你的合作。注明出处格式&#xff1a;腾讯ISUX (https://isux.tencent.com/web-app-rem.html) &#xff08;其他阅读&#xff1a;滑屏 H5 开发实践九问http…

前端学习(1912)vue之电商管理系统电商系统之调用api完成删除操作

目录结构 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 Vue.use(Router)const router new Router({routes: [{path: /,re…

前端学习(1913)vue之电商管理系统电商系统之创建user分支并把代码推到码云

创建新分支 检查状态 添加代码 本地user分支推送 查看 切换 提交