微信客户端入口,黑龙seo网站优化,天津平台网站建设设计,先做网站再付款前言我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例#xff0c;后端数据接口#xff0c;会使用json-server快速搭建一个本地的服务#xff0c;方便对数据的增删改查#xff0c;利用以上技术我们会搭建一个vue案例后端数据接口会使用json-server快速搭建一个本地的服务方便对数据的增删改查利用以上技术我们会搭建一个vue案例效果展示图以上就是我们最终要实现的全部效果我会一块一块的讲解关于脚手架安装和json-server搭建在本次博客中不会讲解如果想看的话在小编的博客中也有讲解关于脚手架搭建和json-server搭建如果想学习的话可以看一下。1.项目结构展示左边第一个是前端项目结构第二个为json-server服务端2.页面搭建在本次案例中小编采用Element-ui快速搭建前端页面以提高效率。如果不了解的话可以去官网看一下2.1安装element-ui通过npm install element-ui -S 安装前端ul框架安装完之后并在main.js引入import ElementUI from element-uiimport element-ui/lib/theme-chalk/index.cssVue.use(ElementUI)2.2页面布局UserInfo.vue直接通过element-ui中table布局把整体建构页面布局完成用户信息管理界面添加:datasearchUserinfo(keyUser)borderstylewidth: 100%typeindexlabel序号aligncenterwidth60label日期aligncenterwidth120{{ scope.row.date | moment}}label姓名aligncenterwidth100{{ scope.row.name }}label邮箱aligncenterwidth160{{ scope.row.email }}label标题aligncenterwidth160{{ scope.row.title }}label评价aligncenterwidth200{{ scope.row.evaluate }}label状态aligncenterwidth160{{ scope.row.state }}sizeminiclickhandleEdit(scope.$index, scope.row)编辑sizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除2.3页面数据获取并展示通过axios请求本地搭建的服务数据把得到的数据展示到页面当中。也是通过cnpm install axios --save安装并在main.js中引入import axios from axiosVue.prototype.$axios axios我们需要在方法methods中定义一个getUserInfo方法用于请求数据data () {return {tableData: [], 用于存放数据}}getUserInfo() {this.$axios.get(http://localhost:3000/data).then(res {this.tableData res.data})},这是时候数据是请求到了但是页面并为展示这就关系到vue的生命周期。如果对vue生命周期不是很了解的话可以官网仔细看一遍我们只需要在created这个生命周期钩子中调用我们请求数据的方法就可以把数据展示到页面中。这样我们就完成第一步了页面数据请求展示created:在模板渲染成html前调用即通常初始化某些属性值然后再渲染成视图。3.添加数据刚才我们已经完成第一步把后台的数据展示到前端页面中接下来我们对数据进行添加页面全部都是用element搭建3.1页面结构搭建把AddUserInfo.vue组件当成一个子组件在父组件中引入这个子组件点击添加按钮弹出这个添加对话框v-modelformDate.datetypedateplaceholder选择日期取 消确 定3.2我们在父组件UserInfo中引入子组件AddUserInfo.vue, //使用这个组件import AddUser from ./AddUserInfo.vue //引入组件components:{ //注册AddUser,}3.3通过点击父组件的添加按钮触发子组件弹出框dialogAdd是我们在父组件定义的的需要传递给子组件添加在data定义用于是否弹出添加弹出框默认false不弹出只有点击添加按钮的时候才弹出弹出框dialogAdd:{show:false},methods方法中hanldeAdd(){ //添加this.dialogAdd.show true; //弹出对话框},3.4子组件需要接受父组件传递的方法.并请求数据。实现添加export default {name: AddUser,props:{dialogAdd:Object},data () {return {formDate:{date:,name:,email:,title:,evaluate:,state:},formrules:{date:[{required:true,message:日期不能为空,trigger:blur}],name:[{required:true,message:用户名不能为空,trigger:blur}],email:[{required:true,message:邮箱不能为空,trigger:blur}],}}},methods:{dialogFormAdd(formdong) {this.$refs[formdong].validate((valid) {if (valid) {this.$axios.post(http://localhost:3000/data,this.formDate).then(res {this.$message({type:success,message:添加信息成功})this.dialogAdd.show false;this.$emit(update);})this.formDate } else {console.log(error submit!!);return false;}})}}}this.$emit(update); 子组件数据发生改变了父组件视图却没有更新这时候通过子创父this.$emit,想父组件发送子组件传递的方法updategetUserInfo //接受子组件传递过来的方法去更新视图4.实现删除sizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除删除数据需要根据id去删除使用es6模板字符串进行拼接handleDelete(index,row) {// 删除用户信息this.$axios.delete(http://localhost:3000/data/${row.id}).then(res {this.$message({type:success,message:删除信息成功})this.getUserInfo() //删除数据更新视图})},5.实现编辑功能在这里添加弹出框内容和编辑弹出框内容一模一样可以选择进行封装封装成一个组件添加和编辑共同使用这一个组件根据自定义一个字段来判断点击 的是添加还是编辑按钮。在本次案例中没有封装如果想封装的话可以自己尝试封装组件来提高效率。5.1页面搭建EditUser.vue组件也是当做一个子组件在父组件中去引入这个子组件并把获取的数据展示到页面中。v-modelform.datetypedateplaceholder选择日期取 消确 定在父组件中定义好需要传递的数据字段dialogAdd:{ //编辑弹出框默认是falseshow:false},form:{ //编辑信息date:,name:,email:,title:,evaluate:,state:},5.2也是在方法中点击编辑按钮在编辑中点击拿一行需要获取那一行的字段数据并把获取的数据传递给子组件显示到弹出框中需要肯据row来获取每一行的数据。sizeminiclickhandleEdit(scope.$index, scope.row)编辑handleEdit(index,row){ //编辑this.dialogEdit.show true; //显示弹this.form {date:row.date,name:row.name,email:row.email,title:row.title,evaluate:row.evaluate,state:row.state,id:row.id}},当我门打印row的是就是点击哪一行的编辑按钮对应的数据就好打印出来这时候我们只需要把得到的数据传递给子组件就行5.3父组件得到的数据子组件通过props接受和添加数据几乎一样export default {name: HelloWorld,props:{dialogEdit:Object,form:Object},data () {return {formrules:{date:[{required:true,message:日期不能为空,trigger:blur}],name:[{required:true,message:用户名不能为空,trigger:blur}],email:[{required:true,message:邮箱不能为空,trigger:blur}],}}},methods:{dialogFormEdit(formEdit) {this.$refs[formEdit].validate((valid) {if (valid) {this.$axios.put(http://localhost:3000/data/${this.form.id},this.form).then(res {this.$message({type:success,message:编辑信息成功})console.log(res)this.dialogEdit.show false;this.$emit(updateEdit) //更新父组件数据视图})} else {console.log(error submit!!);return false;}})}}}6查询数据6.1需要定义一个查询方法通过filter对数组进行过滤并返回一个新的数据最后通过es6中includes方法判断查询的条件是否包含includes如果包含就返回true如果不包含就返回falsesearchUserinfo(keyUser) {return this.tableData.filter((user) {if(user.name.includes(keyUser)) {return user}})}把定义好的方法绑定到data,因为这个方法会返回一个新的数组7.时间格式化写到这个案例已经基本写完了还是一些细节需要修改比如我我们添加日期页面显示并不是我们想要的。我门只想要右边的效果.这时候推荐一个日期格式化插件moment.js,可以快速帮我们解决这个问题7.1通过npm install moment --save下载在main.js引入import moment from moment我们定义一个全局过滤的filter,无论在那个组件都可以使用主要调用moment//获取年份Vue.filter(moment, function (value, formatString) {formatString formatString || YYYY-MM-DD HH:mm:ss;return moment(value).format(YYYY-MM-DD); // value可以是普通日期 20170723});8.全部代码8.1UserInfo.vue组件代码用户信息管理界面添加:datasearchUserinfo(keyUser)borderstylewidth: 100%typeindexlabel序号aligncenterwidth60label日期aligncenterwidth120{{ scope.row.date | moment}}label姓名aligncenterwidth100{{ scope.row.name }}label邮箱aligncenterwidth160{{ scope.row.email }}label标题aligncenterwidth160{{ scope.row.title }}label评价aligncenterwidth200{{ scope.row.evaluate }}label状态aligncenterwidth160{{ scope.row.state }}sizeminiclickhandleEdit(scope.$index, scope.row)编辑sizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除import AddUser from ./AddUser.vueimport EditUser from ./EditUser.vueexport default {name: info,data () {return {tableData:[],dialogEdit:{show:false,},dialogAdd:{show:false},keyUser:,form:{ //编辑信息date:,name:,email:,title:,evaluate:,state:},}},methods:{getUserInfo() {this.$axios.get(http://localhost:3000/data).then(res {console.log(res)this.tableData res.data})},hanldeAdd(){ //添加this.dialogAdd.show true;},handleEdit(index,row){ //编辑this.dialogEdit.show true; //显示弹this.form {date:row.date,name:row.name,email:row.email,title:row.title,evaluate:row.evaluate,state:row.state,id:row.id}console.log(row)},handleDelete(index,row) {// 删除用户信息this.$axios.delete(http://localhost:3000/data/${row.id}).then(res {this.$message({type:success,message:删除信息成功})this.getUserInfo() //删除数据更新视图})},searchUserinfo(keyUser) {return this.tableData.filter((user) {if(user.name.includes(keyUser)) {return user}})}},created(){this.getUserInfo()},components:{AddUser,EditUser}}h1{font-size: 30px;color: #333;text-align: center;margin: 0 auto;padding-bottom: 5px;border-bottom: 2px solid #409EFF;width: 300px}8.2AddUserInfo.vue组件v-modelformDate.datetypedateplaceholder选择日期取 消确 定export default {name: AddUser,props:{dialogAdd:Object},data () {return {formDate:{date:,name:,email:,title:,evaluate:,state:},formrules:{date:[{required:true,message:日期不能为空,trigger:blur}],name:[{required:true,message:用户名不能为空,trigger:blur}],email:[{required:true,message:邮箱不能为空,trigger:blur}],}}},methods:{dialogFormAdd(formdong) {this.$refs[formdong].validate((valid) {if (valid) {this.$axios.post(http://localhost:3000/data,this.formDate).then(res {this.$message({type:success,message:添加信息成功})this.dialogAdd.show false;this.$emit(update);})this.formDate } else {console.log(error submit!!);return false;}})}}}8.3EditUser.vue编辑组件v-modelform.datetypedateplaceholder选择日期取 消确 定export default {name: HelloWorld,props:{dialogEdit:Object,form:Object},data () {return {formrules:{date:[{required:true,message:日期不能为空,trigger:blur}],name:[{required:true,message:用户名不能为空,trigger:blur}],email:[{required:true,message:邮箱不能为空,trigger:blur}],}}},methods:{dialogFormEdit(formEdit) {this.$refs[formEdit].validate((valid) {if (valid) {this.$axios.put(http://localhost:3000/data/${this.form.id},this.form).then(res {this.$message({type:success,message:编辑信息成功})console.log(res)this.dialogEdit.show false;this.$emit(updateEdit)})} else {console.log(error submit!!);return false;}})}}}以上这次全部的案例deom,在过程中有些说的不是很好请见谅如果喜欢请多多关注
