今日作业

最新推荐文章于 2022-11-14 20:08:35 发布
weixin_44204426
最新推荐文章于 2022-11-14 20:08:35 发布
阅读量103
点赞数
文章标签： vue
本文链接：https://blog.csdn.net/weixin_44204426/article/details/109206481
版权
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入axios.min.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
  <!-- 加载vue.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <!-- 1.引入vue-router插件 -->
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>


</head>

<body>
  <div id="app">
    <div class="container">
      <h2>程序员资产管理</h2>
      <!-- 路由链接导航 -->
      <nav>
        <router-link to="/">主页</router-link>
        <router-link to="/add">添加</router-link>
      </nav>
      <!-- 4.设置路由出口 -->
      <router-view></router-view>
    </div>
  </div>



  <script>
    // 2.实例化VueRouter对象
    const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: {
            data() {
              return {
                keyword: '',
                list: [],
              }
            },
            // created ：Vue的配置项 本质是函数
            // 执行机制：Vue一实例化 就会调用
            created() {
              this.loadData();
            },
            // watch Vue的配置项 本质是对象 当中用来配置侦听器
            watch: {
              // 侦听data中 keyword数据的变化 当数据发生改变时 keyword的函数将会执行
              keyword() {
                axios({
                  method: 'GET',
                  url: BASE_URL,
                  params: {
                    name_like: this.keyword,
                  }
                }).then(res => {
                  this.list = res.data;
                }).catch(err => {
                  alert('访问出错啦~');
                })
              }
            },
            methods: {
              // 封装加载数据的函数
              loadData() {
                axios({
                  method: 'GET',
                  url: BASE_URL,
                }).then(res => {
                  this.list = res.data;
                }).catch(err => {
                  console.log('访问出错了！');
                })
              },
              // 处理删除
              hDelete(index, id) {
                // 删除之前必须先询问用户
                if (confirm(`您确定删除${this.list[index].name}吗？`)) {
                  // 发送ajax请求 删除数据
                  axios({
                    method: 'DELETE',
                    url: BASE_URL + id,
                  }).then(res => {
                    // 删除成功 重新渲染数据
                    this.loadData();
                  }).catch(err => {
                    alert('删除失败');
                  })
                }
              },
            },
            computed: {
              // 计算总价
              cTotalMoney() {
                return this.list.reduce((sum, item) => {
                  sum += Number(item.price);
                  return sum;
                }, 0)
              }
            },
            filters: {
              $: function (value, _currency) {
                // 全局匹配： 三位连续，且之后也是数值 的数值
                var digitsRE = /(\d{3})(?=\d)/g;
                value = parseFloat(value);
                if (!isFinite(value) || !value && value !== 0) return '';
                _currency = _currency != null ? _currency : '￥';
                // 保留两位小数，并整体转成字符串
                var stringified = Math.abs(value).toFixed(2);

                // 获取整数部分。-3表示倒数3位的位置
                var _int = stringified.slice(0, -3);

                // 整数部分以3为基准长度划分，剩下几位
                var i = _int.length % 3;
                // 取出头部。
                // 如：12345 ----> 12,
                var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';
                // 取出小数点部分
                // 如：12345.67 ----> .67

                var _float = stringified.slice(-3);
                var sign = value < 0 ? '-' : '';
                return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;
              }
            },
            template: `
              <div>
                <!-- 搜索 start-->
                <form class="form-inline" style="padding: 20px 0">
                  <input type="text" v-focus="" v-model="keyword" class="form-control" placeholder="输入关键字进行搜索">
                </form>
                <!-- 搜索 end -->
                <!-- 表格 start -->
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>编号</th>
                      <th>资产名称</th>
                      <th>创建时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody v-if="list.length">
                    <tr v-for="(item,index) in list">
                      <td>{{index+1}}</td>
                      <td>{{item.name}}</td>
                      <td>{{item.price | $}}</td>
                      <td><a href="#" @click.prevent="hDelete(index,item.id)">删除</a></td>
                    </tr>
                    <tr>
                      <td colspan="4">总价：{{cTotalMoney | $}}</td>
                    </tr>
                  </tbody>
                  <tbody v-else>
                    <tr>
                      <td colspan="4">暂无数据！</td>
                    </tr>
                  </tbody>
                </table>
                <!-- 表格 end -->
              </div>
            `,
          }
        },
        {
          path: '/add',
          component: {
            data() {
              return {
                asset: {
                  name: '',
                  price: '',
                },
              }
            },
            methods: {
              // 处理添加 添加之前必须确认所有选项不能为空
              hAdd() {
                let { name, price } = this.asset;
                // 发送ajax请求 添加数据
                axios({
                  method: 'POST',
                  url: BASE_URL,
                  data: {
                    name,
                    price,
                  }
                }).then(res => {
                  // console.log(res.data);
                  // 添加成功 跳转到主页
                  this.$router.push('/');
                  // 清空表单
                  this.asset.name = '';
                  this.asset.price = '';
                }).catch(err => {
                  alert('添加失败');
                })

              }
            },
            template: `
              <div>
                <!-- 添加资产 start -->
                <form class="form-inline">
                  <div class="form-group">
                    <div class="input-group">
                      <input type="text" v-model.trim="asset.name" class="form-control" placeholder="资产名称">
                      <input type="text" v-model.number="asset.price" class="form-control" placeholder="价值">
                      <button class="btn btn-primary" @click.prevent="hAdd">添加资产</button>
                    </div>
                  </div>
                </form>
                <!-- 添加资产 end -->
              </div>
            `,
          }
        }
      ]
    })
    // 定义全局指令
    Vue.directive('focus', {
      // 当标签上使用这个指令时 insertd函数就会执行
      inserted(el) { //el代表使用这个指令的DOM元素
        el.focus();
      }
    })
    // 定义基地址 消除魔法字符串
    const BASE_URL = 'http://localhost:3000/assets/';
    let v = new Vue({
      el: '#app',
      // 3.将VueRouter实例对象挂载到Vue实例对象上
      router,
    })
  </script>
</body>

</html>
weixin_44204426
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今日作业

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.bootcdn.net/ajax/lib
复制链接

扫一扫