【九月打卡】第6天 Java支付全家桶企业级各类支付手段一站式解决方案（5-3）-原创手记-慕课网

课程名称：Java支付全家桶企业级各类支付手段一站式解决方案

主讲老师：神思者

课程内容：

今天课程学习的主要知识点内容包括：
使用 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 src="js/jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="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);

【九月打卡】第6天 Java支付全家桶 企业级各类支付手段一站式解决方案（5-3）

课程内容：

课程收获：

【九月打卡】第6天 Java支付全家桶企业级各类支付手段一站式解决方案（5-3）