手把手教你借助 Vue 来构建单页面应用

4,371 阅读10分钟
原文链接: github.com

前言

我们将会选择使用一些vue周边的库

1.使用node.js后台,了解到如何获取数据

2.实现单页路由

3.实现HTTP请求我们的node

4.单项数据流

5.使用.vue文件进行开发

最终我们将会构建出一个小demo,不废话,直接上图。

安装

1.我们将会使用webpack去为我们的模块打包,预处理,热加载。如果你对webpack不熟悉,它就是可以帮助我们把多个js文件打包为1个入口文件,并且可以达到按需加载。这就意味着,我们不用去担心由于太多的组件,导致了过多的HTTP请求,这是非常有益于产品体验的。但,我们并不只是为了这个而使用webpack,我们需要用webpack去编译.vue文件,如果没有使用一个loader去转换我们.vue文件里的style,js,html,那么浏览器就无法识别。

2.模块热加载是webpack的一个非常碉堡的特性,将会为我们的单页应用带来极大的便利。 通常来说,当我们修改了代码刷新页面,那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的,因为需要重新在跑一遍流程。如果有模块热加载,当你修改了代码,你的代码会直接修改,页面并不会刷新,所以状态也会被保留。

3.Vue也为我们提供了CSS预处理,所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。

4.我们过去通常需要使用npm下载一堆的依赖,但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目,而它就可以很快地为我们生成。

首先,安装vue-cli。(确保你有node和npm)

npm i -g vue-cli

然后创建一个webpack项目并且下载依赖

vue init webpack vue-time-tracker cd vue-time-tracker npm i

接着使用 npm run dev 在热加载中运行我们的应用

这一行命令代表着它会去找到package.jsonscripts对象,执行node bulid/dev-server.js。在这文件里,配置了Webpack,会让它去编译项目文件,并且运行服务器,我们在localhost:8080即可查看我们的应用。

这些都准备好后,我们需要为我们的路由和XHR请求下载两个库,我们可以从vue的官网中找到他们。

npm i vue-resource vue-router --save

初始化(main.js)

查看我们的应用文件,我们可以在src目录下找到App.vuemain.js。在main.js文件中,我们引入VueApp,并且创建了一个vue的实例(因为在router这行引入了App组件router.start(App, '#app')

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

//注册两个插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  '/hello': {
    component: Hello
  }
})

router.redirect({
  '*': '/hello'
})

router.start(App, '#app')

我们还需要在index.html包裹下我们的

//index.html

我们的初始化就到这结束了,接下来让我们开始创建别的组件。

创建首页 View

首先,我们需要为我们的应用增加下bootstrap.css,为了方便,在这就直接在头部引入CDN。


  
  计划板
  

接着在App.vue里为我们的应用写个顶部导航。

// src/App.vue

除了我们的navbar以外,我们还需要一个.container去放我们其余需要展示的信息。 并且在这里我们要放一个router-view标签,vue-router的切换就是通过这个标签开始显现的。

接着,我们需要创建一个Home.vue作为我们的首页

// src/components/Home.vue

既然我们需要显示Home,那就需要开始配置路由,这很简单,只需要在main.js里把Hello.vue换为Home.vue即可

//...
router.map({
  '/Home': {
    component: Home
  }
})

router.redirect({
  '*': '/Home'
})

创建 任务列表 View

在这个页面,我们需要去创建我们的时间跟踪列表。

PS:现在这个页面没有数据,之后我们会在后台配置

// src/components/TimeEntries.vue

关于template的解释,都写在一起了,再看看我们的script

// src/components/TimeEntries.vue

别忘了为我们的组件写上一些需要的样式

// src/components/TimeEntries.vue


  .avatar {
    height: 75px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .user-details {
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
    margin: -10px 0;
  }
  .time-block {
    padding: 10px;
  }
  .comment-section {
    padding: 20px;
  }

由于新增了页面,所以我们继续配置我们的路由

// src/main.js

import TimeEntries from './components/TimeEntries.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries
  }
})

//...

创建任务组件

这个比较简单我们直接给出代码

// src/components/LogTime.vue




这个组件很简单就3个input输入而已,然后就两个按钮,保存我们就把数据push进我们的列表里,并且初始化我们的timeEntry。取消的话,我们就路由定位到/time-entries即可。

ps:按理来说我们应该是要填写6个数据包括名字,邮箱和头像。但这里为了演示就暂时先这样。以后结合后台我们会继续完善这里。

LogTime属于我们TimeEntries组件的一个子路由,所以我们依旧需要配置下我们的router.map

