飞道的博客

vuejs项目实战

2020-05-06 15:39 474人阅读  评论(0)

文章目录

1，项目说明

1、技术架构

vue.js, 模块化，工程化, 移动端

2、目录部署

Css：所有样式文件
Data：所有异步接口
Img：所有图片文件
Js：所有js文件（2.0）
index.html

3、结构说明

  1. 一个页面看成是一个组件，所以要创建三个组件
  2. 页面中只能同时显示一个组件，那么如果只有一个容器元素，就可以实现渲染一个了
  3. Vue中定义了一个叫component自定义元素，跟transition一样，有特殊的功能，用来渲染组件
    　　　　 component是一个万能的组件容器的元素
    　　　　 Is属性的属性值是谁，就渲染谁
    　　　　 为了让属性值是动态变量，我们可以使用v-bind指令
  4. 使用component指定当前显示的组件
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <title>爱创课堂团购网</title>
</head>
<body>
    <div id="app">
        <!-- 定义组件容器：定义一个万能的组件元素 view是谁就会渲染谁-->
        <component v-bind:is="view"></component>
    </div>

    <script src="vue.js"></script>
    <script src="index.js"></script>
</body>
</html>
  • index.js
// 第一步：使用Vue.extend方法，定义三个组件、每个组件实质就是一个页面
var Home = Vue.extend({            // home组件：模拟显示home页面
   template:'<h1>Home</h1>'
});
var List = Vue.extend({            // list组件：模拟显示list页面
    template:'<h1>List</h1>'
});
var Detail = Vue.extend({          // detail组件：模拟显示detail页面
    template:'<h1>Detail</h1>'
});

// 第二步：将组件注册到页面中 Vue.component
Vue.component('Home',Home);
Vue.component('list',List);
Vue.component('detail',Detail);

// 创建vue实例化对象
var app = new Vue({
    el:'#app',
    data:{
        view:'home'        // 定义默认渲染视图的名称
    }
});


