頁面的渲染（mui、vue、vue-cli、node）

時間 2019-11-20

標籤頁面渲染 mui vue cli node 简体版

原文原文鏈接

提到Vue,就不得不說MVC.javascript

MVC爲：MOdel View Conteollercss

　　　　模型（Model）試圖（View）控制器（Conroller）html

　　　　MVC是一個框架，它是用一種業務邏輯、數據、界面分離顯示分離的方法組織代碼，將業務邏輯彙集到一個部件裏面，在改進和個性定製界面及用戶交互的同時，不須要從新編寫業務邏輯。前端

步入正題，MUIvue

　　下載HbuildX(它是綠色版的),下載地址：http://www.dcloud.io/java

　　而後打開此軟件：webpack

　　　　建立一個項目：使用MUIweb

　　　　　　選擇這兩個選項，而後確認ajax

　　　　用MUI仿寫知乎日報:json

　　　　　　由於建立mui項目後，不少東西里面都有，因此，咱們只須要按照mui的寫法，就能夠寫出咱們本身想要的畫面和功能。

　　　　　　把下面這個頁面的代碼複製到建立好的模板上，就能夠運行了，由於沒有修改瀏覽器的設置，因此只能在手機上查看圖片，該頁面有輪播的功能

　　　　　　關於手機的，需用數據線鏈接手機，而後找到開發者模式，打開，就能夠在手機上運行了

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="css/mui.min.css">
        <style type="text/css">
            #list {
                /*避免導航邊框和列表背景邊框重疊，看起來像兩條邊框似得；*/
                margin-top: -1px;
            }

            .mui-icon {
                color: white;
            }

            .mui-action-back {
                color: white;
            }

            .mui-bar {
                background-color: #2187E7;
            }

            .mui-title {
                color: white;
                margin-left: 50px;
            }
        </style>
    </head>

    <body>
        <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
            <!--側滑菜單部分-->
            <aside id="offCanvasSide" class="mui-off-canvas-left">
                <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                    <!-- 這和整個部分就是側邊欄的 -->
                    <div class="mui-scroll">
                        <!-- 這裏是側邊的 -->
                        <header class="mui-bar mui-bar-nav">
                            <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-contact"></a>
                            <a class="mui-icon">請登陸</a><br>
                            <a class="mui-icon mui-action-menu mui-icon mui-icon-star"></a>
                        </header>
                        <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 1
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>
            <!--主界面部分-->
            <div class="mui-inner-wrap">

                <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"  >
                    <div class="mui-scroll" >

                        <header class="mui-bar mui-bar-nav">
                            <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                            <a class="mui-action-back mui-btn mui-btn-link mui-pull-right">關閉</a>
                            <h1 class="mui-title">首頁</h1>
                        </header>

                        <!-- 新聞內容 -->
                        <div class="mui-slider">
                            <!-- 圖片輪播 -->
                            <div class="mui-slider-group mui-slider-loop" id="imageCarousel"></div>
                            <!-- 圖片上的那個點 -->
                            <div class="mui-slider-indicator" id="btndot"></div>
                        </div>
                        <div class="title">
                            今日新聞
                        </div>
                         <div id="xinwen"></div>

                    </div>
                </div>
                <!-- off-canvas backdrop -->
                <div class="mui-off-canvas-backdrop"></div>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            //側滑容器父節點
            var offCanvasWrapper = mui('#offCanvasWrapper');
            //主界面容器
            var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
            //側滑容器的class列表，增長.mui-slide-in便可實現菜單移動、主界面不動的效果；
            var classList = offCanvasWrapper[0].classList;
            classList.add('mui-slide-in');

            mui.init({
                swipeBack: true //啓用右滑關閉功能
            });
            var slider = mui("#slider");

            slider.slider({
                interval: 1000
            });
            
            //這個是內容滑動
            mui("#offCanvasContentScroll").scroll();
        </script>
        <!-- 輪播效果 -->
        <script>
            var gallery = mui('.mui-slider');
            
            
        </script>
        <!-- mui.ajax請求數據 -->
        <script>
            mui.ajax({
                // dataType:'json',//服務器返回json格式數據
                url: 'https://news-at.zhihu.com/api/4/news/latest',
                type: 'get',
                success: function(data) {
                    // 額外增長的一個節點(循環輪播：第一個節點是最後一張輪播)
                    var html = "<div class='mui-slider-item mui-slider-item-duplicate'>"
                    html += "<a href='" + data.top_stories[data.top_stories.length - 1].id + "'>";
                    html += "<img src='" + data.top_stories[data.top_stories.length - 1].image + "'>";
                    html += "<p class='mui-slider-title'>" + data.top_stories[data.top_stories.length - 1].title + "</p>";
                    html += "</a>";
                    html += "</div>";


                            
                    var btndot = "";
                    // 開始輪播圖片
                    for (var i = 0; i < data.top_stories.length; i++) {
                        html += "<div class='mui-slider-item'>";
                        html += "<a href='" + data.top_stories[i].id + "'>";
                        html += "<img src='" + data.top_stories[i].image + "'>";
                        html += "<p class='mui-slider-title'>" + data.top_stories[i].title + "</p>";
                        html += "</a>";
                        html += "</div>";

                        btndot += "<div class='mui-indicator'></div>";
                    }
                    // 額外增長的一個節點(循環輪播：最後一個節點是第一張輪播)

                    html += "<div class='mui-slider-item mui-slider-item-duplicate'>"
                    html += "<a href='" + data.top_stories[0].id + "'>";
                    html += "<img src='" + data.top_stories[0].image + "'>";
                    html += "<p class='mui-slider-title'>" + data.top_stories[0].title + "</p>";
                    html += "</a>";
                    html += "</div>";
                    document.getElementById("imageCarousel").innerHTML = html;
                    document.getElementById("btndot").innerHTML = btndot;

                         
                    var html2 = "";
                    for (var i = 0; i < data.stories.length; i++) {
                        html2 += "<div class='mui-card' style='margin-bottom: 10px;'>";
                        html2 += "<ul class='mui-table-view'>";
                        html2 += "<li class='mui-table-view-cell mui-media'>";
                        html2 += "<a href='" + data.stories[i].id + "'>";
                        html2 += "<img class='mui-media-object mui-pull-right' src='" + data.stories[i].images + "'>";
                        html2 += "<div class='mui-media-body'>";
                        html2 += "<p class='mui-ellipsis'>" + data.stories[i].title + "</p>";
                        html2 += "</div></a></li></ul></div>";
                    }
                    
                    document.getElementById("xinwen").innerHTML=html2;

                    gallery.slider({
                        interval: 1000 //自動輪播週期，若爲0則不自動播放，默認爲0；
                    });
                },
                error: function(e) {
                    console.log(e);
                }
            });
        </script>
    </body>

