用户登陆实现

CGB2105-Day12

闪耀太阳 2021-08-05 09:59:36 3028 收藏 14

分类专栏： 2105 文章标签： java

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_16804847/article/details/119408344

版权

2105 专栏收录该内容

17 篇文章 26 订阅

订阅专栏

1 用户登录实现

1.1 用户数据存储

1.1.1 业务说明

根据登录需求,后台服务器返回SysResult对象,其中data表示 token的记录.
规则: 服务器返回的响应的数据应该采用一种特殊的方式进行保存.否则用户的数据将会丢失.

{status: 200, msg: "服务器处理成功", data: "4edf7d1fbe2f4b14bc7227c85b4998b3"}

     
     

     
     
1

1.1.2 Session

Session：在计算机中，尤其是在网络应用中，称为“会话控制”。Session对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web页时，如果该用户还没有会话，则Web服务器将自动创建一个 Session对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在Session对象中。有关使用Session 对象的详细信息，请参阅“ASP应用程序”部分的“管理会话”。注意会话状态仅在支持cookie的浏览器中保留。

总结:
1. Session 是会话控制
2. Session可以用户存储数据
3. Session生命周期整个会话 在会话期间数据有效, 如果会话窗口关闭 则数据清除.
4. Session数据存储在浏览器的内存中(前端的)

1.1.3 Cookie(了解)

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息 [1] 。

总结:
1. Cookie 是一个文本文件
2. Cookie 存储的是用户信息 (加密数据 更加安全)
3. Cookie 保存到用户的计算机终端中 可以临时/永久的存储信息.

1.1.4 关于Session和Cookie的总结

1. 手机银行的用户登录信息?? session 安全性要求较高
2. 购物网站 要求用户七天免密登录?? 使用Cookie进行存储!!
3. 公司的财务系统的登录信息? 建议使用Session
   电影: 没有绝对安全的系统

总结: 如果对于数据安全性要求较高 则使用Session. 如果存储一些大量查询的数据(不重要的)一般采用Cookie进行保存.

1.1.5 项目中的使用

说明: 用户登录之后 将用户信息保存到Session中.
JS代码如下:

浏览器中的Session 控制:
当会话关闭时,Session数据将会被清空

2 系统首页跳转

2.1 系统首页跳转说明

1. JS实现页面跳转
   

2. 编辑路由规则
   

3. 效果展现
   

2.2 路由导航守卫

2.2.1 业务说明

需求: 如果用户没有登录,则不允许访问其他的页面,只允许访问login登录页面.
实现:
1. 前端实现: VUE中提供了路由导航守卫!!!
2. 单点登录策略 第四阶段进行讲解

2.2.2 路由导航守卫实现

//配置路由对象
const router = new VueRouter({
  routes
})