// src/main.js

import LogTime from './components/LogTime.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries,
    subRoutes: {
      '/log-time': {
        component: LogTime
      }
    }
  }
})

//...

创建侧边栏组件

目前我们首页左侧还有一块空白,我们需要它放下一个侧边栏去统计所有计划的总时间。

// src/App.vue

  //...

  
//...

由于我们把总时间存放在最上级的父组件上,所以我们需要把我们的总时间传入我们的sidebar组件。

在写下我们的两个时间计算方法

最后给出我们Sidebar.vue




props就是vue中传值的写法,不仅要在我们自定义的标签上传入,还需要在组件里js里定义props: ['time']

最后

本章,我们可以学习到许多关于vue的特性。

1.了解了vue-cli脚手架

2.初步对webpack有了一些了解和认识

3.如何用.vue愉快的开发

4.父子组件通信

5.路由(子路由)的应用

下一章,我们将会结合node学习vue-resource,更好的完善我们SPA应用

番外篇

我看很多人都不知道如何引入bootstrap,我就在这加了一下

首先npm i jquery bootstrap style-loader --save-dev;

然后我修改了两个文件 第一个是 webpack.base.conf.js 我把module都改了

最后我们在入口js文件里加三行代码

import 'jquery' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap'

在npm run dev 看看页面吧! 在head里会有一个style全是bootstrap的代码.别忘了把index.html里的第三方bootstrap注释了.

在我这次更新的代码里,我已经把引用第三方代码删了.

前言

本章节,将会把所有的请求全写为跨域请求。不知道为什么,很多人一用了框架就会不知所措。给大家一个忠告,享受框架带来的便利,别忘了时刻提醒自己学好基础知识。

先把一些不必要的代码删了。

//TimeEntries.vue 的模拟数据代码
data () {
  // 模拟下初始化数据
  /*let existingEntry = {
    comment: '我的第一个任务',
    totalTime: 1.5,
    date: '2016-05-01'
  }*/
  return {
    timeEntries: []
  }
},
//头像和昵称暂时写死

二哲

//LogTime.vue里的模拟数据代码 data () { return { timeEntry: { /*user: { name: '二哲', email: 'kodo@forchange.cn', image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256' },*/ } } },

我们将专注3个字段的增删改查,任务时间,持续时间,备注。

正文

我们的数据交互其实很简单,所以我在这选择使用大家最熟悉的expressmongodb,在一个app.js 文件里完成所有的controller

首先,安装几个必要的包npm i express mongodb morgan body-parser --save-dev;

简单解释下Morgan和body-parser,其实就是一个log美化和解析参数。具体大家可以google下。

在我们的根目录下,创建app.js初始化以下代码

//app.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');

var MongoClient = require('mongodb').MongoClient;
var mongoUrl = 'mongodb://localhost:27017/mission';
var _db;

app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(express.static('dist'));

MongoClient.connect(mongoUrl, function (err, db) {
  if(err) {
    console.error(err);
    return;
  }

  console.log('connected to mongo');
  _db = db;
  app.listen(8888, function () {
    console.log('server is running...');
  });
});

解释下mongoUrl这行mongodb://localhost:27017/mission 连接相应的端口,并且使用mission表。此时你是没有mission数据库的,这不用在意。在我们后续操作中,它将会自动创建一个mission数据库。

上面代码的意思是,我们创建我们的一个mongo连接,当数据库连接上了后再启动我们的服务器。

接着先启动我们的mongo服务。在命令行里 sudo mongo

如果你用得是webstrom编辑器,可以直接运行app.js,如果是命令行,那就使用 node app.js

如果看见命令行输出了 connected to mongo server is running... 就可以在8888端口访问我们的应用了。(在这之前别忘了build你的代码)

由于我们讲得是跨域,所以我们讲在我们的dev环境下完成所有的请求。npm run dev

关闭我们的8888端口页面,进入8080端口的开发环境。

写下我们第一个创建任务的请求。

//app.js

//使用post方法
app.post('/create', function(req, res, next) {
    //接收前端发送的字段
  var mission = req.body;
  //选择一个表my_mission 此时没有没关系,也会自动创建
  var collection = _db.collection('my_mission');
    //如果我们需要的字段不存在,返回前端信息
  if(!mission.comment || !mission.totalTime || !mission.date) {
    res.send({errcode:-1,errmsg:"params missed"});
    return;
  }
    //如果存在就插入数据库,返回OK
  collection.insert({comment: mission.comment, totalTime: mission.totalTime,date:mission.date}, function (err, ret) {
    if(err) {
      console.error(err);
      res.status(500).end();
    } else {
      res.send({errcode:0,errmsg:"ok"});
    }
  });
});

