第一章 建议学习时间8小时·分两次学习      总项目预计10章

 

学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习前面的vue和node基础博客【共10章】

演示地址：后台：demoback.lalalaweb.com  前台：demo.lalalaweb.com

演示过程中可能会发现bug，希望即时留言反馈，谢谢

源码下载：https://github.com/sutianbinde/classweb               //不是全部的代码，每次更新博客才更新代码

学习目标：此教程将教会大家 如何一步一步实现一个完整的课程学习系统（包括课程管理后台/Node服务器/学习门户三个模块）。

上次node基础课程博客大家反响很好，时隔3个月，才更新项目部分，预计2~3天更新一章，我尽量20天更新完毕，学完这个项目Nodejs和vue就基本熟悉了，如发现教程有误的地方，请及时留言反馈

视频教程地址：www.lalalaweb.com，后期会上传教学视频，大家可前往视频学习（暂时还没有视频）

 

express项目构建  vue-cli项目构建

---

 我们首先给项目取一个名字  “在线课堂” 好啦，英文名 classweb

先在自己喜欢的位置 创建项目目录文件夹  classweb

 

创建node项目（这个项目我们采取前后端分离的模式，所以需要分别创建node和vue项目，但都放在classweb中）

进入目录，运行  express server 生成服务器端项目(server是我们服务端项目的名字)   （这里注意，得提前安装node express-generator，学习过前面node基础的同学这些应该的安装了的，没安装的先学前面的课程）

打开命令行的简单方法：在文件夹中按住 shift 鼠标右键 点击“在此处打开命令行” / "在此处打开powershell窗口"

先安装 cnpm 镜像(它是npm的国内代理，可以使下载速度加快，如果以及安装了的就不用安装了)，使用如下代码，安装完成后测试一下 cnpm -v

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

进入项目，安装依赖，运行测试一下

 

这样就运行起来了，在浏览器输入http://localhost:3000/  访问

上面 Node项目就建好了

 

创建 vue项目

先全局安装vue-cli

npm install --global vue-cli

这里注意，我们最好是另外开一个命令行 来执行，因为开发时前面的Node项目和vue项目要同时运行

 

然后在创建vue项目，使用 vue init webpack vueclient

注意：ESLint选项要选择no（不然代码一点不规范就报错） ，如果选错了，把vueclient文件夹删了重新创建一遍即可。

 

 进入项目，安装依赖，运行

 

 这时候浏览器中就自动代开网页了

 

两个项目的安装和测试就完成了

安装mongodb操作软件 Robomongo

百度云链接

链接：http://pan.baidu.com/s/1jHLSG78 密码：6dhb

安装方法参考：https://jingyan.baidu.com/article/9113f81b011ee72b3214c78d.html

 

 链接好以后，在nwe connection右键  create database   输入创建 classweb数据库

 

创建好以后，展开classweb,然后在cloolections右键，  create collection 创建一个user表（在弹出框中输入user），用来放后台登录的用户

 

创建好以后就有user表了，双击就能打开user表，现在里面没有数据

 

 往里面添加一条数据，便于以后登录使用

user右键 insert document，然后输入后面的数据 ，save， （数据用户名 admin  密码是 123456 加密后的字段 还有手机号）

 

{"name" : "admin","phone" : "13388868886","password" : "4QrcOUm6Wau+VuBX8g+IPg=="
}

 

 

 

然后表中就多了这么一条数据了

 

实现登录功能

---

 首先我们把项目导入 编辑器，我这里使用的Hbuilder，建议大家也使用这个，因为项目中nodemodules的文件太多，webstrom或sublimetex都会很卡

然后找到App.vue，去掉多余示例样式，只留图中的部分，这是项目的入口页面

注：每个项目都有很多文件，大家暂时也不用明白他们都表示什么意思，等用到的时候我会在用到的地方给大家讲解的。

预警：第一次进入项目开发，肯定会有很多报错，大家一定仔细阅读步骤，仔细实现代码，如果报错，有是英文的看不懂，大家可以试着查一查百度/google，也可以在下边留言，我看到尽量简答，不要因为出错了难以解决就放弃了，我开始学习的时候也遇到很多不知所措的错误，心中会有一万只草泥马奔腾的感觉。

 

 然后在componets文件夹中新建 login.vue 文件

 

在login.vue文件中写入下面登录页面的代码(实现了基本的登录布局，在js中定义就基本的变量和登录的方法名)

