阅读 3500

用Node+VueCli+ElemenetUI+MongoDB教你开发综合性教程网站,包括后台管理系统

运用Node手摸手教你写一个教程网站(遵循响应式),包括前台内容和后台管理系统,整合Express框架和Mongodb数据库服务器开发;教你用Vue.JS,ElementUI和iViewUI写出超漂亮的页面

技术栈比较全面,最详细最用心的文章,学不到东西你问我!

作者原创文章, 转载前请留言或联系作者!!!

如果对你有帮助,请赏个star,谢谢哦~ github地址

介绍

技术栈

  • 后端: Express + Mongodb + passport-jwt + jsonwebtoken等等

  • 前端: Vue.JS + ElementUI + iViewUI + Axios等等

测试环境

VSCode + Node8.9.4 + Google(75.xxx) + VueCli(3.7.0)

功能介绍

  • 学习网站上的知识
  • 搜索功能
  • 留言功能
  • 查看视频功能
  • 欣赏歌曲
  • 文章管理
  • 每日签到
  • 购买课程订单管理
  • 后台管理
  • 等等.......

项目设计

-- 后台基本架构
Node-Vue-App
├── README.md
├── server.js  -- 后台文件入口
├── test.http  -- 测试文件
├── api  -- 路由文件
│    ├── admin.js  -- 配置管理员的操作
│    ├── article.js  -- 配置文章的相关操作
|    ├── index.js  -- 配置首页的相关数据
|    ├── messagewall.js  -- 配置留言社区
|    ├── music.js  -- 配置歌曲信息
|    ├── user.js  -- 记录用户的信息,配置用户的相关操作
|    └── vipcourse.js  -- 配置VIP课程的相关操作
├── config -- 配置文件
|    ├── Date.js  -- 配置日期格式化插件
|    ├── http.js  -- 配置跨域
|    ├── keys.js  -- 配置token的签证密钥
|    └── MongodbURI.js  -- 配置Mongodb一些信息
├── model
|    └── **  -- 自定义数据库的Mongodb模型
├── mongodb
|    └── mongodb.js  -- 配置Mongodb,链接数据库 
├── passport
|    └── passport.js  -- 验证token的合法性
├── static
|    └── **  -- 静态文件存放处 
├── client
|    └── **  -- (Vue)前台页面构架
复制代码
-- 前台页面架构
Client
├── README.md
├── public
|    ├── index.html  -- vue挂载页面
|    └── **  -- 你可以在这里链接少量静态资源
├── src  -- 开发文件夹
|    ├── App.vue  -- Vue挂载根页面
|    ├── http.js  -- 配置http,响应拦截操作
|    ├── main.js  -- Vue程序入口文件,挂载各种组件
|    ├── router.js  -- Vue路由配置文件
|    ├── store.js  -- Vuex的状态管理文件
|    ├── assets
|    |     └── **  -- 存放静态资源
|    ├── components
|    |     └── pcnav.vue  -- 导航栏
|    ├── myplugin  -- 配置插件
|    |     ├── Date.js  -- 格式化日期
|    |     └── Loading.js  -- 加载动画
|    ├── store  -- 状态储存
|    |     ├── adminstore.js  -- 管理员状态
|    |     ├── musicstore.js  -- 歌曲信息
|    |     ├── searchstore.js  -- 搜索信息
|    |     └── userstore.js  -- 用户信息
|    ├── views  -- 页面文件
|    |     ├── search.vue  -- 搜索页面
|    |     ├── NotFound.vue  -- 404页面
|    |     ├── Home.vue  -- 主页面
|    |     ├── Index.vue  -- 前端首页
|    |     ├── adminPage  -- 管理员
|    |     |     ├── adminindex.vue  -- 后台首页
|    |     |     ├── adminlogin.vue  -- 后台登录页面
|    |     |     ├── adminnav.vue  -- 后台导航栏
|    |     |     ├── index.vue  -- 后台根挂载点
|    |     |     ├── mainarea.vue  -- 后台页面主区域挂载点
|    |     |     └── components  -- 后台组件
|    |     |     |     ├── addarticle.vue  -- 添加文章
|    |     |     |     ├── buycourselogs.vue  -- 购买课程记录
|    |     |     |     ├── communitymessage.vue  -- 社区留言
|    |     |     |     ├── cssmessage.vue  -- VIP课程css留言
|    |     |     |     ├── editcss.vue  -- 编辑CSS文章
|    |     |     |     ├── edithtml.vue  -- 编辑HTML文章
|    |     |     |     ├── editjavascript.vue  -- 编辑Javascript文章
|    |     |     |     ├── homepagedata.vue  -- 前台主页数据管理
|    |     |     |     ├── htmlmessage.vue  -- VIP课程html留言
|    |     |     |     ├── jsmessage.vue  -- VIP课程JavaScript留言
|    |     |     |     ├── loginlog.vue  -- 登录日志
|    |     |     |     ├── managemusic.vue  -- 歌曲管理
|    |     |     |     ├── manageusers.vue  -- 用户管理
|    |     |     |     ├── operationlog.vue  -- 操作日志
|    |     |     |     ├── registerlog.vue  -- 注册日志
|    |     |     |     ├── signlog.vue  -- 签到日志
|    |     |     |     ├── specificarticles.vue  -- 账单管理
|    |     |     |     ├── vipcoursecss.vue  -- VIP(css)管理
|    |     |     |     ├── vipcoursehtml.vue  -- VIP(html)管理
|    |     |     |     └── vipcoursejs.vue  -- VIP(js)管理
|    |     ├── coursePage  -- 文章展示
|    |     |     ├── css.vue  -- css文章
|    |     |     ├── html5.vue  -- HTML文章
|    |     |     └── javascript.vue  -- Javascript文章
|    |     ├── userPage  -- 用户页面
|    |     |     ├── aboutme.vue  -- 作者
|    |     |     ├── enjoymusic.vue  -- 欣赏音乐
|    |     |     ├── messagewall.vue  -- 社区留言
|    |     |     ├── userinfo.vue  -- 个人资料
|    |     |     ├── userlogin.vue  -- 用户登录
|    |     |     ├── userregister.vue  -- 用户注册
|    |     |     └── vipcourse.vue  -- 看VIP课程
|    |     └── vipCoursePage  -- VIP课程页面
|    |     |     ├── csscourse.vue  -- css
|    |     |     ├── htmlcourse.vue  -- html
|    |     |     └── javascriptcourse.vue  -- javascript
├── babel.config.js  -- babel配置
└── vue.config.js  -- vue配置文件
复制代码

