作为一个后端开发人员,因项目需求暂转页面开发的伪前端人员,在项目需求实现中的小收获在这里做一下分享。
话不多说,看代码
article1. vue登录记住密码之cookeis缓存
- 页面代码
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
- 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>
- 密码加解密根据喜好自行下载 本文采用Base64 npm install --save js-base64 然后引用即可
article2. 基于ElementUI 分页插件实现页面分页和后端分页
- 基于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>
- 后端分页,采用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