web期末作业 vue3 + json-server 实现简单的增删改查

原创 已于 2024-11-01 10:45:45 修改 · 2.7k 阅读 · 36 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #json #vue.js

于 2022-12-09 13:57:45 首次发布
本文介绍如何使用Vue.js、Element Plus等技术快速搭建一个具备增删改查功能的应用程序，并展示了具体的代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

图片展示

主页面

在这里插入图片描述
在这里插入图片描述

编辑

在这里插入图片描述

增加

在这里插入图片描述

详情

在这里插入图片描述

安装 json-server
cnpm i  json-server -g
运行

安装 Element-plus
npm install element-plus --save
安装 axios
npm install axios --save
安装 router
npm install vue-router@4

主要代码

MainView.vue

<template>
  <!-- 修改 -->
  <el-dialog
    v-model="dialogVisible"
    title="Edit"
    width="30%"
  >
  <el-input v-model="part.name" placeholder="Please input">
    <template #prepend>name</template>
  </el-input>
  <el-input v-model.number="part.Telephone" placeholder="Please input">
    <template #prepend>Telephone</template>
  </el-input>
  <el-input v-model="part.address" placeholder="Please input">
    <template #prepend>address</template>
  </el-input>
  <el-input v-model="part.date" placeholder="Please input">
    <template #prepend>date</template>
  </el-input>
  <el-input v-model="part.motto" placeholder="Please input">
    <template #prepend>motto</template>
  </el-input>
  <h3>Friends</h3>
  <el-table :data="part.friends" border="true">
    <el-table-column label="Name" prop="name" />
    <el-table-column label="Address" prop="address" />
    <el-table-column label="Telephone" prop="Telephone" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="friendshandleDelete(scope.$index)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-row justify="center">
    <el-col :span="8">
      <el-input v-model="name" placeholder="name"/>
    </el-col>
    <el-col :span="8">
      <el-input v-model="address" placeholder="address"/>
    </el-col>
    <el-col :span="8">
      <el-input v-model.number="Telephone" placeholder="Telephone"/>
    </el-col>
  </el-row>
  <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Friend</el-button>
    <template #footer>
      <span class="dialog-footer">
        <el-button   @click="dialogVisible = false">返回</el-button>
        <el-button type="primary" @click="put">
          确定
        </el-button>
      </span>
    </template>
  
  </el-dialog>
  <!-- 添加 -->
  <el-dialog
  v-model="adddialogVisible"
  title="Add"
  width="30%"
>
<el-input  v-model="part.name" >
  <template #prepend>name</template>
</el-input>
<el-input v-model.number="part.Telephone">
  <template #prepend>Telephone</template>
</el-input>
<el-input v-model="part.address">
  <template #prepend>address</template>
</el-input>
<el-input  v-model="part.motto">
  <template #prepend>motto</template>
</el-input>
<el-input type="date" v-model="part.date">
  <template #prepend>date</template>
</el-input>


<h3>Friends</h3>
  <el-table :data="friends" border="true">
    <el-table-column label="Name" prop="name" />
    <el-table-column label="Address" prop="address" />
    <el-table-column label="Telephone" prop="Telephone" />
  </el-table>
  <el-row justify="center">
    <el-col :span="8">
      <el-input v-model="name" placeholder="name"/>
    </el-col>
    <el-col :span="8">
      <el-input v-model="address" placeholder="address"/>
    </el-col>
    <el-col :span="8">
      <el-input v-model.number="Telephone" placeholder="Telephone"/>
    </el-col>
  </el-row>
  <el-button class="mt-4" style="width: 100%" @click="addonAddItem">Add Friend</el-button>
  
  <template #footer>
    <span class="dialog-footer">
      <el-button   @click="adddialogVisible = false">返回</el-button>
      <el-button type="primary" @click="add">
        确定
      </el-button>
    </span>
  </template>
</el-dialog>
  <el-button type="primary" @click="adddialogVisible = true">添加</el-button>
  <el-table :data="copyTable" border="true" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div>
          <el-row >
            <el-col :span="6">
              <h1><el-tag type="success">name</el-tag> {{ props.row.name }}</h1>
            </el-col>
            <el-col :span="6">
              <el-tag type="info">Telephone</el-tag>{{ props.row.Telephone }}
            </el-col>
            <el-col :span="6">
              <el-tag type="warning">Address</el-tag>{{ props.row.address }}
            </el-col>
            <el-col :span="6">
              <el-tag type="danger">date</el-tag> {{ props.row.date }}
            </el-col>
          </el-row>
          <el-row >
            <el-col >
              <el-tag>座右铭</el-tag>
              <el-check-tag checked style="margin-right: 8px">{{props.row.motto}}</el-check-tag>
            </el-col>
          </el-row>
          <h3>Friends</h3>
          <el-table :data="props.row.friends" border="true">
            <el-table-column label="Name" prop="name" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Telephone" prop="Telephone" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="id" label="ID" width="50px"/>
    <el-table-column prop="name" label="名字" width="100px"/>
    <el-table-column prop="Telephone" label="电话" />
    <el-table-column prop="address" label="掉落地址" />
    <el-table-column prop="date" label="掉落日期" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small"   @click="handleEdit(scope.row)">Edit</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
          >Delete</el-button
        >
      </template>
      
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next"
  @current-change="handleCurrentChange" 
  @next-click="ppage(1)" @prev-click="ppage(-1)"
  :total="totle" />
