day01.md · yyt-do/hmtoutiao

# 01-黑马头条项目

* 在线网址：http://heimazxk.gitee.io/hmnews/#/home

![1625878112797](day01.assets/1625878112797.png)![1625878149820](day01.assets/1625878149820.png)![1625878166523](day01.assets/1625878166523.png)![1625878660904](day01.assets/1625878660904.png)

## 1.1-项目功能演示

## 1.2-使用vue ui创建项目

* 1.创建项目：`大家可以创建自己的项目名，不一定要与老师一致`

![1624032232805](day01.assets/1624032232805.png)

* 2.手动配置
* ![1624032296046](day01.assets/1624032296046.png)

* 3.创建项目

![1624032333939](day01.assets/1624032333939.png)

* 4.创建成功之后，删除多余的代码`views中的两个页面组件`，`components文件夹的组件`,`App.vue的代码`

![1624728323141](day01.assets/1624728323141.png)

* 5.关闭ESLint代码检查

![1624728399825](day01.assets/1624728399825.png)

## 1.3-安装项目需要的第三方包

* 1.安装`vant `
* 2.安装`axios`
* 3.安装`vue-axios`

![1624728570134](day01.assets/1624728570134.png)

### 1.2.1-Vant按需导入

* 官网文档：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#yin-ru-zu-jian
* vant有两种导入方式
  * 1.全部导入 ： 一次性导入vant中所有的组件
    * 好处：用起来方便，只需要`main.js`中导入一次
    * 弊端：会增加文件体积，很多用不到的也导入了
  * 2.按需导入：用到vant什么组件，就导入什么
    * 好处：不浪费资源，用什么取什么
    * 弊端：导入的时候麻烦，每一个页面中都要导入当前页面用到的组件

* 1.安装`babel-plugin-import`插件

![1624729576963](day01.assets/1624729576963.png)

![1624729773683](day01.assets/1624729773683.png)

* 2.配置插件

![1624730097194](day01.assets/1624730097194.png)

* 3.测试插件

![1624730164174](day01.assets/1624730164174.png)

### 1.2.2-vant按需导入的全局封装

* 如果我们既想要`vant按需导入节省资源`，又想要`不用每一个页面都导入那么麻烦`
* 那么，我们就可以对按需导入做一个全局封装

* 1.在`src`目录中新建一个`utils`文件夹，一般用于存放整个项目的一些全局配置。例如`vant.js`按需导入配置， `axios.js`项目网络中间层

![1624731203019](day01.assets/1624731203019.png)

* 2.在`main.js`中导入`vant.js`
  * `@`符号相当于是src的相对路径,等价于`./src`

![1624730948468](day01.assets/1624730948468.png)

* 3.测试是否全局配置成功

![1624731275059](day01.assets/1624731275059.png)

## 1.4-移动端rem适配环境搭建

### 1.3.1-vant使用rem

