vue单页面的增删改查项目

vue脚手架的基本使用

一、基本知识

1、安装脚手架

全局安装

npm install -g @vue/cli

2、使用命令创建项目

vue create my-project

3、图形化创建项目

vue ui

二、vue单页面的增删改查项目

1、编写四个vue组件（分别是增删改查的组件）

2、实现将数据显示在表格中

2.1编写数据

<script>
export default {
    data:function(){
        return {
            posts:[
                {id:1,title:'静夜思',content:'窗前明月光',create_time:Date.now()},
                {id:2,title:'桃花源记',content:'陶渊明',create_time:Date.now()},
                {id:3,title:'长恨歌',content:'白居易',create_time:Date.now()},
                {id:4,title:'渔家傲·秋思',content:'范仲淹',create_time:Date.now()},
            ]
        }
    }
}
</script>

2.2通过v-for显示在table中

<template>
    <div class="list">
        <table>
            <thead>
                <th>编号</th>
                <th>标题</th>
                <th>时间</th>
            </thead>
            <tbody>
                <tr v-for="item in posts" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.create_time}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

2.3在index.js中引入List.vue组件，并编写路由规则

import List from '../views/List.vue'

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  }
]

3、实现详情页面展示

3.1通过router-link进行传值

<router-link :to="{name:'Detail',params:{id:item.id}}">详情</router-link>

3.2在index.js引入并编写路由规则

import Detail from '../views/Detail.vue'

{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }

3.3先在Detail看看id值是否传递过来

<h1>{{.$route.params.id}}</h1>

3.4将数据也移到本页面并编写created函数

4、实现增加功能

4.1先在列表页面写一个增加的标签

<router-link to="/add">增加</router-link>

4.2编写Add.vue页面

<template>
    <div class="add">
        <form action="">
            <div>
                <label for="title">标题</label>
                <input type="text" id="title" v-bind="title">
            </div>
            <div>
                <label for="content">内容</label>
                <textarea name="" id="content" cols="30" rows="10" v-bind="content"></textarea>
            </div>
            <input type="button" value="提交" @click="ad">
        </form>
    </div>
</template>

4.3在index.js页面引入并编写路由规则

import Add from '../views/Add.vue'

{
    path: '/add',
    name: 'Add',
    component: Add
  },

4.4将数据移入一份到Add.vue页面并编写函数

export default {
    data:function(){
        return {
            posts:[
                {id:1,title:'静夜思',content:'窗前明月光',create_time:Date.now()},
                {id:2,title:'桃花源记',content:'陶渊明',create_time:Date.now()},
                {id:3,title:'长恨歌',content:'白居易',create_time:Date.now()},
                {id:4,title:'渔家傲·秋思',content:'范仲淹',create_time:Date.now()},
            ],
            title:'',
            content:''
        }
    },
    methods:{
        ad:function(){
            this.posts.push({id:5,title:this.title,content:this.content,create_time:Date.now()})
            console.log(this.posts);
        }
    }
}
</

5、实现编辑功能

5.1将id传值给Update.vue页面

<router-link :to="{name:'Update',params:{id:item.id}}">编辑</router-link>

5.2编写Update.vue页面

<template>
    <div class="update">
        <form action="">
            <div>
                <label for="title">标题</label>
                <input type="text" id="title" v-model="title">
            </div>
            <div>
                <label for="content">内容</label>
                <textarea name="" id="content" cols="30" rows="10" v-model="content"></textarea>
            </div>
            <input type="button" value="提交" @click="up">
        </form>
    </div>
</template>

5.3在index.js页面引入并编写路由规则

import Update from '../views/Update.vue'

{
    path: '/update',
    name: 'Update',
    component: Update
  },

5.4在Update.vue页面引入数据并编写函数

created:function(){
        let post_id=this.$route.params.id;
        let post_res=this.posts.find((item)=>{
            return item.id==post_id
        })
        this.title=post_res.title
        this.content=post_res.content
    },
    methods:{
        up:function(){

        }
    }

6、实现删除功能

6.1添加一个a标签并增加单击事件

<a href="#" @click="del(item.id)">删除</a>

6.2添加一个函数来处理删除事件

methods:{
        del:function(id){
            this.posts.forEach((item,index)=>{
                if(item.id==id){
                    this.posts.splice(index,1)
                }
            })
        }
    }