Vue练习(登录页面,菜单导航栏)

练习任务

  • 登录页面,与后台交互,登录判断;
  • 登陆成功后进入主页,实现主页的级联菜单。

bootCDN引入资源

// vue
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
// axios
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
// qs(json数据转为键值对格式)
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
// elementUI.js
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
// elementUI.css
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">


// axios异步请求语法:
axios vue推荐的ajax组件

axios.post('login', subData)
	.then(response => {
			console.log(response);
		}).catch(function(error) {
			console.log(error);
		});

axios.get('提交地址')
.then(response => {
​	console.log(response);

}).catch(function(error) {
​	console.log(error);
});
// 将json拼成键值对
window.Qs.stringify("将json拼成键值对")

页面效果

在这里插入图片描述

在这里插入图片描述

登录页面(axios的异步请求,以及登录信息回显的两种方式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<style type="text/css">
			.text {
				font-size: 14px;
			}

			.item {
				margin-bottom: 18px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both
			}

			.box-card {
				width: 480px;
			}

			.myCard {
				margin: 200px auto;
			}
            .wrongMsg{
                font-size: small;
                color: lightcoral;
                margin-left: 10px;
            }
		</style>
	</head>
	<body>
		<div id="main">
			<el-card class="box-card myCard">
				<div slot="header" class="clearfix">
					<span>登录</span><span class="wrongMsg" v-if="isAble">{{wrongMsg}}</span>
				</div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="用户名">
						<el-input v-model="formLabelAlign.name"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input type="password" v-model="formLabelAlign.pass"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">登录</el-button>
						<el-button>重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
	</body>
	<script type="text/javascript">
		var myvue = new Vue({
			el: "#main",
			data: {
				labelPosition: 'right',
				formLabelAlign: {
					name: '',
					pass: ''
				},
                wrongMsg:"",
                isAble:true
			},
			methods: {
				onSubmit() {
					var subData = window.Qs.stringify(this.formLabelAlign);
					console.log(subData);
					axios.post('/day10/login', subData)
						.then(response => {
							console.log(response.data);
							console.log(response.data.returnCode);
							if (response.data.returnCode == 200) {
							    location.href = "/day10/main.html";
							}else {
							    // this.isAble = true
                                this.wrongMsg = response.data.returnMsg;
                            }
						}).catch(function(error) {
							console.log(error);
						});
				}
			}
		})
	</script>
</html>
  • 后台servlet
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String pass = req.getParameter("pass");
        PrintWriter pw = resp.getWriter();

        if ("123".equals(name)&&"123".equals(pass)){
            pw.print("{\"returnCode\":\"200\",\"returnMsg\":\"登陆成功\"}");
        }else {
            pw.print("{\"returnCode\":\"500\",\"returnMsg\":\"用户名或密码错误\"}");
        }
        pw.flush();
        pw.close();
    }
}

首页页面(v-for的双重遍历)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<style>
			*{
				margin: 0px;
			}
		  .el-header, .el-footer {
		    background-color: #B3C0D1;
		    color: #333;
		    text-align: center;
		    line-height: 40px;
			padding: 80px;
		  }
		  
		  .el-aside {
		    background-color: #D3DCE6;
		    color: #333;
		    text-align: center;
		    line-height: 400px;
		  }
		  
		  .el-main {
		    background-color: #E9EEF3;
		    color: #333;
		    text-align: center;
		    line-height: 160px;
			padding: 280px;
		  }
		  
		  body > .el-container {
		    margin-bottom: 40px;
		  }
		  
		  .el-container:nth-child(5) .el-aside,
		  .el-container:nth-child(6) .el-aside {
		    line-height: 260px;
		  }
		  
		  .el-container:nth-child(7) .el-aside {
		    line-height: 320px;
		  }
		  .asideModel{
			  height: 160px;
		  }
		  a{
			  text-decoration: none;
		  }
		</style>
	</head>
	<body>
		<div id="mydiv">
			<el-container>
				<el-aside width="280px">
					<el-row class="tac">
						<el-col :span="24">
							<h5 class="asideModel"></h5>
							<el-menu default-active="1102" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
							 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
								<el-submenu :index="menus.menuid" v-for="menus in usermenus">
									<template slot="title">
										<i :class="menus.menuicon"></i>
										<span>{{menus.menuname}}</span>
									</template>
									<el-menu-item-group v-for="menu in menus.submenu">
										<a :href="menu.menuurl">
											<el-menu-item :index="menu.menuid">{{menu.menuname}}</el-menu-item>
										</a>
									</el-menu-item-group>
								</el-submenu>
							</el-menu>
						</el-col>
					</el-row>

				</el-aside>
				<el-container>
					<el-header>用户管理系统</el-header>
					<el-main>详情页面</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script type="text/javascript">
		var myVue = new Vue({
			el: "#mydiv",
			data: {
				usermenus: [{
						"menuid": "11",
						"menuname": "系统管理",
						"menuicon": "el-icon-setting",
						"submenu": [{
							"menuid": "1101",
							"menuname": "系统参数",
							"menuurl": "test1-1.html"
						}, {
							"menuid": "1102",
							"menuname": "菜单配置",
							"menuurl": "test1-2.html"
						}]
					},
					{
						"menuid": "12",
						"menuname": "用户管理",
						"menuicon": "el-icon-user",
						"submenu": [{
							"menuid": "1201",
							"menuname": "用户参数",
							"menuurl": "test2-1.html"
						}, {
							"menuid": "1202",
							"menuname": "配置权限",
							"menuurl": "test2-2.html"
						}]
					}
				]

			},
			methods: {
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				}
			}
		})
	</script>
</html>
1. 安装vue-router ```bash npm install vue-router --save ``` 2. 创建router.js文件并配置路由 ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' import Contact from '@/components/Contact' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }, { path: '/contact', name: 'Contact', component: Contact } ] }) ``` 3. 在App.vue中引入router并设置router-view组件 ```vue <template> <div id="app"> <nav> <ul> <li><router-link to="/">Home</router-link></li> <li><router-link to="/about">About</router-link></li> <li><router-link to="/contact">Contact</router-link></li> </ul> </nav> <router-view/> </div> </template> <script> import router from './router' export default { name: 'App', router } </script> ``` 4. 在router.js中添加meta属性 ```javascript export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home, meta: { title: 'Home' } }, { path: '/about', name: 'About', component: About, meta: { title: 'About' } }, { path: '/contact', name: 'Contact', component: Contact, meta: { title: 'Contact' } } ] }) ``` 5. 在App.vue中动态生成菜单导航栏 ```vue <template> <div id="app"> <nav> <ul> <li v-for="route in $router.options.routes"> <router-link :to="route.path">{{route.meta.title}}</router-link> </li> </ul> </nav> <router-view/> </div> </template> ``` 这样就可以根据vue-router生成菜单导航栏了。当需要增加新的页面时,只需要在router.js中添加路由和meta属性,菜单导航栏会自动更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值