* 官网文档：[vant使用rem](https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage#rem-bu-ju-gua-pei)

![1624731599457](day01.assets/1624731599457.png)

### 1.3.2-lib-flexible作用：自动设置rem基准值为屏幕1/10（类似于之前的rem.js文件）

* 官网文档：https://github.com/amfe/lib-flexible

* 1.安装插件：

![1624731818200](day01.assets/1624731818200.png)

* 2.在`main.js`中导入插件

![1624732120908](day01.assets/1624732120908.png)

* 3.测试插件

![1624732161970](day01.assets/1624732161970.png)

### 1.3.3-postcss-pxtorem插件作用：css后处理器，自动把px转成rem（类似于以前的cssrem插件）

* 官方文档：https://github.com/cuth/postcss-pxtorem

* `css预处理`：如less，sass 。 浏览器不能直接识别less文件，需要先处理成css文件，然后才能在html中使用
  * less代码 -> `css预处理` -> css代码 -> `浏览器解析` ->  渲染页面
* `css后处理器`:  我们写的css代码，由于做移动端rem适配。因此不能写成px，要写成rem单位。
  * 以前的做法： 我们写px单位，然后cssrem帮我们计算成rem，然后我们代码就写`转换后的rem单位`
  * css后处理器：我们直接写`css单位`，postcss-pxtorem会自动帮我们转成`rem单位`，并最终交给浏览器渲染
    * css代码px单位 -> `浏览器解析` -> `css后处理` -> css代码px单位转成rem单位 -> 渲染页面(最终渲染的是rem单位)   
* 举个小例子介绍预处理与后处理的不同
  * 预处理： 去香港购物，先把人命币换成港币后使用
  * 后处理： 去香港购物，直接刷信用卡。银行自动帮我们转成港币结算。
    * 区别就是：预处理需要我们先转成港币（cssrem代码要先写px转成rem），而后处理直接刷卡，银行自动按照港币汇率扣款。（postcss-pxtorem，代码写px，浏览器编译的时候自动帮我们转成rem）

![1624736053801](day01.assets/1624736053801.png)

* 1.安装postcss-pxtorem

![1624732408899](day01.assets/1624732408899.png)

* `细节注意点` ： 目前最新版本的postcss-pxtorem的版本是`6.0.0`,这个版本太高了。目前脚手架运行会报错。因此我们需要安装稍微低一点点的版本。
  * 如果你是使用命令行安装
    * `npm i 包名` : 默认会安装这个包最新版本
    * `npm i 包名@版本号` ： 安装指定版本。 例如`npm i postcss-pxtorem@5.1.1`
  * 如果你是使用`vue ui`来安装依赖，这个工具默认只能安装最新版本。 如果想要安装指定版本，需要你去修改`package.josn文件`

![1624733774836](day01.assets/1624733774836.png)![1624733855177](day01.assets/1624733855177.png)![1624733923986](day01.assets/1624733923986.png)

* 2.根据设计稿配置你的rem基准值

![1624732528592](day01.assets/1624732528592.png)

```javascript
// postcss.config.js
module.exports = {
    plugins: {
      'postcss-pxtorem': {
        //设置rem基准值，根据你的设计稿来。 750设计稿 -> 1rem=37.5px
        //这个时候，当我们代码写任意px，这插件就会帮我们转成rem .  例如你写37.5px就会变成37.5/37.5 = 1rem
        rootValue: 37.5,
        //设置对什么标签生效，默认所有标签
        propList: ['*'],
      },
    },
  };
```

## 1.5-[知识点]git-remote用法（将本地文件添加到git远程）

[菜鸟教程-git remove](https://www.runoob.com/git/git-remote.html)

* 我们自己项目流程
  * （1）`git init` : 生成.git仓库文件
    * 执行git命令，前提要有git仓库
  *  (2) `git remote add origin git地址`
    * 将你的项目与远程git仓库建立关联
  * (3) `git add .`
    * 添加修改信息
  * (4)`git commit -m"项目初始化"`
    * 确认修改信息
  * (5)`git push` : 报错，提示你要提交到哪一个分支
    * 提示执行正确命令: `git push --set-upstream origin master`
* 同学们如何获取老师每一天代码
  * 第一次：`git clone 老师仓库地址`
    * 完整下载老师远程仓库所有文件
  * 之后每一天：`git pull`
    * 拉取老师每一天push的代码

* 1.git remote作用 ： 将本地的项目绑定到远程仓库
  * 以前远程仓库：先在gitee创建，然后克隆写代码
  * git remote :  直接讲本地项目绑定到远程仓库
* 2.git remote使用流程
  * 第一步：`git remote add origin git地址`
    * 把远程仓库的地址 保存到 本地一个叫做 `origin`的变量中
  * 第二步：`git push origin master`
    * 把本地的 `master`分支推送到`origin`保存的地址上,保存到远程的`master`分支上
* 3.注意点： 如果origin已经被占用，删除origin即可
  * 查看本地的变量:`git remote`
  * 删除指定变量:`git remote remove 变量名`
  * 重新添加变量:`git remote add 变量名 值`

## 1.6-[知识点]分支操作

* 1.新建分支：`git branch 分支名`
  * 例如： git branch login
  * 查看分支： `git branch`
* 2.切换工作分支:`git checkout 分支名`
  * 例如：git checkout master
* 3.合并分支:  `git merge 分支名`
  * 需要先切换到主分支才能合并
  * 合并分支只是本地合并，远程仓库上主分支还是没有代码的。合并之后还需要推送到主分支
* 4.删除分支：`git branch -d 分支名`
* 5.创建+切换分支：`git checkout -b 分支名`
* 6.推送分支：`git push -u origin 分支名`
* 7.删除远程仓库的分支：`git push origin --delete 分支名`

# 02-登录页面

![1625877729911](day01.assets/1625877729911.png)

## 1.1-配置路由

![1624817477839](day01.assets/1624817477839.png)

![1624817860669](day01.assets/1624817860669.png)

## 1.2-[知识点]路径别名@

* 1.项目开发中，当我们文件嵌套很多之后，在读取的时候要写很多次`../`,比较麻烦，可以通过`@`符号来简写
* 2.`@`符号 ： 等同于 `/src`的简写
* 3.语法
  * 路径中直接`@/xxx`即可
  * 比如在`/src/views/login.vue`中的
    * `/src/view/login.vue`
    * `@/view/login.vue`
* 4.注意点：
  * 使用`../`的写法编辑器有提示
  * 使用`@`写法编辑器没有提示
  * 可以先用`../`来写,最后改为`@`
  * 你可以不用`@`,但是你要知道`@`的意思
  * 初期很容易漏`@`后面的/

## 1.3-vant-navbar顶部栏

![1624817988186](day01.assets/1624817988186.png)

* 官网文档：https://vant-contrib.gitee.io/vant/#/zh-CN/nav-bar

* 1.在`@/utlis/vannt.js`中导入组件

![1624817799955](day01.assets/1624817799955.png)

* 2.在`login.vue`中使用组件

![1624817896048](day01.assets/1624817896048.png)

![1624819113273](day01.assets/1624819113273.png)

* 3.修改组件样式
  * 这个&符号作用，去除选择器之间的空格。 把后代选择器变成了并集选择器

![1624817910324](day01.assets/1624817910324.png)

### 知识点验收

1. 组件解析之后,还是`van-nav-bar`这个标签吗?
2. 如果要覆盖样式如何找到元素的选择器呢?
   1. 点击右键检查元素
3. 覆盖样式的时候需要注意什么问题呢？
   1. css权重

## 1.4-vant-filed输入框组件

![1624818424684](day01.assets/1624818424684.png)

* 官网文档：https://vant-contrib.gitee.io/vant/#/zh-CN/field

* 1.在`@/utlis/vant.js`中导入组件

![1624818108025](day01.assets/1624818108025.png)

2.在`login.vue`中使用组件

* `required`:设置表单必填星号
* `type="tel"`:调起手机上面的数字键盘（需要真机才会生效）

![1624818473416](day01.assets/1624818473416.png)

## 1.5-vant-form表单组件

* 表单组件作用：可以对输入框进行一些验证

* 官网文档：https://vant-contrib.gitee.io/vant/#/zh-CN/form
* 按钮组件文档：https://vant-contrib.gitee.io/vant/#/zh-CN/button

1.在`@/utlis/vannt.js`中导入组件

![1624818698266](day01.assets/1624818698266.png)

2.在`login.vue`中使用组件（官网CV即可）

* `<van-form @submit="onSubmit">` : 给表单绑定提交事件
* `<van-button round block type="info" native-type="submit"` : 点击按钮触发表单的提交事件
* `onSubmit(values) {}` : 自动获取这个表单中每一个输入框的`name`和`value`放入values对象中
  * 这个方法触发前提条件： 表单中输入的内容需要通过rule校验规则
* `:rule` : 添加校验规则
  * require : 必填
  * message : 提示信息
  * pattern : 校验函数（支持正则）
    * message:校验失败后的提示信息

![1624981254078](day01.assets/1624981254078.png)

![1624819414215](day01.assets/1624819414215.png)

```html
<div>
    
    <van-nav-bar
      class="my-nav-bar"
      title="登录"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-form @submit="onSubmit">
      
      <van-field
        v-model="phone"
        required
        label="手机号"
        type="tel"
        placeholder="请输入手机号"
        name="mobile"
        :rules="[
          { required: true, message: '请填写手机号' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式不对'
          }
        ]"
      />
      <van-field
        v-model="password"
        required
        label="验证码"
        placeholder="请输入验证码"
        name="code"
        :rules="[
          { required: true, message: '验证码没有写哦!' },
          { pattern: /\d{6}/, message: '验证码格式不对' }
        ]"
      />
      <div style="margin: 16px;">
        <van-button 
        round 
        block 
        type="info" 
        native-type="submit"
        >提交</van-button
        >
      </div>
    </van-form>
  </div>
```

# 03-axios网络中间层封装

## 1.1-axios的create方法使用

* 官方文档：http://www.axios-js.com/zh-cn/docs/#axios-create-config

![1624814869993](day01.assets/1624814869993.png)![1624815098403](day01.assets/1624815098403.png)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      /* 
        1.以前的做法 ： 将axios挂载到Vue构造函数的实例中  Vue.prototype.$axios = axios
            1.1 解决什么问题 ： 每一个组件(vue实例)可以通过原型链直接访问axios,而无需用一次导入一次
            1.2 未解决什么问题 ： 每一个接口的地址、参数还是要在组件内部写，不便于维护
                * 之前大事件封装一个http.js网络中间层来处理整个项目所有接口，维护起来很方便

2.如何在vue项目中使用axios封装网络中间层
            const instance = axios.create()
                作用1 ： 全局配置axios，如基地址，网络超时等配置
                作用2 ： 得到一个自定义axios对象
                    * axios.create()相当于创建了一个包含全局配置的axios的副本
                    * instance与axios不是同一个对象，instance多了全局配置
                    * 为什么不直接使用axios.defaults来设置全局配置呢？
                      * 原因：axios.defaults只是全局配置，不能做到将项目所有接口封装到模块中（不方便模块化开发）
        */

const instance = axios.create({
        baseURL: 'https://autumnfish.cn/', //设置基地址
        timeout: 10000 //设置网络超时，超过10秒直接作废
        // headers: { 'X-Custom-Header': 'foobar' }//自定义请求头
      })

console.log(instance)

//封装接口

//1.无参数接口
      function getHots () {
        //instance()返回值是一个promise对象 ： axios底层就是promise处理异步ajax
        return instance({
          url: '/search/hot',
          method: 'get'
        })
      }
      //调用接口
      getHots()
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(res)
        })

