Vue练习（登录页面，菜单导航栏）

最新推荐文章于 2024-05-27 13:45:13 发布
最新推荐文章于 2024-05-27 13:45:13 发布
阅读量1.7k 收藏 10
点赞数 2
分类专栏： java web练习 文章标签： vue ajax html python javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43050847/article/details/107342160
版权

文章目录

练习任务

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

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>
严格要求自己
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
43.vue第一阶段小练习（自己做一个购物车页面）
鹏哥哥Aaa
11-25 298
自己做一个购物车页面
Vue项目实现动态路由和动态导航菜单栏
qq_42797527的博客
11-30 1372
用于前端存储数据，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。Vuex中的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，相应的组件也会得到更新。而全局对象的状态存储是静态的，无法自动更新组件中的状态。根据后端返回的用户的菜单地址进行处理拼装成路由格式，存储到vuex中，并添加到路由里面，若vuex中有用户路由数据，直接放行。2每次路由跳转会通过permission.js进行判断和加载，若vuex中无用户路由数据则请求后端，
Vue通用后台管理——菜单权限功能
qq_51357960的博客
11-02 2672
Vue通用后台管理——菜单权限功能
【VUE】Vue2添加菜单搜索并跳转指定页面的功能
最新发布
m0_67841039的博客
05-27 83
复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。
Vue 实现带登录状态的导航栏
narrator_y的博客
04-10 2395
在写vue项目的时候常会遇到 带登录状态的导航栏 设计，当用户登录后“点击登录”则变换成为用户的具体信息，例如 目前我的做法是将此导航栏写在App.vue文件中，将用户的token存在sessionStorage中，根据token是否存在来渲染右上角的内容。大致思想是：（下图为App.vue部分代码） <a-dropdown v-if="user">用户登录了</a-dropd...
一个练习用的vue网站
08-10
技术 vue2.0 vuex sass es6 vue-router2.0
用VUE实现登录页
qq_62449212的博客
11-21 2578
用VUE实现移动端登陆页面
登录和菜单页样式（MVC5）
07-27
MVC5 登录功能和样式，主页菜单样式 . 样式bootstrap
Vue实现导航栏菜单
10-14
在Vue.js中实现导航栏菜单是一项基础而重要的任务，它能为用户提供清晰的页面结构和交互体验。在提供的代码示例中，我们看到一个简单的Vue应用，用于创建一个左侧导航栏菜单，当用户点击菜单项时，右侧内容区域会...
vue实现顶部菜单栏
01-18
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换 先看展示结果： 点击第一个按钮，显示内容1 点击第二个按钮，展示内容2 下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) ...
vue2.0实现导航菜单切换效果
08-30
Vue 2.0 实现导航菜单切换效果 Vue 2.0 是一个流行的前端框架，用于构建复杂的Web应用程序。今天，我们将探讨如何使用 Vue 2.0 实现导航菜单切换效果。 标题解析 标题「Vue 2.0 实现导航菜单切换效果」表明本文的...
Vue在页面右上角实现可悬浮/隐藏的系统菜单
08-27
主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。需要的朋友可以参考下
vue elementUI使用tabs与导航栏联动
10-16
主要为大家详细介绍了vue elementUI使用tabs与导航栏联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
在Vue.js应用中，我们经常需要构建复杂的用户界面，其中包括导航栏和路由切换。在某些特定的场景下，如登录页面或全屏展示的页面，我们可能需要隐藏导航栏以提供更好的用户体验。本文将详细讲解如何在Vue中实现某些...
vue 通过单点登录进入项目首页
贵林之恋的博客
01-05 4497
最近做的项目是通过单点登录入口进入自己的项目首页，大概总结一下思路： 1.跟main.js 同级新建一个permission.js（文件名称随意），然后在main.js 文件中导入： permission.js ： import router from './router' import store from './store' import Cookies from 'js-cookie' import { Message, MessageBox } from 'eleme
VUE的基本使用。
qq_61576523的博客
04-06 8572
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
vue系统管理的左侧菜单，部分菜单需要登录内部账户才能进入
weixin_42066070的博客
05-13 416
需求分析：点击左侧的菜单，弹出提示请登录账户，才能办理业务，然后直接进入到用户的登录页面，登录页面后不用先进首页，而是直接进入到点击的页面。 代码实现： 1、登录的时候记录用户的信息，比如用户名 2、路由守卫 3、跳转到登录页面的时候，根据参数跳转到点击的页面 实现1步骤的代码 // 用户密码登录 pwdLogin() { this.$refs["pwdLoginForm"].validate((valid) => { //校验通过 ...
Vue的练习页面
liukai6的博客
04-03 879
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &lt;title&gt;vue&lt;/title&gt;
vue---隐藏登录页面导航栏，登录成功跳转页面出现导航栏
maidu_xbd的博客
06-26 6113
问题描述：在登录页面显示了底部导航栏，那么如果控制使得登录界面不存在导航栏，登录成功后跳转页面才显示导航栏? 解决方法：(1)在父组件App.vue的底部导航栏组件渲染标签处引入<v-show>或者<v-if>标签实现导航栏的显示与隐藏状态【<bottom-nav v-show="showNav"></bottom-nav>】，首先设置一...
如何使用Vue根据vue-router生成菜单导航栏简单实现
03-31
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、付费专栏及课程。

余额充值