03 表单

喵喵酱仔__

已于 2023-10-31 13:16:17 修改

阅读量67

点赞数

分类专栏： # 电商后台管理系统文章标签：前端 vue.js javascript

于 2023-03-14 14:51:51 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/129527343

版权

电商后台管理系统专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一组件表单的数据绑定

给el-form 加上:model属性,进行数据绑定（form对象）

给每一个表单项： input 输入框 v-model 属性绑定到【数据对象】中的【具体属性】中

1.2 给密码弄成密文

二 element ui表单验证

1.1 给form表单绑定一个 :rules= "rules "

el-form 通过rules属性指定一个校验对象

1.2 在data数据中添加规则

在data当中定义这个校验对象，其中每一个属性就是一个校验规则

1.3 给item项指定prop属性，等于一个具体的规则

希望使用这一个验证规则，去验证这个表单输入项

为不同的表单item项，通过prop去指定校验规则，来进行表单的验证

总结：

校验分为三个步骤：

1 el-form 通过rules属性指定一个校验对象

2 在data当中定义这个校验对象，其中每一个属性就是一个校验规则（多个校验对象)

3 为不同的表单item项，通过prop去指定校验规则，来进行表单的验证

2.1 编写代码

三表单的重置

【拿到这个表单的实例对象】，然后调用restfelds函数，就可以重置表单

如何拿到这个表单的实例对象那？

给组件加一个ref的引用。这个引用对象就是这个实例对象

编写代码：

四登录之前的预验证

登录之前需要进行预验证

只需要拿到实例对象的引用对象，就可以直接调用validate函数

编写代码：

五根据预验证是否发起请求

5.1 配置axios

5.2 调用接口分析

await. async简化promise 方法，async 放在最近的函数上

login没有/

其中 data才是服务器返回的真实数据

所以解构赋值一下，获取真实的接口数据

注意报错：if(!valid) return; 这样写不对， if(!valid) return false

访问地址：http://vue-shop-api-t.itheima.net/api/private/v1

有可能报跨域的问题

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // devServer: {
  //   // 代理配置
  //   proxy: {
  //     // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
  //     // localhost:8888/api/abc  => 代理给另一个服务器
  //     // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
  //     // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
  //     '/api': {
  //       target: 'http://vue-shop-api-t.itheima.net', // 我们要代理的地址
  //       changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
  //       // 路径重写
  //       pathRewrite: {
  //         // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
  //         '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 '^/api': ''  的意思是吧/api幻化成’’
  //       }
  //     }
  //   }
  // }
})

5.3代码

注意：

if (res.meta.status !== 200) {

报错：拿不到数据，res有数据，但是res.data 打印是undefined

原因是没有写await 注意await 和async的位置

添加await即可

六登录组件配置弹框提示

6.1 导入组件

message 组件和别的有点不一样，需要全局挂载

把这个组件挂载到了vue原型对象上，这样每一个组件都可以通过this 来访问到$message

6.2使用

6.3 加载的图标使用：

 <el-button
            type="primary"
            @click="login"
            :loading="loading"
            class="login"
            >登录</el-button
          >

   loading: false,

    login () {
      this.loading = true
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          this.loading = false
          return false
        }
        const { data: res } = await this.$http.post('login', this.form)
        console.log(res)
        if (res.meta.status !== 200) {
          this.loading = false
          return this.$message.error('登录失败')
        }
        this.$message.success('登录成功')
        this.loading = false
      })
    }

也可以给整个区域添加loading，在最外的大盒子添加v-loading="loading"

还是使用同一个变量，来控制区域，和按钮的加载

七登录组件登录成功之后的行为

1. 将登录成功之后的 token,保存到客户端的 sessionStorage(会话机制/只在当前页面生效)中 localStorage(持久话机制/关闭页面也不会忘记数据)

1.1 项目中除了登录之外的API接口,必须在登录之后才能访问

1.2 token 只应在当前网站打开期间生效, 所以将 token 保存在 sessionStorage中

2. 通过编程式路由导航跳转到后台主页,路由地址是 /home

tooken 为什么不保存到localstorage,而是保存到sessionStorage 当中那？

localstorage 是持久化机制，sessionStorage 是会话期间的存储机制。token 只应在当前网站打开期间生效, 所以将 token 保存在 sessionStorage中

7.1代码：

报错：

自己没引入message这个组件

7.2 添加home组件

八路由导航守卫控制访问权限

登录状态可以看到home页面，未登录状态不能看到home页面

8.1 改造代码

改造：

如果使登录页，登录页不需要要权限控制，直接放行。（不执行下边的代码了）！！！！

如果没有被return出去，就说明用户访问的不是登录页。而是一个有权限的页面。

既然有权限了，就先拿到token，根据是否有token来决定是否强制跳转

如果没有token，强制跳转到login页面，如果有token，则放行

import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () =>
  import(/* webpackChunkName: "login_home_welome" */ 'components/login/Login')
const Home = () =>
  import(/* webpackChunkName: "login_home_welome" */ 'components/home/Home')
const Welcome = () =>
  import(
    /* webpackChunkName: "login_home_welome" */ 'components/home/welcome/Welcome'
  )

const Users = () =>
  import(
    /* webpackChunkName: "Users_Rights_Roles" */ 'components/home/users/Users'
  )
const Rights = () =>
  import(
    /* webpackChunkName: "Users_Rights_Roles" */ 'components/home/power/rights/Rights'
  )
const Roles = () =>
  import(
    /* webpackChunkName: "Users_Rights_Roles" */ 'components/home/power/roles/Roles'
  )

const Cate = () =>
  import(
    /* webpackChunkName: "Cate_Params" */ 'components/home/goods/cate/Cate'
  )
const Params = () =>
  import(
    /* webpackChunkName: "Cate_Params" */ 'components/home/goods/params/Params'
  )

const GoodsList = () =>
  import(
    /* webpackChunkName: "GoodsList_Add" */ 'components/home/goods/list/List'
  )
const Add = () =>
  import(
    /* webpackChunkName: "GoodsList_Add" */ 'components/home/goods/list/children/Add'
  )

const Order = () =>
  import(/* webpackChunkName: "Order_Report" */ 'components/home/order/Order')
const Report = () =>
  import(/* webpackChunkName: "Order_Report" */ 'components/home/report/Report')
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      {
        path: '/welcome',
        component: Welcome
      },
      {
        path: '/users',
        component: Users
      },
      {
        path: '/rights',
        component: Rights
      },
      {
        path: '/roles',
        component: Roles
      },
      {
        path: '/categories',
        component: Cate
      },
      {
        path: '/params',
        component: Params
      },
      {
        path: '/goods',
        component: GoodsList
      },
      {
        path: '/goods/add',
        component: Add
      },
      {
        path: '/orders',
        component: Order
      },
      {
        path: '/reports',
        component: Report
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // to 将访问哪一个路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数,表示放行
  //   next() 放行 next('/login') 强制跳转
  if (to.path === '/login') return next()
  // 获取token
  const token = window.sessionStorage.getItem('token')
  if (!token) return next('/login')
  next()
})

export default router