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

Posted 2022-08-07 lc0814

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

 话不多说，看代码

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>

   View Code
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>

   View Code

    

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>

   View Code

    

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

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

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

article6.