Vue2.x案例之商品增删改查的实现

2022-06-14 296

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 准备环境； vue-cli方式开发；校验效果；传统开发

0x01 准备环境

1. 安装nvm（node与npm）

a. 按流程下载相对于版本的node即可，也会默认安装好对应版本的npm

2. 安装并初始化vue-cli

a. 请参考教程：Vue2.x最简单的两个入门例子

0x02 vue-cli方式开发

1. 启动项目

a. 进入到vue_sny目录下（可以自行创建新项目），执行：

npm run dev

b. 打开端口，可看到相关信息：

localhost:8880

a. 修改vue_sny/src/App.vue文件的内容为：

<template>
  <div id="app">
    <table id="productListTable">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products ">
          <td>{{product.productName}}</td>
          <td>{{product.nums}}</td>
          <td>
            <a href="#nowhere" @click="edit(product)">编辑</a>
            <a href="#nowhere" @click="deleteProduct(product.id)">删除</a>
          </td>
        </tr>
        <tr>
          <td colspan="3">      
            商品名称:
            <input type="text" v-model="product4Add.productName" />
            <br> 
            数量：
            <input type="number" v-model="product4Add.nums" />
            <br>
            <button type="button" v-on:click="add">增加</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="div4Update" v-show="false">
      商品名称:
      <input type="text" v-model="product4Update.productName" />
      <br> 
      数量：
      <input type="number" v-model="product4Update.nums" />
      <input type="hidden" v-model="product4Update.id" />
      <br>
      <button type="button" v-on:click="update">修改</button>
      <button type="button" v-on:click="cancel">取消</button>
    </div>
  </div>
</template>
<script>
    //Model
    var data = {
        products: [
          { id: 1, productName: '袜子', nums: 15},
          { id: 2, productName: '羊毛衫', nums: 20},
          { id: 3, productName: '雪纺衫', nums: 24},
          { id: 4, productName: '高跟鞋', nums: 30}
        ],
        product4Add: { id: 0, productName: '', nums: '0'},
        product4Update: { id: 0, productName: '', nums: '0'}
    };
    var maxId = 5;
    for (var i=0;i<data.products.length;i++){
        if (data.products[i].id > maxId)
            maxId=  this.products[i].id;
    }
  export default {
    name: 'App',
    data: function() {
      return data;
    },
    methods: {
      add: function (event) {
                maxId++;
                this.product4Add.id = maxId;
                if(this.product4Add.productName.length==0)
                    this.product4Add.productName = "product#"+this.product4Add.id;
                //将对象加入到数组
                this.products.push(this.product4Add);
                this.product4Add = { id: 0, productName: '', nums: '0'}
            },
            deleteProduct: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.products.length;i++){
                    if (this.products[i].id == id) {
                        this.products.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (product) {
                $("#productListTable").hide();
                $("#div4Update").show();
                this.product4Update = product;
            },
            update:function(){
                $("#productListTable").show();
                $("#div4Update").hide();          
            },
            cancel:function(){
                //恢复显示
                $("#productListTable").show();
                $("#div4Update").hide();
            },
    },
  }
</script>
<style type="text/css">
  td {
    border: 1px solid #000;
  }
</style>

3. 代码讲解

a. App.vue主要分为三部分template、script、style，分别对应着html、js、css：

<template>
</template>
<script>
</script>
<style>
</style>

b. 一般情况下用了vue，不再使用jQuery，此处为了对比学习，特地加入了jQuery，此外：#div4Update初还加入了v-show=“false”，来进行初始化，隐藏编辑框。

c. methods记得加上s。

0x03 校验效果

1. 详细步骤

a. 刷新localhost:8880界面，可看到内容：

b. 然后自行进行增删改查操作进行校验，发现添加与删除都成功，但编辑无法成功。

2. 引入jQuery

a. 在浏览器按F12，点console：

Uncaught ReferenceError: $ is not defined

原因：$无法使用

解决：引入jQuery

b. 安装jQuery

ctrl+c停止之前的命令行窗口，执行

npm install --save jquery

出现警告，不管就行：

$ npm install --save jquery
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ jquery@3.3.1
added 1 package from 1 contributor and audited 30845 packages in 38.583s
found 8 vulnerabilities (1 low, 1 moderate, 5 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

c. 修改webpack配置文件（项目/build/webpack.base.conf.js）

在开头引入webpack，因为该文件默认没有引用：

const webpack = require('webpack')

引入插件：

// 添加代码
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
],

d. 在main.js引入jQuery：

import $ from 'jquery'

e. 然后启动项目：

npm run dev

f. 重新校验，发现成功了！

0x04 传统开发

1. 非vue-cli方式代码

<html>
<head>
  <meta charset="utf-8"/>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid #000;
        }     
    </style>
</head>
<body>
  <div id="app">
    <table id="productListTable">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products">
          <td>{{product.productName}}</td>
          <td>{{product.nums}}</td>
          <td>
            <a href="#nowhere" @click="edit(product)">编辑</a>
            <a href="#nowhere" @click="deleteProduct(product.id)">删除</a>
          </td>
        </tr>
        <tr>
          <td colspan="3">      
            商品名称:
            <input type="text" v-model="product4Add.productName" />
            <br> 
            数量：
            <input type="number" v-model="product4Add.nums" />
            <br>
            <button type="button" v-on:click="add">增加</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="div4Update">
      商品名称:
      <input type="text" v-model="product4Update.productName" />
      <br> 
      数量：
      <input type="number" v-model="product4Update.nums" />
      <input type="hidden" v-model="product4Update.id" />
      <br>
      <button type="button" v-on:click="update">修改</button>
      <button type="button" v-on:click="cancel">取消</button>
    </div>
  </div>
    <script type="text/javascript">
        $("#div4Update").hide();
        //Model
        var data = {
            products: [
            { id: 1, productName: '袜子', nums: 15},
            { id: 2, productName: '羊毛衫', nums: 20},
            { id: 3, productName: '雪纺衫', nums: 24},
            { id: 4, productName: '高跟鞋', nums: 30}
            ],
            product4Add: { id: 0, productName: '', nums: '0'},
            product4Update: { id: 0, productName: '', nums: '0'}
        };
        var maxId = 5;
        for (var i=0;i<data.products.length;i++){
            if (data.products[i].id > maxId)
                maxId=  this.products[i].id;
        }      
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                maxId++;
                this.product4Add.id = maxId;
                if(this.product4Add.productName.length==0)
                    this.product4Add.productName = "product-"+this.product4Add.id;
                //将对象加入到数组
                this.products.push(this.product4Add);
                this.product4Add = { id: 0, productName: '', nums: '0'}
            },
            deleteProduct: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.products.length;i++){
                    if (this.products[i].id == id) {
                        this.products.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (product) {
                $("#productListTable").hide();
                $("#div4Update").show();
                this.product4Update = product;
            },
            update:function(){
                $("#productListTable").show();
                $("#div4Update").hide();          
            },
            cancel:function(){
                //恢复显示
                $("#productListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
</body>
</html>

2. 两种方式的比较

a. $("#div4Update").hide();对应着<div id="div4Update"的v-show="false"

b. 传统方式使用cdn方式引入了vue与jquery，方便很多

0xFF 总结

本教程实现了一个简单的增删改查小案例，实现前后端分离开发可视化（进阶篇），请读者思考如何通过vue直接获取后台的数据。
本教程仍然使用了两种方式来实现一个案例，读者们请对比学习，关于webpack的相关知识请自行搜寻资料学习，此处没计划出教程。