</html>

View Code

　　　　　　若是想在電腦的瀏覽器上運行，需下載一個軟件

　　講完了MUI,而後我麼就開始講VUE

　　　在官網上下載vue.main.js

　　　　而後右鍵點擊選擇連接另存爲就能夠下載了

　　　　把它複製到項目裏的js目錄下，而後引用它，就可使用了

　　　　如今，開始用Vue寫項目：

　　　　　　只要引入所須要的vue.js

　　　　　　就能夠寫出想要的前端頁面了

　　　　　　如今，就開始寫一個關於留言的項目

　　　　　　　　首頁：index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>評論模塊</title>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <comment></comment>
        </div>

        <script type="module">

         import commentComp from './component/comment/comment-comp.js';

         Vue.component('comment', commentComp);

         var vm = new Vue({
             el: '#root'
         });

        </script>
    </body>
</html>

View Code

　　　　　　　　而後寫js

　　　　　　　　comment-comp.js

import commentInput from './comment-input.js';
import commentList from './comment-list.js';

export default {
    template: `
        <div>
            <cinput @woyaobaocun="zhendeyaobaocuna"></cinput>
            <clist @shanchuwo="zhendeyaoshanchu" v-bind:comments="comments"></clist>
        </div>
    `,
    data() { return {
        comments: []
    }},
    methods: {
        updateLocal() {
            localStorage.setItem('vvv-comments', JSON.stringify(this.comments));
        },
        zhendeyaobaocuna(res) {
            this.comments.push(res);
            this.updateLocal();
        },
        zhendeyaoshanchu(id) {
            this.comments = this.comments.filter((c) => c.id != id);
            this.updateLocal();
        }
    },
    components: {
        cinput: commentInput,
        clist: commentList
    },
    created() {
        const cs = localStorage.getItem('vvv-comments');
        if (cs) {
            this.comments = JSON.parse(cs);
        }
    }
}