项目测试介绍

  1. 本项目中后台使用3001端口, 前台使用8080端口。
  2. 你需要在装有Node和Vue的环境中测试,如果其中一个没有请先下载(Node下载,Vue下载).
  3. 下载依赖:npm install 下载后端依赖, 接着进入client, npm install 下载前端依赖.
  4. 配置数据库: 请将打包的数据JSON文件还原到Mongodb数据库中,请对应Mongodb配置的地址和数据库名,你也可以自定义地址和数据库名,一一对应即可.
  5. 以上工作完成后,使用命令node server &命令启动Node服务器,启动成功会显示: **Server is running on port [3001]. **Mongodb is contected.
  6. 进入client,打开命令板,使用命令npm run serve启动vueCli-server,默认使用8080端口,启动成功后用浏览器访问http://localhost:8080,如果首页数据展示成功,则证明数据和程序启动成功。
  7. 本例中将Mongodb部署在本地电脑上,如果你仔细阅读了这篇文档,启动项目应该是很容易的。如果你把Mongodb部署在其他地方,请自行修改config/mongodbURI.js配置文件信息。
  8. 只有完成了上述步骤后再启动项目,不然项目会因为连接不上Mongodb而报错。

准备

passport-jwt和jsonwebtoken

jsonwebtoken是对用户信息加密成不可逆向破解的token.关于passport-jwt,是用来对用户请求时所带的token信息进行过期验证,如果超过签证的合法时间,则会请前台发出token失效的信息,提示用户重新获取合法的token信息,否则无法继续请求加密的信息;

  • jsonwebtoken
// 设置token
// 规则
 const rule = {
    id:String(userinfo._id),
    username:userinfo.username,
    email:userinfo.email,
    date:user.date,
    signdate:userinfo.signdate,
    signcount:userinfo.signcount,
    avatar:userinfo.avatar,
    phone:userinfo.phone
};

// 签证加密
// jwt.sign(规则, key(私钥), {配置:比如过期时长}, (err, token){ 响应程序 })
jwt.sign(rule,key,{expiresIn:7200},(err, token) => {
    if(err) throw err;
    res.json({"token" : "Bearer " + token})
})
复制代码
  • passport-jwt
const key = require("../config/keys").KEYORSECRET;
const JwtStrategy = require('passport-jwt').Strategy,
      ExtractJwt = require('passport-jwt').ExtractJwt;
var opts = {}
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = key;

module.exports = passport => {
    passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
        UserInfo.findById(jwt_payload.id)
                .then(user => {
                    if (user) {
                        return done(null, user);
                    } else {
                        return done(null, false);
                        // or you could create a new account
                    }
                })
    }));
}
复制代码

详细的文档地址:Passport-Jwt合法验证,token加密


svg-captcha

svg-captcha验证码的运用,防止暴力破解密码,加强安全性. 详细的文档地址:svg-captcha

使用验证码

