Vue结合ElementuI实现后端人员所需掌握的相关功能

作为一个后端开发人员,因项目需求暂转页面开发的伪前端人员,在项目需求实现中的小收获在这里做一下分享。

话不多说,看代码

article1. vue登录记住密码之cookeis缓存

  1. 页面代码

     1 <template>
     2   <el-form :rules="loginRules" ref="loginForm" :model="loginForm">
     3     <el-form-item prop="username">
     4       <el-input size="small" keyup.enter.native="handleLogin" v-model="loginForm.username"  placeholder="请输入用户名">
     5 </el-input>
     6     </el-form-item>
     7     <el-form-item prop="password">
     8       <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.password"  placeholder="请输入密码">
     9            </el-form-item>
    10     <el-checkbox v-model="checked">记住密码</el-checkbox>
    11     <el-form-item>
    12       <el-button type="primary" size="small" :loading="false" @click.native.prevent="handleLogin" class="login-submit">
    13         <span v-if="!loading">登 录</span>
    14         <span v-else>
    15           <i slot="prefix" class="el-icon-loading"></i>
    16           登 录 中...</span>
    17       </el-button>
    18     </el-form-item>
    19   </el-form>
    20 </template>

    View Cod

  2. js函数

     1 <script>
     2   import { Base64 } from ‘js-base64‘
     3   export default {
     4     name: ‘userlogin‘,
     5     data() {
     6       return {
     7         loginForm: {
     8           username: ‘‘,
     9           password: ‘‘
    10         },
    11         checked: false,
    12        }
    13     },
    14     mounted() {
    15       this.getCookie()
    16     },
    17     methods: {
    18        handleLogin() {
    19         this.$refs.loginForm.validate(valid => {
    20           if (valid) {
    21             if (this.checked === true) {
    22               this.setCookie(this.loginForm.username, Base64.encode(this.loginForm.password), 7)
    23             } else {
    24               this.clearCookie()
    25             }
    26            // 调用后端api接口实现相关功能,省略
    27            }
    28           })
    29       },
    30       // 设置cookie
    31       setCookie(c_name, c_pwd, exdays) {
    32         const exdate = new Date() // 获取时间
    33         exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 设置过期时间
    34         // 字符串拼接cookie
    35         window.document.cookie = ‘username‘ + ‘=‘ + c_name + ‘;path=/;expires=‘ + exdate.toGMTString()
    36         window.document.cookie = ‘password‘ + ‘=‘ + c_pwd + ‘;path=/;expires=‘ + exdate.toGMTString()
    37       },
    38       // 读取cookie
    39       getCookie() {
    40         if (document.cookie.length > 0) {
    41           const arr = document.cookie.toString().split(‘; ‘)
    42           for (let i = 0; i < arr.length; i++) {
    43             const arr2 = arr[i].split(‘=‘) // 再次切割
    44             // 判断查找相对应的值
    45             if (arr2[0] === ‘username‘) {
    46               this.loginForm.username = arr2[1] // 保存到保存数据的地方
    47             } else if (arr2[0] === ‘password‘) {
    48               this.loginForm.password = Base64.decode(arr2[1])
    49             }
    50           }
    51         }
    52       },
    53       // 清除cookie
    54       clearCookie() {
    55         this.setCookie(‘‘, ‘‘, -1) // 修改2值都为空,天数为负1天就好了
    56       }
    57     }
    58   }
    59 </script>

  3. 密码加解密根据喜好自行下载 本文采用Base64  npm install --save js-base64 然后引用即可

