# dsj-project

**Repository Path**: zhou9898/dsj-project

## Basic Information

- **Project Name**: dsj-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-10
- **Last Updated**: 2021-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Git 使用

```bash
git init # 初始化仓库

git add . # 添加到暂存区

git commit -m 提交信息 # 提交到本地仓库

# 远端新建一个仓库

git remote add origin 你的原创仓库的地址（https://github.com/ifer-itcast/big-thing-front2.git）

git push -u origin master # 提交到远端的 master 主分支

git checkout -b login # 创建 login 分支并切换到 login 分支

git branch # 查看当前处于哪个分支

git branch -a # 查看远端分支

git checkout login # 切换到 login 分支，本地有就用本地的，本地没有从远端拉过来再切换
```

## 登录页面的基本绘制

1、路径都要以 / 开头，代表根目录

2、注意样式的引入顺序，先第三方的再自己的

3、layui-main 要在文档对应的位置找到

https://github.com/ifer-itcast/big-thing-front2

https://github.com.cnpmjs.org/ifer-itcast/big-thing-front2

## 注册/登录的流程

1、对表单数据进行预校验

```js
const form = layui.form;
form.verify({
    // 规则名字：数组[正则，当不符合时的报错信息]
    pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    repwd: function (value) {
        // 通过形参拿到的是确认密码框中的内容
        // 还需要拿到密码框中的内容
        // 然后进行一次等于的判断
        // 如果判断失败，则 return 一个提示消息即可
        var pwd = $('.reg-box [name=password]').val();
        if (pwd !== value) {
            return '两次密码不一致！';
        }
    }
});
```

2、收集表单数据并通过接口提交到后端

```js
// #1 监听表单的提交事件
$('#form_reg').on('submit', function (e) {
    // #2 阻止表单的默认提交的行为
    e.preventDefault();
    // #3 收集数据
    const data = {
        username: $('#form_reg [name=username]').val(),
        password: $('#form_reg [name=password]').val()
    };
    // #4 通过 AJAX 提交数据
    $.post('http://api-breakingnews-web.itheima.net', data, function (res) {
        if (res.status !== 0) {
            return console.log('注册失败', res.message);
        }
        console.log('注册成功！');
    });
});
```

3、根据用户名和密码进行登录

```js
// #1 监听登录的表单提交事件
$('#form_login').on('submit', function (e) {
    // #2 阻止默认行为
    e.preventDefault();
    // #3 收集数据并调用登录接口提交数据
    $.ajax({
        url: 'http://api-breakingnews-web.itheima.net/api/login',
        method: 'POST',
        // 快速获取表单中的数据
        data: $(this).serialize(),
        success: function (res) {
            if (res.status !== 0) {
                return layer.msg('登录失败！');
            }
            layer.msg('登录成功');
            // #4 存储 token 到本地
            // token（令牌），后续有一些需要权限的接口要求我们必须带上这个 token
            localStorage.setItem('token', res.token);
            // #5 跳转到后台主页
            location.href = "/index.html";
        }
    });
});
```

==晚上最基本的目标：==注册用户功能；根据前面注册的用户名和密码进行登录；测试能否用前面拿到的 token 去调用获取文章分类的接口或获取用户信息的接口！