学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习vue和node基础
下载地址：https://download.csdn.net/download/qq_34223273/11153826
学习目标：此教程将教会大家 如何一步一步实现一个完整的课程学习系统（包括课程管理后台/Node服务器/学习门户三个模块）。
上次node基础课程博客大家反响很好，时隔3个月，才更新项目部分，预计2~3天更新一章，我尽量20天更新完毕，学完这个项目Nodejs和vue就基本熟悉了，如发现教程有误的地方，请及时留言反馈
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部分都好好再核对着
接下来讲解 首页路由配置，导航，首页统计信息，用户添加/修改/删除，表格组件封装。
我们先把项目运行起来 Node端 npm start ，vue端npm run dev
首先我们需要使用一个字体图标库 fontawesome，如果没有用过的自行百度啊，这里就不扯其他知识了
下载地址：http://fontawesome.dashgame.com/ 或者 到github下载的本项目中对应路径去找也可以
下载好以后把css和font放到static中，然后我们在index.html中引入
<link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css"/>注：1。我没有找到可以通过import引入的fontawesome包，所以就直接引入文件了，（网上有 vue-awesome，但貌似不好用，就没有用）
这里为什么是 ../static 这样去找static，而不是 ./ ，因为当进入二级路由以后，在路由内部index和static就不在被认为是同一级，就找不到了，所以就通过 ../往上再找了一级。
我们要设置一些统一的全局样式，我们就直接写在 index.html中，这里本来不是一次就写完这些样式，但为了避免以后再回来添加样式，这里就一起写了，首先清楚了全局的margin等，然后定义了 .btn按钮样式 .myinput输入框样式，以后再使用
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
font-family: arial "microsoft yahei";
background: #f0f2f5;
}
ul,li{
list-style: none;
}
/*按钮*/
.btn{
border:1px solid #4187db;
color: #4187db;
background: #fff;
padding: 6px 14px 7px;
border-radius: 3px;
transition: all 0.5s ease;
outline: none;
margin-top: 14px;
cursor: pointer;
}
.btn i{
margin-right: 4px;
}
.btn:hover{
background: #4187db;
color: #fff;
}
/*输入框*/
.myinput{
width: 65%;
border: 1px solid #cad3de;
height: 35px;
line-height: 35px;
margin: 5px 0 10px;
border-radius: 3px;
padding: 0 10px;
outline: none;
box-sizing: border-box;
}
.myinput:focus{
border: 1px solid #4289dc;
}
</style>在assets文件夹中创建 images文件夹，放入我们backIndex.vue中需要的图片 （图片请到github下载的项目中对应路径去找）
然后我们去修改 路由文件 index.js的路由，在其中添加后台首页框架的路由，如下图
并且在components中创建 backIndex.vue组件
在backIndex.vue组件中写入后面代码
基本功能如下图，左侧导航，顶部搜索栏和个人头像 退出等操作
代码解释：中间大部分是Html+css代码，代码中注释已经可以帮助大家理解
这里着重说一下路由部分：router-link表示点击的时候url需要跳转的地址，这些地址对应的路由文件还没有写，这里先写上，下下步就配置这个，页面不多，我们就完成 首页 用户/学员管理 课程列表/课程编辑 几个页面，这样就可以算是一个基础版的后台管理系统了。
当点击对应的link的时候，vue内部会自动添加router-link-active 类，我们css中对这个类做了样式设置。
<template>
<div class="backlogin">
<div class="header">
<div class="search_box" :class="{search_box_fouce:search_box_fouce}">
<i class="fa fa-search" aria-hidden="true"></i>
<input @focus="focusFn" @blur="blurFn" type="text" name="" id="" value="" placeholder="搜索 . . . " />
</div>
<div class="handler">
<div class="more" @click="toggleSlide">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul :class="{showul:showExit}">
<li><a href="javascript:;" @click="logout"><i class="fa fa-sign-out" aria-hidden="true"></i>退出</a></li>
<li><a href="javascript:;" @click="">修改密码</a></li>
<li><a href="javascript:;">意见反馈</a></li>
</ul>
</div>
<img src="../assets/images/teacherimg01.png" alt="" />
</div>
</div>
<!--侧面导航-->
<div class="sidenav_box">
<img class="logo" src="../assets/images/logo03.png" alt="" />
<ul class="sidenav">
<li class="now">
<router-link to="/backIndex/indexContent">
<i class="fa fa-home" aria-hidden="true"></i>
<span>网站首页</span>
</router-link>
</li>
<li>
<router-link to="/backIndex/adminList">
<i class="fa fa-user-o" aria-hidden="true"></i>
<span>后台人员</span>
</router-link>
</li>
<li>
<router-link to="/backIndex/studentList">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
<span>学员管理</span>
</router-link>
</li>
<li>
<router-link to="/backIndex/courseList">
<i class="fa fa-book" aria-hidden="true"></i>
<span>课程管理</span>
</router-link>
</li>
</ul>
</div>
<div class="content">
<ul class="breadcrumb">
<li><a href="#/backIndex/">首页</a></li>
<li>{{pageTitle}}</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
var pageTitleObj = {
indexContent:"网站首页",
adminList:"后台人员",
studentList:"学员管理",
courseList:"课程管理",
courseEdit:"课程编辑"
};
export default {
name: 'backlogin',
data () {
return {
search_box_fouce:false,
showExit:false,
pageTitle: pageTitleObj[ this.$route.path.substr( this.$route.path.lastIndexOf("/")+1 ) ] || "网站首页"
}
},
methods:{
focusFn(){ //搜索框获取焦点，添加class
this.search_box_fouce = true;
},
blurFn(){ //搜索框失去焦点，去掉class
this.search_box_fouce = false;
},
toggleSlide(){ //这个是用来显示和隐藏头像旁的退出下拉框
this.showExit = !this.showExit
},
logout(){ //退出系统
}
},
watch:{ //监控路径变化 当路径发送变化的时候，改变面包屑导航的显示
$route: {
handler: function (val, oldVal) {
var path = val.path;
this.pageTitle = pageTitleObj[ path.substr( path.lastIndexOf("/")+1 ) ] || "网站首页";
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul, li{
list-style: none;
}
.header{
height: 60px;
box-shadow: 0 1px 5px rgba(13,62,73,0.2) ;
background: #fff;
margin-left: 80px;
min-width: 740px;
}
.sidenav_box{
width: 80px;
box-shadow: 0 1px 5px rgba(13,62,73,0.2) ;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: #fff;
z-index: 99;
}
.sidenav_box .logo{
width: 46px;
margin: 20px 0 0 17px;
}
.sidenav{
margin-top: 30px;
}
.sidenav li{
margin-bottom: 20px;
}
.sidenav a{
display: block;
width: 56px;
height: 56px;
margin: 0 auto;
position: relative;
cursor: pointer;
opacity: 0.6;
transition:all 0.5s ease;
text-decoration: none;
}
.sidenav a i{
font-size: 20px;
line-height: 56px;
text-align: center;
display: block;
color: #566a80;
}
.sidenav a:hover{
background: #f0f2f5;
opacity: 1;
}
.sidenav a span{
position: absolute;
left: 55px;
top: 22px;
background: #000;
color: #fff;
width: 0px;
padding: 5px 0;
border-radius: 3px;
font-size: 12px;
opacity: 0;
}
.sidenav a:hover span{
opacity: 1;
left: 65px;
width: 60px;
padding: 5px 20px;
transition:none 0.5s ease-out;
transition-property: opacity,left;
}
.sidenav a span:after{
content: "";
position: absolute;
top: 8px;
left: -10px;
border:5px solid transparent;
border-right-color: #000;
}
.sidenav .router-link-active:after{
content: "";
position: absolute;
left: -16px;
top: 8px;
height: 40px;
width: 8px;
border-radius: 3px;
background: #566a80;
}
.sidenav .router-link-active{
opacity: 1;
background: #f0f2f5;
}
/*顶部栏*/
.search_box{
color: #979fa8;
padding-top: 20px;
float: left;
}
.search_box i{
margin: 0 12px 0 70px;
transition: all 0.5s ease;
}
.search_box input{
border:none;
outline: none;
}
.search_box_fouce i{
margin-left: 55px;
color: #2C3D50;
}
.handler > *{
float: right;
margin-right: 20px;
cursor: pointer;
}
.handler .more{
font-size: 20px;
color: #566A80;
margin: 15px 30px 0 0;
position: relative;
}
.handler .more:hover{
color: #2C3D50;
}
.handler .more ul{
font-size: 14px;
position: absolute;
right: 0;
top: 55px;
width: 120px;
box-shadow: 0 1px 5px rgba(13,62,73,0.2);
transition: all 0.3s ease-out;
height: 0;
opacity: 0;
overflow: hidden;
text-align: center;
}
.handler .more .showul{
height: auto;
top: 45px;
opacity: 1;
border-top: 1px solid #979FA8;
}
.handler .more a{
display: block;
padding: 8px 10px;
background: #fff;
color: #566A80;
text-decoration: none;
}
.handler .more a:hover{
background: #f8f9fb;
}
.handler > img{
width: 50px;
border-radius: 50%;
margin-top: 5px;
margin-right: 30px;
}
.content{
margin: 20px 30px 0px 100px;
min-height: 300px;
min-width: 700px;
}
.breadcrumb{
border-radius: 4px;
padding: 10px 15px;
background: #fff;
}
.breadcrumb > li{
display: inline-block;
color: #777777;
}
.breadcrumb > li+li:before{
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
.breadcrumb > li > a{
color: #32475f;
text-decoration: none;
}
.main{
border-radius: 4px;
background: #fff;
margin-top: 10px;
}
</style>然后在地址栏输入 http://localhost:8080/#/backIndex 就可以看到首页框架的效果了。 （这时候内部页面还没有，所以点击左侧导航会找不到页面，先不要点）
常见错误： 如果前面的图片路径没放对，就会出现这个错误
然后我们继续将所有的路由配置其他页面的路由
一共有 课程列表 / 编辑课程 / 首页统计 / 后台用户 / 学员用户 这些二级页面，我们都加入到 路由文件 index.js中
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login'
import backIndex from '@/components/backIndex'
import courseList from '@/components/courseList'
import indexContent from '@/components/indexContent'
import adminList from '@/components/adminList'
import studentList from '@/components/studentList'
import courseEdit from '@/components/courseEdit'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},{
path: '/backIndex', //首页框架
name: 'backIndex',
component: backIndex,
children:[
{
path: 'courseList', //课程列表
component: courseList
},{
path: 'courseEdit/:sysId', //编辑课程
component: courseEdit
},{
path: 'indexContent', //首页统计
component: indexContent
},{
path: 'adminList', //后台用户
component: adminList
},{
path: 'studentList', //学员用户
component: studentList
},{
path: '*', //其他路径都跳转到首页
redirect: 'indexContent'
}
]
}
]
})添加这些路由后的需要建立对应的 vue 组件文件，在componets中建立上面路由对应的空vue文件
这些新建的vue文件中需要先放入一个空的template标签，以免报错
<template> </template>
再刷新页面的时候，左侧导航就可以点击了（这些router-link对应的路径和路由对应的path一致），可以看到面包屑导航对应的名字就修改了（这个修改的逻辑在backIndex.vue的97行左右的 watch方法中）。
首页统计页面
然后我们为 indexContent.vue 添加中间显示的统计图表，代码在后面
代码如下：由于前台页面的统计还没开始写，当下我们就只放一个静态页面在此，
canvas绘制提标使用的是原生js写的，具体的原理步骤请查看博客 http://www.cnblogs.com/chengduxiaoc/p/7678967.html
<template>
<div class="indexContent main">
<h4>最新数据</h4>
<ul class="number">
<li>
<div class="title">今日访问</div>
<p>12000</p>
<a href="javascript:;">查看详情<i class="fa fa-angle-right" aria-hidden="true"></i></a>
</li>
<li>
<div class="title">学员总数</div>
<p>3000000</p>
<a href="javascript:;">查看详情<i class="fa fa-angle-right" aria-hidden="true"></i></a>
</li>
<li>
<div class="title">在学人数</div>
<p>2000</p>
<a href="javascript:;">查看详情<i class="fa fa-angle-right" aria-hidden="true"></i></a>
</li>
</ul>
<canvas id="barChart" height="400" width="600" style="margin:10px 0"> 你的浏览器不支持HTML5 canvas </canvas>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
border-radius: 4px;
background: #fff;
margin-top: 10px;
overflow: hidden;
}
.main > h4{
color: #51555a;
padding:10px;
border-bottom: 1px solid #DFE3EA;
}
.number{
width: 30%;
float: right;
margin-right: 10%;
margin-top: 10px;
color: #566A80;
}
.number li{
padding: 20px;
border-top:1px solid #F0F2F5;
}
.number li:first-child{
border: none 0;
}
.number p{
font-size: 20px;
font-family: arial;
margin: 10px 0;
}
.number a{
text-decoration: none;
color: #4187db;
font-size: 12px;
}
.number li:hover{
color: #173859;
}
.number a:hover{
}
.number i{
transition: all 0.3s ease-out;
padding-left: 10px;
}
.number a:hover i{
padding-left: 20px;
}
.number:hover li{
border-color:#DFE3EA
}
canvas{
max-width: 55%;
min-width: 45%;
}
</style>
<script>
export default {
name: 'indexContent',
data () {
return {
}
},
methods:{
},
mounted:function(){
var chartData = [["2017/01", 50], ["2017/02", 60], ["2017/03", 100], ["2017/04",200], ["2017/05",350], ["2017/06",600]];
goBarChart(chartData);
}
}
function goBarChart(dataArr){
// 声明所需变量
var canvas,ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 折线图属性
var tobalDots, dotSpace, maxValue;
var totalYNomber;
// 运动相关变量
var ctr, numctr, speed;
// 获得canvas上下文
canvas = document.getElementById("barChart");
if(canvas && canvas.getContext){
ctx = canvas.getContext("2d");
}
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawBarAnimate(); // 绘制折线图的动画
//点击刷新图表
canvas.onclick = function(){
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawBarAnimate(); // 绘制折线图的动画
};
// 图表初始化
function initChart(){
// 图表信息
cMargin = 60;
cSpace = 80;
canvas.width = Math.floor( (window.innerWidth-100)/2 ) * 2 ;
canvas.height = 740;
canvas.style.height = canvas.height/2 + "px";
canvas.style.width = canvas.width/2 + "px";
cHeight = canvas.height - cMargin - cSpace;
cWidth = canvas.width - cMargin - cSpace;
originX = cMargin + cSpace;
originY = cMargin + cHeight;
// 折线图信息
tobalDots = dataArr.length;
dotSpace = parseInt( cWidth/tobalDots );
maxValue = 0;
for(var i=0; i<dataArr.length; i++){
var dotVal = parseInt( dataArr[i][1] );
if( dotVal > maxValue ){
maxValue = dotVal;
}
}
maxValue += 50;
totalYNomber = 10;
// 运动相关
ctr = 1;
numctr = 100;
speed = 6;
ctx.translate(0.5,0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
}
// 绘制图表轴、标签和标记
function drawLineLabelMarkers(){
ctx.font = "24px Arial";
ctx.lineWidth = 2;
ctx.fillStyle = "#566a80";
ctx.strokeStyle = "#566a80";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX+cWidth, originY);
// 绘制标记
drawMarkers();
}
// 画线的方法
function drawLine(x, y, X, Y){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
}
// 绘制标记
function drawMarkers(){
ctx.strokeStyle = "#E0E0E0";
// 绘制 y 轴 及中间横线
var oneVal = parseInt(maxValue/totalYNomber);
ctx.textAlign = "right";
for(var i=0; i<=totalYNomber; i++){
var markerVal = i*oneVal;
var xMarker = originX-5;
var yMarker = parseInt( cHeight*(1-markerVal/maxValue) ) + cMargin;
//console.log(xMarker, yMarker+3,markerVal/maxValue,originY);
ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
if(i>0){
drawLine(originX+2, yMarker, originX+cWidth, yMarker);
}
}
// 绘制 x 轴 及中间竖线
ctx.textAlign = "center";
for(var i=0; i<tobalDots; i++){
var markerVal = dataArr[i][0];
var xMarker = originX+i*dotSpace;
var yMarker = originY+30;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
if(i>0){
drawLine(xMarker, originY-2, xMarker, cMargin );
}
}
// 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI/2);
ctx.fillText("访问量", -canvas.height/2, cSpace-10);
ctx.restore();
// 绘制标题 x
ctx.fillText("月份", originX+cWidth/2, originY+cSpace/2+20);
};
//绘制折线图
function drawBarAnimate(){
ctx.strokeStyle = "#566a80"; //"#49FE79";
//连线
ctx.beginPath();
for(var i=0; i<tobalDots; i++){
var dotVal = dataArr[i][1];
var barH = parseInt( cHeight*dotVal/maxValue* ctr/numctr );//
var y = originY - barH;
var x = originX + dotSpace*i;
if(i==0){
ctx.moveTo( x, y );
}else{
ctx.lineTo( x, y );
}
}
ctx.stroke();
//背景
ctx.lineTo( originX+dotSpace*(tobalDots-1), originY);
ctx.lineTo( originX, originY);
//背景渐变色
//柱状图渐变色
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(133,171,212,0.6)');
gradient.addColorStop(1, 'rgba(133,171,212,0.1)');
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.fillStyle = "#566a80";
//绘制点
for(var i=0; i<tobalDots; i++){
var dotVal = dataArr[i][1];
var barH = parseInt( cHeight*dotVal/maxValue * ctr/numctr );
var y = originY - barH;
var x = originX + dotSpace*i;
drawArc( x, y ); //绘制点
ctx.fillText(parseInt(dotVal*ctr/numctr), x+15, y-8); // 文字
}
if(ctr<numctr){
ctr++;
setTimeout(function(){
ctx.clearRect(0,0,canvas.width, canvas.height);
drawLineLabelMarkers();
drawBarAnimate();
}, speed);
}
}
//绘制圆点
function drawArc( x, y, X, Y ){
ctx.beginPath();
ctx.arc( x, y, 3, 0, Math.PI*2 );
ctx.fill();
ctx.closePath();
}
}
</script>然后我们可以看到，首页的效果就出来啦
登录功能完善：
当登录请求完成以后，如果出错，就弹出错误（我们本项目没有封装模态框，就直接用alert吧），如果正确，就跳转到首页
修改后的 login.vue中的 ajax请求代码如下：
this.$reqs.post("/users/login",{
username:this.username,
password:this.password
}).then(function(result){
//成功
if(result.data.err){
alert(result.data.err);
}else{
_this.$router.push({path:'/backIndex/indexContent'});
}
_this.disablebtn = false;
_this.loginText = "登录";
}).catch(function (error) {
//失败
_this.disablebtn = false;
_this.loginText = "登录"
});注：我们通过 router.push去修改url，作用和原生js的 window.location.href基本一致。
退出系统
功能点：点击退出，实现退出功能
在backIndex.vue中我们有一个退出登录的空方法，我们在里面写退出登录的请求的代码，退出成功后跳转到根目录（以就算登录页面）
logout(){ //退出系统
var _this = this;
this.$reqs.post("/users/logout",{
}).then(function(result){
//成功
_this.$router.push({path:'/'});
}).catch(function (error) {
//失败
console.log(error)
});
}然后在后台写接口，在user.js中 登录的方法后面写（修改完成后需要重启node服务）
注：这里直接清除登录中设置的 session 就可以了，（我们后面会对所有的请求设置拦截，如果session中的用户信息没有，再提示用户未登录，跳转到登录页面就可以了）
//退出
router.post('/logout', function(req, res, next) {
req.session.username = ""; //清除session
req.session.password = "";
res.end('{"success":"true"}');
});接下来将讲解 用户添加/修改/删除，表格分页
首先我们通过命令行启动前面已经写完的项目
由于要用到表格，我们这里就得封装 表格和分页组件
先在componets中创建分页组件 pagebar.vue，写入以下代码（功能是传入分页信息，然后展示分页，点击分页的时候，会向上触发goto()跳转到第几页，具体参数的解释在代码中，对于组件不熟悉的，可以再去看看前面的基础教程）
<template>
<ul class="pagination">
<li :class="{hideLi:current == 1}" @click="goto(current-1)">
<a href="javascript:;" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
<a href="javascript:;" >{{index}}</a>
</li>
<!--<li><a href="javascript:;">10</a></li>-->
<li :class="{hideLi:(allpage == current || allpage == 0)}" @click="goto(current+1)">
<a href="javascript:;" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</template>
<script>
/*
分页组件
设置props
current 当前页 默认1
showItem 显示几页 默认5
allpage 共多少页 10
**/
export default {
name: 'page',
data () {
return {}
},
props:{
current:{
type:Number,
default:1
},
showItem:{
type:Number,
default:5
},
allpage:{
type:Number,
default:10
}
},
computed:{
pages:function(){
var pag = [];
if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem,this.allpage);
while(i){
pag.unshift(i--);
}
}else{ //当前页数大于显示页数了
var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
i = this.showItem;
if( middle > (this.allpage - this.showItem) ){
middle = (this.allpage - this.showItem) + 1
}
while(i--){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
/*editHandler(item){
this.$emit("on-edit",item);
}*/
goto:function(index){
if(index == this.current) return;
//this.current = index;
//这里可以发送ajax请求
this.$emit("on-gopage",index);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*分页*/
.pagination{
margin: 10px;
display: inline-block;
}
.pagination >li{
display: inline;
}
.pagination>li>a, .pagination>li>span{
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #4187db;
text-decoration: none;
background-color: #fff;
border: 1px solid #f8f9fb;
}
.pagination>li>a:hover{
background-color: #f8f9fb;
}
.pagination>.active>a{
background-color: #4187db !important;
color: #fff;
}
.hideLi a{
visibility: hidden;
}
</style>然后在componets中创建 grid.vue ，表格组件，然后写入以下代码，我们在表格组件中，引入了分页组件，这样就不用在主页面中两次引入了，参数的注释在代码中，这里我们需要传入表格数据的头信息和列表信息
<template>
<div class="">
<table border="" cellspacing="" cellpadding="">
<thead>
<tr><th>序号</th>
<th v-for="(item, index) in theadData">{{item.title}}</th>
</tr>
</thead>
<tbody>
<tr v-if="!listData.length">
<td>1</td><td>没有数据 . . .</td>
<td v-for="(item, index) in theadData" v-if="index<=theadData.length-2"></td>
</tr>
<tr v-for="(item, index) in listData">
<td>{{index+1}}</td>
<!--按照头部的-->
<td v-for="(item2, index2) in theadData">
<span v-if="index2 === 0" style="float: right;">
<i title="编辑" v-if="ifEdit" class="fa fa-edit" aria-hidden="true" @click="editHandler(item)"></i>
<i title="删除" v-if="ifDelete" class="fa fa-trash" aria-hidden="true" @click="deleteHandler(item)"></i>
<i title="下移" v-if="ifDown" class="fa fa-arrow-circle-o-down" aria-hidden="true" @click="downHandler(item)"></i>
<i title="上移" v-if="ifUp" class="fa fa-arrow-circle-o-up" aria-hidden="true" @click="upHandler(item)"></i>
<i title="封号"v-if="ifReset" class="fa fa-unlock-alt" aria-hidden="true" @click="resetHandler(item)"></i>
</span>
{{item[item2.keyname]}}
</td>
</tr>
</tbody>
</table>
<pagebar v-if="ifpage" :current="pageInfo.current" :showItem="pageInfo.showItem" :allpage="pageInfo.allpage" @on-gopage="gopage"></pagebar>
</div>
</template>
<script>
/*
表格组件
设置props
theadData 表头数据 默认[]
listData 表格数据 默认[]
ifpage 是否分页 默认true
ifEdit/ifDelete/ifUp/ifDown 是否可编辑/删除/上下移动 默认false
定制模板
slot为grid-thead 定制表格头部
slot为grid-handler 定制表格操作
监听状态变化
on-delete 删除
on-edit 编辑
on-up 上移
on-down 下移
分页
pageInfo 分页信息如下 默认{} -- 或者单独使用 pagebar.vue
{
current:当前第几页 1
showItem：显示多少页 5
allpage:共多少页 10
}
**/
import pagebar from './pagebar.vue'
export default {
name: 'grid',
data () {
return {
}
},
props:{
listData:{
type:Array,
default:function(){
return [{
name:"没有数据 . . ."
}]
}
},
theadData:{
type:Array,
default:function(){
return [{
title:"名字",
keyname:"name"
}]
}
},
ifpage:{
type:Boolean,
default:true
},
ifEdit:{
type:Boolean,
default:false
},
ifDelete:{
type:Boolean,
default:false
},
ifUp:{
type:Boolean,
default:false
},
ifDown:{
type:Boolean,
default:false
},
ifReset:{
type:Boolean,
default:false
},
pageInfo:{
type:Object,
default:function(){
return {}
}
}
},
methods:{
editHandler(item){
this.$emit("on-edit",item);
},
deleteHandler(item){
this.$emit("on-delete",item);
},
downHandler(item){
this.$emit("on-down",item);
},
upHandler(item){
this.$emit("on-up",item);
},
resetHandler(item){
this.$emit("on-reset",item);
},
gopage(index){
this.$emit("on-gopage",index);
}
},
components:{pagebar}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table{
border: none 0;
border-collapse: collapse;
color: #51555a;
width: 100%;
border-bottom: 1px solid #DFE3EA;
}
td, th{
padding: 10px 20px;
text-align: left;
border-width:0;
}
thead tr, tr:nth-of-type(even){
background: #f8f9fb;
}
/*tbody tr:hover{
background: #f4f6fb;
}*/
td .fa{
padding:0 5px;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
}
td .fa:first-child{
margin-left: 10px;
}
tr:hover .fa{
opacity: 1;
}
td .fa:hover{
color: #4187db;
transform: scale(1.2);
}
</style>表格头信息和列表数据 需要传入的数据格式 如下（这只是展示，帮助大家理解上面的代码的，不用写到页面中）
var listData = [
{
name:"css+html基础",
duration:"30h",
teacher:"小豆子",
videoNb:"20",
sysId:1
},{
name:"javascript进阶",
duration:"20h",
teacher:"小豆子",
videoNb:"12",
sysId:2
},{
name:"移动端全解析 ",
duration:"10h",
teacher:"小豆子",
videoNb:"3",
sysId:3
},{
name:"10分钟系列 ",
duration:"23h",
teacher:"小豆子",
videoNb:"2",
sysId:4
},{
name:"移动端动态网页编程",
duration:"10h",
teacher:"小豆子",
videoNb:"10",
sysId:5
}
];
var theadData = [
{
title:"课程名称",
keyname:"name"
},{
title:"时长",
keyname:"duration"
},{
title:"视频数量",
keyname:"videoNb"
},{
title:"老师",
keyname:"teacher"
}
];然后我们修改系统管理员列表组件（我们上一章中建立的 adminList.vue），修改其中的代码如下，我们这里代码比较多，包括了增删该，分页等功能，确实不好分步骤讲解，这里就直接上代码了，整体来说，方法都很明确，希望大家能看懂，中间的ajax接口我们下一步再去Node端写。
注：这里我们没有对输入数据进行严格的正则验证，是因为此后台功能设定为内部人员使用，所以不需要像前台用户注册页面那样写非常复杂的验证
<template>
<div class="adminList main">
<div class="input_box">
<input v-model="Admin.name" class="myinput" type="text" placeholder="用户名" />
<input v-model="Admin.phone" class="myinput" type="text" placeholder="手机号" />
<input v-if="!editAdminObj" v-model="Admin.password" class="myinput" type="password" placeholder="密码" />
<button v-if="!editAdminObj" class="btn" @click="addAdmin()"><i class="fa fa-plus" aria-hidden="true"></i>添加</button>
<button v-if="editAdminObj" class="btn" @click="saveEditAdmin()"><i class="fa fa-save" aria-hidden="true"></i>保存</button>
<button style="opacity: 0.8;" v-if="editAdminObj" class="btn" @click="cancelEditAdmin()"><i class="fa fa fa-times-circle-o" aria-hidden="true"></i>取消</button>
</div>
<grid
:listData="listData"
:theadData="theadData"
:ifEdit="true"
:ifDelete="true"
:ifpage="true"
:pageInfo="pageInfo"
@on-delete="deleteAdmin"
@on-edit="editAdmin"
@on-gopage="gopage"
></grid>
</div>
</template>
<script>
var theadData = [
{
title:"用户名",
keyname:"name"
},{
title:"手机号",
keyname:"phone"
}
];
import grid from './grid.vue'
export default {
name: 'adminList',
data () {
return {
listData:[],
theadData:theadData,
Admin:{ //用户信息
name:"",
phone:"",
password:"",
},
editAdminObj:null, //用于存放正在编辑的用户
pageInfo:{}
}
},
mounted:function(){
this.getAdminList(1);
},
methods:{
getAdminList(page){
var _this = this;
this.$reqs.post('/users/AdminList',{
page:page
}).then(function(result){
//成功
_this.listData = result.data.data;
_this.pageInfo.allpage = Math.ceil( result.data.total/5 );
}).catch(function (error) {
//失败
console.log(error)
});
},
addAdmin(){ //添加用户
if(!this.Admin.name || !this.Admin.phone || !this.Admin.password){
alert("不能为空");
return false;
}
this.$reqs.post('/users/add',this.Admin)
.then((result)=>{
//成功
this.getAdminList();
this.emptyAdmin();
}).catch(function (error) {
//失败
console.log(error)
});
},
editAdmin(item){ //编辑用户
this.editAdminObj = item;
this.Admin = JSON.parse(JSON.stringify(item));
},
saveEditAdmin(){
if(!this.Admin.name || !this.Admin.phone){
alert("不能为空");
return false;
}
this.$reqs.post('/users/update', this.Admin)
.then((result)=>{
//成功
this.gopage(this.pageInfo.current);
this.editAdminObj = null;
this.emptyAdmin();
}).catch(function (error) {
//失败
console.log(error)
});
},
cancelEditAdmin(){
this.editAdminObj = null;
this.emptyAdmin();
},
emptyAdmin(){ //清空输入框（多次使用，所以封装到这里）
this.Admin.name = "";
this.Admin.phone = "";
this.Admin.password = "";
},
deleteAdmin(item){
this.$reqs.post('/users/delete',item)
.then((result)=>{
//成功
this.gopage(this.pageInfo.current);
this.emptyAdmin();
}).catch(function (error) {
//失败
console.log(error)
});
},
gopage(index){
this.pageInfo.current = index;
//查询数据
this.getAdminList(index)
}
},
components:{grid}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
border-radius: 4px;
background: #fff;
margin-top: 10px;
}
.input_box{
padding: 0 10px;
}
.input_box .myinput{
width: 25%;
}
</style>vue部分我们就写好了，然后我们编写node接口
我们修改 routes中的 users.js，添加增删改用户的接口 ，由于需要对 _id进行转化，我们还需要引入mongodb的ObjectId模块，修改后的users.js如下
var express = require('express');
var router = express.Router();
var handler = require('./dbhandler.js');
var crypto = require('crypto');
var ObjectId = require('mongodb').ObjectId;
/* 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"}');
}
});
});
//退出
router.post('/logout', function(req, res, next) {
req.session.username = ""; //清除session中的用户信息
req.session.password = "";
res.end('{"success":"true"}');
});
//管理员列表
router.post('/AdminList', function(req, res, next) {
//console.log(req.body);
req.route.path = "/page"; //修改path来设定 对 数据库的操作
var page = req.body.page || 1;
var rows = req.body.rows || 5;
handler(req, res, "user", [{},{limit: rows, skip:(page-1)*rows}] ,function(data,count){
var obj = {
data:data,
total:count,
success:"成功"
};
var str = JSON.stringify(obj);
res.end(str);
});
});
//添加管理员
router.post('/add', function(req, res, next) {
//console.log(req.body);
var md5 = crypto.createHash('md5');
req.body.password = md5.update(req.body.password).digest('base64');
handler(req, res, "user", req.body,function(data){
//console.log(data);
if(data.length==0){
res.end('{"err":"抱歉，添加失败"}');
}else{
res.end('{"success":"添加成功"}');
}
});
});
//删除用户
router.post('/delete', function(req, res, next) {
handler(req, res, "user", {"_id" : ObjectId(req.body._id)},function(data){
console.log(data);
if(data.length==0){
res.end('{"err":"抱歉，删除失败"}');
}else{
var obj = {
success:"删除成功"
};
var str = JSON.stringify(obj);
res.end(str);
}
});
});
//编辑更新用户
router.post('/update', function(req, res, next) {
//console.log(req.body);
var selectors = [
{"_id":ObjectId(req.body._id)},
{"$set":{
name:req.body.name, //用户名称
phone:req.body.phone //联系电话
}
}
];
handler(req, res, "user", selectors,function(data){
//console.log(data);
if(data.length==0){
res.end('{"err":"抱歉，修改失败"}');
}else{
res.end('{"success":"修改成功"}');
}
});
});
module.exports = router;这里我们用的分页查询page方法，在原来的 dbhander.js中没有，所以需要修改 dbhandler.js，修改后的如下，（添加的方法在63行 和 123行）
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();
});
}
//page
var page = function(db,collections,selector,fn){
var collection = db.collection(collections);
var count = 0;
collection.count({},function(err1,count1){
try{
assert.equal(err1,null);
}catch(e){
console.log(e);
}
count = count1;
});
collection.find(selector[0],selector[1]).toArray(function(err,result){
try{
assert.equal(err,null);
}catch(e){
console.log(e);
result = [];
}
fn(result,count); //回掉函数可接收两个参数，查询的数据 和 总数据条数
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,
page:page //分页
};
//主逻辑 服务器 ， 请求 --》
// 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();
});
};然后重启node端服务，可以看到人员增删改查功能已经实现，原来的admin显示出来了，你也可以进行添加，修改，删除
由于mongodb其实不太稳定，所以我们操作过程中，可能会出错停止，如果出现下面报错，就表示Mongodb数据库停了
报错
只需要 重启 mongodb 并重启 node端 即可
等以后上线那一章，我们再讲如何在服务器上让 mongodb和node稳定运行，现阶段运行出错我们都手动重启。
到这里，我们发现，貌似不登陆也能请求列表数据呀，这不科学，所以，我们需要对所有的请求进行拦截，只有当登录了，才能请求数据
我们在vue端的 app.js中加入拦截代码，在session设置的后面添加吧，位置和代码如下
这里我们看到，只有当session中有username的时候，才表示已经登录的（大家还记得吗，这个我们在登录的时候有设置session.username，就是用来这里作判断的），判断中，如果不是登录/登出/已登录三种状态，就直接返回 redirect:true，来告诉浏览器端，需要重定位到登录页面
// 验证用户登录
app.use(function(req, res, next){
//后台请求
if(req.session.username){ //表示已经登录后台
next();
}else if( req.url.indexOf("login") >=0 || req.url.indexOf("logout") >= 0){
//登入，登出不需要登录
next();
}else{
//next(); //TODO:这里是调试的时候打开的，以后需要删掉
res.end('{"redirect":"true"}');
};
});然后我们来在vue的main.js中 作redirect跳转，还有当后台返回err的处理，代码和位置如下
这里在axios中作响应前拦截，就是所有的响应到达$req.post的then(){}之前执行的代码，具体的axios配置项大家可以查查axios官网
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(response.data.err){
alert(response.data.err);
return Promise.reject(response);
}else if(response.data.redirect){
alert("请先登录..");
window.location.href = "#/"; //跳转到登录页
return Promise.reject(response);
}else{
//返回response继续执行后面的操作
return response;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});重启node端，然后访问列表数据，就会提示登录并跳转了，如果已登录，就不会提示这个
好啦，就讲到这里，基本的框架和操作都已经实现了，如果看到这里能弄懂的后面的功能应该都能自己写出来了，想看整站项目可以下载demo
下载地址：https://download.csdn.net/download/qq_34223273/11153826
扫一扫
1709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