</template>

<script>
import axios from 'axios'
import {onMounted, reactive , toRefs }  from 'vue'
export default {
  setup(){
    const vue = reactive({
        tableData:[],
        copyTable:[],
        totle:0,
        page :1,
        dialogVisible:false,
        adddialogVisible:false,
        part:[],
        friends:[],
        name: '',
        address: '',
        Telephone: 0,
    }) 
    const handleCurrentChange = (number)=>{
        vue.page = number
        fenye(number)
    }
    const aaa = ()=>{
      axios.request({
          method:'get',
          url:'http://localhost:3000/leaf',
      }).then(function(res){  
          vue.totle = res.data.length
          vue.tableData = res.data
          fenye(vue.page)
      })
    } 
    onMounted(()=>{
      aaa()
    })
    const add = ()=>{
      axios.request({
          method:'post',
          url:'http://localhost:3000/leaf',
          data:{
            name:vue.part.name,
            Telephone: vue.part.Telephone,
            date: vue.part.date,
            address: vue.part.address,
            motto:vue.part.motto,
            friends:vue.friends
          }
      }).then(function(){  
        aaa()
        alert("添加成功")
        vue.part = []
      })
      vue.adddialogVisible = false
    }
    const handleEdit = (y)=>{
        vue.dialogVisible = true
        vue.part = y
    }
    const friendshandleDelete = (y)=>{
      console.log(y)
      vue.part.friends.splice(y,1) 
    }
    const handleDelete = (y)=>{
      let f = confirm(`确认删除${y.name}吗`)
      if(f===true)
      axios.request({
          method:'delete',
          url:`http://localhost:3000/leaf/${y.id}`,
      }).then(function(){  
        aaa()
      })
    }
    const put = ()=>{
      axios.request({
          method:'put',
          url:`http://localhost:3000/leaf/${vue.part.id}`,
          data:{
            name:vue.part.name,
            Telephone: vue.part.Telephone,
            date: vue.part.date,
            address: vue.part.address,
            motto:vue.part.motto,
            friends:vue.part.friends
          }
      }).then(function(){  
        aaa()
        alert("修改成功")
        vue.part = []
      })
      vue.dialogVisible = false
    }
    const fenye = (n)=>{
      vue.copyTable = []
      let y = n*10
      let x = y-9
      for(let i = x-1;i<=y-1;i++){
        if(i>=vue.totle)continue
        vue.copyTable.push(vue.tableData[i])
      }
    }
    const onAddItem = () => {
      vue.part.friends.push({
        name: vue.name,
        address: vue.address,
        Telephone: vue.Telephone,
      })
      vue.name = ''
      vue.address = ''
      vue.Telephone  = ''
    }
    const addonAddItem = ()=>{
      vue.friends.push({
        name: vue.name,
        address: vue.address,
        Telephone: vue.Telephone,
      })
      vue.name = ''
      vue.address = ''
      vue.Telephone  = ''
    }
    return{
      ...toRefs(vue),handleCurrentChange,
      handleDelete,handleEdit,put,add,onAddItem
      ,friendshandleDelete,addonAddItem
    }
  }
}
</script>

<style>

</style>

<!-- 
1 1-10
2 11-20
3 21-30 
-->

main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'
createApp(App).use(ElementPlus).use(router).mount('#app')

源码下载

gitee
Github

vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9468
未完
后端（springboot3+mybatis+redis+tokenJWT),前端（vue3+elementplus+axios+pinia+tokestores)前后端分离最完整最简易的项目
m0_63755691的博客
06-21 1078
二、代码实验（后端（springboot3+mybatisplus+redis+toke,注意：必须开启redis服务，必须登录用户才能查看首页,账号123456，密码123456)一、结果截图(结果截图只是展现功能的一小部分，只要您把前后端项目运行起来，方能体会该项目中的精髓，该项目是本人JavaEE期末实验作业，结合Javaweb课程所开发）三、前端（vue3+elementplus+pinia+html5)
利用vue3+ts实现管理后台（增删改查）
01-18
简单的管理后台基本上就是数据的增删改查。主要就是 列表 + form 表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体 API 及参数。 以前 vue2 的时候最简单的做法是写出来一个页面的逻辑，然后直接 copy 到各个页面中，修改 API 及参数即可。高级一点的是利用 mixin 函数，将可复用逻辑抽离，每个页面引入 mixin。 vue3 之后新增了composition API。本文就是利用composition API，将可复用的逻辑抽离到composition API中，并引入ts，实现一个简单的管理后台功能。 利用@vue/cli创建项目 首先需要将 @v
Vue3【六】实现页面简单的增删改查
SpringHASh的博客
10-24 2012
vue3 + elementPlus 实现简单的增删改查，多选框批量删除。
vue3商城类源码分享 期末作业 注册登录，状态管理，搜索，购物车订单页面
ejunda的博客
05-22 551
该项目是一个基于Vue 3构建的本地生活线上超市网站，纯前端展示。项目结构清晰，主要包含src和public目录，分别存放源代码和静态资源。技术栈包括Vue 3、Vue Router 4和Vuex。主要功能模块涵盖商品展示、购物车、订单管理和用户登录。页面布局分为Header、Main和Footer三部分，功能流程从用户访问、商品浏览到购物车操作和订单生成，逻辑清晰。核心功能如路由配置、商品列表展示和购物车管理通过代码片段展示，确保了用户友好的交互体验。
实现Vue3的增删改查——遇到的知识点与问题
m0_63989259的博客
06-01 2852
数组与对象遍历，vue，console，坑
vue3 结合 element-plus 框架实现增删改查功能-不连接数据库
tiger_Angle
11-26 3410
【代码】vue3 结合 element-plus 框架实现增删改查功能（不连接数据库）
vue3 实现数据增删改
把全世界的花都给一个人
03-05 6237
html部分 <template> <div class="about"> //输入框 <input type="text" v-model="tit" placeholder="请输入标题"> <input type="text" v-model="user" placeholder="请输入发布人"> <input type="date" v-model="times"> <button class="
基于 PHP + Vue 实现的 项目管理系统,vue项目怎么跟php结合,PHP
09-11
例如，使用JWT（JSON Web Tokens）进行身份验证，利用缓存技术提高API响应速度，以及通过ESLint和Prettier保证代码质量和格式规范。 总结来说，这个基于PHP+Vue的项目管理系统利用了两者的优势，实现了高效的前后端...
GPT智能图书管理系统：基于Vue2+SpringBoot2的全栈实现源码+数据库（高分毕业设计）
最新发布
weixin_44355158的博客
06-16 930
GPT智能图书管理系统源码+数据库（高分毕业设计），本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。
Web前端框架技术实践：基于Vue开发的新闻资讯项目开发及考核
01-02
内容概要：这份文档详述了2024-2025学年北京城市学院信息学部非笔试类课程《工程三级实训(Web前端框架技术)》的期末考核要求，特别指出需用Vue3.0、Vue Router、Vuex、Axios、JSON Server和Element Plus开发完整的...
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3 增删改查
ZDM_9999的博客
12-29 828
【代码】vue3 增删改查。
Vue3学习(二)集成ElementPlus实现增删改查
m0_64393446的博客
06-25 4326
表格新增弹窗导入包装数据所需的组件定义变量点击新增数据时功能实现。
Vue3_ElementPlus_简单增删改查(2023)
Jacob的博客
06-12 3459
列表显示中注意事项使用由mock生成的随机数据作为数据源安装mock npm i vite-plugin-mock在vite.config.js中从vite-plugin-mock中引入viteMockServe在plugins中并配置mock自定义mock配置的路径plugins: [vue(),}),],resolve: {alias: {})在项目目录创建mock目录，创建mock.js用于响应前端发送的请求，并且把结果判断的值返回。
vue3+ts+element-plus管理系统实际开发业务之增删改查
07-14 3548
vue3+ts+elementPlus实现一个页面，包括列表搜索，增删改查功能
vue3期末作业
2301_78807002的博客
07-01 1195
功能：注册登录、首页、搜索、详情页、购物车页、分页、结算、退出登陆。无结算之后的订单页哦！技术：vue、vuex、路由、v-for、html、css、element UI3等。3.每个商品相应的详情页 4.购物车页。页面：1.登陆注册页 2.首页。vue纯前端 花店花城系统。
第一节 VUE3 增删改查
zjltianxin的博客
02-21 1919
1.查询
SpringBoot+Vue网上花店毕设全套资源免费下载
该资源为一个完整的网上花店系统，适合用作大学本科或专科的毕业设计、课程设计、期末大作业等。项目基于ASP技术和ACCESS数据库开发，提供了一整套的开发资料，包括源代码、数据库脚本、软件工具以及详细文档说明，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值