后台管理系统总结

最新推荐文章于 2022-05-29 21:17:00 发布

pick豆子

最新推荐文章于 2022-05-29 21:17:00 发布

阅读量899

点赞数

本文链接：https://blog.csdn.net/qq_42964711/article/details/106262213

版权

vue项目制作

vue init webpack vcustomers customers是文件名。
到customers文件夹cnpm install

项目启动

定位到vue文件夹，首先vue开启8080端口，npm run dev
定位到JSONSEVER文件夹，开启json-server3000端口。npm run json:server

Customers.vue

从hello复制内容，更改div的class为customer和default的name为customer

设置路由过程

控制台中cnpm install vue-router --save安装路由
main.js中引入路由import VueRouter from 'vue-router'
中间件使用Vue.use(VueRouter)（配置一次即可，以后不用再配置了）
设置路由，path时要跳转的页面，component是vue文件的名称，表示跳转到的vue文件。path路径下的页面就是component.vue

const router = new VueRouter({
  mode:"history",
  base:__dirname,
  routes:[
    {path:"/",component:Customers},
    {path:"/about",component:About},
    {path:"/add",component:Add},
    {path:"/customer/:id",component:CustomerDetails},
    {path:"/edit/:id",component:Edit}
  ]
})

引入组件Customers：import Customers from './components/Customers'
装入路由：可以根据路由跳转到不同页面了

 new Vue({
  router,
  template: `
     <div id="app">
       <router-link to="/">主页</router-link>
       <router-link to="/about">关于我们</router-link>
       <router-view></router-view>
     </div>
  `
}).$mount("#app")

书写内容

table里添加内容<tr v-for="customer in customers">
data里添加customers数组
安装vue-resource：cnpm vue-resource --save
methods里添加方法给customers数组赋值，then会接收数据，类似于Ajax

        fetchCustomers(){
            this.$http.get("http://localhost:3000/users")
            .then(function(response){
                // console.log(response);       
                this.customers = response.body;
            })
        },

main.js添加import VueResource from 'vue-resource'
main.js添加Vue.use(VueResource)'
此时页面没有显示内容，借用生命周期created时，构建函数

    created() {
        this.fetchCustomers();
    },

在上面td里赋值email、phone、name。

搭建bootStrap

index.html引入cdn

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.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.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

中文网引入模板粘贴到main.js

About.vue

从hello复制内容，更改div的class为about和default的name为about
此页面填写一些关于此管理系统的简介和内容

Add.vue

书写内容