// 后台生成验证码
router.get("/getCaptcha", (req, res) => {
    var captcha = svgCaptcha.create({  
        // 翻转颜色  
        inverse: false,  
        // 字体大小  
        fontSize: 38,  
        // 噪声线条数  
        noise: 3,  
        // 宽度  
        width: 80,  
        // 高度  
        height: 32,  
      });  
      // 保存到session,忽略大小写  
      req.session = captcha.text.toLowerCase(); 
      console.log(req.session); //0xtg 生成的验证码
      //保存到cookie 方便前端调用验证
      res.cookie('captcha', req.session); 
      res.setHeader('Content-Type', 'image/svg+xml');
      res.send(String(captcha.data));
      res.end();
})


// 前台获取验证码
--HTML
<img width="80" style="background:#EEE9E9;margin-left:30px;" ref="captcha" height="32" src="http://localhost:3001/api/user/getCaptcha" @click="refreshCaptcha">

--js
// 获取验证码cookie
getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++){
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
},
// 刷新验证码
refreshCaptcha(){
    this.$refs.captcha.src = "http://localhost:3001/api/user/getCaptcha?d=" + Math.random();
},

最后用 填写的验证码进行对比
复制代码

控制台


Vue、ElementUI分页使用

关于ElementUI分页详细请见:ElementUI的Pagination分页学习

-- html
<el-pagination
    v-if='paginations.total > 0'
    :page-sizes="paginations.page_sizes"
    :page-size="paginations.page_size"
    :layout="paginations.layout"
    :total="paginations.total"
    :current-page.sync='paginations.page_index'
    @current-change='handleCurrentChange'
    @size-change='handleSizeChange'>
</el-pagination>

-- js
data(){
    return{
        allUsers:[],  // 用来存储最终信息, 被显示的dom点调用
        allTableData:[],  // 用户承接分页设置的数据
        paginations: {   // 分页组件信息
            page_index: 1, // 当前位于哪页
            total: 0, // 总数
            page_size: 5, // 1页显示多少条
            page_sizes: [5, 10, 15, 20], //每页显示多少条
            layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
        },
    }
},
methods:{
    // 获取当前页
    handleCurrentChange(page) {
        let sortnum = this.paginations.page_size * (page - 1);
        let table = this.allTableData.filter((item, index) => {
            return index >= sortnum;
        });
        // 设置默认分页数据
        this.getAllUsers = table.filter((item, index) => {
            return index < this.paginations.page_size;
        });
        this.getAllUsers = table.filter((item, index) => {
            return index < this.paginations.page_size;
        });
    },
    // 切换size
    handleSizeChange(page_size) {
        this.paginations.page_index = 1;
        this.paginations.page_size = page_size;
        this.getAllUsers = this.allTableData.filter((item, index) => {
            return index < page_size;
        });
    },
     // 总页数
    setPaginations() {
        this.paginations.total = this.allTableData.length;
        this.paginations.page_index = 1;
        this.paginations.page_size = 5;
        // 设置默认分页数据
        this.getAllUsers = this.allTableData.filter((item, index) => {
            return index < this.paginations.page_size;
        });
    },
}
复制代码

没了吗?对,分页就是这么简单!你学会了吗?有些前端开发的同学总是对分页比较陌生,学会这个,让你不再产生烦恼!

对于项目中其他特殊比较复杂的功能,还请您先测试后再进行学习,代码注释很清晰,如果哪里不懂请看下方联系方式

项目截图

  • 首页(懒加载)

  • HTML教程

  • 留言墙

(这个根据一个大牛的博客模仿的PC端,大牛博客地址) 移动端是自己写的

  • 欣赏歌曲

  • 搜索歌曲

  • 每日签到

  • 个人信息

  • VIP课程

VIP课程有HTML,CSS,JS课程;VIP用户可以评论留言,可以删除自己的留言;只有用户登录并且付费购买后才能观看.(仅供参考)

  • 搜索页面

有分页功能

  • 404

后台界面

后台首页运用了Echarts,将数据可视化,API是真的强大.更多关于Echarts的学习,百度搜索哦~

  • 添加文章

  • 编辑文章

  • 订单管理

  • 歌曲管理

等等

源码在这里

github项目地址

联系

如果大家有兴趣,欢迎star. 关注公众号:_facebook(web技术进阶),查看更多优质文章,欢迎大家加入我的前端交流群:866068198 ,一起交流学习前端技术。博主目前一直在自学Node中,技术有限,如果可以,会尽力给大家提供一些帮助,或是一些学习方法.

  • 公众号
  • 群二维码

福利

有需要刷钻,刷会员,刷腾讯视频会员,涨粉丝等等相关意向的小伙伴们,可以访问作者推荐的超值代刷网站:qq.usword.cn, 也可以扫描下方二维码

最后

If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.

如果对你有帮助,请赏个star,谢谢哦~

关注下面的标签,发现更多相似文章
评论