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-08-23 10:38:38

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