2020-12-23

头条项目第二天

开发任务

1.登陆页面布局
2.注册页面布局
3.封装输入框组件
4.封装按钮组件
5.引入 axios 库实现 ajax 请求
6.发送请求实现登陆
7.发送请求实现注册
8.引入 vant-ui 库实现错误弹窗

一. 静态页面

登录思路

• 登录页面布局
• 组件封装
• 数据验证

* 页面布局

1. 创建登录页

1.进入views文件夹
2.创建Login.vue 单文件组件作为页面的文件
3.注册路由，在router/index.js里面先引入组件然后配置
4.可以直接输入url或者在home添加链接转

2. 登录页面布局

注意长度单位需要以 vw 这个相对单位来写
计算方式是
目标像素 / 360 * 100 = 结果 vw 值

<template>
<div class="container">
<div class="btnClose">
<span class="iconfont iconicon-test"></span>
</div>
<div class="logo">
            <span class="iconfont iconnew"></span>
        </div>
        <div class="inputWrapper">
            <input type="text">
        </div>
        <div class="inputWrapper">
            <input type="text">
        </div>
        <div class="btnSubmit">
            <button>登录</button>
        </div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.container {
    padding: 24/360*100vw;
}
.btnClose {
    .iconfont {
        font-size: 28/360*100vw;
    }
}
.logo {
    text-align: center;
    .iconfont {
        font-size: 126/360*100vw;
        color: #d81e06;
    }
}
.inputWrapper {
    padding-bottom: 16/360*100vw;
    input {
        width: 100%;
        height: 48/360*100vw;
        line-height: 48/360*100vw;
        font-size: 18/360*100vw;
        border: none;
        outline: none;
        border-bottom: 1px solid #333;
    }
}
.btnSubmit {
    padding-top: 26/360*100vw;
    button {
        width: 100%;
        // height: 48/360*100vw;
        line-height: 48/360*100vw;
        font-size: 18px;
        background: #cc3300;
        color: white;
        border: none;
        outline: none;
        border-radius: 24/360*100vw;
    }
}
</style>

## ```封装输入组件
创建组件
1.以前都是局部或者全局组件，现在用单文件组件
2.在components文件夹添加一个当文件组件
3.引入到登录页
4.登录页注册子组件
5渲染
**在组件中编写书输入框样式和排版布局
绑定数据**
placeholder是用来显示组件内的占位文字
type是用来显示组件内的input type
rule
因为需要校验数据的合法性，所以应该将input双向绑定到一个data中监听input的绑定的值，每次输入触发，检查数据的 合法性。
err_message
提供一个错误的提示信息，方便组件提示用户

## 动态的class
需求：用户正在输入时，当输入出错时，自动变更input的css class然后边框变成红色作为警告
:class值如果是对象的话，key是class的名称，如果这个key的value值是ture时候就往dom上加上该class

```javascript
:class='{success:state==="success",error:state==="error"}'

实现过程：
1.每次判段数据输入合法性的结果存放在data中

watch：{
inputValue（）{
const reg=new RegExp(this.rule)
console.log(reg)
if(！reg.test(this.inputValue)){
this.isValid=true
consloe.log('通过了校验')
}else{
this.isValid=false
consoe.log(this.err_message)
}
}

}

2在input根据data中的isValid数据，动态添加class类名

<input :type="inputType"
:placeholder="palceholder"
v-model='inputValue'
:class='{success:isvalid,error:isvalid}'/>

css当中声明error的样式

.error{
border-color:red;
}

优化输入框用户体验

如果 正在输入当中，即使出错也不过是边框变色而已
一旦输入完毕，如果错误，就应该弹出错误信息（监听blur失去焦点事件）

封装按钮组件

1.创建子组件
2.在父组件引入/注册/渲染
3.父传子，将按扭文字传进去
4.子传父，每次当点击触发的时候，通知父组件进行后续动作

<template>
<div class="btnwrapper">
<button @click="handeClick">{{btnText}}</button>
</div>
</template>
<script>
export default{
props:['btnText'],
methods:{
handlerClik(){
console.log("按钮子组件被点击")
this.$emit("clicked")
}
}
}
</script>

点击按钮的时候, 应该发送请求, 但是数据从哪里来?

按钮子组件，他告诉父组件需要处理啦
父组件这时候应该发送请求
发送请求就需要数据，问题在于我们现在所有的输入框都只是在输入框子组件内部父组件还没有接收任何数据，所以需要修改输入框组件
1.输入框组件数据被改变时，需要主动通知父组件(带上数据作为参数)
2.父组件接收到这个事件，需要临时把接收到的数据存在自己的data里面
3.当按钮被点击的时候，可以从父组件当中获取到这些数据，发送请求

利用组件,快速实现注册页面布局

目标：注册页面
实现方式：布局logo+利用组件
小结：组件复用
总结
1.如何创建一个页面
views文件夹创建文件
配置路由
增加连接router-link跳转
2.如何封装一个组件
components文件夹创建单文件组件
在父组件引入/注册/渲染
3.父组件如何传递数据给子组件
1父亲件标签中传值
2子组件props接收
3使用数据(渲染/逻辑都可以)
4.子组件如何传递数据给父组件
1.子组件手动触发this.$emit
2.父组件监听
3.父组件进行逻辑处理

二. 添加第三方库

vant-ui组件库

以前我们用过 bootstrap 普通组件库

另外有一些组件库, 是专门为了 vue 开发

• 饿了么 Element UI (针对 pc 版)
• Vant-UI ( 有赞公司 这个主要是针对移动端)
• 下载
• 官方地址(https://youzan.github.io/vant/#/zh-CN/intro)
• 现在我们用这些库，全部都是通过npm安装运行的（所有这样安装的第三方库 都会在node_modules里面）

npm install vant --save

配置
全局引入所有组件
注意：还有其他的引入方式，各有优点，全局引入好处是只引入一次，就可以在任何页面中用，缺点是用不到的组件也会打包进来

src/main.js

// 1. 导入组件库
import Vant from 'vant'
// 2. 引入组件 css 文件
import 'vant/lib/index.css'
// 3. 注册 vant ui 组件库的标签
Vue.use(Vant)