How VueJs uses Amaze ui to adjust list and content pages

In this article, we mainly share with you how VueJs uses Amaze ui to adjust lists and content pages. We hope it can help everyone.

A backend management system is generally divided into north, south, east and west, and the west (that is, the left side) is usually our menu. As shown in the picture:

Today we will complete our project to the style as shown above. First, we will make the menu on the left and create a new one under /src/components/ menu.vue. The code is as follows:

<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>

Now our menu is ready, we just need to apply the menu to our project. Open /src/App.vue and modify the following location:

Adjust the list page

Open / The src/pages/Index.vue code is as follows:

<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>

Note: Above we initialize the query for the data on the first page and specify that each page displays 10 Note, we have not developed the paging function. This is because the api of cnodejs.org does not return pagination information to us. If it is actually developed in the future, the interface will normally return pagination information. We will then render it specifically.

Adjust content page

Open /src/pages/Content.vue, the code is as follows:

<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 id="网友回复">网友回复：</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>

So far we have completed the integration of the list page and the content page. Please explain that in the adjusted script, there is an additional mounted method. This is the hook function of vuejs. I understand. means that the element has been created and the data has been rendered. If we set the height of admin-content, there will be no problem. However, I am not sure whether it is a problem with my writing method or the impact of the integration of Amaze ui and vuejs. This is the only way to solve it at present.

Final effect

List page:

Content page:

## Related recommendations:

How vueJs implements image carousel example code sharing

Comprehensive analysis of VueJS

VueJS comprehensive analysis

The above is the detailed content of How VueJs uses Amaze ui to adjust list and content pages. For more information, please follow other related articles on the PHP Chinese website!