article2. 基于ElementUI 分页插件实现页面分页和后端分页

  1. 基于ui插件的前端分页,通过slice函数对数据集合进行分页 <el-table :data="invperiods.slice((currentPage-1)*pageSize,currentPage*pageSize)"></el-table>,对于数据量较少的简单数据查询可适当采用前端分页

      1 <template>
      2   <section class="app-container">
      3     <el-col :span="24" class="toolbar" style="margin-top: -10px">
      4       <el-form :inline="true" :model="filters" ref="filters" :rules="rules" size="mini">
      5         <el-form-item prop="periodCode" label="期间名称">
      6           <el-input  v-model.trim="filters.periodCode"  placeholder="期间名称"></el-input>
      7         </el-form-item>
      8         <el-form-item prop="periodStatus" label="期间状态">
      9           <el-select v-model="filters.periodStatus" placeholder="请选择"  size="mini">
     10             <el-option v-for="item in status" :key="item.key" :value="item.value" :label="item.key"></el-option>
     11           </el-select>
     12         </el-form-item>
     13         <el-form-item>
     14           <el-button type="primary" @click="Query">查询</el-button>
     15         </el-form-item>
     16         <el-form-item>
     17           <el-button type="info" @click="handleReset">重置</el-button>
     18         </el-form-item>
     19       </el-form>
     20     </el-col>
     21     <!--列表-->
     22     <el-table :data="invperiods.slice((currentPage-1)*pageSize,currentPage*pageSize)" :height="tableHeight" :header-cell-style="tableHeaderColor" size="mini" border
     23               :cell-style="cellStyle" :row-style="rowStyle" v-loading="findLoading" element-loading-text="数据加载中">
     24       <el-table-column type="selection" label="可选">
     25       </el-table-column>
     26       <el-table-column v-for="v in theader.columns" :prop="v.field" :label="v.title" :key="v.field">
     27         <template slot-scope="scope">
     28                 <span v-if="v.field === ‘PeriodStatus‘">
     29                    <span v-for="item in status">
     30                      <span v-if="scope.row.PeriodStatus === item.value">{{ item.key }}</span>
     31                    </span>
     32                 </span>
     33           <span v-else-if="v.field === ‘PBeginDate‘ || v.field === ‘PEndDate‘">
     34                   {{ scope.row[v.field] | dateFormat }}
     35                 </span>
     36           <span v-else-if="v.field === ‘PBeginTime‘ || v.field === ‘PEndTime‘">{{ scope.row[v.field] | timeFormat }}</span>
     37           <span v-else>{{ scope.row[v.field] }}</span>
     38         </template>
     39       </el-table-column>
     40       <el-table-column label="操作" width="80">
     41         <template slot-scope="scope">
     42           <el-popover placement="top" width="160" :ref="scope.row.PeriodName">
     43             <el-form :model="editForm" :rules="editFormRules" ref="editForm" size="mini">
     44               <el-form-item label="状态" prop="PeriodStatus" class="disposition">
     45                 <el-select v-model="editForm.PeriodStatus" placeholder="请选择"  size="mini">
     46                   <el-option v-for="item in status" :key="item.key" :value="item.value" :label="item.key"></el-option>
     47                 </el-select>
     48               </el-form-item>
     49             </el-form>
     50             <div style="text-align: right; margin: 3px">
     51               <el-button size="mini" type="info" @click="$refs[scope.row.PeriodName].doClose()">取消</el-button>
     52               <el-button type="primary" size="mini" @click="updateData(scope.row.PeriodName)">确定</el-button>
     53             </div>
     54             <el-button slot="reference" size="mini" @click="handleEdit(scope.$index, scope.row)" type="success" icon="el-icon-edit"></el-button>
     55           </el-popover>
     56         </template>
     57       </el-table-column>
     58     </el-table>
     59     <!--工具条-->
     60     <el-col :span="24" class="toolbar">
     61       <el-pagination background
     62                      @size-change="handleSizeChange"
     63                      @current-change="handleCurrentChange"
     64                      :current-page="currentPage"
     65                      :page-sizes="[50, 100, 200, 500]"
     66                      :page-size=pageSize
     67                      layout="total, sizes, prev, pager, next, jumper"
     68                      :total=total>
     69       </el-pagination>
     70     </el-col>
     71   </section>
     72 </template>
     73
     74 <script>
     75
     76   export default {
     77     name: ‘index‘,
     78     data() {
     79       return {
     80         invperiods: [],
     81         findLoading: false,
     82         filters: {},
     83         rules: {},
     84         editForm: {},
     85         editFormRules: {},
     86         total: 0,
     87         pageSize: 50,
     88         currentPage: 1
     89       }
     90     },
     91     filters: {
     92       dateFormat: function(value) {
     93         return dateFormat(value)
     94       },
     95       timeFormat: function(value) {
     96         return timeFormat(value)
     97       }
     98     },
     99     methods: {
    100
    101       handleSizeChange(val) {
    102         this.pageSize = val
    103         this.Query()
    104       },
    105       handleCurrentChange(val) {
    106         this.currentPage = val
    107         this.Query()
    108       },
    109       Query() {
    110         this.findLoading = true
    111         const data = {
    112          ...
    113         }
    114         GetInvPeriod(data).then(res => {
    115           this.total = res.length
    116           this.invperiods = res.data // 此处由后端处理返回的列表集合
    117           this.findLoading = false
    118         })
    119       },
    120       handleReset() {
    121         this.$refs.filters.validate(valid => {
    122           if (valid) {
    123             this.$refs[‘filters‘].resetFields()
    124           }
    125         })
    126       }
    127     }
    128   }
    129 </script>

  2. 后端分页,采用Oracle数据库,Mybatis 分页插件,具体实现可自行搜索相关博客或查看官方文档。因数据量过大或多表关联引起的慢SQL导致查询时数据库取消用户请求,用户体验很不好,故而采用后端分页,需要前端传入PageIndex和PageSize,即查询页码和每页查询的记录数。

      1 <template>
      2   <section class="app-container">
      3     <el-col :span="24" class="toolbar" style="margin-top: -10px">
      4       <el-form :inline="true" :model="filters" ref="filters" :rules="rules" size="mini">
      5         <el-form-item prop="periodCode" label="期间名称">
      6           <el-input  v-model.trim="filters.periodCode"  placeholder="期间名称"></el-input>
      7         </el-form-item>
      8         <el-form-item prop="periodStatus" label="期间状态">
      9           <el-select v-model="filters.periodStatus" placeholder="请选择"  size="mini">
     10             <el-option v-for="item in status" :key="item.key" :value="item.value" :label="item.key"></el-option>
     11           </el-select>
     12         </el-form-item>
     13         <el-form-item>
     14           <el-button type="primary" @click="Query">查询</el-button>
     15         </el-form-item>
     16         <el-form-item>
     17           <el-button type="info" @click="handleReset">重置</el-button>
     18         </el-form-item>
     19       </el-form>
     20     </el-col>
     21     <!--列表-->
     22     <el-table :data="invperiods.slice((currentPage-1)*pageSize,currentPage*pageSize)" :height="tableHeight" :header-cell-style="tableHeaderColor" size="mini" border
     23               :cell-style="cellStyle" :row-style="rowStyle" v-loading="findLoading" element-loading-text="数据加载中">
     24       <el-table-column type="selection" label="可选">
     25       </el-table-column>
     26       <el-table-column v-for="v in theader.columns" :prop="v.field" :label="v.title" :key="v.field">
     27         <template slot-scope="scope">
     28                 <span v-if="v.field === ‘PeriodStatus‘">
     29                    <span v-for="item in status">
     30                      <span v-if="scope.row.PeriodStatus === item.value">{{ item.key }}</span>
     31                    </span>
     32                 </span>
     33           <span v-else-if="v.field === ‘PBeginDate‘ || v.field === ‘PEndDate‘">
     34                   {{ scope.row[v.field] | dateFormat }}
     35                 </span>
     36           <span v-else-if="v.field === ‘PBeginTime‘ || v.field === ‘PEndTime‘">{{ scope.row[v.field] | timeFormat }}</span>
     37           <span v-else>{{ scope.row[v.field] }}</span>
     38         </template>
     39       </el-table-column>
     40       <el-table-column label="操作" width="80">
     41         <template slot-scope="scope">
     42           <el-popover placement="top" width="160" :ref="scope.row.PeriodName">
     43             <el-form :model="editForm" :rules="editFormRules" ref="editForm" size="mini">
     44               <el-form-item label="状态" prop="PeriodStatus" class="disposition">
     45                 <el-select v-model="editForm.PeriodStatus" placeholder="请选择"  size="mini">
     46                   <el-option v-for="item in status" :key="item.key" :value="item.value" :label="item.key"></el-option>
     47                 </el-select>
     48               </el-form-item>
     49             </el-form>
     50             <div style="text-align: right; margin: 3px">
     51               <el-button size="mini" type="info" @click="$refs[scope.row.PeriodName].doClose()">取消</el-button>
     52               <el-button type="primary" size="mini" @click="updateData(scope.row.PeriodName)">确定</el-button>
     53             </div>
     54             <el-button slot="reference" size="mini" @click="handleEdit(scope.$index, scope.row)" type="success" icon="el-icon-edit"></el-button>
     55           </el-popover>
     56         </template>
     57       </el-table-column>
     58     </el-table>
     59     <!--工具条-->
     60     <el-col :span="24" class="toolbar">
     61       <el-pagination background
     62                      @size-change="handleSizeChange"
     63                      @current-change="handleCurrentChange"
     64                      :current-page="currentPage"
     65                      :page-sizes="[50, 100, 200, 500]"
     66                      :page-size=pageSize
     67                      layout="total, sizes, prev, pager, next, jumper"
     68                      :total=total>
     69       </el-pagination>
     70     </el-col>
     71   </section>
     72 </template>
     73
     74 <script>
     75
     76   export default {
     77     name: ‘index‘,
     78     data() {
     79       return {
     80         invperiods: [],
     81         findLoading: false,
     82         filters: {},
     83         rules: {},
     84     editForm: {},
     85     editFormRules: {},
     86         total: 0,
     87         pageSize: 50,
     88         currentPage: 1
     89       }
     90     },
     91     filters: {
     92       dateFormat: function(value) {
     93         return dateFormat(value)
     94       },
     95       timeFormat: function(value) {
     96         return timeFormat(value)
     97       }
     98     },
     99     methods: {
    100
    101       handleSizeChange(val) {
    102         this.pageSize = val
    103     this.Query()
    104       },
    105       handleCurrentChange(val) {
    106         this.currentPage = val
    107     this.Query()
    108       },
    109       Query() {
    110         this.findLoading = true
    111         const data = {
    112          ...
    113          entity.PageIndex = this.currentPage
    114                  entity.PageSize = this.pageSize
    115          ...
    116         }
    117         GetInvPeriod(data).then(res => {
    118           this.total = res.RowCount  // 后端接口返回的总记录数
    119           this.invperiods = res.data // 此处又后端处理返回的列表集合
    120           this.findLoading = false
    121         })
    122       },
    123       handleReset() {
    124         this.$refs.filters.validate(valid => {
    125           if (valid) {
    126             this.$refs[‘filters‘].resetFields()
    127           }
    128         })
    129       }
    130     }
    131   }
    132 </script>

