从零开始Vue用户后台管理系统(代码)

最新推荐文章于 2024-07-05 11:47:21 发布

xyczhou

最新推荐文章于 2024-07-05 11:47:21 发布

阅读量1.4k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44068203/article/details/105384716

版权

这篇博客介绍了如何从零开始使用Vue.js构建一个用户后台管理系统，包括添加用户、搜索用户等功能。博主分享了项目代码结构，如index.html、customers.vue、add.vue等关键组件，并提到了相关教程视频作为详细学习资源。

摘要由CSDN通过智能技术生成

点击详情
在这里插入图片描述
添加用户

搜索用户

这是vue用户后台关系系统视频学习的笔记
记录一下这个项目的代码，具体内容指路我的其他博客

文件如下所示
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vcustomers</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

因为使用的bookstrap的模板，所以要引入

customers.vue 主页

<template>
  <div class="cuostomers container">
    <alert v-if="alert" v-bind:message="alert"></alert>
    <h1 class="page_header">用户管理系统</h1>

    <input type="text" class="form-control" placeholder="搜索" v-model="filterInput">
  </br>

    <table class="table table-struped">
        <thead>
            <tr>
                <th>姓名</th>
                <th>电话</th>
                <th>邮箱</th>
            </tr>
            <th></th>
        </thead>
        <tbody>
            <tr v-for="customers in fileterBy(customers,filterInput)">
                <td>{
   {
   customers.name}}</td>
                <td>{
   {
   customers.phone}}</td>
                <td>{
   {
   customers.email}}</td>
                <td><router-link class="btn btn-default" v-bind:to="'/customers/'+customers.id">详情</router-link></td>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
import alert from './alert'
export default {
   
  name: 'customers',
  
  data () {
   
    return {
   
        customers:[],
        alert:"",
        filterInput:""
    }
  },
  methods:{
   
      fetchCustomers(){
   
          this.$http.get("http://localhost:3000/users")
            .then(function(responds){
   
                //console.log(responds);
                this.customers = responds.body;
            })
      },
      fileterBy(customers,value){
   
            return customers.filter(function(customers){
   
                return customers

最低0.47元/天解锁文章

xyczhou

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
从零开始Vue用户后台管理系统(代码)

点击详情添加用户搜索用户这是vue用户后台关系系统视频学习的笔记记录一下这个项目的代码，具体内容指路我的其他博客文件如下所示index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" cont...
复制链接

扫一扫