一步一步学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!!!");
});
一步一步学Vue（八）的更多相关文章
- 一步一步学Vue（六）https://www.cnblogs.com/Johnzhang/p/7242640.html
一步一步学Vue(六):https://www.cnblogs.com/Johnzhang/p/7237065.html 路由 一步一步学Vue(七):https://www.cnblogs.com ...
- 一步一步学Vue（九） 路由元数据
一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888.html
- 一步一步学Vue(四)
接上篇.上篇中给出了代码框架,没有具体实现,这一篇会对上篇定义的几个组件进行分别介绍和完善: 1.TodoContainer组件 TodoContainer组件,用来组织其它组件,这是react中推荐 ...
- 一步一步学Vue（十二）
为了提升代码的逼格,之后代码改为Vue文件组件,之前代码虽然读起来容易理解,而且适合在小的项目中使用,但是有如下缺点: 全局定义(Global definitions) 强制要求每个 componen ...
- 一步一步学Vue（六）
本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...
- 一步一步学ROP之linux_x64篇
一步一步学ROP之linux_x64篇 一.序 **ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过现代操作系统的各种通用防 ...
- （转载）一步一步学Linq to sql系列文章
现在Linq to sql的资料还不是很多,本人水平有限,如果有错或者误导请指出,谢谢. 一步一步学Linq to sql(一):预备知识 一步一步学Linq to sql(二):DataContex ...
- 一步一步学ZedBoard & Zynq(四)：基于AXI Lite 总线的从设备IP设计
本帖最后由 xinxincaijq 于 2013-1-9 10:27 编辑 一步一步学ZedBoard & Zynq(四):基于AXI Lite 总线的从设备IP设计 转自博客:http:// ...
- 【DG】[三思笔记]一步一步学DataGuard
[DG][三思笔记]一步一步学DataGuard 它有无数个名字,有人叫它dg,有人叫它数据卫士,有人叫它data guard,在oracle的各项特性中它有着举足轻理的地位,它就是(掌声)..... ...
- 一步一步学习Vue（十一）
本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...
随机推荐
- EntityFramework Core迁移时出现数据库已存在对象问题解决方案
前言 刚开始接触EF Core时本着探索的精神去搞,搞着搞着发现出问题了,后来就一直没解决,觉得很是不爽,借着周末好好看看这块内容. EntityFramework Core迁移出现对象在数据库中已存 ...
- kubernetes 概览
kubernetes 核心数据 (存储于ETCD 有数据变化通知的功能(watch-dog)) kubernetes 设计综述 (中英文对照)(http://www.oschina.net/trans ...
- 解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题
一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下.之前一直觉得用inpu ...
- 今天学习js做了些总结，分享给大家
一.1.javascript的作用 是基于对象和事件驱动的语言,应用于客户端 基于对象:提供好了很多对象,可以直接拿过来使用,不需要创建 事件驱动: html做网站静态效果,javascr ...
- Win10 & Linux Docker 安装使用
Docker最近推出了可以运行在Win10和Mac上的稳定版本,让我们赶紧来体验一下. 一.Windows Docker 安装 1.安装 需要的条件为: 64bit Windows 10,开启Hype ...
- Elasticsearch5.0.1安装
最新研究了下ES5.0,ES就是为高可用和可扩展而生的,你可以很方便的增加也减少一个节点.顺便记录下安装过程,也方便以后查看. 1 安装部骤 1.1 安装JDK ES依赖于 ...
- zookeeer client 通信协议
这里主要记录zookeeper client通信协议的.在官方的文档里没找到协议相关部分.这里是记录的协议是通过分析客户端代码得来的. 一.通信流程 客户端发起连接,发送握手包进行timeout协商, ...
- 【Android Developers Training】 24. 保存键值对
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- form表单的ajax验证2
form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 在ASP.NET Core配置环境变量和启动设置
在这一部分内容中,我们来讨论ASP.NET Core中的一个新功能:环境变量和启动设置,它将开发过程中的调试和测试变的更加简单.我们只需要简单的修改配置文件,就可以实现开发.预演.生产环境的切换. A ...