一步一步学Vue（八）

本篇完成如下场景：

1、系统包含首页、客户信息查询、登录三个模块

2、默认进入系统首页，如果要进行用户查询，则需要进行登录授权

3、查询用户后点击列表项，则进入详情页面

基于上述场景需求描述，在客户端我们考虑，需要设计如下组件：Home组件、客户列表组件、客户详情组件、登录组件

在服务器端考虑需要：用户认证服务；客户列表查询服务、客户详情查询服务。

ok，现在我们从上往下,先创建我们的基本目录结构，

当前目录结构如下：

app.js node web 启动文件

node_modules node模块文件（关于node模块安装这里不再介绍）

public 存放静态文件比如index.html 浏览器端执行的css或者js文件、图片、文字等等。当前包含两个文件 index.html,app.js (组件定义等文件)

router 后端路由文件，比如可以把portal部分进行抽象到路由文件夹

middleware 中间件 文件夹，我们会定义鉴权中间件

package.json npm包配置文件

由我们的客户端开始设计，构建我们的组件：

首先Home组件，Home组件，简单的potal信息展示，这里为了演示，就直接显示一串基本信息，在public／app.js中添加如下代码：

var HomeComponent = {
    template: `<div>
        <h1>Home 页面，portal页</h1>
        <h2>以下数据来自服务端</h2>
        {{stat}}
    </div>`,
    data:function(){
        return {
            stat:‘‘//代表相关统计信息等
        }
    },
    methods:{
        getStat:function(){
            return axios.get(‘/portal‘);
        }
    },
    created:function(){
        this.getStat().then(res=>{
            this.stat=JSON.stringify(res.data);
        }).catch(err=>{
            console.log(err);
        })
    }
}

这里一个新的知识axios，这是一个vue的Ajax库，由于vue-resource已不再更新，官方推荐使用axios；上述代码逻辑很简单，在组件初始化时，请求后端数据，返回后进行简单的数据绑定；对应的后端接口（数据只是模拟），在／app.js下添加如下代码：

var express = require("express");

var app = express();

app.use(express.static(‘public‘));
app.get(‘/portal‘,function(req,res){
    res.json({
        data:[
            {
                visits:12,
                clicks:100
            },
            {
                location:‘BeiJing‘,
                total:17
            }
        ]
    })
})

app.listen(8110,function(){
    console.log("port 8110 is listenning!!!");
});

这里就是最基础的express代码了，只是做了两件事情，第一，设置静态目录为public，设置路由／portal，对应前端请求。

为了让程序运行起来，我们修改我们的／public/index.html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo3</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="app">

    </div>
    <script src="./app.js"></script>
</body>

</html>

在public／app.js中为组件Home设置路由，并启用路由配置：

var router = new VueRouter({
    //TODO:各种路由定义；
    routes: [{
        name: ‘home‘, path: ‘/home‘, component: HomeComponent
    }

    ]
});
var app = new Vue({
    router: router,
    template: `
    <div>
          <router-view></router-view>
    </div>
    `,
    el: ‘#app‘
});

打开控制台，进入到项目根目录，执行node app.js 启动后台服务，在浏览器打开http://localhost:8110/#/home ,可以看到如下效果：

接下来，在public／app.js文件中添加我们的另外三个组件：客户列表组件，详情组件和登录组件，并配置路由，最终代码如下：

