vue
文章平均质量分 53
焗个面包
没有人在年少的时候想做个普通人
展开
-
vue.js搭建用户管理系统练手(五)----嵌入弹窗组件
当我们添加用户成功后,希望能弹出一个窗口信息告诉用户添加成功。首先在components中新建Alert.vue:<template><div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-d原创 2018-07-08 19:34:18 · 606 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(六)----用户详情
在components下新建CustomerDetails.vue:<template> <div class="details container" > <h1 class="page-header">{{customer.name}}</h1> <ul> <li class原创 2018-07-08 22:07:07 · 665 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(七)----用户详情的修改和删除
在CustomerDetails.vue的详情页面添加删除和修改按钮,删除的逻辑比较简单,直接通过按钮的click事件来请求网络完成删除,而编辑事件需要我们去新建一个Edit.vue组件来完成,Edit.vue和Add.vue很像,仿照来写就好!CustomerDetails.vue:<template> <div class="details container" ...原创 2018-07-08 23:09:08 · 2499 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(八)----实现搜索功能
我们可以在添加和修改用户在必要信息为空时,展示提示信息,只要把Alert.vue组件引入直接使用就可以了!具体看完整代码,然后本节主要是在首页完成一个搜索功能,输入任意的姓名等信息首页只展示该用户信息:<template> <div class="customers container"> <Alert v-if="alert" v-bind:m...原创 2018-07-09 23:02:18 · 1737 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(一)----配置json-server
我们在测试功能的时候,往往需要后台的数据,如果后台的数据没有的时候,我们可以用json-server来实现快速实现简单的数据模拟!使用前提 安装node.js,使用node -v测试安装是否成功npm install -g json-server 全局安装json-server在随意一个文件夹新建db.json{ "users": [ { "name": "He...原创 2018-07-03 23:08:39 · 963 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(二)----页面框架搭建
首先安装 npm install -g vue-cli 来进行vue框架的快速搭建,安装好后在任意目录执行vue init webpack myproject就会生成一个vue项目,首先加入一个用户组件,在components下新建Customers.vue:&amp;lt;template&amp;gt; &amp;lt;div class=&quot;customers&quot;&a原创 2018-07-05 23:00:18 · 1764 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(三)----http请求列表数据
上一节我们在vue.js引入bootstrap的基本框架,这节我们顺便显示列表数据:改造Customer.vue:<template> <div class="customers container"> <h1 class="page-header">用户管理系统</h1> <table class="tabl原创 2018-07-06 23:18:07 · 913 阅读 · 0 评论 -
vue.js搭建用户管理系统练手(四)----http请求添加列表数据
在上一节的基础上改造Add.vue,首先需要一个form表单接收用户,然后将数据通过submit发送出去,添加完用户后自动跳转到首页:<template> <div class="add container"> <h1 class="page-header">添加用户</h1> <form v-on:submit=&qu原创 2018-07-07 14:33:45 · 692 阅读 · 0 评论