项目使用element

登录页面

表单验证//element ui form表单中有个rule，在data里定义rule。prop接受这个规则

<el-form-item prop="name">
    <el-input v-model="form.username"><el-input>
<el-form-item >
   


rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

表单重置 form表单的resetFields方法，给按钮添加点击事件，在methods声明一个函数，通过ref操作DOM元素。

this.$refs.form.resetFields()

表单不正确就拒绝发送axios请求，通过form表单validate方法,validdate接受一个回调函数，第一个参数是布尔值

this.$refs.form.validate(valid=>{
})

 axios请求 弹出消息 element ui中的message消息提示

main.js引入

import axios from 'axios'

axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'

vue.prototype.$axios=axios


定义方法
login(){
this.$refs.form.validate(async valid =>{//form是ref绑定的名字
if(!valid) return;
const{data:res}=await tthis.$axios.post("login",this.form);//form是data里的数据
if(res.meta.status!==200) return this.$message.error("登录失败")
this.$message.success("登录成功")
window.sessionStorage.setItem("token",res.data.token);//保存token
this.$router.push("/home");//编程式导航跳转
}

导航守卫，只有登录的用户才能访问home页

router.beforeEach((to ,from ,next)=>{
  if(to.path==='/login') return next()
  const token=window.sessionStorage.getItem('tokrn')
  if(!token) return next('/login')
  next()
})

退出：清空token，跳转到登录页

window.sessionStorage.clear()
this.$router.push('/login')

home页面

全屏 height ：100%

display：flex

需要授权的API，必须在请求头中使用Authorization 字段提供token令牌,axios请求拦截器

main.js引入

import axios from 'axios'

axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
axios.interceptors.request.use(config=>{
config.header.Authorization=window.sessionStorage.getItem('token')
return config
})

vue.prototype.$axios=axios

通过接口获取数据放在menulist里

data(){
return {
menulist:[]
}
},
create(){
this.getMenuList()
}

async getMenuList(){
const{data:res}=await this.$axios.get('menus')
this.menulist=res.data
}

一级二级菜单 index如果相同，点击一处多处响应

<el-submenu :index="item.id+''" v-for="item in menulist:key="item.id">
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children :key="subItem.id">

active-text-color，点击菜单的颜色。

 左侧菜单改为路由

在<el-menu>中加上router

面包屑:

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

表格：当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<el-table :data="userlist" border stripe>
<el-table-column type=" index"></el-table-column>
<el-table-column label= "姓名”prop="username"></el-table-column>
<el-table-column label= "邮箱"prop="email"></el-table-column>
<el-table-column label="电话" prop=" mobile"></el-table-column>
<el-table-column label='"角色"prop="role_ name"></el-table-column> 
<el-table>

表格内利用插槽换成Switch开关，scope保存所有的数据

<el-table-column label="状态">
<template v-slot="scope">
<el-switch v-model="scope.row.my_state">
</el-switch>
</template>
</el-table-column>

tooltip常用于展示鼠标 hover 时的提示信息。 

 <el-tooltip class="item" effect="light" content="警告" placement="top" :enterable="false">
 <el-button type="success" round @click="reset">重置</el-button>
 </el-tooltip>

分页

 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

method里面定义函数
handSizeChange(newsize) // newsize是传回来的值
this.quertInfo.pagesize=newsize
重新发起axios请求

修改后台数据，刷新页面不变

<el-switch V-model="scope.row.mg_state"
@change="userStateChanged(scope.row)">
</el-switch>



//监听switch开关状态的改变
userStateChanged(userinfo) {
this. $axios. put( users/${userinfo. id}/state/$
{userinfo.mg_ state} )//更改后台数据

实现搜索

 <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">//clearable @clear是点击这个清除触发的

 修改用户数据

 是否确定删除  messagebox 弹框

表格是否展开

<el-table- column type="expand"></el-table-column>
<!--索引列-->
<el-table-column type= index"></el-table-column>