面经pc端项目

发布于:2023-09-16 ⋅ 阅读:(50) ⋅ 点赞:(0)

创建项目

安装脚手架-----创建项目------选择自定义

sass基础语法

https://www.sass.hk/

sass语法有两个:sass(旧) scss(新)

1.scss语法

和less语法类似,支持嵌套,支持变量…

scss: $变量名

less: @变量名

$color:orange;
.box{
  width: 400px;
  height: 400px;
  border: 2px solid $color;
  a{
    color: $color;
  }
}

sass(旧)和stylus类似,需要去掉; 和 {}

<style lang="sass" scoped>
$color:orange
.box
  width: 400px
  height: 400px
  border: 2px solid $color
  a
    color: $color

</style>

element-ui组件库

链接: https://element.eleme.cn/#/zh-CN/component/installation

axios二次封装–api

storage封装

登录模块

1.构建登录基本架子

控制组件的样式

  • 给组件加类名,添加的类名会直接渲染到组件的根元素上
<el-card class="login-card">
  • 通过组件标签名作为类名控制样式

组件的根元素,有一个和组件名同名的类名

<el-card></el-card>     .el-card
  • 渗透选择器

加上scoped后,所有的样式只会作用于当前组件模板

但是 有时候我们也需要向下渗透,影响内组件内部的一些内容样式—深度作用选择器

 去掉scoped
 (1) less   /deep/  选择器前面添加  /deep/
 (2) scss  ::v-deep 选择器前面加  ::v-deep

2.美化样式

<style lang="scss" scoped>
// 加上scoped后,所有的样式只会作用于当前组件模板
// 但是 有时候我们也需要向下渗透,影响内组件内部的一些内容样式---深度作用选择器
//去掉scoped
// (1) less   /deep/  选择器前面添加/deep/
// (2) scss  ::v-deep 选择器前面加  ::v-deep
.login-page{
  min-height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-card{
  width: 450px;
  margin: 0 auto;
  ::v-deep .el-card__header{
    height: 80px;
    line-height: 40px;
    text-align: center;
    background-color: #727cf5;
    color: #fff;
    font-size: 18px;
  }
  }
  .tc{
    text-align: center;
  }
}
</style>

3.表单基础校验

在向后端发请求,调用接口之前,我们需要对所要传递的参数进行验证,把用户的错误扼杀在摇篮之中

element-ui的校验

  • el-form model属性 rules规则
  • el-form-item 绑定prop属性
  • el-input 绑定v-model

正则校验

规则 说明
required 非空校验
pattern 正则表达式 校验手机号格式 邮箱格式
 password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{5,11}$/, message: '长度在5~11个字符', trigger: ['blur', 'change'] }
        ]

4.提交表单和重置功能

每次点击按钮,进行ajax登录钱,对整个表单内容校验,通过校验才发送请求

//ref
<el-form :model="formData" :rules="rules" ref="loginRef">
//添加点击事件
<el-form-item class="tc">
    <el-button type="primary" @click="login">登录</el-button>
    <el-button @click="reset">重置</el-button>
</el-form-item>
//调用组件方法  验证
methods: {
    login () {
      //   登录的时候 需要先校验 校验通过才能发请求
      // 校验 通过ref和$refs 拿到el-form组件  调用组件的方法
      // console.log(this.$refs.loginRef)
      this.$refs.loginRef.validate((isOk) => {
        if (isOk) {
          console.log('成功')
        } else {
          console.log('error ')
          return false
        }
      })
    },
    reset () {
      this.$refs.loginRef.resetFields()
    }
  }

5.登录功能

封装API登录请求模块,vuex构建user模块存token

  • token存入vuex的好处 ,易获取 响应式
  • vuex需要分模块----user模块
  • vuex刷新会重新初始化,缓存的数据会丢失----本地存储也要存
    在这里插入图片描述
    登录功能代码
    在这里插入图片描述

6.错误统一处理

  • 登录成功,需要给提示,错误提示通过响应拦截器统一处理
  • 未登录的用户,不可以访问首页,需要登录访问拦截
本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到