vue小项目实现后台管理-阿里云开发者社区

vue小项目实现后台管理

2023-08-16 83

版权

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

简介： vue小项目实现后台管理

使用vue实现图书后台管理

使用工具：HBuild X，真的是一款超实用的软件

附上下载地址：https://www.dcloud.io/hbuilderx.html

新建项目

这就是为什么用这款软件的好处了，脚手架之类的环境以及其他插件，里面都设置好了

进入主题

css文件:

table{
  border: 1px solid #e9e9e9;
  width: 500px;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding: 8px,16px;
  border: 1px solid #e9e9e9;
  text-align: align;
}
th{
  background-color: #f7f7f7;
  color: #0000ff;
  font-weight: 600;
}

.js文件

const app = new Vue({
  el:'#app',
  data:{
    books:[
      {
      id:1,
      name:'《算法导论》',
      date:'2020-4',
      price:85.00,
      count:1
      },
      {
      id:2,
      name:'《Linux编程技术》',
      date:'2018-2',
      price:59.00,
      count:1
      },
      {
      id:3,
      name:'《深入理解java虚拟机》',
      date:'2019-9',
      price:95.00,
      count:1
      },
      {
      id:4,
      name:'《编程大全》',
      date:'2015-9',
      price:89.00,
      count:1
      }
    ]
  },
  methods:{
    increment(index){
      this.books[index].count++;
    },
    discrement(index){
      this.books[index].count--;
    },
    removeBooks(index){
      /* 因为下标值比id刚好小1 */
      this.books.splice(index,1);
    }
  },
  computed:{
    totalPrice(){
      let sum = 0;
      for (var i = 0; i < this.books.length; i++) {
        sum = sum + this.books[i].count * this.books[i].price;
      }
      return sum;
    }
  }
})

最终的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/day02_homeWrok.css"/>
  </head>
  <body>
    <div id="app">
      <div v-if="books.length >= 1">
        <table align="center">
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(i,index) in books">
              <td>{{i.id}}</td>
              <td>{{i.name}}</td>
              <td>{{i.date}}</td>
              <td>{{i.price}}</td>
              <td>
                <button @click="discrement(index)" v-bind:disabled="i.count <= 1">-</button>
                {{i.count}}
                <button @click="increment(index)">+</button>
              </td>
              <td><button @click="removeBooks(index)">删除</button></td>
            </tr>
          </tbody>
        </table>
        <h3 align="center">总价格为:{{totalPrice}}</h3>
      </div>
      <div v-else>
        <h2 align="center">订单为空</h2>
      </div>
    </div>
    <script src="../../js/vue.js"></script>
    <script src="../../js/day02_homeWrok.js"></script>
  </body>
</html>