VueJs에서 Amaze를 사용하는 방법-JS 튜토리얼-php.cn

VueJs에서 Amaze를 사용하는 방법

亚连

풀어 주다： 2018-06-23 15:24:52

원래의

1395명이 탐색했습니다.

이 글에서는 주로 VueJs 핏 채우기 다이어리의 목록과 콘텐츠 페이지를 조정하는 Amaze UI를 소개합니다. 필요한 친구들이 참고할 수 있습니다.

왼쪽 메뉴 만들기

백그라운드 관리 시스템, 일반 스타일은 북, 남, 동, 서로 나누어져 있으며, 일반적으로 서쪽(즉, 왼쪽)이 우리의 메뉴입니다. 그림과 같이:

오늘은 위와 같은 스타일로 프로젝트를 완료하겠습니다. 먼저 왼쪽에 메뉴를 만들고 /src/comComponents/ 아래에 새 menu.vue를 만듭니다. 코드는 다음과 같습니다.

<template>
<p class="admin-sidebar am-offcanvas" id="admin-offcanvas">
 <p class="am-offcanvas-bar admin-offcanvas-bar">
  <ul class="am-list admin-sidebar-list">
   <li class="admin-parent" v-for="menu in menus"><router-link :to="menu.href">{{menu.name}}</router-link>
    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
      <li v-for="child in menu.childs" v-if="menu.childs"><router-link :to="child.href"><span class="am-icon-check"></span> {{child.name}}<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></router-link></li>
     </ul>
   </li>
  </ul>
 </p>
</p>
</template>
<script>
export default{
  name : "Menu",
  data(){
    return {
      menus:[{
        name:"首页",
        href:"/",
        childs:[]
      },{
        name:"写信",
        href:"/",
        childs:[]
      },{
        name:"收件箱",
        href:"/Inbox",
        childs:[]
      },{
        name:"发件箱",
        href:"/Outbox",
        childs:[]
      },{
        name:"垃圾箱",
        href:"/",
        childs:[]
      },{
        name:"草稿箱",
        href:"/",
        childs:[]
      },{
        name:"其他文件夹",
        href:"/",
        childs:[{
          name:"已发送邮件",
          href:"/"
        },{
          name:"已删除邮件",
          href:"/"
        }]
      }]
    }
  }
}
</script>

로그인 후 복사

이제 메뉴가 준비되었으므로 프로젝트에 메뉴를 적용하기만 하면 됩니다. /src/App.vue를 열고 다음 위치를 수정합니다.

목록 페이지를 조정합니다.

/src/pages/Index.vue를 열면 코드는 다음과 같습니다.

<template>
<p class="admin-content">
 <p class="admin-content-body">
  <p class="am-cf am-padding am-padding-bottom-0">
   <p class="am-fl am-cf"><strong class="am-text-primary am-text-lg">收件箱</strong> / <small>Inbox</small></p>
  </p>
  <hr>
  <p class="am-g">
   <p class="am-u-sm-12 am-u-md-6">
    <p class="am-btn-toolbar">
     <p class="am-btn-group am-btn-group-xs">
      <button type="button" class="am-btn am-btn-default" @click="toAdd"><span class="am-icon-plus"></span> 新增</button>
      <button type="button" class="am-btn am-btn-default" @click="save"><span class="am-icon-save"></span> 保存</button>
      <button type="button" class="am-btn am-btn-default" @click="verify"><span class="am-icon-archive"></span> 审核</button>
      <button type="button" class="am-btn am-btn-default" @click="remove"><span class="am-icon-trash-o"></span> 删除</button>
     </p>
    </p>
   </p>
   <p class="am-u-sm-12 am-u-md-3">
    <p class="am-input-group am-input-group-sm">
     <input type="text" class="am-form-field">
    <span class="am-input-group-btn">
     <button class="am-btn am-btn-default" type="button">搜索</button>
    </span>
    </p>
   </p>
  </p>
  <!-- admin-content-body end -->
  <p class="am-g" style="margin-top:5px;">
   <p class="am-u-sm-12">
    <form class="am-form">
     <table class="am-table am-table-striped am-table-hover table-main am-table-bordered am-table-radius" >
      <thead>
      <tr>
       <th class="table-check"><input type="checkbox" /></th><th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in tableList">
       <td><input type="checkbox" /></td>
       <td>{{index + 1}}</td>
       <td><router-link :to="&#39;/Content/&#39; + item.id">{{item.title}}</router-link></td>
       <td>{{item.tab}}</td>
       <td class="am-hide-sm-only">{{item.author.loginname}}</td>
       <td class="am-hide-sm-only">{{item.create_at}}</td>
       <td>
        <p class="am-btn-toolbar">
         <p class="am-btn-group am-btn-group-xs">
          <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
          <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
          <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
         </p>
        </p>
       </td>
      </tr>
      </tbody>
     </table>
     <p class="am-cf">
      共 15 条记录
      <p class="am-fr">
       <ul class="am-pagination">
        <li class="am-disabled"><a href="#">«</a></li>
        <li class="am-active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">»</a></li>
       </ul>
      </p>
     </p>
    </form>
   </p>
  </p>
  <!-- am-g end -->
 </p>