var LoginComponent = {
    template: `

     <div class="login" >
        username:<input type="text" v-model="user.username" />
        password:<input type="password" v-model="user.password" />
        <input type="button" @click="login()" value="login" />
     </div>
    `,
    data: function () {
        return {
            user: {
                username: ‘‘,
                password: ‘‘
            }
        }
    },
    methods: {

        login: function () {
            axios.post(‘/login‘,{params: this.user})
                .then(function (res) {
                    if (res.success) {
                        localStorage.setItem(‘token‘, res.token);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        }
    }
}

var CustomerListComponent = {
    template: `
<div>
    <div>
        <input type="text" v-model="keyword" /> <input type="button" @click="getCustomers()" value="search" />
    </div>
    <ul>
        <router-link v-for="c in customers"  tag="li" :to="{name:‘detail‘,params:{id:c.id}}" :key="c.id">{{c.name}}</router-link>
    </ul>
</div>
    `,
    data: function () {
        return {
            customers: [],
            keyword: ‘‘
        }
    },
    created: function () {
        this.getCustomers();
    },
    methods: {
        getCustomers: function () {
            axios.get(‘/api/getCustomers‘, { params: { keyword: this.keyword } })
                .then(res => { this.customers = res.data; console.log(res) })
                .catch(err => console.log(err));
        },

    }
}

var CustomerComponent = {
    template: `
        <div>
            {{customer}}
        </div>
    `,
    data: function () {
        return {
            customer: {}
        }
    },
    created: function () {
        var id = this.$route.params.id;
        this.getCustomerById(id);
    },
    watch: {
        ‘$route‘: function () {
            console.log(this.$route.params.id);
        }
    },
    methods: {
        getCustomerById: function (id) {
            axios.get(‘/api/customer/‘+id)
                .then(res => this.customer = res.data)
                .catch(err => console.log(err));
        }
    }
}

var HomeComponent = {
    template: `<div>
        <h1>Home 页面，portal页</h1>
        <h2>以下数据来自服务端</h2>
        {{stat}}
    </div>`,
    data: function () {
        return {
            stat: ‘‘//代表相关统计信息等
        }
    },
    methods: {
        getStat: function () {
            return axios.get(‘/portal‘);
        }
    },
    created: function () {
        this.getStat().then(res => {
            this.stat = JSON.stringify(res.data);
        }).catch(err => {
            console.log(err);
        })
    }
}

var router = new VueRouter({
    //TODO:各种路由定义；
    routes: [{
        name: ‘home‘, path: ‘/home‘, component: HomeComponent
    },
    {
        name: ‘customers‘, path: ‘/customers‘, component: CustomerListComponent,

    },
    {
        name: ‘detail‘, path: ‘/detail/:id‘, component: CustomerComponent,

    },
    {
        name: ‘login‘, path: ‘/login‘, component: LoginComponent
    }
    ]
});

//注册全局事件钩子
//TODO:会在下一篇中详细分析
// router.beforeEach(function (to, from, next) {
//     if (to.matched.some(r => r.meta.auth)) {
//         if (!localStorage.getItem(‘token‘)) {
//             console.log("需要登录");
//             next({
//                 path: ‘/login‘,
//                 query: { to: to.fullPath }
//             })
//         } else {
//             next();
//         }
//     } else {
//         next()
//     }
// });

var app = new Vue({
    router: router,
    template: `
    <div>
          <router-link :to="{name:‘home‘}" >Home</router-link>
          <router-link :to="{name:‘customers‘}" >Customers</router-link>
          <router-view></router-view>
    </div>
    `,
    el: ‘#app‘
});

后台根据接口添加如下路由，在router文件夹中，添加customers.js文件，加入如下代码：

var router = require("express").Router();
var db = require(‘./fakeData‘);

router.get(‘/getCustomers‘, function (req, res) {
    var list = db.data;

    list = list.filter(v => v.name.indexOf(req.query.keyword) !== -1);

    res.json(list);
});

router.get(‘/customer/:id‘,function(req,res){
    var list=db.data;

    var obj=list.filter(v=>v.id==req.params.id)[0];

    res.json(obj);
})

module.exports = router;

同时在/app.js中修改代码如下：

var express = require("express");

var authMiddleware=require(‘./middleware/authMiddleware‘);
var customerRouter=require(‘./router/customers‘);

var app = express();

app.use(express.static(‘public‘));
app.get(‘/portal‘,function(req,res){
    res.json({
        data:[
            {
                visits:12,
                clicks:100
            },
            {
                location:‘BeiJing‘,
                total:17
            }
        ]
    })
})
//TOOD:下一篇会详细讲，先忽略
// app.use(authMiddleware);

app.use(‘/api‘,customerRouter);

app.listen(8110,function(){
    console.log("port 8110 is listenning!!!");
});

重新执行node app.js，刷新浏览器，看到最终效果如下：

上述vue的代码，我们在前面几篇都有所提及，没有陌生格式的代码，大家有疑问的可以提comment。下一篇中会加入授权，包括前端路由控制以及后端接口访问控制，今天就到这里吧，最近比较忙，更新进度有点慢，下一篇完善权限，在本部分代码中已加入todo标示，有兴趣的可以考虑一下()。

本篇完整代码如下：

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo3</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="app">

    </div>
    <script src="./app.js"></script>
</body>

</html>

public/app.js

var LoginComponent = {
    template: `

     <div class="login" >
        username:<input type="text" v-model="user.username" />
        password:<input type="password" v-model="user.password" />
        <input type="button" @click="login()" value="login" />
     </div>
    `,
    data: function () {
        return {
            user: {
                username: ‘‘,
                password: ‘‘
            }
        }
    },
    methods: {

        login: function () {
            axios.post(‘/login‘, this.user)
                .then(function (res) {
                    if (res.success) {
                        localStorage.setItem(‘token‘, res.token);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        }
    }
}

var CustomerListComponent = {
    template: `
<div>
    <div>
        <input type="text" v-model="keyword" /> <input type="button" @click="getCustomers()" value="search" />
    </div>
    <ul>
        <router-link v-for="c in customers"  tag="li" :to="{name:‘detail‘,params:{id:c.id}}" :key="c.id">{{c.name}}</router-link>
    </ul>
</div>
    `,
    data: function () {
        return {
            customers: [],
            keyword: ‘‘
        }
    },
    created: function () {
        this.getCustomers();
    },
    methods: {
        getCustomers: function () {
            axios.get(‘/api/getCustomers‘, { params: { keyword: this.keyword } })
                .then(res => { this.customers = res.data; console.log(res) })
                .catch(err => console.log(err));
        },

    }
}

var CustomerComponent = {
    template: `
        <div>
            {{customer}}
        </div>
    `,
    data: function () {
        return {
            customer: {}
        }
    },
    created: function () {
        var id = this.$route.params.id;
        this.getCustomerById(id);
    },
    watch: {
        ‘$route‘: function () {
            console.log(this.$route.params.id);
        }
    },
    methods: {
        getCustomerById: function (id) {
            axios.get(‘/api/customer/‘+id)
                .then(res => this.customer = res.data)
                .catch(err => console.log(err));
        }
    }
}

var HomeComponent = {
    template: `<div>
        <h1>Home 页面，portal页</h1>
        <h2>以下数据来自服务端</h2>
        {{stat}}
    </div>`,
    data: function () {
        return {
            stat: ‘‘//代表相关统计信息等
        }
    },
    methods: {
        getStat: function () {
            return axios.get(‘/portal‘);
        }
    },
    created: function () {
        this.getStat().then(res => {
            this.stat = JSON.stringify(res.data);
        }).catch(err => {
            console.log(err);
        })
    }
}

var router = new VueRouter({
    //TODO:各种路由定义；
    routes: [{
        name: ‘home‘, path: ‘/home‘, component: HomeComponent
    },
    {
        name: ‘customers‘, path: ‘/customers‘, component: CustomerListComponent,

    },
    {
        name: ‘detail‘, path: ‘/detail/:id‘, component: CustomerComponent,

    },
    {
        name: ‘login‘, path: ‘/login‘, component: LoginComponent
    }
    ]
});

//注册全局事件钩子
//TODO:会在下一篇中详细分析
// router.beforeEach(function (to, from, next) {
//     if (to.matched.some(r => r.meta.auth)) {
//         if (!localStorage.getItem(‘token‘)) {
//             console.log("需要登录");
//             next({
//                 path: ‘/login‘,
//                 query: { to: to.fullPath }
//             })
//         } else {
//             next();
//         }
//     } else {
//         next()
//     }
// });

var app = new Vue({
    router: router,
    template: `
    <div>
          <router-link :to="{name:‘home‘}" >Home</router-link>
          <router-link :to="{name:‘customers‘}" >Customers</router-link>
          <router-view></router-view>
    </div>
    `,
    el: ‘#app‘
});

router/customers.js

var router = require("express").Router();
var db = require(‘./fakeData‘);

router.get(‘/getCustomers‘, function (req, res) {
    var list = db.data;

    list = list.filter(v => v.name.indexOf(req.query.keyword) !== -1);

    res.json(list);
});

router.get(‘/customer/:id‘,function(req,res){
    var list=db.data;

    var obj=list.filter(v=>v.id==req.params.id)[0];

    res.json(obj);
})

module.exports = router;

middleware/authMiddleware.js

module.exports=function(req,res,next){
    if(req.path="/login"){
        res.json({
            success:true
        })
    }
    next();
}

app.js

var express = require("express");

var authMiddleware=require(‘./middleware/authMiddleware‘);
var customerRouter=require(‘./router/customers‘);

var app = express();

app.use(express.static(‘public‘));
app.get(‘/portal‘,function(req,res){
    res.json({
        data:[
            {
                visits:12,
                clicks:100
            },
            {
                location:‘BeiJing‘,
                total:17
            }
        ]
    })
})
//TOOD:下一篇会详细讲，先忽略
// app.use(authMiddleware);

app.use(‘/api‘,customerRouter);

app.listen(8110,function(){
    console.log("port 8110 is listenning!!!");
});

时间： 2024-10-11 20:09:06

一步一步学Vue（八）的相关文章

一步一步学Vue（十二）

为了提升代码的逼格,之后代码改为Vue文件组件,之前代码虽然读起来容易理解,而且适合在小的项目中使用,但是有如下缺点: 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板(String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏 没有构建步骤(No build step) 限

一步一步学Vue（五）

本篇是是vue路由的开篇,会以一个简单的demo对vue-router进行一个介绍,主要覆盖以下几个常用场景: 1.路由跳转 2.嵌套路由 3.路由参数 1.Vue-Router 一般来说,路由定义就是定义地址访问规则,然后由路由引擎根据这些定义的规则去查找对应的页面,并转发请求给页面进行处理:对于后端来说就是这么一个模式,但前端不同,前端路由变化也只是页面内的导航比如angular中的模版切换,比如vue和react中的component切换,这种方式都是基于浏览器hash模拟url跳转. v

一步一步学习Vue（十一）

本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var list = []; var Todo = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })(); /** *

Rhythmk 一步一步学 JAVA (21) JAVA 多线程

1.JAVA多线程简单示例 1.1 .Thread  集成接口 Runnable 1.2 .线程状态,可以通过  Thread.getState()获取线程状态: New (新创建) Runnable (可以运行) Blocked  (被阻塞) Waiting  (等待) Timed waiting (计时等待) Terminated  (被终止) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

一步一步学ROP之linux_x64篇

一步一步学ROP之linux_x64篇 一.序 **ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过现代操作系统的各种通用防御(比如内存不可执行和代码签名等).上次我们主要讨论了linux_x86的ROP攻击:<一步一步学ROP之linux_x86篇>,在这次的教程中我们会带来上一篇的补充以及linux_x64方面的ROP利用方法,欢迎大家继续学习. 另外文中涉及代码可在我的github下载:https://githu

【DG】[三思笔记]一步一步学DataGuard

[DG][三思笔记]一步一步学DataGuard 它有无数个名字,有人叫它dg,有人叫它数据卫士,有人叫它data guard,在oracle的各项特性中它有着举足轻理的地位,它就是(掌声)......................Oracle Data Guard.而对于我而言,我一定要亲切的叫它:DG(注:主要是因为打着方便). 不少未实际接触过dg的初学者可能会下意识以为dg是一个备份恢复的工具.我要说的是,这种形容不完全错,dg拥有备份的功能,某些情况下它甚至可以与primary数据库

一步一步学Linq to sql系列文章 转lovecherry

http://www.cnblogs.com/lovecherry/archive/2007/08/13/853754.html 现在Linq to sql的资料还不是很多,本人水平有限,如果有错或者误导请指出,谢谢. 一步一步学Linq to sql(一):预备知识 一步一步学Linq to sql(二):DataContext与实体 一步一步学Linq to sql(三):增删改 一步一步学Linq to sql(四):查询句法 一步一步学Linq to sql(五):存储过程 一步一步学L

Rhythmk 一步一步学 JAVA (20) JAVA enum常用方法

JAVA 枚举定义常用方法: 1.static Enum valueOf(Class enum,String name) 返回指定name的枚举类型 2.Static Enum values[] 返回枚举常量集合 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

一步一步学solr：在开始前我们应该明白什么

我就用自己的项目来讲solr应用了,当然他的功能很多,大家可以看这里 http://my.oschina.net/fengnote/blog/288581 功能那是相当的多. solr可以理解为与应用分离的一个搜索服务,我们要搭建应用+搜索服务的关联配置实现部分业务. 我们的项目现在要改功能,一个内容发布系统,做一个站内搜索,原有的框架是SSI的,只把查询部分用solr来实现. 问题是: 我要查询一篇文章关联到N张表 我除了查询文章还要查询分类(也用solr实现) 新增.修改.删除文章/分类后要

一步一步学WebSocket(二) 使用SuperWebSocket实现自己的服务端

上一篇文章,我们了解了客户端如何与服务器创建WebSocket连接.但是一个巴掌拍不响,既然是通信,就必然最少要有两个端.今天我们来看看c#如何用已有的框架实现一个WebSocket服务端. 在.Net Framework 4.5及以上版本中,微软为我们集成了WebSocket协议的基本实现.微软提供的WebSocket对象位于System.Net.WebSocket命名空间下,使用起来挺繁琐的,所以我选择了SuperWebSocket框架来简化开发的难度. SuperWebSocket框架可以