修改下我们的LogTime.vue

//LogTime.vue
保存

methods: {
    save () {
      this.$http.post('http://localhost:8888/create',{
        comment : this.timeEntry.comment,
        totalTime : this.timeEntry.totalTime,
        date : this.timeEntry.date
      }).then(function(ret) {
        console.log(ret);
        let timeEntry = this.timeEntry
        console.log(timeEntry);
        this.$dispatch('timeUpdate', timeEntry)
        this.timeEntry = {}
      })
    }
}

输入好内容,点击保存按钮,会发现报了个错。这其实就是最常见的跨域请求错误。

但是我们明明写得是post请求为什么显示得是options呢?

这其实是跨域请求前会先发起的一个options请求,需要先问问服务端,我需要一些操作可以吗?如果服务端那里是允许的,才会继续让你发送post请求。

我不知道那些使用vue-resource各种姿势也想满足跨域请求的人是怎么想的。想上天吗?

所以我们需要服务端配置,而不是前端。

//app.js
app.all("*", function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  if (req.method == 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
});

Access-Control-Allow-Origin是设置你的来源域名,写*是很危险的操作。所以我们可以直接写成我们所需的域名和端口,别人就没法请求了。

另外几行就不解释了,一看就懂。

不出意外,可以发现发送了options后,马上发送了post,然后就创建成功了。看下mongo的表,也多了一条记录。

接着来让我们一口气写完剩下的三个请求。列表渲染,删除计划,获取总时长。

//app.js
var ObjectID = require('mongodb').ObjectID

//获取总时长
app.get('/time', function(req, res, next) {
    //获取数据表
  var collection = _db.collection('my_mission');
  var time = 0;
  //查询出所有计划
  collection.find({}).toArray(function (err, ret) {
    if(err) {
      console.error(err);
      return;
    }
    //所有计划累加时长
    ret.forEach(function (item, index) {
      time += +item.totalTime;
    });
    //返回时长
    res.json({errcode:0,errmsg:"ok",time:time});
  });
});

//获取列表
app.get('/time-entries', function(req, res, next) {
  var collection = _db.collection('my_mission');
  collection.find({}).toArray(function (err, ret) {
    if(err) {
      console.error(err);
      return;
    }
    res.json(ret);
  });
});

//删除计划
app.delete('/delete/:id', function (req, res, next) {
  var _id = req.params.id;
  var collection = _db.collection('my_mission');
  console.log(_id)
  //使用mongodb的唯一ObjectId字段查找出对应id删除记录
  collection.remove({_id: new ObjectID(_id)} ,function (err, result) {
    if(err) {
      console.error(err);
      res.status(500).end();
    } else {
      res.send({errcode:0,errmsg:"ok"});
    }
  });
});

前端部分

//App.vue
ready() {
    this.$http.get('http://localhost:8888/time')
      .then(function(ret) {
        this.totalTime = ret.data.time;
      })
      .then(function(err) {
        console.log(err);
      })
},
//TimeEntries.vue
route : {
  data(){
    this.$http.get('http://localhost:8888/time-entries')
      .then(function(ret) {
        this.timeEntries = ret.data;
      })
      .then(function(err) {
        console.log(err);
      })
  }
},
//TimeEntries.vue
X
deleteTimeEntry (timeEntry) { // 删除 let index = this.timeEntries.indexOf(timeEntry) let _id = this.timeEntries[index]._id if (window.confirm('确认删除?')) { this.$http.delete('http://localhost:8888/delete/' + _id) .then(function(ret) { console.log(ret); }) .then(function(err) { console.log(err) }); this.timeEntries.splice(index, 1) this.$dispatch('deleteTime', timeEntry) } }

完结

到此,我们就将我们整个应用完成了。新增创建删除都可用了。

本来还想有上传头像等,那样觉得更多的是偏后端教学。既然我们是vue的简单入门教程就不过多介绍。

本系列让大家轻松的了解学习了vue,vue-router,vue-resource,express,mongodb的运用。

还是那句话,享受框架带来便利的同时,别忘了加强基础的训练。基本功才是真正的王道啊。玩电竞的玩家一定深有体会。

最后给有兴趣的同学留下两个简单的作业 1.完成头像昵称的字段 2.完成修改操作

源码地址:github.com/MeCKodo/vue…