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

最新推荐文章于 2024-09-04 16:31:50 发布
最新推荐文章于 2024-09-04 16:31:50 发布
阅读量1.8k 收藏 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>
严格要求自己
关注
专栏目录
43.vue第一阶段小练习（自己做一个购物车页面）
鹏哥哥Aaa
11-25 329
自己做一个购物车页面
用VUE实现登录页
qq_62449212的博客
11-21 2602
用VUE实现移动端登陆页面
Vue 实现带登录状态的导航栏
narrator_y的博客
04-10 2442
在写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导航栏
最新发布
sbxjhvdddjdjd的博客
09-04 1130
首先我们需要一个公共的导航栏，里面的div内容就不展示了，主要展示的是引用的步骤，具体的div样式，在elementUI的官网有。Vue的项目中，导航栏是经常需要使用到的，主要的是如何将公共的导航栏引用到页面上，这里主要讲解常用的两种方式。在我们需要显示的页面，将meta下的属性值设置为ture，不需要的设置为false，默认不进行配置就是不显示。前面说了，meta下的属性是自定义的，并不是网上说的是keepAlive进行绑定的。在vue给的官方文档中，meta是这样定义的。你会发现，效果依然是完美的！
vue登陆页面
热门推荐
qq_45179361的博客
02-11 1万+
vue登陆页面实现。
vue练习demo（1）——使用vue基本指令实现切换菜单栏效果
qq_44860114的博客
11-22 953
这篇文章最后的小demo大家解决了吗？ 我来更新代码了哦！ 实现效果的方式有很多种，我这只是其中一种方法， 如果大家有什么不同的意见可以相互讨论。 需要实现的效果： 菜单栏+与菜单相对应的内容区域 点击菜单栏的时候添加样式 点击不同的菜单，显示对应的内容区域 核心代码如下： <style> li{ list-style: none; display: inline-block; padding: 10px 30px; margin: 0
Vue后台管理系统练习-2首页顶栏搭建
Yuki_Aruki的博客
05-07 640
今日效果如下: (因为没有找图所以用了文件内自带的logo图片)首先设置左侧按钮，同样利用element-ui的icon库，配合button组件，将size设置为mini获取更好的视觉感受 左侧内容代码如下: <div class="l-content"> <el-button @click="unflod" plain icon="el-icon-menu" size="mini" ></el-button> <h4 style="color
list+button实现简单的左侧导航栏
12-08
本示例"list+button实现简单的左侧导航栏"聚焦于创建一个常见的UI设计模式，即左侧导航菜单，它广泛应用于各种应用和网站中。通过结合列表（List）和按钮（Button）元素，我们可以创建一个交互式的、可扩展的导航...
Vue后台管理系统练习-1首页侧栏搭建
Yuki_Aruki的博客
05-03 1712
这里利用element-ui的container布局，在官网->组件->base里可以找到相关组件的使用方法，以及布局模板，也可以根据自己的需求进行布局 使用前先在main.js中引入需要使用的组件： import { Container, Main, Header, Aside } from 'element-ui'; Vue.use(Container, Main, Header, Aside) 引用后可以直接在Home.vue搭建基本布局，此处使用官网的布局： <el-contai
Vue-router学习笔记
weixin_45732235的博客
03-25 755
文章目录准备创建项目路由的配置使用vue-router的步骤：路由默认值（默认显示首页）小插曲修改为history模式router-link的补充通过代码跳转路由动态路由的使用路由懒加载的使用认识嵌套路由参数传递全局导航守卫keep-alive 准备 创建项目 路由的配置 src/router/index.js // 配置路由信息 import VueRouter from 'vue-router' import Vue from 'vue' // 使用插件 Vue.use(VueRouter) /
登录和菜单页样式（MVC5）
07-27
MVC5 登录功能和样式，主页菜单样式 . 样式bootstrap
vue网页登录界面
12-21
这个demo是在webstrom运行的vue网页静态登录界面，工具应该不是问题。关于vue的配置和运行这里没有说明，自己可以配置一下。
vue 最简单的登录页面判断是否登录，是就进入首页，不是就返回登录页面
weixin_45274523的博客
05-13 4095
最简单的vue判断是否登录，没有登录返回登录页面，登录就进入首页
vue点击div跳转其他页面_vue页面刚进来是登录页，点击登陆后跳转到首页
weixin_39949297的博客
12-21 719
app.vueimport login from "./components/login/login.vue"export default {name: 'App',components:{login}}login.vuetabbar.vue import child from "...
vue跳到页面_vue页面刚进来是登录页，点击登陆后跳转到首页
weixin_39888080的博客
02-11 9290
app.vue<template><div id="app"><login></login><router-view/></div></template><script>import login from "./components/login/login.vue"export default {nam...
vue 通过单点登录进入项目首页
贵林之恋的博客
01-05 4650
最近做的项目是通过单点登录入口进入自己的项目首页，大概总结一下思路： 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
login.vue
fenzu13879的博客
07-26 359
<template> <divclass="login_container"> <divclass="login_box"> <!--头像区域--> <divclass="avatar_box"> <imgsrc="../assets/logo.png"alt=""> </div> <!--登录表单区域--&gt...
vue 登陆页面
fantasyfzg的博客
12-02 176
login
如何使用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、付费专栏及课程。

余额充值