View Code

　　　　　　　　comment-input.js

// 1. 定義
var commentInput = {
    template: `
        <div class='cinput'>
            <label>
               <span>用戶名</span>
               <input v-model='author'>
            </label>
            <label>
                <span>評論內容</span>
                <textarea v-model='content'></textarea>
            </label>
            <footer>
                <button @click='doSave'>發佈</button>
            </footer>
        </div>
    `,
    data() { return {
        author: '',
        content: ''
    }},
    methods: {
        doSave() {
            if (!this.author) {
                return alert('用戶名不能爲空');
            }
            if (!this.content) {
                return alert('內容不能爲空');
            }

            // 更新保存在 localStorage 裏的做者名
            localStorage.setItem('vvv-authorname', this.author);

            // 發射、廣播出去
            this.$emit('woyaobaocun', {
                id: +new Date(),
                author: this.author,
                content: this.content
            });

            // clear
            this.content = '';
        }
    },
    created() {
        const authorname = localStorage.getItem('vvv-authorname');
        if (authorname) {
            this.author = authorname;
        }
    }
};

// 2. 導出
// default 表明默認導出，一個模塊中只能有一個
export default commentInput;

View Code

　　　　　　　comment-item.js

export default {
    props: ['comment'],
    methods: {
        deleteMe() {
            this.$emit('shanchuwo', this.comment.id);
        }
    },
    template: `
       <div class='comment'>
           <span class='comment-author'>{{comment.author}}:</span>
           <span class='comment-content'>{{comment.content}}</span>
           <a href @click.prevent='deleteMe' class='comment-delete'>刪除</a>
       </div>
    `
};

View Code

　　　　　　　comment-list.js　　　　　　

import commentItem from './comment-item.js';

export default {
    props: ['comments'],
    methods: {
        doDelete(id) {
            this.$emit('shanchuwo', id);
        }
    },
    template: `
       <div class='clist'>
           <comment v-for='c, index in comments'
               :comment='c'
               :key='c.id'
               @shanchuwo='doDelete'>
           </comment>
       </div>
    `,
    components: {
        comment: commentItem
    }
};

View Code

　　　　而後寫css

　　　　　　　index.css

#root {
    width: 400px;
    padding: 2em;
    margin: 2em auto;
    border: 1px solid #e0e0e0;
    border-radius: 1em;
}
.cinput {
    margin-bottom: 1em;
}
label {
    display: flex;
    margin: 1em 0;
}
label span {
    flex-basis: 100px;
}
input, textarea {
    flex: 1;
}
.cinput footer {
    text-align: right;
}
.cinput button {
    border: none;
    background-color: orange;
    padding: .4em 1em;
    color: white;
    font-size: 16px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #e0e0e0;
}


.comment {
    padding: 1em;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
}
.comment-author {
    color: steelblue;
    flex-basis: 80px;
}
.comment-delete {
    margin-left: auto;
}

View Code

　　　　　　效果圖：

　　　　　　如今，進一步學習Vue 中的Vue Cli：

　　　　　　　　Vue CLI是一個基於Vue.js進行快速開發的完整系統，它提供了：

　　　　　　　　　　經過 @vue/cli 搭建交互式的項目手腳架

經過 @vue/cli + @vue/cli-service-global 來快速開始零配置原型開發

一個運行時依賴（@vue/cli-service）,該依賴：可升級；基於 webpack 構建，並帶有合理的默認配置；一個豐富的官方插件集合，集成了前端生態中最好的工具，一套徹底圖形化的建立和管理Vue.js的用戶界面