vue超详细-数据管理系统

注册页面

template

script

实现form表单提交验证功能

• model : 绑定整个表单model值

• rules : 整个表单校验规则

• ref ：获取该表单form组件

• prop : 绑定每个表单的规则，写在el-form-item上

• validate : 对整个表单进行校验的方法

• valid : 每个必填表单项都提交为true,否则为false

---

方法

---

---

效果

---

css边框样式

想修改增加样式可通过这种方法：快速便捷

登录之后进入的页面-GuideList

↓ ↓ ↓

注：不登陆直接进入会报401，所以要先登录

删改查按钮

点击查看后 - 打开新功能框

template

scope 是一个临时变量，用于接收从子组件插槽中传递出来的 data 属性。这样，父组件就可以在插槽的模板中使用这个数据了。

而在 Vue 3 中，作用域插槽的语法有所变化，使用了 v-slot 指令的新语法，如下所示：

<!-- Vue 3 中的父组件 -->  
<template>  
  <child-component>  
    <template v-slot:mySlot="{ data }">  
      <p>{{ data }}</p>  
    </template>  
  </child-component>  
</template>

在这个新语法中，你可以直接在 v-slot 的参数中解构出你需要的变量，而不需要使用 scope 这个临时变量了。

---

删改查方法

查看功能

• GuideList.vue

template

逻辑

methods:

---

编辑功能

• GuideList.vue

template

methods:

• GuideUpdate.vue

template模板

逻辑

钩子函数

↓ 当 Vue 实例被挂载到 DOM 中时，这个钩子函数会被调用

组件的模板已经被渲染并插入到页面中，所以可通过 this.$el 访问到组件的根 DOM 元素

方法

---

删除功能

GuideList.vue

template

逻辑

methods:

删除功能API接口

---

添加功能

• GuideList.vue

template

逻辑

点击添加数据按钮跳转添加的页面

• GuideAdd.vue

template

<template>
    <div class="box">
        <!-- Form表单 -->
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="网站名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="网站链接">
                <el-input v-model="form.toLink"></el-input>
            </el-form-item>
            <el-form-item label="创建人id">
                <el-input v-model="form.createBy" ></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime"
                        style="width: 100%"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.createTime" style="width: 100%"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="修改时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.updateTime"
                        style="width: 100%"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="form.updateTime" style="width: 100%"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="修改人id">
                <el-input v-model="form.updateBy"></el-input>
            </el-form-item>
​
            <el-form-item label="信息状态">
                <el-radio-group v-model="form.status">
                    <!-- radio单选按钮 -->
                    <el-radio :label="0">正常状态</el-radio>
                    <el-radio :label="1">特殊状态</el-radio>
                </el-radio-group>
            </el-form-item>
​
            <el-form-item label="逻辑删除">
                <el-radio-group v-model="form.delFlag">
                    <el-radio :label="0">未删除</el-radio>
                    <el-radio :label="1">已删除</el-radio>
                </el-radio-group>
            </el-form-item>
​
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即添加</el-button>                
                <!-- 创建一个 Element UI 的按钮，当点击这个按钮时，浏览器会返回到前一个页面（即执行后退操作） -->
                <el-button @click="$router.go(-1)" >取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

逻辑

---

刷新功能

1.自动刷新

2.刷新页面按钮

方法

---