/* 配置路由导航守卫 控制权限
1.to 要跳转的网址
2.from 请求从哪里来
3.next 回调函数 放行/跳转
*/
router.beforeEach((to,from,next) => {
//1.如果用户访问 /login 请求应该放行 终止程序
if(to.path === ‘/login’) {
return next()
}

//2.如果用户访问不是login 则需要校验是否登录 检查是否有token
let token = window.sessionStorage.getItem(‘token’)
if(token !== null && token.length > 0){
return next()
}else {
//没有token 应该跳转到登录页面 “/login”
return next(“/login”)
}
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

3. 左侧菜单获取

3.1项目介绍

3.1.1 表设计说明

说明: 如果查询所有的一级菜单 则parent_id = 0
如果查询二级菜单信息 则parent_id = 1级菜单的ID
如果查询三级菜单信息 则parent_id= 2级菜单的ID

3.1.2 编辑Rights的POJO

3.1.3 构建层级代码结构

编辑Mapper----Service-----Controller 层级代码 方便后续业务调用

2. 完成查询demo

页面效果:

3.1.4 关于端口号说明

8000端口: VUE UI vue客户端管理器所有占用的端口.
8080端口: jtadmin 脚手架项目启动时占用的端口号
8091端口: 后台SpringBoot业务系统的端口号

3.2 实现左侧菜单

3.2.1 编辑页面JS

说明:当页面访问时,根据生命周期函数,调用getMenuList()方法.从后台的服务器获取菜单列表信息. JS如下.

3.2.2 接口文档说明

说明: 左侧菜单需要获取2级菜单信息.
二级菜单封装到一级菜单的children属性中.

3.2.3 编辑RightsController

package com.jt.controller;

import com.jt.pojo.Rights;
import com.jt.service.RightsService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping(“/rights”)
public class RightsController {

<span class="token annotation punctuation">@Autowired</span>
<span class="token keyword">private</span> <span class="token class-name">RightsService</span> rightsService<span class="token punctuation">;</span>

<span class="token comment">//demo测试 获取全部列表信息</span>
<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/getAll"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Rights</span><span class="token punctuation">&gt;</span></span> <span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>

    <span class="token keyword">return</span> rightsService<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 需求: 查询2级菜单结构,并且封装为List集合
 * URL: /rights/getRightsList
 * 参数: 暂时没有
 * 请求类型: get
 * 返回值: SysResult对象(list集合)
 */</span>
<span class="token annotation punctuation">@GetMapping</span><span class="token punctuation">(</span><span class="token string">"/getRightsList"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token class-name">SysResult</span> <span class="token function">getRightsList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>

    <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Rights</span><span class="token punctuation">&gt;</span></span> rightsList <span class="token operator">=</span> rightsService<span class="token punctuation">.</span><span class="token function">getRightsList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token class-name">SysResult</span><span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span>rightsList<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

3.2.4 编辑RightsServiceImpl

@Service
public class RightsServiceImpl implements RightsService{
<span class="token annotation punctuation">@Autowired</span>
<span class="token keyword">private</span> <span class="token class-name">RightsMapper</span> rightsMapper<span class="token punctuation">;</span>


<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Rights</span><span class="token punctuation">&gt;</span></span> <span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">//查询全部不需要条件</span>
    <span class="token keyword">return</span> rightsMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 需求: 查询2级菜单信息.
 * 步骤:
 *      1.查询一级菜单信息 parent_id = 0
 *      2.查询二级菜单信息 parent_id = 一级菜单ID
 *      3.将二级菜单封装到一级菜单中.
 *  查询方式:
 *          1.利用java循环实现2级封装.
 *          2.利用Mybatis的封装的方式实现查询 resultMap 自己练习
 * @return
 */</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Rights</span><span class="token punctuation">&gt;</span></span> <span class="token function">getRightsList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token class-name">QueryWrapper</span> queryWrapper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">QueryWrapper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    queryWrapper<span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token string">"parent_id"</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Rights</span><span class="token punctuation">&gt;</span></span> oneList <span class="token operator">=</span> rightsMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span>queryWrapper<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//分析: 1级和2级有各自的对应的关系. 拿到当前的一级查询自己的二级菜单.</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token class-name">Rights</span> oneRights <span class="token operator">:</span> oneList<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token comment">//应该先清空原有条件</span>
        queryWrapper<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//根据一级id查询二级信息.</span>
        queryWrapper<span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token string">"parent_id"</span><span class="token punctuation">,</span>oneRights<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Rights</span><span class="token punctuation">&gt;</span></span> twoList <span class="token operator">=</span> rightsMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span>queryWrapper<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//实现父子关系的封装</span>
        oneRights<span class="token punctuation">.</span><span class="token function">setChildren</span><span class="token punctuation">(</span>twoList<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> oneList<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42

3.2.4 关于层级表设计的说明

案例: 有一个业务逻辑 父子关系有3级 问:表如何设计?
业务关系: 爷爷—父亲—儿子-----孙子------重孙子
想法1: 定义三张表 爷爷表(id)—父亲表(parent_id–爷爷)—儿子表(parent_id—父亲)
数据结构复杂!!! 不便于扩展!!!

想法2: 定义一张表(id-----parent_id)
要求: 每个ID都应该有自己的parent_id

总结: 如果有父子关系,则一遍采用parent_id的方式进行封装. 自关联的方式

3.3 左侧菜单的跳转说明

3.3.1 关于左侧菜单路径说明

说明: 用户点击2级菜单时,跳转的路径 是由数据表中的path字段进行控制.

3.3.2 左侧菜单路由机制

1.定义路由占位符 在Home组件中 在中间定义了路由占位符.

2.编辑路由机制
根据路由嵌套的规则,通过children属性 实现组件嵌套.最终实现课堂页面效果.

3.3.3 左侧菜单路由全部实现

需求: 当用户默认跳转到home时,应该默认展现 Welcome的组件 关键语法:重定向机制
效果:

4 ElementUI 基本用法

<template>
  <div>
    <h1>elementUI 入门案例 方便大家后续学习</h1>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>面包屑导航
   elementUI 提供的组件 <span class="token class-name">Breadcrumb</span>
                       <span class="token class-name">BreadcrumbItem</span>
     <span class="token number">2.</span>引入组件         element<span class="token punctuation">.</span>js  <span class="token keyword">import</span>  <span class="token class-name">Vue</span><span class="token punctuation">.</span>use
 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>breadcrumb separator<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"el-icon-arrow-right"</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item <span class="token operator">:</span><span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"{ path: '/elementUI' }"</span><span class="token operator">&gt;</span>UI页面<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span><span class="token class-name">ElementUI</span>工具API<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>入门案例<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>breadcrumb<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span> 定义卡片视图 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>card <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box-card hwCard"</span><span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">4.</span> 栅格<span class="token operator">:</span> 将一行固定划分为<span class="token number">24</span>块 可以调整每块所占的大小   <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>row gutter<span class="token operator">=</span><span class="token string">"15"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>col <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">"8"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span>引入input框 <span class="token operator">--</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>el<span class="token operator">-</span>input placeholder<span class="token operator">=</span><span class="token string">"请输入内容"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"input3"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"input-with-select"</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>el<span class="token operator">-</span>button slot<span class="token operator">=</span><span class="token string">"append"</span> icon<span class="token operator">=</span><span class="token string">"el-icon-search"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>input<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>col<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>col <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>el<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">"primary"</span> round <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"showDialog"</span> <span class="token operator">&gt;</span>点击按钮<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>col<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>row<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">5.</span>弹出框操作
      title<span class="token operator">=</span><span class="token string">"弹出框的标题元素"</span>
      <span class="token operator">:</span>visible<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"dialogVisible"</span>  控制弹出框是否展现 <span class="token boolean">true</span><span class="token operator">/</span><span class="token boolean">false</span>
    <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>el<span class="token operator">-</span>dialog
      title<span class="token operator">=</span><span class="token string">"弹出框效果展现"</span>
      <span class="token operator">:</span>visible<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"dialogVisible"</span>
      width<span class="token operator">=</span><span class="token string">"70%"</span><span class="token operator">&gt;</span>

      <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">6.</span>表单提交  ref<span class="token operator">=</span><span class="token string">"为表单定义一个ID"</span>
        model 是elementUI中特定的属性   负责绑定数据
      <span class="token operator">--</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>el<span class="token operator">-</span>form ref<span class="token operator">=</span><span class="token string">"form"</span> <span class="token operator">:</span>model<span class="token operator">=</span><span class="token string">"addUser"</span> label<span class="token operator">-</span>width<span class="token operator">=</span><span class="token string">"80px"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item label<span class="token operator">=</span><span class="token string">"用户名"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>el<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"addUser.username"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>input<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item label<span class="token operator">=</span><span class="token string">"密码"</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>el<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"addUser.password"</span> type<span class="token operator">=</span><span class="token string">"password"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>input<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">-</span>item<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>form<span class="token operator">&gt;</span>



      <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">"footer"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"dialog-footer"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>el<span class="token operator">-</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"dialogVisible = false"</span><span class="token operator">&gt;</span>取 消<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>el<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">"primary"</span> <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"dialogVisible = false"</span><span class="token operator">&gt;</span>确 定<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>dialog<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>card<span class="token operator">&gt;</span>

</div>
</template>

<script>
//对外声明 当前组件的属性export default 将组件交给VUE对象管理
export default {
data(){
return {
dialogVisible: false,
//form表单中的数据有多个所以采用对象
addUser: {
username: ‘’,
password: ‘’
}
}
},
methods: {
//添加点击事件
showDialog(){
//点击展现弹出框???
this.dialogVisible = true
}
}
}
</script>

<style lang=“less” scoped>

.hwCard {
width: 100%;
height: 500px;
}
</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98