使用Node教你写一个教程网站（响应式风格），包括前端内容和后台-端管理系统，集成ExpressFramework和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的visakey|└──MongodbURI.js--配置Mongodb的一些信息├──model|└──**--自定义数据库的Mongodb模型├──mongodb|└──星期一godb.js--配置Mongodb，链接数据库├──passport|└──passport.js--验证token合法性├──static|└──**--静态文件存放处├──client|└──**--(Vue)首页结构--首页结构客户端├──README.md├──public|├──index.html--vue挂载页面|└──**--你可以在这里链接一些静态资源├──src--开发文件夹|├──App.vue--Vue挂载根页面|├──http.js--配置http，响应拦截|├──main.js--Vue程序入口文件，挂载各种组件|├──router.js--Vue路由配置文件|├──store.js--Vuex状态管理文件|├──资产||└──**--存放静态资源|├──组件||└──pcnav.vue--导航栏|├──myplugin--配置插件||├──Date.js--格式化日期||└──Loading.js--加载动画|├──store--状态存储||├──adminstore.js--管理员状态||├──musicstore.js--歌曲信息||├──搜索商店。js--搜索信息||└──userstore.js--用户信息|├──views--页面文件||├──search.vue--搜索页面||├──NotFound.vue--404页||├──Home.vue--主页||├──Index.vue--前端首页||├──一个dminPage——管理员|||├──adminindex.vue--后台首页|||├──adminlogin.vue--后台登录页面|||├──adminnav.vue--后台导航栏|||├──index.vue--后台根挂载点|||├──mainarea.vue--后台页面主区挂载点|||└──组件--后台组件||||├──添加文章。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配置文件
项目测试介绍在本项目中，后台使用3001端口，前台使用8080端口。您需要在安装了Node和Vue的环境中进行测试。如果其中一个没有，请先下载（Node下载，Vue下载）。下载依赖：npminstall下载后端依赖，然后进入客户端，npminstall下载前端依赖。配置数据库：请将打包后的数据JSON文件恢复到Mongodb数据库，请对应Mongodb配置的地址和数据库名，也可以自定义地址和数据库名，一一对应。以上工作完成后，使用命令nodeserver&命令启动Node服务器。如果启动成功，会显示：**Serverisrunningonport[3001].**Mongodbiscontected。进入客户端，打开命令面板，使用命令npmrunserve启动vueCli-server。默认端口为8080，启动成功后，使用浏览器访问http://localhost:8080。如果首页数据显示成功，则证明数据正常，程序启动成功。在本例中，Mongodb部署在本地计算机上。如果您仔细阅读本文档，启动该项目应该很容易。如果在其他地方部署Mongodb，请自行修改config/mongodbURI.js配置文件信息。完成以上步骤后才能启动项目，否则项目会因为无法连接Mongodb而报错。准备passport-jwt和jsonwebtoken。JSONwebtoken将用户信息加密成一个不可逆的token。关于passport-jwt，用于验证用户请求时携带的token信息是否过期。如果超过签证的合法时间，会请前台发出token失效信息，提示用户重新获取合法token信息，否则无法请求加密信息；jsonwebtoken//设置令牌//规则construle={id:String(userinfo._id),username:userinfo.username,email:userinfo.email,date:user.date,signdate:userinfo.signdate,signcount:userinfo.signcount,头像:userinfo.avatar,phone:userinfo.phone};//签证加密//jwt.sign(rule,key(私钥),{configuration:比如过期时间},(err,token){responder})jwt.sign(rule,key,{expiresIn:7200},(err,token)=>{if(err)throwerr;res.json({"token":"Bearer"+token})})passport-jwtconstkey=require("../config/keys").KEYORSECRET;constJwtStrategy=require('passport-jwt').Strategy,ExtractJwt=require('passport-jwt').ExtractJwt;varopts={}opts.jwtFromRequest=ExtractJwt.fromAuthHeaderAsBearerToken();opts.secretOrKey=key;模块。exports=passport=>{passport.use(newJwtStrategy(opts,(jwt_payload,done)=>{UserInfo.findById(jwt_payload.id).then(user=>{if(user){returndone(null,user);}else{returndone(null,false);//或者你可以新建账号}})}));}详细文档地址：Passport-Jwt合法验证，token加密
svg-captchasvg-captcha应用验证码防止暴力破解密码，增强安全性。详细文档地址：svg-captchausescaptcha//后台生成验证码router.get("/getCaptcha",(req,res)=>{varcaptcha=svgCaptcha.create({//翻转颜色反转: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
