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="'/Content/' + 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('topics', {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>网友回复:</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('topic/' + 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:
How vueJs implements image carousel example code sharing
Comprehensive analysis of VueJS
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
