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

提到Vue,就不得不说MVC.

MVC为：MOdel View Conteoller

　　　　模型（Model）试图（View）控制器（Conroller）

　　　　MVC是一个框架，它是用一种业务逻辑、数据、界面分离显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性定制界面及用户交互的同时，不需要重新编写业务逻辑。

步入正题，MUI

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

　　然后打开此软件：

　　　　创建一个项目：使用MUI

　　　　　　选择这两个选项，然后确认

　　　　用MUI仿写知乎日报:

　　　　　　因为创建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的用户界面

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

猜你喜欢