案例-用户登录-长度判断

案例-用户登录-长度判断#

以黑马头条项目为例

需求：点击登录按钮，判断手机号和验证码长度

步骤：

1. 准备用户登陆页面
2. 编写核心js逻辑代码
3. 打包并手动复制网页到dist下，引入打包后的js，运行

核心：Webpack打包后的代码，作用在前端网页中使用

准备工作#

项目文件夹： heima_TouTiao

1. 初始化npm init -y，生成package.json
2. 准备资源文件

   准备软件包：check.js放在src/utils

   准备页面文件：login.html放在public/login

   准备业务逻辑代码：index.js放在src/login

3. 下载webpack和webpack-cli到当前项目中（版本独立）

   npm i webpack webpack-cli --save-dev

   生成package-lock.js

4. 准备打包配置文件webpack.config.js

   配置入口为src/login/index.js

   配置出口为public/login/index.js

   记得出口添加clean:true

准备工作完成后开始编写业务逻辑代码

业务逻辑#

首先在业务逻辑代码即src/login/index.js中导入之前写好的软件包check.js中导出的模块对象

import { checkPhone, checkCode } from '../utils/check.js';

之后编写业务逻辑：

// 3.2 编写核心 JS 逻辑代码
document.querySelector('.btn').addEventListener('click', function () {
    const phone = document.querySelector('.login-form [name=mobile]').value;
    const code = document.querySelector('.login-form [name=code]').value;
    if (!checkPhone(phone)) {
        console.log('手机号长度必须是11位');
        return;
    }
    if (!checkCode(code)) {
        console.log('验证码长度必须是6位');
        return;
    }
    console.log('提交到服务器登录...');
});

完成之后即可打包npm run build

打包效果

将页面文件login.html复制到dist下，并引入打包好的index.js测试效果