<template><div class="backlogin"><div class="login_box"><div class="title">后台登录</div><div><input class="myinput" type="text" placeholder="手机号/用户名" v-model="username" /></div><div><input @keyup.13="login" class="myinput" type="password" placeholder="口令" v-model="password" /></div><div class="login_other"><a href="javascript:;">找回密码</a><input type="checkbox" id="remenberme" /><label for="remenberme">记住我</label></div><button :disabled="disablebtn" class="login" @click="login">{{loginText}}</button></div></div>
</template><script>export default {name: 'backlogin',data () {return {username:"admin",/*TODO:先预存测试值，以免手动输入*/password:"123456",disablebtn:false,loginText:"登录"}},methods:{login(){}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.header{height: 60px;box-shadow: 0 1px 5px rgba(13,62,73,0.2) ;}.header img{width: 170px;margin-top: 12px;margin-left: 15px;float: left;}.header span{float: left;color: #566a80;margin: 21px 0 0 20px;}.login_box{width: 320px;margin: 50px auto;}.login_box .myinput{width: 100%;border: 1px solid #cad3de;height: 40px;line-height: 40px;margin: 5px 0 10px;border-radius: 3px;padding: 0 10px;outline: none;box-sizing: border-box;}.login_box .myinput:focus{border: 1px solid #4289dc;}.login_other{overflow: hidden;}.login_other a{float: right;color: #727f8f;}.login_other a:hover{color: #273444;}.login_other input, .login_other label{float: left;color: #727f8f;}.login_other input{margin: 4px 5px 0 0;}.login{box-sizing: border-box;border: none 0;height: 44px;line-height: 44px;width: 100%;background:#4187db;font-size: 16px;border-radius: 3px;margin-right: 40px;transition: all 0.5s ease;cursor: pointer;outline: none;color: #fff;margin-top: 15px;}.login:hover{background: #2668b5;}.login[disabled]{opacity: 0.8;}.login[disabled]:hover{background:#4187db;}.title{color: #273444;font-size: 1.5em;text-align: center;margin: 0 0 20px 0;}@media only screen and (max-width: 768px) {.login_box{width: 280px;margin: 50px auto;}}
</style>

 

 然后修改router文件夹下的index.js文件来配置首页访问的组件是login.vue   （这里获取组件的时候  @表示src文件夹路径  所有vue文件的引入都不需要vue后缀，import后的赋值最好统一给大写）。

 

 这样我们会发现刚打开的vue项目自动刷新了，展示效果如下图（如果没有刷新请查看命令行窗口有无报错，有报错就需要修改代码，修改正确再重启 npm run dev）

 

ajax请求

---

 

vue中请求数据，这里我们使用第三方库axios，这也是vue作者推荐的，比自带的http好用很多。

先安装axios

把原来的服务ctrl+c两次停掉，然后 运行 cnpm install axios --save 安装，安装完成再重新启动服务。

注：这里为什么要用 --save呢，因为使用save的话，这个包就会集成到package.json中的，我们上线的时候就能通过npm install去直接安装了。

 

安装完成后大家打开package.json，就可以看到里面多了 axios:版本号

 

 

 然后我们在main.js中添加如下代码 引入axios，并配置基础路径（因为是跨域请求node端，所以所有请求前面都需要添加node端的基础地址，以后打包上线的时候需要合并的时候再把这个地址删掉），文件位置和修改后的代码如下图

由于是跨域请求，我们需要配置withCredentials为true，这样避免每次都被识别为新的请求。

说明：在vue中，可以使用代理去实现跨域，但是每次新地址都需要配置，还是比较麻烦，这里我们采用直接配置跨域，一次配置就可以一劳永逸。

import axios from 'axios';//引入axios组件
axios.defaults.withCredentials=true;  //跨域保存session有用
axios.defaults.baseURL = "http://localhost:3000"; //打包的时候直接删掉，默认基础路径在这里配置
//将 axios 赋值给 Vue，方便在子组件里面使用
Vue.prototype.$reqs = axios;

 

 

 然后在Login.vue中写登录的具体方法  将如下登录请求代码写在 login方法中，登录的地址为 “/users/login” ，这个接口我们一会儿在node中去写。

                var _this = this;this.disablebtn = true;this.loginText = "登录中...";//this.$reqs就访问到了main.js中绑定的axiosthis.$reqs.post("/users/login",{username:this.username,password:this.password}).then(function(result){ //成功console.log(result)_this.disablebtn = false;_this.loginText = "登录";}).catch(function (error) {//失败_this.disablebtn = false;_this.loginText = "登录"});

 

 

然后我们转到node端

先在routes中创建dbhandler.js文件，写入下面我们封装好的mongodb操作方法。增删改查的具体操作我们在前面的node基础教程中已经详细讲解了，这是这些方法的封装，代码和以前讲的封装有些许差异，大家直接用下面的代码，不要用以前的。

这些方法这里直接贡献给大家，大家就可以不用自己写了，直接复制就Ok，空了可以好好研究研究

 

var mongo=require("mongodb");
var MongoClient = mongo.MongoClient;
var assert = require('assert');
var url = require('url');
var host="localhost";
var port="27017";
var Urls = 'mongodb://localhost:27017/classweb';
// classweb  ===> 自动创建一个//add一条数据 
var add = function(db,collections,selector,fn){var collection = db.collection(collections);collection.insertMany([selector],function(err,result){try{assert.equal(err,null)}catch(e){console.log(e);result = [];};fn(result);db.close();});
}
//delete
var deletes = function(db,collections,selector,fn){var collection = db.collection(collections);collection.deleteOne(selector,function(err,result){try{assert.equal(err,null);assert.notStrictEqual(0,result.result.n);}catch(e){console.log(e);result.result = "";};fn( result.result ? [result.result] : []); //如果没报错且返回数据不是0，那么表示操作成功。db.close;});
};
//find
var find = function(db,collections,selector,fn){//collections="hashtable";var collection = db.collection(collections);collection.find(selector).toArray(function(err,result){//console.log(docs);try{assert.equal(err,null);}catch(e){console.log(e);result = [];}fn(result);db.close();});}//update
var updates = function(db,collections,selector,fn){var collection = db.collection(collections);collection.updateOne(selector[0],selector[1],function(err,result){try{assert.equal(err,null);assert.notStrictEqual(0,result.result.n);}catch(e){console.log(e);result.result = "";};fn( result.result ? [result.result] : []); //如果没报错且返回数据不是0，那么表示操作成功。db.close();});}
var methodType = {// 项目所需login:find,//   type ---> 不放在服务器上面//  放入到服务器//  请求---> 根据传入进来的请求 数据库操作//  req.query    req.bodyshow:find, //后台部分add:add,update:updates,delete:deletes,updatePwd:updates,//portal部分showCourse:find,register:add
};
//主逻辑    服务器  ， 请求    --》 
// req.route.path ==》 防止前端的请求 直接操作你的数据库
module.exports = function(req,res,collections,selector,fn){MongoClient.connect(Urls, function(err, db) {assert.equal(null, err);console.log("Connected correctly to server");// 根据 请求的地址来确定是什么操作  （为了安全，避免前端直接通过请求url操作数据库）methodType[req.route.path.substr(1)](db,collections,selector,fn);db.close();});};

 

 然后修改自动生成的 users.js  为如下代码

代码解释：

引入了express框架，路由router，并且引入了上面封装的 dbhandler。

crypto是加密包，对传输过来的密码进行加密

post请求使用  post方法接收

handler()调用的是dbhander中的方法，传入的参数依次 （ req:请求详细， res:响应信息，  “user”操作的表的名称， 传入的查询数据， 回掉函数）

在dbhander.js中配置了login对应的操作是查询，返回数据放到数组中。如果数组空，就表示没查到数据，如果非空，比较密码是否一致，如果都正确，就返回登录成功。

最后的module.exports = router是ES6的模块暴露，前面基础博客中已经讲了，这里就不赘述了

var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js');
var crypto = require('crypto');/* POST users listing. */
//登录
router.post('/login', function(req, res, next) {var md5 = crypto.createHash('md5');var password = md5.update(req.body.password).digest('base64');handler(req, res, "user", {name: req.body.username},function(data){if(data.length===0){res.end('{"err":"抱歉，系统中并无该用户，如有需要，请向管理员申请"}');}else if(data[0].password !== password){res.end('{"err":"密码不正确"}');}else if(data.length!==0&&data[0].password===password){req.session.username = req.body.username; //存sessionreq.session.password = password;res.end('{"success":"true"}');}});});module.exports = router;

 

这样请求的代码就写完了，但是跨域请求 需要在node中也作配置才可以请求到

修改app.js，在11行左右找到 var app= express()，在其后面添加如下代码

第二段代码是服务器端存session的，直接使用express-session模块（后面会带着大家安装），然后添加配置项即可（配置项的说明在备注中）

//跨域  后期删
app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "http://localhost:8080"); //为了跨域保持session，所以指定地址，不能用*res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Credentials', true); next();
});

//session
var session=require('express-session');
app.use(session({secret:'classweb531234',               //设置 session 签名name:'classweb',cookie:{maxAge:60*1000*60*24}, // 储存的时间 24小时resave:false,             // 每次请求都重新设置sessionsaveUninitialized:true
}));

 

 

 停止Node端服务，安装mongodb

cnpm install mongodb@2.2.33 --save

 

安装 express-session

cnpm install express-session --save

 

 重启服务

 

刷新vue的登录页面，点击登录

你会发现，控制台打印出了返回的登录成功信息，这样我们的登录功能就编写完成了 （常见出错原因在后面附录）

 

 附录：常见报错

---

 

 1. 数据库连接失败 ：

　　①可能mongo未自动启动，请按基础教程中的介绍正确启动mongo (Net start MongoDB) 

　　 ②数据库名没写对  检查dbhandler.js中的下图名字是否和数据库名称一样。

　　③表名称没给对 ，检查user.js 中的表名是否和数据库中的一致。

 

2.根本链接不到地址，在网页控制台打印红色的链接失败

　　①请求地址没写对,核对login.vue中的地址和 node端routes/index.js中的地址是否对上

 

　　②跨域配置不对，请按上面的步骤把 vue部分和node部分都好好再核对着写一遍

 

 

 

 

好啦，今天就讲到这里。下一篇将讲解 首页路由配置，导航，首页统计信息，用户添加/修改/删除，表格组件封装。