用Node+VueCli+ElemenetUI+MongoDB教你开发综合性教程网站,包括后台管理系统
运用Node手摸手教你写一个教程网站(遵循响应式)，包括前台内容和后台管理系统，整合Express框架和Mongodb数据库服务器开发；教你用Vue.JS，ElementUI和iViewUI写出超漂亮的页面javascript
- 本项目是做者原创, 转载前请留言或联系做者!!!
若是对你有帮助,请赏个star,谢谢哦~ github地址
技术栈css
- 后端： Express + Mongodb + passport-jwt + jsonwebtoken等等
- 前端： Vue.JS + ElementUI + iViewUI + Axios等等
测试环境html
VSCode + Node8.9.4 + Google(75.xxx) + VueCli(3.7.0)前端
功能介绍vue
- 学习网站上的知识
- 搜索功能
- 留言功能
- 查看视频功能
- 欣赏歌曲
- 文章管理
- 每日签到
- 购买课程订单管理
- 后台管理
- 等等...
项目设计html5
-- 后台基本架构 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配置文件
<br/>java
项目测试介绍node
- 本项目中后台使用3001端口, 前台使用8080端口。
- 你须要在装有Node和Vue的环境中测试，若是其中一个没有请先下载(Node下载,Vue下载).
- 下载依赖:npm install 下载后端依赖, 接着进入client, npm install 下载前端依赖.
- 配置数据库: 请将打包的数据JSON文件还原到Mongodb数据库中,请对应Mongodb配置的地址和数据库名,你也能够自定义地址和数据库名,一一对应便可.
- 以上工做完成后,使用命令
node server &命令启动Node服务器，启动成功会显示:
**Server is running on port [3001].
**Mongodb is contected. - 进入client,打开命令板,使用命令
npm run serve启动vueCli-server，默认使用8080端口，启动成功后用浏览器访问http://localhost:8080，若是首页数据展现成功,则证实数据和程序启动成功。 - 本例中将Mongodb部署在本地电脑上，若是你仔细阅读了这篇文档，启动项目应该是很容易的。若是你把Mongodb部署在其余地方，请自行修改
config/mongodbURI.js配置文件信息。 - 只有完成了上述步骤后再启动项目，否则项目会由于链接不上Mongodb而报错。
准备
passport-jwt和jsonwebtoken
jsonwebtoken是对用户信息加密成不可逆向破解的token.关于passport-jwt，是用来对用户请求时所带的token信息进行过时验证,若是超过签证的合法时间,则会请前台发出token失效的信息,提示用户从新获取合法的token信息,不然没法继续请求加密的信息；ios
- 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加密git
<br/>
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();
},
最后用 填写的验证码进行对比
控制台
<br/>
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;
});
},
}
没了吗?对,分页就是这么简单!你学会了吗?有些前端开发的同窗老是对分页比较陌生,学会这个,让你再也不产生烦恼!
对于项目中其余特殊比较复杂的功能,还请您先测试后再进行学习,代码注释很清晰,若是哪里不懂请看下方联系方式
<br/>
项目截图
- 首页(懒加载)
- HTML教程
- 留言墙
(这个根据一个大牛的博客模仿的PC端,大牛博客地址) 移动端是本身写的
- 欣赏歌曲
- 搜索歌曲
- 每日签到
- 我的信息
- VIP课程
VIP课程有HTML,CSS,JS课程;VIP用户能够评论留言,能够删除本身的留言;只有用户登陆而且付费购买后才能观看.(仅供参考)
- 搜索页面
有分页功能
- 404
后台界面
后台首页运用了Echarts,将数据可视化,API是真的强大.更多关于Echarts的学习,百度搜索哦~
- 添加文章
- 编辑文章
- 订单管理
- 歌曲管理
等等
这里就再也不一一贴出项目展现图了, 若是你喜欢,或者想继续在此项目上面扩展, 你能够访问github项目地址
本项目是做者原创, 转载前请留言或联系做者.
若是对你有帮助,请赏个star,谢谢哦~ github地址
<br/>
交流
若是你们有兴趣，欢迎star. 欢迎你们加入个人前端交流群：866068198 ，一块儿交流学习前端技术。博主目前一直在自学Node中，技术有限，若是能够，会尽力给你们提供一些帮助，或是一些学习方法.
联系
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,谢谢哦~ github地址
相关文章
- 1. 用Node+VueCli+ElemenetUI+MongoDB教你开发综合性教程网站,包括后台管理系统
- 2. 视频教程-SSM后台管理系统开发实战-Java
- 3. 制作后台网站管理系统
- 4. 基于Spring、SpringMVC、JDBCTemplate开发java在线家教平台系统，包括管理后台
- 5. php thinkphp3 开发新闻网站+后台管理系统
- 6. SSM框架实现新闻网站信息管理系统前台后台综合开发项目实战
- 7. vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程
- 8. vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
- 9. 后台管理 - OpenCart教程
- 10. spring boot+mybatis整合开发我的博客系统,包括后台管理系统源码
- 更多相关文章...
- • 网站主机教程 - 网站主机教程
- • 网站品质 教程 - 网站品质教程
- • Java 8 Stream 教程
- • YAML 入门教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 用Node+VueCli+ElemenetUI+MongoDB教你开发综合性教程网站,包括后台管理系统
- 2. 视频教程-SSM后台管理系统开发实战-Java
- 3. 制作后台网站管理系统
- 4. 基于Spring、SpringMVC、JDBCTemplate开发java在线家教平台系统，包括管理后台
- 5. php thinkphp3 开发新闻网站+后台管理系统
- 6. SSM框架实现新闻网站信息管理系统前台后台综合开发项目实战
- 7. vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程
- 8. vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
- 9. 后台管理 - OpenCart教程
- 10. spring boot+mybatis整合开发我的博客系统,包括后台管理系统源码