</p>
</template>
<script>
 export default{
  name : "Inbox",
  data () {
    return {
     tableList: []
    }
   },
   created () {
    this.initialization()
   },
   mounted () {
    $(".admin-content").css("height",(document.documentElement.clientHeight-36-50)+"px");
   },
   methods: {
    initialization () {
     this.$api.get(&#39;topics&#39;, {page:1,limit:10}, r => {
      console.log(r);
      if(r.success){
       this.tableList = r.data;
      }
     })
    },
    toAdd(){
      alert("添加");
    },
    save(){
      alert("保存");
    },
    verify(){
      alert("审核");
    },
    remove(){
      alert("删除");
    }
   }
 }
</script>

로그인 후 복사

참고: 위 쿼리의 첫 번째 페이지를 초기화합니다. 데이터는 페이지당 10개의 항목을 표시하도록 규정되어 있습니다. 페이징 기능은 개발되지 않았습니다. 이는 cnodejs.org의 API가 우리에게 페이지 매김 정보를 반환하지 않기 때문입니다. 향후 실제로 개발된다면 인터페이스는 일반적으로 페이지 매김 정보를 구체적으로 반환할 것입니다.

콘텐츠 페이지 조정

/src/pages/Content.vue를 열면 코드는 다음과 같습니다.

<template>
<p class="admin-content">
  <h2 v-text="article.title"></h2>
  <p>作者：{{article.author.loginname}}　　发表于：{{article.create_at}}</p>
  <hr>
  <article v-html="article.content"></article>
  <h3>网友回复：</h3>
  <ul>
   <li v-for="i in article.replies">
    <p>评论者：{{i.author.loginname}}　　评论于：{{i.create_at}}</p>
    <article v-html="i.content"></article>
   </li>
  </ul>
 </p>
</template>
<script>
 export default {
  name : "Content",
  data () {
   return {
    id: this.$route.params.id,
    article: {
     author: {
      loginname:""
     }
    }
   }
  },
  created () {
   this.getData();
  },
  mounted () {
   $(".admin-content").css("height",(document.documentElement.clientHeight-36-50)+"px");
  },
  methods: {
   getData () {
    this.$api.get(&#39;topic/&#39; + this.id, null, r => {
     console.log(r.data);
     this.article = r.data;
    })
   }
  }
 }
</script>

로그인 후 복사

이 시점에서 목록 페이지와 콘텐츠 페이지의 통합이 완료되었습니다. 설명해주세요. 조정된 스크립트에는 추가로 마운트된 메소드가 있습니다. 이것은 vuejs의 후크 기능입니다. 내가 이해하는 것은 요소가 생성되고 데이터가 렌더링되었음을 의미합니다. admin-content의 높이를 설정하면 문제가 없을 것입니다. 그러나 제 작성 방법에 문제가 있는지 아니면 Amaze ui와 vuejs 통합의 영향이 있는지 확실하지 않습니다. 현재.

최종 효과

목록 페이지:

콘텐츠 페이지:

위 내용은 앞으로 모두에게 도움이 되기를 바랍니다.