// 2.有参数接口 ： 这里形参名字跟实际接口的参数名一样，就可以使用解构赋值了
      function searchMusic ({ keywords }) {
        return instance({
          url: '/search',
          method: 'get',
          params: {
            keywords//keywords:keywords   
          }
        })
      }

// 调用 有参数的方法
      searchMusic({ keywords: '好日子' }).then(res => {
        console.log('搜索结果')
        console.log('res:', res)
      })
    </script>
  </body>
</html>

```

### 知识点验收

* `create`方法创建的实例对象和原始的`axios`是同一个对象吗?

* 使用`create`创建axios实例和`axios全局配置`有什么不同？

## 1.2-在项目中封装网络中间层(使用最新基地址)

* 推荐使用基地址：http://toutiao.itheima.net

* 1.在`@utils`文件夹中新建一个网络中间层`axios.js`
  * 基地址版本1：http://toutiao-app.itheima.net/
    * 这个基地址数据所有人都可以修改
    * 这个基地址文章列表接口是v1_1
    * 这个基地址是老版本，可能会有一些问题
  * 最新基地址： http://toutiao.itheima.net/
    * 这个基地址文章列表接口是v1_0

![1625408127349](day01.assets/1625408127349.png)

![1624902899672](day01.assets/1624902899672.png)

* 2.在`views`文件夹下，建一个子文件夹叫做`user`
  * 作用：项目开发中，我们可能会有很多个页面。如果全部放到views这一级，维护起来不方便。我们可以根据项目整体功能，每一个模块建立一个文件夹。

![1624902704034](day01.assets/1624902704034.png)

* 3.此时要注意一下，我们之前路由的路径是：`import login from '@/views/login.vue'`
  * 需要修改为：`import login from '@/views/user/login.vue'`

![1624902440002](day01.assets/1624902440002.png)

* 4.在`user.js`中封装登录ajax请求

```javascript
/* 导入axios工具包，这个模块封装 ‘用户模块’ 所有的ajax请求 */
import instance from '@/utils/axios.js'

