课程名称：Java支付全家桶 企业级各类支付手段一站式解决方案
课程章节：5-3 实现用户登陆的前端模块
主讲老师：神思者
课程内容：
今天课程学习的主要知识点内容包括：
使用 Uniapp 创建普通web项目、导入网页模板、前端登录页面的开发。
课程收获：
1、使用 Uniapp 创建普通web项目：文件 -》 新建 -》 项目 -》普通项目 -》 空白项目；
2、导入网页模板：复制网页模板里面的文件到上一步新建的空白项目中；
3、前端登录页面的开发，主要收获的内容有：
（1）引入 form 标签，主要是为了使用 html5 的表单验证功能（require，pattern）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css" />
</head>
<body>
<div class="panel">
<form id="loginForm" method="post">
<h2>XXX电商系统</h3>
<div class="row">
<label>用户名</label>
<input type="text" id="username" name="username" class="input" placeholder="输入用户名" value="mark"
required="required" pattern="^[A-Za-z0-9]{3,20}$" />
</div>
<div class="row">
<label>密码</label>
<input type="password" id="password" name="password" class="input" placeholder="输入密码" value="123456"
required="required" pattern="^[A-Za-z0-9]{6,20}$" />
</div>
<div class="row">
<input type="submit" value="登陆" class="btn" />
<input type="reset" value="重置" class="btn" />
</div>
</form>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/config.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="login.js"></script>
</body>
</html>
（2）创建全局变量 config.js
let baseUrl = "https://haiten.virs.top/renren-fast";
let wxUrl = {
login: baseUrl + "/app/user/login"
}
（3）jquery.js 的使用，就绪函数的写法，以及阻止表单的 submit 提交函数：
$(function() {
$("#loginForm").submit(function() {
return false;
})
})
（4）使用 ajax 向后端项目发起请求，主要核心代码如下：
$.ajax({
url: wxUrl.login,
type: "post",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
"username": $("#username").val(),
"password": $("#password").val()
}),
success: (resp) => {
if (resp.code === 0) {
let token = resp.token;
localStorage.setItem("token", token);
console.log("success");
}
}
})
（5）post 提交 json 数据，需要使用 JSON.stringIf() 函数对使用的 data 进行格式转换；
（6）在前端应用保持 token，可以使用 localStorage 缓存前端数据：
localStorage.setItem("token", token);
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