为了熟悉 Vue2 框架 的使用,现采用 Vue2的基础知识、Router路由、Vuex 管理仓库来实现一个可对用户进行增删改查的小案例。数据存储在浏览器的 localStorage 本地缓存中,方便模拟从后端获取数据,不过这里仅有前端部分,没有涉及 axios 请求相关的内容。 技术栈:Vue2 + ElementUI + Vue Router + Vuex 【注:本案例只是作为初学者的分享,里面的设计思路不一定适合特定场景,可能存在许多不足,仅供参考】
案例地址:https://gitee.com/ccuni/vue-easy-user-crud
Vue 是国人大牛【尤雨溪】开发的一套用于构建用户界面的开源的渐进式框架,支持 MVVM架构,具有易用、灵活和高效的特点,是前端领域比较火热的框架,不过目前最流行的前端框架还是 React,React框架在国外使用量最多,这里简单提一下。 目前 Vue2 是大多数使用企业中的主流版本(据说),而 Vue3 带来了更高性能,增加了一些新特性,在这里我以Vue 2 为主,先掌握 Vue2 的使用,之后有时间再继续学习 Vue3。
Vue-Router 是 Vue官方提供的路由插件。 使用 Vue 开发的 Web 项目支持 SPA 页面的渲染,即 Single Page Web Application,单页面的web应用。 单页面可以提升页面切换速度,每次切换都是局部加载页面,提升网站的响应速度,减少服务器压力,支持组件化构建。 而 Vue-Router 简单来说就是支持我们定义不同的 URL 请求地址,跳转到不同的路由组件,在本次案例中,我没有使用到路由守卫、元数据等内容,只是简单的配置了一下页面和路由组件的映射,适合初学者入门。
Vuex 也是 Vue官方提供的插件,采用集中式存储管理应用的所有组件的状态,主要分为三层,分别是 action 响应层,mutations 数据处理层,store 存储层。 对于这三层,我们可以类比 MVC架构里的 Controller、Service和 DAO, 但是这里是有区别的,可以从 mutations 直接到 store,而不经过 action。 在本次案例中,我使用 Vuex 来保存处理用户信息的所有业务代码,这样其他的所有路由组件都可以调用,可有效的降低代码耦合度,而用户的信息也存储在了 Vuex 的 store 层,方便任意组件获取数据。
Vue CLI 又称脚手架,是搭建 Vue项目的工具,在我们做 Vue 项目的开发时,不可能每次都从零开始创建项目文件,这样效率是比较低的,而官方提供的基于 Node.js 的脚手架可以很好的解决这个问题,我本次的案例是基于脚手架开发的,其中有许多文件都是默认生成的,不用自己手动去配置,降低了开发难度。
Element 是国内【饿了么】开发团队为开发者、设计师和产品经历准备的基于 Vue 的开源的桌面端组件库,有支持 Vue2的版本,同时也有支持 Vue3 的对应版本,用了这个神奇的框架,我们可以快速搭建前端页面,实现想要的效果,除此之外,该框架提供了一系列基于 Vue 实现的功能,大大降低了开发难度。
因为没有连接后端,故目前没有写注册功能
本案例使用 Vue-CLI 脚手架进行创建,其中有一些是默认创建的文件
案例项目的整体结构
父项目各个组件的分配
用户路由组件包括它的子组件
理清项目结构后,接下来就是关键功能实现的描述,稍微记录一下,将来可以做个优化。
自动登录功能的实现是在 Vue各个生命周期钩子函数中的 mounted() ,即已挂载函数里执行。
在 Vue2 中,当页面渲染完毕则会执行这个函数,此时我们就可以在这个方法里执行自动登录。
自动登录的实现方式有很多,以前学到的就是读取浏览器中的cookie,然后用cookie里的用户信息向服务端发送登录的请求,这是比较传统的方式了,后来听说有了 token 凭证的方法,在 JavaWeb应用中称为 JWT,即 JSON Web Token,本质上就是一种字符串,规定好格式的字符串,它相比cookie安全很多,因为其中用到了加密算法,加密的密钥是由服务端设置的,在这里暂时不做深入,了解有这么一个技术即可。
在本次案例中我使用的是 localStorage 本地缓存,因为我们的浏览器中也是有数据库存在的,存储 Cookie、缓存这类信息,这里我就将用户登录的信息存储到本地缓存,然后在自动登录时读取这个缓存,因为没有后端,得到信息后就直接执行登录的方法,判断是否登录成功即可,整体来说逻辑还是比较简单的。
mounted(){
// 读取本地缓存中的 userInfo,并转为 Object 对象
let userInfo = JSON.parse(localStorage.getItem('userInfo'))
// 如果对象存在则执行登录的逻辑
if(userInfo) this.autoLogin(userInfo)
},
自动登录则先向 Vuex 中的 actions 层的 login 方法发送请求,同时传入需要登录的用户信息,由于 action层方法是不会返回指定的参数的,所以我采取使用 Vuex 中 state 层的一个变量来记录是否登录成功,然后在当前登录组件中,只需要用 计算属性 就能获取并同步与 state 层用户登录状态了
computed:{
loginState(){
return this.$store.state.user.loginState | false
}
},
Vuex 中登录的方法实现如下:
// actions 响应层
actions: {
login(context, user){
// 模拟获取正确的用户信息
let u = { username: 'admin', password: 'admin'}
if(user.username === u.username && user.password === u.password){
context.commit('login', user)
}
else
context.commit('logout')
}
},
// mutations 数据处理层
mutations: {
login(state, user){
state.userInfo = user
state.loginState = true
},
},
// state 数据存储层
state: {
loginState: false,
// 当前登录用户的信息(每次都默认读缓存,如果缓存不存在则指定为测试的账号和密码)
userInfo:
JSON.parse(localStorage.getItem('userInfo'))
|| {
username: 'admin',
password: 'admin',
isLogin: false
},
}
登录组件自动登录的方法实现如下:
autoLogin(userInfo){
this.$store.dispatch('user/login', userInfo)
if(this.loginState){
this.$notify({
title: '温馨提示',
type: 'success',
message: '欢迎访问~',
showClose: false,
duration: 1500
});
this.$router.push('/admin/user')
}else {
message.error('自动登录失败')
}
},
这里用到了 Element-UI 提供的提示窗,只需要调用 this.$notify()
这个方法,就会出现相应的页面效果了。
关于分页显示,前端页面直接使用 Element-UI 提供的组件就行,在这里比较复杂就是当切换页面时,数据的变换以及浏览器 URL的变化,这就设计了 vue-router 路由的相关知识,不过其实也只是用到了路由传参。 关于路由传参,当我们点击下一页时,则采用动态的编程路由,指定跳转到下一页的 URL,当然这不会导致页面刷新,因为是 SPA 单页面开发,但为了给用户带来较好的视觉体验,所以需要实现路由组件的刷新,点击下一页过后,有一个刷新效果,而且在刷新过程中也可以发送 axios 请求获取真实的数据(为之后的开发做准备)。
切换页面或切换页面尺寸执行的方法:
// 切换页面尺寸(尺寸修改后, 页面固定为第一页)
handleSizeChange(value){
this.$router.push({
path: '/admin/user',
query: {
size: value,
p: 1
}
})
this.reloadRouterView()
},
// 切换页面
handleCurrentChange(value){
this.$router.push({
path: '/admin/user',
query: {
size: this.pageInfo.size,
p: value,
}
})
this.reloadRouterView()
}
这里直接采取动态路由的方式修改当前的路由组件,我们先来看看关于刷新路由组件的实现逻辑: 引入组件的HTML部分:
<router-view v-if="routerViewVisible" :reloadRouterView="reloadRouterView"></router-view>
实现刷新的 JS部分
// 刷新视图
reloadRouterView(){
this.routerViewVisible = false
this.$nextTick(function() {
this.routerViewVisible = true
})
}
这个方法并不在用户列表的组件里,而是在引入了用户列表组件的父组件,在调用时通过标签属性直接传参即可,如:
<UserList :reloadRouterView="reloadRouterView"/>
然后在 UserList 子组件里通过 props 属性接收参数,如:
props: ['reloadRouterView']
这样一来,用户列表组件就可以直接自身,来实现加载效果了。
路由的关键配置如下:
{
path: '/admin',
component: () => import('@/pages/admin/admin'),
children:[
{
path: 'user',
component: () => import('@/pages/admin/user'),
},
]
}
如此一来,我们的用户列表组件便收到了当前的分页参数,那么如何显示对应的数据呢?答案是可通过计算属性,由于没有后端,所以关于用户的信息都存储在 Vuex 的 store 层,这里使用简单的几行语句就可以实现了。
computed:{
pageInfo(){
return {
p: parseInt(this.$route.query.p) || 1,
size: parseInt(this.$route.query.size) || 5
}
},
userList(){
console.log(this.pageInfo)
let L = (this.pageInfo.p - 1) * this.pageInfo.size
let R = L + this.pageInfo.size
return this.$store.state.user.userList.slice(L, R)
},
},
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。