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: </label>
<input type="text" v-model='user.username'>
<br>
<label>password: </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: </label>
<input type="text" v-model='user.username'>
<br>
<label>password: </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中的路由部分 ************
完成效果图
用户注册界面
用户登录界面
