Vue学习笔记(1).md

2017.4.11 - 4.13

前言：

上周大致浏览了Vue文档，简单使用了Vue.js文件尝试基本Vue特性。在这一周，学习Vue入门教程，完成了一个登录界面的Vue组件，并且通过与nodeJs的连接实现了登录验证。
在下一周中，学习Vue组件的套用，使用less完善css，使用Vuex管理项目状态。

笔记导航

• Vue框架搭建
• Vue前端组件搭建
• Vue服务器端通信

项目要求

最新作业 具体要求

使用VUE实现求职系统，系统主要功能包括 注册，登录，职位查询，职位保存，求职跟踪，报表系统，具体要求如下：
新用户可以注册账号，注册需要通过email，系统将验证码发送到邮箱，用户需要填写验证码完成注册；
用户可以根据用户名和密码登录系统；
在职位查询中，用户可以根据公司名称，薪水，职位类型查询求职信息；
用户可以将查询中的某些记录加入到自己的关注信息；
用户可以将某些公司加入到求职跟踪，系统从招聘网站（比如智联招聘）抓取数据，并自动统计该公司每周的求职信息，发送给用户；
报表系统提供多种信息分析图表，比如各职位的数量饼状图，某职位的薪资变化图等等；
项目周期：3年级学生6周
知识要点：
1 . 掌握模板语法 v-html v-bind v-on v-show v-if v-for
2 . 理解vue-router路由模板以及路由事件的处理
3 . 掌握使用vue-resource访问网络服务
4 . 理解vuex状态管理模式
5 . 掌握使用webpack来模块化管理和打包

具体笔记

1. Vue项目的搭建

官方介绍文档
根据官方示例搭建环境，并且使用webpack依赖创建一个Vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 出现多行参数配置提示，一路回车就好
# 安装依赖，走你
$ cd my-project
$ npm install
# npm install因命令安装内容较多，需要时间比较久
$ npm run dev
# 执行run命令，即可运行程序自动打开浏览器并显示vue界面
# 此处使用的服务器端口号是8080，注意自己的电脑上是否有其他应用占用此端口，有则改之

项目创建完成之后，目录结构及其目录内文件功能说明如下图：

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

./src/components/Hello.vue就是服务器启动后在浏览器中打开的vue组件，在编辑器中打开这个文件进行修改后保存，即可在浏览器中看到代码的同步更新。
如果出现语法错误或格式错误，浏览器也会直接提示error信息，十分简单粗暴便利。

2. Vue组件界面搭建

简明的入门视频教程Vue.js 2.0入门
Vue-resource 一个类似于ajax的工具
登录组件搭建：

<template>
    <div class="login">
        <form @submit.prevent='submit'>
            <label>username:&nbsp</label>
            <input type="text" v-model='user.username'>
            <br>
            <label>password:&nbsp</label>
            <input type="password" v-model='user.password'>
            <br>
            <input type="submit" value="submit">
        </form>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submit: function () {
      // 向后台发送ajax请求
    }
  }
}
</script>

<style scoped>
.login {
  text-align: center;
}
</style>

3.后台处理登录请求

使用命令行创建express框架的新项目

express --view=hbs [project_name] 
npm install

实现Vue项目与node后台的连接
(跨域访问后台的教程)[http://www.imooc.com/article/8093]
关键在于设置访问来源地址

//在app.js中完成如下设置，即可实现两个端口进程之间的通信
app.all("*", function (req, res, next) {
  // 修改Access-Control-Allow-Origin的参数值，设成'*'会有收到不明攻击的危险，因此最好改成指定地址
  res.header('Access-Control-Allow-Origin', 'http://localhost:[node端口号]');
  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();
  }
});

前端Vue界面

<template>
    <div class="login">
    // 此处触发submit函数，通过.prevent禁止页面的刷新跳转
        <form @submit.prevent='submit'>   
            <label>username:&nbsp</label>
            <input type="text" v-model='user.username'>
      <br>
            <label>password:&nbsp</label>
            <input type="password" v-model='user.password'>
            <br>
            <input type="submit" value="login">
      <p v-if='user.validated'>{{user.errmsg}}</p>
        </form>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      user: {
        username: '',
        password: '',
        validated: false,
        errmsg: ''
      }
    }
  },
  methods: {
    submit: function () {
      this.$http.post('http://localhost:8888/login', {
        username: this.user.username,
        password: this.user.password
      }).then(function (res) {
        // res即为服务器端发送过来的信息，通过res.body获取json数据
        console.log(res)
        this.user.errmsg = ''
        this.user.errmsg = res.body.errmsg
        this.user.validated = res.body.validated
        if (!res.body.validated) {
          alert('Welcome back, ' + this.user.username + ' !')
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  text-align: center;
}
</style>

后台服务器数据请求与处理

//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/zhaopin';
var _db;

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


app.all("*", function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  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();
  }
});

// 连接mongodb数据库
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...');
  });
});

// ************ nodejs中的路由部分 ************
app.post('/login', function(req, res, next){
  var user  = req.body;
  console.log(user)
  var collection = _db.collection('user');
  if(!user.username || !user.password){
    res.send({validated: true, errmsg:"Please enter the entire info"});
    return;
  }
  collection.find({username: user.username}, function(err, ret){
    ret.toArray(function(err, doc){
      if (err) {
        console.log(err);
      }else if(doc.length == 1){
          if (doc[0].password == user.password) {
            res.send({validated: false, errmsg:''});
          } else {
            res.send({validated: true, errmsg:'Please enter the correct pwd...'})
            return;
          }
      }else{
        res.send({validated: true, errmsg: 'This account doesn\'t exist...'})
        return;
      }
    })
  })
})

app.post('/register', function(req, res, next){
  var user = req.body;
  var collection = _db.collection('user');
  if(!user.username || !user.password){
    res.send({validated: true, errmsg:"Please enter the entire info"});
    return;
  }
  collection.find({username: user.username}, function(err, ret){
    ret.toArray(function(err, doc){
      if (err) {
        console.log(err);
      }else if(doc.length == 1){
          res.send({validated: true, errmsg:"Sorry, this username has been registered!"});
          return;
      }else{
        collection.insert({username: user.username, password: user.password}, function(err, ret){
          if(err){
            console.error(err);
          }else {
            res.send({validated: false, errmsg: ''});
          }
        })
      }
    })
  });
})
// ************ nodejs中的路由部分 ************

完成效果图

用户注册界面 用户登录界面