欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > vue >内容正文

vue

三十九、vue项目上手 | 用户管理系统 实现添加用户功能(中篇) -ag凯发k8国际

发布时间:2024/10/8 vue 28 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 三十九、vue项目上手 | 用户管理系统 实现添加用户功能(中篇) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author:runsen
@date:2020/7/8

人生最重要的不是所站的位置,而是内心所朝的方向。只要我在每篇博文中写得自己体会,修炼身心;在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰难,奋勇前行,不忘初心,砥砺前行,人生定会有所收获,不留遗憾 (作者:runsen )

作者介绍:runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,python, java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在csdn。决定今天比昨天要更加努力。我的征途是星辰大海!

今天是高考第二天,当年我就是一个辣鸡,现在还是一个辣鸡,祝高考的个个清华北大。

我看了下高考的导数最后一题,挺简单的。

(1)第一问比较简单,求个导数就行

(2)首先变量分离

下面直接考虑x>0的情况。

标准答案

废话不多说,继续学前端。

上次完成到这里,搭建了模板

在之前,利用json-server,搭建了3000端口的api,这里需要同时的运行起来。

可以访问http://localhost:3000/users,具体结果如下所示。

现在的目标很简单了,就是通过customers.vue中的customers一个空列表变成接口里面的东西。

我们可以在组件中定义一个方法来连接数据,这里需要涉及vue-resource插件

vue-resource是vue.js的一款插件,它可以通过xmlhttprequest或jsonp发起请求并处理响应。

c:\users\yiuye\desktop\project\customers>npm install vue-resource --save

安装成功后,在main.js导入

import vueresource from 'vue-resource' vue.use(vueresource)

导入完成后,那么this.$http.get就可以用了。现在直接打印http://localhost:3000/users的response,然后定义一个created执行函数。

下图就是效果,这样就可以看见http://localhost:3000/users的接口数据。

下面就是 拿到数据渲染,使用v-for遍历,this.customers = response.body,这样customers 就有值了。

<template><div class="customers container"><h1 class="page-header">用户管理系统</h1><table class="table table-striped"><thead><tr><th>姓名</th><th>电话</th><th>邮箱</th><th></th></tr></thead><tbody v-for="customer in customers"><tr><td>{{customer.name}}</td><td>{{customer.phone}}</td><td>{{customer.email}}</td><td></td></tr></tbody></table></div> </template> <script> export default {name: 'customers',data() {return {customers :[],}},methods: {// 连接数据fetchcustomers(){this.$http.get("http://localhost:3000/users").then(function(response){console.log(response)this.customers = response.body})}},created() {this.fetchcustomers();},} </script> <!-- add "scoped" attribute to limit css to this component only --> <style scoped> </style>

具体效果如下所示。

下面实现一个添加用户的功能,其实一个功能就是一个组件,这是我发现的。于是就写一个add.vue的组件。

<template><div class="add container">添加用户</div> </template><script> export default {name: 'add',data() {return {}} } </script><!-- add "scoped" attribute to limit css to this component only --> <style scoped> </style>

下面就是在main.js设置添加的路由。

下面是main.js全部代码

// the vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import vue from 'vue' import vuerouter from 'vue-router' import vueresource from 'vue-resource' import app from './app' import customers from './components/customers.vue' import about from './components/about.vue' import add from './components/add.vue' vue.config.productiontip = false vue.use(vuerouter) vue.use(vueresource) // 设置路由 const router = new vuerouter({mode:"history",base: __dirname,routes:[{path:'/',component:customers},{path:'/about',component:about},{path:'/add',component:add}] }) /* eslint-disable no-new */ new vue({router,template: `<div id="app"><nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">用户管理系统</a></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><router-link to="/">ag凯发k8国际主页</router-link></li><li><router-link to="/about">关于ag凯发k8国际</router-link></li></ul><ul class="nav navbar-nav navbar-right"><li><router-link to="/add">添加用户</router-link></li></ul></div></div></nav><router-view></router-view></div>` }).$mount("#app")

下图就是添加用户的页面。

下面就是实现添加用户的组件,具体代码如下。这里就是添加一个用户传3000接口。

<template><div class="add container"><h1 class="pag-header">添加用户</h1><form v-on:submit="addcustomer"><div class="well"><h4>用户信息</h4><div class="form-group"><label>姓名</label><input type="text"class="form-control"placeholder="name"v-model="customer.name"></div><div class="form-group"><label>电话</label><input type="text"class="form-control"placeholder="phone"v-model="customer.phone"></div><div class="form-group"><label>邮箱</label><input type="text"class="form-control"placeholder="email"v-model="customer.email"></div><div class="form-group"><label>学历</label><input type="text"class="form-control"placeholder="education"v-model="customer.education"></div><div class="form-group"><label>毕业学校</label><input type="text"class="form-control"placeholder="graduationschool"v-model="customer.graduationschool"></div><div class="form-group"><label>职业</label><input type="text"class="form-control"placeholder="profession"v-model="customer.profession"></div><div class="form-group"><label>个人简介</label><!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> --><textarea class="form-control"rows="10"v-model="customer.profile"></textarea></div><button type="submit"class="btn btn-primary">添加</button></div></form></div> </template><script> export default {name: 'add',data() {return {customer:{}}},methods:{addcustomer(e){// console.log(123);if (!this.customer.name || !this.customer.phone || !this.customer.email) {// console.log("请添加对应的信息!");this.alert = "请添加对应的信息!";}else{let newcustomer = {name:this.customer.name,phone:this.customer.phone,email:this.customer.email,education:this.customer.education,graduationschool:this.customer.graduationschool,profession:this.customer.profession,profile:this.customer.profile}this.$http.post("http://localhost:3000/users",newcustomer).then(function(response){// console.log(response);this.$router.push({path:"/",query:{alert:"用户信息添加成功!"}});})e.preventdefault();}e.preventdefault();}}, } </script><!-- add "scoped" attribute to limit css to this component only --> <style scoped> </style>

下面是测试结果

总结

以上是ag凯发k8国际为你收集整理的三十九、vue项目上手 | 用户管理系统 实现添加用户功能(中篇)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图