打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(1):创建项目,完成登录功能
第一章 建议学习时间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中绑定的axios this.$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.body show: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; //存session req.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, // 每次请求都重新设置session saveUninitialized: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部分都好好再核对着写一遍
好啦,今天就讲到这里。下一篇将讲解 首页路由配置,导航,首页统计信息,用户添加/修改/删除,表格组件封装。
关注公众号,博客更新即可收到推送