article3. 基于ElementUI 实现table表格导出Excel(根据github上大神的代码,在此只是简单的记录一下以便后面复用时更加方便)

article4. 表单查询弹出框单选功能实现

article5. 基于UI的table多选框的数据实现分页数据勾选记忆功能

article6.

原文地址:https://www.cnblogs.com/lc0814/p/11381704.html

时间: 2024-11-05 20:44:16

Vue结合ElementuI实现后端人员所需掌握的相关功能的相关文章

vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知

使用element-ui中的Notification,只有一个message属性是有很大的操作空间,其余的都是写死的,无法进行扩展,达不到想要的效果.所以只能在message上下功夫. 在element-ui官方文档中可以看到Notification中的message属性是可以处理VNode的所以我们可以使用VNode来达到我们需要的效果. 如何关闭通知呢? 当创建通知的时候,会返回该通知的实例,通过该实例的close方法可以将通知关闭. 那么当有多个通知显示在屏幕上时,如何关闭特定弹窗的呢?

vue+axios+elementUI文件上传与下载

vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用. 图片.png 代码如下: <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :sh

vue使用element-ui的el-input监听不了键盘事件解决

vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-input v-model="name" placeholder="账号" @keyup.enter="doLogin"></el-input> 在执行的时候事件是定义在input外面的div上的,所有没有响应. 解决方法需要在事