//1.登录接口
const userLogin = (mobile,code)=>{
    return instance({
        url:'/v1_0/authorizations',
        method:'post',
        data:{mobile,code}
    })
}

//导出接口
export {userLogin}
```

![1624902785723](day01.assets/1624902785723.png)

* 5.在`login.vue`中导入封装的`user.js`，然后发送请求

```html
<script>
//导入网络中间层
import {userLogin} from '@/views/user/user.js'
export default {
  data () {
    return {
      phone: '13912345678',
      password: '246810'
    }
  },

methods: {
    /*
      1. values 是一个对象
      2. key 是表单中输入元素的name属性
      3. 表单校验通过之后会触发的回调函数
    */
    onSubmit (values) {
      console.log('submit', values)
      //发送登录请求
      userLogin(values.username, values.password).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
```

![1624902841194](day01.assets/1624902841194.png)

### 知识点验收

1. 打开组件之后是否可以立刻找到当前组件调用了什么接口?

2. 如果接口需要调整，如何快速定位代码？

## 1.3-使用解构赋值传参

* 思考：使用解构赋值传参有什么好处？

![1624903531422](day01.assets/1624903531422.png)

# 04-第一天问题总结

* 1.来自某班级某学生的疑问：`坤哥可以帮忙总结一下导包吗? 项目中有from接一个名字的：import Vue from 'vue' 有from接路径的：import router from './router' 有不带from直接写一个名字的：import 'amfe-flexible' 有不带from单独一个路径的：import '../src/utils/vant.js' 有点分不清什么时候用哪一种`
  * import `变量名` from `文件路径或文件名`这个语法会做两件事
    * 第一件：执行from后面文件的代码
    * 第二件：得到from后面文件中的导出对象
  * 什么时候写`文件名`，什么时候写`文件路径`
    * 如果导入的是`node_module`中的包，则只需要写`文件名`, vue会自动去node_module中查找
    * 如果导入的是`自己写的文件`,则需要写`文件路径`
  * 什么时候写`import 文件路径`
    * 当我们只是希望执行这个文件里面的js代码，而不想得到这个文件中导出的对象
      * 如：导入 css文件， 我们只需要执行这个css里面代码即可
      * 如：导入我们封装的`@/utils/vant.js`，也只是希望这个文件代码在main.js中被执行

* 2.来自某班级某学生的疑问：`导包导入头晕啊....index vant main router 有点搞不清楚在哪写`
  * router必须要在main.js中导入，因为需要挂载到根组件App.vue
    * 但是代码全部写在main.js中会导致main.js的代码很多，所以我们可以借助模块化语法。 把路由代码写在`@/router/index.js`中，然后导出到main.js中挂载
  * vant导入所有组件，必须要在main.js中导入。因为这是项目入口文件
  * vant按需导入，可以在哪个页面用就在哪个页面导入。但是这样太麻烦，我们可以直接在main.js中导入，这样其他页面就需要再单独导入
  * `最终总结`：本质还是全局与局部的区别
    * 如果希望`全局`：任何组件都能使用，就要在main.js中执行
      * 写在其他文件，在main.js中导入，本质还是在main.js中解析执行
    * 如果希望`局部`: 在什么组件使用，就在什么组件写

yyt-do/hmtoutiao

简介

发行版

贡献者

近期动态

yyt-do/hmtoutiao .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

yyt-do/hmtoutiao