// route路由执行的函数，来控制页面显示的组件（home、list、detail）
var route = function () {
    var hash = location.hash;         // 获取到url后面传入的参数
    hash = hash.replace(/#\/?/,'');    //  url中 '#' 和 '#/'  是无意义的，因此要过滤掉
    hash = hash.split('/');
    var map = {               // 定义了组件的名称才能够渲染
        home:true,
        list:true,
        detail:true
    };
    if (map[hash[0]]){             // hash[0]在map表中存在才能渲染 hash[0]= home、list、detail
        app.view = hash[0]         // 将页面设置成url传入的那个组件
    }else {
        app.view = 'home'         // 否则进入默认路由（home这个组件）
    }
    app.query = hash.slice(1);    // 从第二个成员开始表示路由参数了
    // http://localhost:63342/vuejsPro/bbb/demo/index.html?_ijt=p7pgchp7pvfueq4e4tem6c0n0r#home/type/2
    // app.query = ["type", "2"]
};

// 实现路由：hashchange 当页面hash改变就会触发此事件
window.addEventListener('hashchange',route);    // 每次url给不就会触发
route();   // 当页面加载文成也要执行route路由函数   // window.addEventListener('load',route);

2，定义路由

1、路由原理

  1. 我们定义三套组件：home、list、detail，每个组件实际对应了一个页面
  2. 并且每个组件对应一个自定义路由，前端的路由是根据hash实现的，所以我们要监听hash的改变
  3. Hash的改变会触发hashchange事件，所以我们订阅该事件，然后解析路由，切换组件
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>爱创课堂团购网</title>
</head>
<body>
    <div id="app">
        <!-- 定义组件容器：定义一个万能的组件元素 view是谁就会渲染谁-->
        <component v-bind:is="view"></component>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>

</body>
</html>
  • js/index.js
// 第一步：使用Vue.extend方法，定义三个组件、每个组件实质就是一个页面
var Home = Vue.extend({            // home组件：模拟显示home页面
   template:'<h1>Home</h1>'
});
var List = Vue.extend({            // list组件：模拟显示list页面
    template:'<h1>List</h1>'
});
var Detail = Vue.extend({          // detail组件：模拟显示detail页面
    template:'<h1>Detail</h1>'
});

// 第二步：将组件注册到页面中 Vue.component
Vue.component('Home',Home);
Vue.component('list',List);
Vue.component('detail',Detail);

// 创建vue实例化对象
var app = new Vue({
    el:'#app',
    data:{
        view:'home'        // 定义默认渲染视图的名称
    }
});


// route路由执行的函数，来控制页面显示的组件（home、list、detail）
var route = function () {
    var hash = location.hash;         // 获取到url后面传入的参数
    hash = hash.replace(/#\/?/,'');    //  url中 '#' 和 '#/'  是无意义的，因此要过滤掉
    hash = hash.split('/');
    var map = {               // 定义了组件的名称才能够渲染
        home:true,
        list:true,
        detail:true
    };
    if (map[hash[0]]){             // hash[0]在map表中存在才能渲染 hash[0]= home、list、detail
        app.view = hash[0]         // 将页面设置成url传入的那个组件
    }else {
        app.view = 'home'         // 否则进入默认路由（home这个组件）
    }
    app.query = hash.slice(1);    // 从第二个成员开始表示路由参数了
    // http://localhost:63342/vuejsPro/bbb/demo/index.html?_ijt=p7pgchp7pvfueq4e4tem6c0n0r#home/type/2
    // app.query = ["type", "2"]
};

// 实现路由：hashchange 当页面hash改变就会触发此事件
window.addEventListener('hashchange',route);    // 每次url给不就会触发
route();   // 当页面加载文成也要执行route路由函数   // window.addEventListener('load',route);

3，异步请求

1、运行node后端服务

C:\Users\tom>cd C:\Users\tom\PycharmProjects\vuejsPro\bbb\demo\ # 进入app.js文件夹下
　　　　　　C:\Users\tom\PycharmProjects\vuejsPro\bbb\demo> node app.js # 运行
server running at port 3001

  • app.js 服务端
/**
 * 服务器
 */

var MINE_TYPES = {
    'html':     'text/html',
    'xml':         'text/xml',
    'txt':         'text/plain',
    'css':         'text/css',
    'js':         'text/javascript',
    'json':     'application/json',
    'pdf':         'application/pdf',
    'swf':         'application/x-shockwave-flash',
    'svg':         'image/svg+xml',
    'tiff':     'image/tiff',
    'png':         'image/png',
    'gif':         'image/gif',
    'ico':         'image/x-icon',
    'jpg':         'image/jpeg',
    'jpeg':     'image/jpeg',
    'wav':         'audio/x-wav',
    'wma':         'audio/x-ms-wma',
    'wmv':         'video/x-ms-wmv',
    'woff2':     'application/font-woff2'
};
var PORT = 3001;
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var root = process.cwd();

var server = http.createServer(function(request, response) {
    var pathname = decodeURIComponent(url.parse(request.url).pathname);
    var realPath = path.join(root, pathname);
    var ext = path.extname(realPath);
    if (!ext) {
        realPath = path.join(realPath, '/home.html');
        ext = '.html'
    }
    fs.exists(realPath, function(exists) {
        if (exists) {
            fs.readFile(realPath, 'binary', function(err, file) {
                if (!err) {
                    response.writeHead(200, {
                        'Content-Type': MINE_TYPES[ext.slice(1)] || 'text/plain'
                    });
                    response.write(file, 'binary');
                    response.end();
                } else {
                    response.writeHead(500, {
                        'Content-Type': 'text/plain'
                    });
                    response.write('ERROR, the reason of error is ' + err.code + '; Error number is ' + err.errno + '.');
                    response.end();
                }
            })
        } else {
            response.writeHead(404, {
                'Content-Type': 'text/plain'
            });
            response.write('This request URL ' + pathname + ' was not found on this server.');
            response.end();
        }
    });

});
server.listen(PORT);
console.log("server running at port " + PORT);
  • home.json 模拟请求数据
{
    "errno": 0,
    "name":"zhangsan",
    "age":100
}
  • home.html 发送异步请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <h1>home</h1>
    <script src="vue.js"></script>
    <script>
        // 实现异步请求
         var Util = {
             ajax:function (url, fn) {                       // url：请求地址；fn：请求回调函数
                 var xhr = new XMLHttpRequest();             // 初始化xhr
                 xhr.onreadystatechange = function () {    // 监听事件
                     if (xhr.readyState === 4){             // 判断状态
                         if (xhr.status === 200 ){          // 判断状态码
                             fn && fn(JSON.parse( xhr.responseText) )       // 执行函数fn： xhr.responseText 是从服务端获取到的数据
                         }
                     }
                 };
                 xhr.open('GET', url, true);    // 打开链接
                 xhr.send(null)                 // null代替发送数据内容
             }
         };
         // 测试
         Util.ajax('home.json',function (res) {
             console.log(res,3333333333333333333)
         });
    </script>
</body>
</html>

4，头部样式

说明：公用的部分，不要写在组件中，尽量写在父组件（vue实例化对象中），这样组件可以复用。

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>爱创课堂团购网</title>
</head>
<body>
    <!-- 定义容器元素 -->
    <div id="app">
        <header class="header">
            <div class="title">
                <div class="go-back" v-on:click="goBack"><span class="arrow"><span class="arrow green"></span></span></div>
                <div class="login">登录</div>
                <h1>爱创课堂团购网</h1>
            </div>
            <div class="search" v-show="showSearch">
                <input type="text" placeholder="请输入搜索关键字" v-on:keyup.enter="gotoSearch">
            </div>
        </header>
    </div>
    <script type="text/javascript" src="js/vue2.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
  • js/index.js
// 实例化vue
var app = new Vue({
    el: '#app',             // 绑定数据
    data: {
        view: 'home',      // 存储路由参数
        query: [],
        search: '',        // 是否显示搜索框
        showSearch: true
    },
    methods: {             // 定义方法
        gotoSearch: function (e) {                 // 点击enter进行搜索
            this.search = e.target.value            // 第一种方式，通过组件间通信
        },
        goBack: function () {                        // 返回逻辑
            history.go(-1)
        }
    }
});

5，分类按钮: home页面中的不变数据

1、说明

  1. 分类按钮的数据是不变的，因此不变的数据，通常直接写在js中，变的通过异步请求获取

  2. 直接写在页面中的数据，通常称之为同步的数据，通过异步请求获取的数据，通常称之为异步数据

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>爱创课堂团购网</title>
</head>
<body>
    <!-- 定义容器元素 -->
    <div id="app">
        <component v-bind:searchquery="search" v-bind:is="view"></component>
    </div>
    <!-- 定义首页模板 -->
    <script type="text/template" id="tpl_home">
        <!-- 定义首页组件容器 -->
        <section class="home">
            <ul class="types clearfix">
                <li v-for="item in types">
                    <a v-bind:href="'#list/type/' + item.id">
                        <img v-bind:src="'img/icon/' + item.url" alt="">
                        <p>{{item.title}}</p>
                    </a>
                </li>
            </ul>
        </section>
    </script>
    <script type="text/javascript" src="js/vue2.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
  • index.js
// 拓展工具方法
var Util =  {
    /***
     * 获取模板的方法
     * @id         模板标签元素id
     * return     模板内容
     **/
    tpl: function (id) {
        return document.getElementById(id).innerHTML;
    },
    /**
     * 我们要实现异步请求的方法
     * @url        请求地址
     * @fn         执行的方法
     ***/
    ajax: function (url, fn) {                            // 创建xhr对象
        var xhr = new XMLHttpRequest();                    // 订阅事件
        xhr.onreadystatechange = function () {        // 监听状态
            if (xhr.readyState === 4) {                // 判断状态
                if (xhr.status === 200) {              // 执行回调函数
                    // console.log(xhr)
                    fn(JSON.parse(xhr.responseText))
                }
            }
        };
        xhr.open('GET', url, true);            // 打开链接
        xhr.send(null)                        // 发送数据
    }
};

// 定义三个组件
var Home = Vue.extend({
    template: Util.tpl('tpl_home'),
    data: function () {          // 定义数据
        return {                // 返回值才是真正的数据
            types: [
                {id: 1, title: '美食', url: '01.png'},
                {id: 2, title: '电影', url: '02.png'},
                {id: 3, title: '酒店', url: '03.png'},
                {id: 4, title: '休闲娱乐', url: '04.png'},
                {id: 5, title: '外卖', url: '05.png'},
                {id: 6, title: 'KTV', url: '06.png'},
                {id: 7, title: '周边游', url: '07.png'},
                {id: 8, title: '丽人', url: '08.png'},
                {id: 9, title: '小吃快餐', url: '09.png'},
                {id: 10, title: '火车票', url: '10.png'}
            ],
        }
    },
});

// 注册三个组件
Vue.component('home', Home);

// 实例化vue
var app = new Vue({
    el: '#app',             // 绑定数据
    data: {
        view: 'home',      // 存储路由参数
        search: '',        // 是否显示搜索框
    },
});

// 定义路由
function router () {
    var hash = location.hash;
    hash = hash.replace(/^#\/?/, '');
    hash = hash.split('/');
    // 定义规则
    var map = {
        home: true,
    };
    if (map[hash[0]]) {
        app.view = hash[0]
    } else {
        app.view = 'home'
    }
    app.query = hash.slice(1);
}
window.addEventListener('hashchange', router);
window.addEventListener('load', router);

6，广告模块：home页面中通过异步请求获取数据

1、说明

  1. 这里的数据是可变的，所以要写在异步请求中，

  2. 什么时候请求数据？看组件什么时候创建完成。所以要看组件生命周期，组件的生命周期

  3. Vue将组件看成是一个有生命的个体，跟人一样，定义了各个阶段，组件的生命周期：组件的创建过程

  4. 组件生命周期钩子函数：当组件处在某个阶段，要执行某个方法，来通知我们，组件进入某个阶段，这个方法就是组件生命周期的钩子函数

  5. 这些方法在组件中直接定义，会按照顺序执行，没有参数，作用域都是组件实例化对象

  6. 注：为了让数据属性具有特性，我们一定要将该数据在绑定的数据（data）中定义出来

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>爱创课堂团购网</title>
</head>
<body>
    <!-- 定义容器元素 -->
    <div id="app">
        <component v-bind:searchquery="search" v-bind:is="view"></component>
    </div>
    <!-- 定义首页模板 -->
    <script type="text/template" id="tpl_home">
        <!-- 定义首页组件容器 -->
        <section class="home">
            <!-- 定义ad广告 -->
            <ul class="ad clearfix">
                <li v-for="(item, index) in ad">
                    <a v-bind:href="'#/detail/' + item.id">
                        <h3>{{item.title}}</h3>
                        <p>{{item.description}}</p>
                        <img v-bind:src="'img/ad/' + item.url" alt="">
                    </a>
                </li>
            </ul>
        </section>
    </script>
    <script type="text/javascript" src="js/vue2.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
  • index.js
// 拓展工具方法
var Util =  {
    /***
     * 获取模板的方法
     * @id         模板标签元素id
     * return     模板内容
     **/
    tpl: function (id) {
        return document.getElementById(id).innerHTML;
    },
    /**
     * 我们要实现异步请求的方法
     * @url        请求地址
     * @fn         执行的方法
     ***/
    ajax: function (url, fn) {                            // 创建xhr对象
        var xhr = new XMLHttpRequest();                    // 订阅事件
        xhr.onreadystatechange = function () {        // 监听状态
            if (xhr.readyState === 4) {                // 判断状态
                if (xhr.status === 200) {              // 执行回调函数
                    // console.log(xhr)
                    fn(JSON.parse(xhr.responseText))
                }
            }
        };
        xhr.open('GET', url, true);            // 打开链接
        xhr.send(null)                        // 发送数据
    }
};

// 定义三个组件
var Home = Vue.extend({
    template: Util.tpl('tpl_home'),
    data: function () {          // 定义数据
        return {                // 返回值才是真正的数据
            ad: [],            // 将数据定义出来，否则没有特性
        }
    },
    created: function () {
        this.$parent.showSearch = true;
        var me = this;
        Util.ajax('data/home.json', function (res) {        // 请求数据
            if (res && res.errno === 0) {
                me.ad = res.data.ad;                        // 存储数据
                me.list = res.data.list;
                // 2.0版本不建议使用$set更新数据
                // me.$set('ad', res.data.ad)
            }
        })
    }
});

// 注册三个组件
Vue.component('home', Home);

// 实例化vue
var app = new Vue({
    el: '#app',             // 绑定数据
    data: {
        view: 'home',      // 存储路由参数
        search: '',        // 是否显示搜索框
    },
});

// 定义路由
function router () {
    var hash = location.hash;
    hash = hash.replace(/^#\/?/, '');
    hash = hash.split('/');
    // 定义规则
    var map = {
        home: true,
    };
    if (map[hash[0]]) {
        app.view = hash[0]
    } else {
        app.view = 'home'
    }
    app.query = hash.slice(1);
}
window.addEventListener('hashchange', router);
window.addEventListener('load', router);

7，效果图

8，项目模块化

1、项目模块化目录结构

  • 目录结构说明
Lib: 库文件
Util：工具方法
Filter：定义过滤器
Router： 定义路由
Vm：存储所有组件
    Home：home组件以及样式
    List：list组件以及样式
    Detail：detail组件以及样式
    App.js：vue实例化对象
    App.css： app样式
Bootstrap.js 启动的文件
Reset.js 默认样式


2、个文件代码展示

  • demo/index.heml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
    <!--<link rel="stylesheet" type="text/css" href="css/index.css">-->
    <title>爱创课堂团购网</title>
</head>
<body>
    <!-- 定义容器元素 -->
    <div id="app">
        <header class="header">
            <div class="title">
                <div class="go-back" v-on:click="goBack"><span class="arrow"><span class="arrow green"></span></span></div>
                <div class="login">登录</div>
                <h1>爱创课堂团购网</h1>
            </div>
            <div class="search" v-show="showSearch">
                <input type="text" placeholder="请输入搜索关键字" v-on:keyup.enter="gotoSearch">
            </div>
        </header>
        <!-- 定义组件容器元素 -->
        <!-- <home></home>
        <list></list>
        <detail></detail> -->
        <!-- 同时只能渲染一个组件 -->
        <component v-bind:searchquery="search" v-bind:is="view"></component>
    </div>
    <!-- 定义首页模板 -->
    <script type="text/template" id="tpl_home">
        <!-- 定义首页组件容器 -->
        <section class="home">
            <ul class="types clearfix">
                <li v-for="item in types">
                    <a v-bind:href="'#list/type/' + item.id">
                        <img v-bind:src="'img/icon/' + item.url" alt="">
                        <p>{{item.title}}</p>
                    </a>
                </li>
            </ul>
            <!-- 定义ad广告 -->
            <ul class="ad clearfix">
                <li v-for="(item, index) in ad">
                    <a v-bind:href="'#/detail/' + item.id">
                        <h3>{{item.title}}</h3>
                        <p>{{item.description}}</p>
                        <img v-bind:src="'img/ad/' + item.url" alt="">
                    </a>
                </li>
            </ul>
            <!-- 定义商品列表 -->
            <ul class="list-container">
                <li v-for="item in list">
                    <a v-bind:href="'#detail/' + item.id">
                        <img v-bind:src="'img/list/' + item.img" alt="">
                        <div class="content">
                            <h3>{{item.title}}</h3>
                            <p>
                                <span class="price">{{item.price | price}}</span>
                                <span class="origin-price">{{item.orignPrice | orignPrice}}</span>
                                <span class="sales">{{item.sales | sales}}</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </section>
    </script>
    <!-- 定义list模板 -->
    <script type="text/template" id="tpl_list">
        <section class="list">
            <ul class="types clearfix">
                <li v-for="ickt in types" v-on:click="sortBy(ickt.key)">
                    <span>{{ickt.value}}</span>
                    <span class="arrow"></span>
                </li>
            </ul>
            <ul class="list-container">
                <!-- <li v-for="item in list | filterBy query"> -->
                <!-- <li v-for="item in list | filterBy searchquery"> -->
                <li v-for="item in dealList">
                    <a v-bind:href="'#detail/' + item.id">
                        <img v-bind:src="'img/list/' + item.img" alt="">
                        <div class="content">
                            <h3>{{item.title}}</h3>
                            <p>
                                <span class="price">{{item.price | price}}</span>
                                <span class="origin-price">{{item.orignPrice | orignPrice}}</span>
                                <span class="sales">{{item.sales | sales}}</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="load-more" v-show="others.length" v-on:click="loadMore">
                <span>查看剩余{{others.length}}条团购</span>
                <span class="arrow">
                    <span class="arrow white"></span>
                </span>
            </div>
        </section>
    </script>
    <!-- 定义详情页模板 -->
    <script type="text/template" id="tpl_detail">
        <section class="product">
            <div class="image-part">
                <img v-if="data.src" v-bind:src="'img/item/' + data.src" alt="">
                <h1>{{data.title}}</h1>
                <p>{{data.description}}</p>
            </div>
            <div class="price-part">
                <span class="price">{{data.price}}</span>
                <span class="sign">元</span>
                <span class="origin">{{data.orignPrice | orignPrice}}</span>
                <span class="buy">立即购买</span>
            </div>
            <ul class="sale-part clearfix">
                <li>支持自动退货</li>
                <li>支持随时退货</li>
                <li>{{data.sales | sales}}</li>
            </ul>
            <div class="store-part part">
                <div class="header">店家信息</div>
                <div class="body">
                    <p>{{data.storeName}}</p>
                    <p>{{data.storeAddress}}</p>
                </div>
                <div class="footer">查看{{data.storeNum}}家分店</div>
            </div>
            <div class="buy-part part">
                <div class="header">购买须知</div>
                <div class="body">
                    <ul>
                        <li>
                            <h3>有效期</h3>
                            <p>{{data.validateTime}}</p>
                        </li>
                        <li>
                            <h3>使用时间</h3>
                            <p>{{data.useTime}}</p>
                        </li>
                        <li>
                            <h3>使用规则</h3>
                            <p v-for="item in data.rules">{{item}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </script>
    <!-- 引入脚本文件 -->
    <!--<script type="text/javascript" src="static/lib/vue2.js"></script>-->

    <script type="text/javascript" src="static/lib/sea.js"></script>
    <script type="text/javascript" src="static/lib/seajs-css.js"></script>
    <script type="text/javascript" src="static/lib/seajs-preload.js"></script>
    <script>
        // 定义配置引入入口文件
        seajs.config({
            // 配置根目录
            base:'/static',
            // 预加载
            preload:['lib/vue']
        });
        // 引入入口文件
        seajs.use('bootstrap')
    </script>
</body>
</html>
  • demo/app.js
/**
 * 服务器
 */

var MINE_TYPES = {
    'html':     'text/html',
    'xml':         'text/xml',
    'txt':         'text/plain',
    'css':         'text/css',
    'js':         'text/javascript',
    'json':     'application/json',
    'pdf':         'application/pdf',
    'swf':         'application/x-shockwave-flash',
    'svg':         'image/svg+xml',
    'tiff':     'image/tiff',
    'png':         'image/png',
    'gif':         'image/gif',
    'ico':         'image/x-icon',
    'jpg':         'image/jpeg',
    'jpeg':     'image/jpeg',
    'wav':         'audio/x-wav',
    'wma':         'audio/x-ms-wma',
    'wmv':         'video/x-ms-wmv',
    'woff2':     'application/font-woff2'
};
var PORT = 3001;
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var root = process.cwd();

var server = http.createServer(function(request, response) {
    var pathname = decodeURIComponent(url.parse(request.url).pathname);
    var realPath = path.join(root, pathname);
    var ext = path.extname(realPath);
    if (!ext) {
        realPath = path.join(realPath, '/index.html');
        ext = '.html'
    }
    fs.exists(realPath, function(exists) {
        if (exists) {
            fs.readFile(realPath, 'binary', function(err, file) {
                if (!err) {
                    response.writeHead(200, {
                        'Content-Type': MINE_TYPES[ext.slice(1)] || 'text/plain'
                    });
                    response.write(file, 'binary');
                    response.end();
                } else {
                    response.writeHead(500, {
                        'Content-Type': 'text/plain'
                    });
                    response.write('ERROR, the reason of error is ' + err.code + '; Error number is ' + err.errno + '.');
                    response.end();
                }
            })
        } else {
            response.writeHead(404, {
                'Content-Type': 'text/plain'
            });
            response.write('This request URL ' + pathname + ' was not found on this server.');
            response.end();
        }
    });

});
server.listen(PORT);
console.log("server running at port " + PORT);

static文件夹下文件

  • 1.1 demo/static/filter/filter.js
define(function (require, exports, module) {
    // 定义过滤器
    Vue.filter('price', function (value) {
        return value + '元';
    })
    // 定义门市价过滤器
    Vue.filter('orignPrice', function (value) {
        return '门市价：' + value + '元'
    })
    // 定义销量过滤器
    Vue.filter('sales', function (value) {
        return '销量' + value
    })

    // 过滤器无需暴露接口，可以直接使用
});
  • 2.1 demo/static/filter/router.js
define(function (require, exports, module) {
    // 引入vue实例化对象
    var app = require('vm/app');
    // 定义路由
    function router () {
        // 解析hash就要获取hash
        var hash = location.hash;
        // 删除#
        // hash = hash.slice(1);
        // 删除起始的/
        // hash = hash.replace(/^\//, '')
        hash = hash.replace(/^#\/?/, '');
        // 对/进行切割，保留第一部分，就是组件名称,后面的成员就是参数
        hash = hash.split('/');
        // 定义规则
        var map = {
            home: true,
            list: true,
            detail: true
        };
        // 只有在map中存在的组件，才能渲染
        if (map[hash[0]]) {
            // 切换组件
            app.view = hash[0]
        } else {
            // 进入默认路由
            app.view = 'home'
        }
        // 我们还可以将参数存储
        app.query = hash.slice(1);
    }
    // 监听路由改变
    window.addEventListener('hashchange', router);
    // 页面加载没有触发hashchange事件，我们可以手动触发hashchange事件，或者监听load事件
    window.addEventListener('load', router)

    // 暴露接口
    module.exports = router;
});
  • 3.1 demo/static/util/util.js
define(function (require, exports, module) {
    // 拓展工具方法
    var Util = {
        /***
         * 获取模板的方法
         * @id         模板标签元素id
         * return     模板内容
         **/
        tpl: function (id) {
            return document.getElementById(id).innerHTML;
        },
        /**
         * 我们要实现异步请求的方法
         * @url        请求地址
         * @fn         执行的方法
         ***/
        ajax: function (url, fn) {
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 订阅事件
            xhr.onreadystatechange = function () {
                // 监听状态
                if (xhr.readyState === 4) {
                    // 判断状态
                    if (xhr.status === 200) {
                        // 执行回调函数
                        // console.log(xhr)
                        fn(JSON.parse(xhr.responseText))
                    }
                }
            }
            // 打开链接
            xhr.open('GET', url, true);
            // 发送数据
            xhr.send(null)
        }
    }
    // 暴露接口
    module.exports = Util;
});
  • 4.1 demo/static/vm/app.js
define(function (require, exports, module) {
    // 引入组件
    var home = require('vm/home/home');
    var list = require('vm/list/list');
    var detail = require('vm/detail/detail');
    // 引入样式
    require('vm/app.css');

    // 实例化vue
    var app = new Vue({
        el: '#app',
        // 绑定数据
        data: {
            view: 'home',
            // 存储路由参数
            query: [],
            search: '',
            // 是否显示搜索框
            showSearch: true
        },
        // 定义方法
        methods: {
            // 点击enter进行搜索
            gotoSearch: function (e) {
                // 第一种方式，通过组件间通信
                this.search = e.target.value
                // 第二种方式存储在路由中
                // location.hash = '#/list/search/' + e.target.value
                // console.log(e.target.value)
            },
            // 返回逻辑
            goBack: function () {
                history.go(-1)
            }
        }
    });
    // 暴露接口
    module.exports = app;
});
  • 4.2 demo/static/vm/detail/detail.js
define(function (require, exports, module) {
    // 引入样式
    require('./detail.css');
    // 使用过滤器
    require('filter/filter');
    // 使用工具
    var Util = require('util/util');

    // 详情页
    var Detail = Vue.extend({
        template: Util.tpl('tpl_detail'),
        // 定义数据
        data: function () {
            return {
                data: {}
            }
        },
        // 请求数据
        created: function () {
            // 隐藏搜索框
            this.$parent.showSearch = false;
            var me = this;
            // 获取商品id
            var id = me.$parent.query[0];
            // console.log(id)
            // 请求数据
            Util.ajax('data/product.json', function (res) {
                if (res && res.errno === 0) {
                    // 存储数据
                    me.data = res.data
                }
            })
        }
    });
    // 注册组件
    Vue.component('detail', Detail)

    module.exports = Detail;

});
  • 4.3 demo/static/vm/home/home.js
define(function (require, exports, module) {
    // 引入样式
    require('vm/home/home.css');
    // 引入过滤器
    require('filter/filter');
    // 引入Util模块
    var Util = require('util/util');

    var Home = Vue.extend({
        template: Util.tpl('tpl_home'),
        // 定义数据
        data: function () {
            // 返回值才是真正的数据
            return {
                types: [
                    {id: 1, title: '美食', url: '01.png'},
                    {id: 2, title: '电影', url: '02.png'},
                    {id: 3, title: '酒店', url: '03.png'},
                    {id: 4, title: '休闲娱乐', url: '04.png'},
                    {id: 5, title: '外卖', url: '05.png'},
                    {id: 6, title: 'KTV', url: '06.png'},
                    {id: 7, title: '周边游', url: '07.png'},
                    {id: 8, title: '丽人', url: '08.png'},
                    {id: 9, title: '小吃快餐', url: '09.png'},
                    {id: 10, title: '火车票', url: '10.png'}
                ],
                // num: 111
                // 将数据定义出来，否则没有特性
                ad: [],
                list: []
            }
        },
        created: function () {
            this.$parent.showSearch = true;
            var me = this;
            Util.ajax('data/home.json', function (res) {
                    if (res && res.errno === 0) {
                        // 存储数据
                        me.ad = res.data.ad;
                        console.log(me.ad,111111111111222222222)
                        me.list = res.data.list;
                        // 2.0版本不建议使用$set更新数据
                        // me.$set('ad', res.data.ad)
                    }
                })
            }
    });
    Vue.component('home',Home);

    // 暴露接口
    module.exports = Home;

});
  • 4.4 demo/static/vm/list/list.js
define(function (require, exports, module) {
    // 引入样式
    require('./list.css');
    // 引入过滤器
    require('filter/filter');

    // 引入工具
    var Util = require('util/util');

    // 列表页
    var List = Vue.extend({
        template: Util.tpl('tpl_list'),
        // 获取属性数据
        props: ['searchquery'],
        data: function () {
            // 返回值才是绑定的数据
            return {
                types: [
                    {value: '价格排序', key: 'price'},
                    {value: '销量排序', key: 'sales'},
                    {value: '好评排序', key: 'evaluate'},
                    {value: '优惠排序', key: 'discount'}
                ],
                // 定义存储数据的变量
                list: [],
                // 剩余的产品
                others: [],
                // 搜索字段
                query: ''
            }
        },
        // 动态数据
        computed: {
            dealList: function () {
                var me = this;
                return this.list.filter(function (obj) {
                    // console.log(arguments)
                    return obj.title.indexOf(me.searchquery) >= 0;
                })
            }
        },
        // 定义方法
        methods: {
            // 点击加载更多按钮
            loadMore: function () {
                // 将other中数据传递给list
                this.list = this.list.concat(this.others);
                // 此时others中应该没有数据了
                this.others = [];
            },
            // 点击排序按钮
            sortBy: function (type) {
                // 如果字段是优惠，我们要单独处理
                if (type === 'discount') {
                    this.list.sort(function (a, b) {
                        // 比较原价-现价的插值
                        // 升序
                        // return (a.orignPrice - a.price) - (b.orignPrice - b.price)
                        // 降序
                        return (b.orignPrice - b.price) - (a.orignPrice - a.price)
                    })
                } else {
                    // 数组排序
                    this.list.sort(function (a, b) {
                        // 升序
                        // return a[type] - b[type]
                        // 降序
                        return b[type] - a[type]
                    })
                }
                // console.log(22, type)

            }
        },
        // 视图渲染完成执行的方法
        created: function () {
            this.$parent.showSearch = true;
            // console.log(this)
            // 用$parent的数据更新query
            this.query = this.$parent.query[1]
            var me = this;
            var url = 'data/list.json?' + this.$parent.query[0] + '=' + this.$parent.query[1]
            // 请求数据
            Util.ajax(url, function (res) {
                // console.log(res)
                // 请求成功，存储数据
                if (res && res.errno === 0) {
                    // 默认显示三条
                    me.list = res.data.slice(0, 3);
                    me.others = res.data.slice(3)
                }
            })
        }
    });
    // 注册
    Vue.component('list', List);
    // 可以暴露接口,也可以不暴露接口
    module.exports = List;
});

转载：https://blog.csdn.net/weixin_46451496/article/details/105839920
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场