VUE基于ElementUI搭建的简易单页后台

一.项目链接 GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin 项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index 二.项目依赖 1. 数据请求      "axios": "^0.18.0", 2. 图表控件    "echarts": "^4.2.0-rc.2", 3. 富文本编辑器   "

Vue和element-ui结合的简单使用

前提 vue在前端技术中使用越来越多,也成为了主流框架,花点时间稍微了解下vue-cli.vue-router结合element-ui的使用.本人使用的是windows系统,后续介绍以windows7系统为例. 1.安装vue-cli 首先保证自己电脑上已经安装过nodejs,是否安装打开cmd,输入 node -v,出现图上这个说明已经安装(未安装的请访问nodejs官网进行下载安装) 安装完成后,打开任意磁盘新建文件夹vue-test,我进入的是F盘,进入vue-test文件夹,按住shif

整理一些网站 方便查看和搜索的想法 有合作伙伴么 (需要产品 前端人员 后端人员 只要做网站web, 目前不考虑app, 后期考虑做公众号或者小程序, 也或者对外提供接口)

有合作伙伴么  (需要产品 前端人员 后端人员 只要做网站web, 目前不考虑app, 后期考虑做公众号或者小程序, 也或者对外提供接口) 主要期望功能: 网站形式展示 建立全文索引 加一页查看方式 加一键全文搜索 条件分类搜索   不如中专 大专  以及拥有的专业 首先的目标网站: http://www.cdwx1.com/cqzx/list_2.html 优化点: 列表添加条件快速有效的筛选 根据详情页的相关类别信息进行筛选 把详情页几个分页直接一页展示  方便快速预览 做出选择 按照每学习

vue引入ElementUI库

element国内网站:https://element.eleme.cn/#/zh-CN 引入ElementUI命令:npm install element-ui --save   (网速不好用cnpm) 在项目src目录下的main.js中引入: import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' // 全局使用 Vue.use(ElementUI); 原文地址:https://w

vue结合element-ui做简单版todolist

结合element-ui首先需要npm安装element-ui npm i element-ui -S: 然后在入口文件中引入: import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 这样就可以使用element-ui了,如果不用刻意忽略这一步: 由于代码中有注释,所以就不解释了,有兴趣可以看下代码, 效果如下:(比较丑,主要看功能吧..) 代码

vue 引入Element-ui和axios

vue create project_name npm install    sass-loader node-sass     sass fibers npm install element-ui npm install axios 完整引入 在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vu