vue项目day01

迪丽热巴_女神
114 阅读5分钟

vue项目day01

目标：

  • 回顾vue基础知识
  • vant组件库的使用
  • 学习如何分析需求，实现功能
  • 随堂代码远程仓库地址：gitee.com/chenshaoshe…

自己做的时候可能会发现比较困难，这是比较正常，因为我们刚学完vue基础知识，所以应用起来还是有难度的，树立好正确学习观。

1、项目初始化

  • 直接使用脚手架项目开发

    • vue这个命令是如何得到 的？答：因为我们之前全局安装了@vue/cli这个包，只需要安装了这个包，我们就能够得到vue这个命令，那么我也就能够通过这个命令来下载脚手架项目。

      • 注：这个@vue/cli只需要全局安装一次即可，以后都可以直接使用vue命令（除非你换了电脑或者重装了系统）
    • vue create hm-project

  • 清除脚手架项目默认的欢迎界面等信息

    • src/assets/所有文件
    • src/components/所有文件
    • src/App.vue 里面的代码清除

  • 引入初始化样式

    • 在mian.js中引入预习资料中准备好的reset.less文件

    • import "./style/reset.less"

    • 下载less less-laoder

    • npm i less less-loader@5.0.0 -D
有些同学的下载可能出现报错，报错的同学怎么办呢？
答：重新下载最新的less-loader的版本，执行下面命令即可
npm i less less-loader -D

    • 引入全局图标库(app.vue中添加)

    • @import "http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css";

  • 下载必要的依赖包

    • npm i vant@2 axios vue-router@3

  • 关闭eslint，在vue.config.js中配置

module.exports = {
    lintOnSave: false
}

注意：写完配置之后，一定一定要重启项目才生效

  • 启动接口服务器

    • 直接双击“启动服务器.bat”文件即可

1653375839316.png

  • 注意：这个启动“接口服务器”的小黑窗是不能关闭，因为关闭的小黑窗，那么服务器也关闭了，也就请求不到数据了

  • 使用mac系统的同学，不能通过bat文件启动接口服务器的，需要自己打开终端，执行npm run start命令启动

  • 接口服务器地址：

    • http://192.168.77.34:3000 // 大家都可以访问
http://127.0.0.1:3000	 // 本机才可以访问

认识es6

1653399015411.png

2、登录（login.vue）

1、创建login.vue组件

2、配置路由

3、布局

  • 整体布局，直接从上课资料中复制过来

  • 输入框和按钮：直接使用vant组件中的组件来实现

    • 1、下载插件: npm i babel-plugin-import -D

    • 2、在babel.config.js添加中配置

      •   plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

    • 3、配置完成后重启项目，我们的配置才生效

    • 按钮组件

    • <van-button type="danger" icon="star-o" round block>登录</van-button>

4、实现功能

分析功能：

普通用户角度分析：进入网站，输入账号密码，点击登录按钮，登录成功跳转到首页。

程序员角度分析：获取用户输入的账号密码，给登录按钮绑定点击事件，并声明事件处理函数，事件处理函数中调用登录接口，并给接口传入账号密码，接口返回登录成功，跳转到首页，接口返回失败则弹出提示框。

根据分析拆解步骤：

  • 1、获取用户输入的账号密码，声明变量v-model双向绑定输入框

  • 2、给登录按钮绑定点击事件，并声明事件处理函数

  • 3、在函数中调用登录接口

    • 3-1、封装请求的基础路径，src/utils/reques.js
    • 3-2、封装接口函数，src/api/xxx.js
    • 3-3、在登录页面，引入接口函数，在点击登录的事件处理函数中调用。

  • 4、登录成功跳转首页，失败则弹出提示框。

  • 5、优化，调用接口之前，添加校验，校验账号密码是否为空。

    • 我们直接使用vant组件库中提供的校验

1653399249004.png /deep/ 样式穿透是less预处理器提供的语法

注意：样式穿透针对局部样式，也就是style标签上必须写上scoped属性样式穿透才生效。

1653398913999.png

1653399397105.png

1653399468293.png

1653399512547.png

1653399541488.png

3、注册（register.vue）

1、创建register.vue组件

2、配置路由

3、布局

4、实现功能

用户角度分析：进入页面，输入手机号码，昵称和密码，然后点击注册按钮，实现注册，跳转登录页面。

‘程序员角度分析：获取用户输入信息，绑定点击事件，调用注册接口，实现注册功能，注册成功跳转到登录页面，失败提示用户。

拆解步骤：

  • 1、获取用户输入信息，声明变量，v-model双向绑定输入框。
  • 2、给注册按钮，绑定点击事件，并声明事件处理函数
  • 3、封装接口函数
  • 4、在注册页面引入接口函数，然后事件处理函数中调用接口，完成注册功能
  • 5、判断注册成功跳转到登录页面，否则弹出提示框
  • 6、优化：调用注册接口之前，添加校验用户信息是否为空，只有校验通过才能进行注册

1653399626526.png

1653399656908.png

正则核验手机号

1653399682459.png

4、个人中心（personal.vue）

1、创建personal.vue组件

2、配置路由

3、布局

4、实现功能

1、个人信息的渲染
2、退出
1、个人信息的渲染

用户角度分析：用户进入个人中心页面，立刻看到个人信息。

程序员角度分析：在created中调用“获取用户信息”的接口，请求并保存数据，然后根据数据进行渲染。

拆解步骤：

  • 1、封装 “获取用户信息” 的接口函数

  • 2、在个人中心页面吗引入接口函数，然后在created中调用接口函数，请求并保存数据

  • 3、根据数据进行渲染

2、退出

分析：用户点击退出按钮，跳转到登录页面

拆解步骤：

  • 1、给按钮绑定点击事件，并声明事件处理函数
  • 2、在事件处理函数中清除登录时保存的token和用户ID
  • 3、最后跳转到登录页面

1653399715382.png

1653527017663.png

1653528072869.png

1653552095327.png

1653535257212.png

页面权限-添加导航守卫

导航守卫（路由守卫）是什么？答：就是路由跳转之前会触发的一个函数，这个函数就是beforeEach。

黑马头条项目中：个人中心必须要登录后才能访问，就是可以使用到导航守卫来实现此功能

在src/router/index.js添加如下代码即可

router.beforeEach((to, from ,next)=>{
    let token = localStorage.getItem("75-token")
    // 当用户跳转的页面为“个人中心”且 没有登录的时候 ，跳转到登录页面，否则直接放行
    if(to.path == "/personal" && !token){
        next("/login")
    }else{
        next()
    }
})
avatar
文章
阅读
粉丝