设置一个form，绑定事件<form v-on:submit="addCustomer">
每一个都书写内容，v-model绑定数据。<input type="text" class="form-control" placeholder="name" v-model="customer.name">
methods里书写addCustomer方法，submit之后把信息拿到并post到本地JSONSERVER文件里。提交后跳到主页面，this.$router.push({path:"/",query:{alert:"用户信息添加成功!"}}); 。

    methods: {
        // 提交按钮的事件e
        addCustomer(e){
          // 名字电话邮箱不能为空
            if(!this.customer.name||!this.customer.phone||!this.customer.email){
                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();       
        }

当页面更新时(DOM元素更新时)添加方法，借用生命周期created函数。

 updated() {
        this.fetchCustomers();
    },

Alert.vue

bootstrap引入组件，调用message

    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{message}}
      </div>

绑定属性 props:['message'], 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
在Customers.vue中引入组件import Alert from './Alert'
在Customers.vue中使用组件

  components:{
        Alert
    }

在Customers.vue的data中定义alert:""
在Customers.vue中调用Alert <Alert v-if="alert" v-bind:message="alert"></Alert>。alert没有值就不弹出来了，v-bind绑定信息。
Add.vue中this.$router.push({path:"/",query:{alert:"用户信息添加成功!"}}); ，添加query（这是一个对象）信息。
Customers.vue中借用生命周期函数created，如果alert不为空传递参数给第6步中的v-bind:meesage。

    created() {
        if(this.$route.query.alert){
            this.alert = this.$route.query.alert;
        }
        this.fetchCustomers();
    },

CustomerDetails.vue（页面详情）

首先添加路由信息

注意main.js中借用id形式{path:"/customer/:id",component:CustomerDetails},
Customers.vue中添加路由信息

 <td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">详情</router-link></td>

CustomerDetails.vue的data中添加customer:""，customer是对象。
CustomerDetails.vue的methods中添加方法

        fetchCustomers(id){
            // 拼接id
            this.$http.get("http://localhost:3000/users/"+id)
            .then(function(response){
                // console.log(response);       
                this.customer = response.body;
            })
        },

借用生命周期函数created，定义函数调用时间

    // 一进到组件里就有id
    created() {
        this.fetchCustomers(this.$route.params.id);
    }

添加返回按钮

router-link标签就是html里的a href

<router-link to="/" class="btn btn-default">返回</router-link>

删除按钮

删除：绑定deleteCustomer方法

<button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button>

拿到id，利用delete删除本地数据。删除成功后返回到主页，添加query会返回弹出窗口。

        deleteCustomer(id){
            this.$http.delete("http://localhost:3000/users/"+id)
            .then(function(response){
                this.$router.push({path:"/",query:{alert:"用户删除成功"}});
            })

编辑按钮

绑定编辑跳转页面，会把id传到Edit.vue的页面

<router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">编辑</router-link>

新建Edit.vue，页面和编辑类似。最主要改变的是http的请求的方式改为put，并且拿到url中的id，拼接后按照id进行更新。

// 传到这个接口
                this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)

main.js中配置路由。
写一个方法，来到这个页面的时候，文本框中有当前的信息。

        fetchCustomer(id){
           this.$http.get("http://localhost:3000/users/"+id)
           .then(function(response){
               this.customer = response.data;
           })
        },

7.调用生命周期created，在页面构建完成时给上一步的方法传递id

    created(){
        this.fetchCustomer(this.$route.params.id);
    },

Add.vue中，当姓名或者电话或者id为空时，弹出下面，成功时回到主页并弹出成功。

Add.vue中引入Alert组件并且在component中添加Alert

    import Alert from './Alert'
    components:{
       Alert
    }

定义一个alert=""，并在方法中设置当姓名或者电话或者id为空时，给alert赋值"请添加对应的信息!"

        updateCustomer(e){
          // 名字电话邮箱不能为空
            if(!this.customer.name||!this.customer.phone||!this.customer.email){
                // console.log("请添加对应的信息"); 
                this.alert = "请添加对应的信息!";

如果alert不为空，打印出alert

        <Alert v-if="alert" v-bind:message="alert"></Alert>

对alert进行赋值

           .then(function(response){
               this.customer = response.data;
           })

编辑页面，编辑成功后，当姓名或者电话或者id为空时，弹出下面

和上面步骤一样

搜索框

Customer.vue中添加搜索框，v-model上filterInput

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

下面data中添加filterInput属性
表格添加方法，第一个形参曾经的数组，第二个是v-model的值

<tr v-for="customer in filterBy(customers,filterInput)">

methods实现方法，filter是ES6中方法，遍历整个数组和当前customer比较，和for-in里的customer的name相同的就返回。
然后用ES6里的match方法，value是文本框输入的value，正常情况为null，如果输入的值能匹配到数组中的名字任意一个字就返回true并显示匹配上的名字。
如果hzx，输入x可以匹配上，返回true，并且展示hzx的信息。

        filterBy(customers,value){
            // ES6的方法,遍历整个数组和当前customer比较，和customer的name相同的就返回
          return customers.filter(function(customer){
            // 如果为null，遍历整个数组
              return customer.name.match(value);
          })
        }

总结

component.vue表示当前页面，引入的vue和底下的template表示的在当前页面添加引入的vue。
null不指向任何对象，相当于没有任何值；而“”代表一个长度为0的字符串，match要赋值为空字符串

pick豆子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台管理系统总结

vue项目制作vue init webpack vcustomers customers是文件名。到customers文件夹cnpm install项目启动定位到vue文件夹，首先vue开启8080端口，npm run dev定位到JSONSEVER文件夹，开启json-server3000端口。npm run json:serverCustomers.vue从hello复制内容，更改div的class为customer和default的name为customer设置路由过程
复制链接

扫一扫