Vue实战--用户管理系统
看这篇文章的时候,如果知道使用json-server的可以直接看下面内容,若为解除json-server建议先去看看我的另一篇博客https://blog.csdn.net/qq_40976321/article/details/97486701创建用户管理系统项目步骤一:创建vue-cli项目首先打开我们的终端,切换到自己项目需要存放的文件夹中输入vue init webpa...
看这篇文章的时候,如果知道使用json-server的可以直接看下面内容,若为解除json-server建议先去看看我的另一篇博客
https://blog.csdn.net/qq_40976321/article/details/97486701
创建用户管理系统项目
步骤一:创建vue-cli项目
首先打开我们的终端,切换到自己项目需要存放的文件夹中
输入vue init webpack + 项目名称 创建自己的vue-cli项目,接着配置
切换到自己的项目文件路径中,输入指令npm install下载资源模块,下载好之后输入npm run dev 启动我们的项目,之后使用编辑器打开我们创建的vue-cli的项目,我这里使用的是Webstorm。
步骤二:创建需要的组件,安装、配置路由模块
Ctrl+c 两次进入输入模式,在终端中输入
安装路由模块的指令npm install vue-router –save,之后重新启动项目
创建我们需要用到的组件,Customer、about组件 ,之后在main.js中引入组件、配置路由
访问bootStrap官网https://v3.bootcss.com/getting-started/ 在index.html中引入使用bootStarp的cdn,最好三个都一起引入
最后将bootStrap必备的三个SDN应用一起复制过去,保证项目不会出错
https://v3.bootcss.com/getting-started/#download
引入好之后,创建一个导航组件,header-nav的组件,将导航实例模板复制进去
地址:https://v3.bootcss.com/getting-started/
创建一个导航组件header-nav,将复制内容粘贴进去
在App组件中引入使用导航组件
效果展示
步骤三:安装vue-resource库(进行请求访问)
要实现异步加载需要使用到 vue-resource 库。
输入指令安装vue-resource库:npm install vue-resource –save 之后重新启动项目
来到main.js中,我们来配置vue-resource
之后我们就可以到我们的Customers组件中去使用了,测试get请求是否能够成功获取数据
将请求的body数据赋值到数组之中,之后通过循环遍历输出
步骤四:创建一个添加用户功能
首先我们创建一个Add组件,用来添加用户,先随便添加一点内容
在main.js中引入组件,并且设置路由
在导航栏中创建一个添加用户的路由
之后重新设计我们的添加组件的内容,样式
创建提交方法,测试能否正常提交
this.$router.push({path:'/'});
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
步骤五:添加弹窗
首先我们需要创建一个弹窗组件Alert
来到BootStrap官网中找到需要用的警告框 https://v3.bootcss.com/components/#alerts
引入组件,注册声明组件
在添加组件中,提交成功跳转之时传递一个query对象
判断是否能够获取到传递的属性值
测试效果
步骤六:添加用户详细组件customerInfo
先创建customerInfo组件,之后在main.js中引入组件,设置路由
添加详情按钮
传递参数,params传参与query传参
params传参和query传参有什么区别:
---用法上
query要用path来引入,params要用name来引入,
接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候,已经是$route而不是$router了哦!!
---展示上
query更加类似于我们ajax中get传参,params则类似于post,
说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
--- params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。
params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
--- params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失,这一点的在上面说过了
效果展示
步骤七:实现编辑和删除功能
首先我们创建三个按钮,实现返回、编辑、删除功能的按钮
效果展示
实现删除功能
效果展示
实现编辑功能
首先创建编辑组件edit,其界面与添加用户界面一致,复制添加组件内容过去就好了,更改一些方法名,方法即可
引入组件,设置路由
但是存在一个问题,就是在更新界面的时候里面并没有给用户信息展示出来
创建一个根据用户id查询信息的方法,在组件加载时调用该方法
效果展示:
步骤八:实现搜索功能
首先对添加组件Add进行优化,同理将编辑Edit组件进行同样操作
实现过滤搜索内容
效果展示:
项目源代码:
链接:https://pan.baidu.com/s/1eVwl7EgunLEs4jWRk7UYSQ
提取码:hvs1
步骤九:扩展升级将axios来替换vue-resource
首先安装我们的axios 输入指令:npm install axios --save-dev
在main.js中引入axios
更换vue-resource,这个是原本的vue-resource版本的
Axios版本的,其中axios使用的是Es6的语法,所以要使用箭头函数,还有axios中存放数据在data中,vue-resource存放数据在body中
更改详情页面customerInfo
更改编辑页面Edit
更改添加页面Add
项目源码axios版本
链接:https://pan.baidu.com/s/1yg1iKRuQ4XD3g22Dp_LWgQ
提取码:waih
对于教程还是有很多不清楚的地方,建议去看看相关的视频教程:
https://ke.qq.com/user/index/index.html#/plan/cid=279700&term_id=100331213
更多推荐
所有评论(0)