mui+vue微信版前后端分离手机端登录页面布局和调用数据

最新推荐文章于 2024-05-26 07:15:00 发布

jxg1473819657

最新推荐文章于 2024-05-26 07:15:00 发布

阅读量1.6k

点赞数

文章标签： mui vue h5登录页 axios读取数据微信版登录页

本文链接：https://blog.csdn.net/jxg1473819657/article/details/84027997

版权

第一步：页面效果图如下，是一个很常用的页面

第二：代码如下，页面非常少，没有用webpack和vue-li，用了最原始的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="css/mui.min.css">
	</head>

	<body>
		<div id="box">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">登录</h1>
			</header>
			<div class="mui-content">
				<div class="mui-content-padded" style="margin: 5px;">
					<div class="login" @keydown.enter="handleSubmit">
						<form class="mui-input-group" ref="loginForm" :model="form">
							<div class="mui-input-row" prop="username">
								<label>用户名:</label>
								<input type="text" v-model="form.username" class="mui-input-clear" placeholder="请输入用户名">
							</div>
							<div class="mui-input-row" prop="password">
								<label>密码:</label>
								<input type="password"  v-model="form.password" class="mui-input-clear" placeholder="请输入密码">
							</div>
							<div class="mui-input-row" prop="captcha" style="display: flex;">
								<label>验证码:</label>
								<input type="text" v-model="form.captcha" class="mui-input-clear" placeholder="请输入验证码">
								<img :src="codeSrc" @click="updateCode" />
							</div>
							<div class="mui-button-row">
								<button type="button" class="mui-btn mui-btn-primary" id="list" @click="handleSubmit">登录</button>&nbsp;&nbsp;
							</div>
							
						</form>
					</div>
				</div>
			</div>
		</div>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/base.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
   var myVue = new Vue({
                el:'#box',
                data:{
                	uuid:null,
				    form: {
				        username: "",
				        password: "",
				        captcha: ""
				      }
                },
                created(){
                	this.updateCode()
                },
                methods:{
                	updateCode() {
				        this.uuid = this.getUuid();
				    },
				    handleSubmit() {
				    	axios.post(baseUrl+'sys/login', {//调用接口
						    username: this.form.username,
						    password: this.form.password,
						    captcha: this.form.captcha,
						    uuid: this.uuid
						  }).then(function (data) {
						  	console.log(data);	
						    if (data.status==200) {
						  	  if(data.data.code==0){
			                 	 console.log(data.data.token);
			                 	 localStorage.setItem('token', data.data.token);//保存token，方便之后的页面用
			                   mui.toast('登陆成功') 
							   mui.openWindow({
							    url: 'list.html', 
							    id:'list'
							  });
			                } else {
			                  mui.toast(data.msg) 
			                }
			               }
						  })
				    },
				    getUuid() {
				      //用于生成uuid
				      function S4() {
				        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				      }
				      function guid() {
				        return (
				          S4() +
				          S4() +
				          "-" +
				          S4() +
				          "-" +
				          S4() +
				          "-" +
				          S4() +
				          "-" +
				          S4() +
				          S4() +
				          S4()
				        );
				      }
				      return guid();
				    }
                },
                //通过计算属性过滤数据
                computed:{
                	codeSrc: function() {
				      return baseUrl+"/captcha.jpg?uuid=" + this.uuid;
				    }
                }
            });
		</script>
	</body>

</html>

jxg1473819657

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
mui+vue微信版前后端分离手机端登录页面布局和调用数据

第一步：页面效果图如下，是一个很常用的页面第二：代码如下，页面非常少，没有用webpack和vue-li，用了最原始的方法&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;登录&lt;/title&gt; &lt;meta nam
复制链接

扫一扫