用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整合開發我的博客系統,包括後臺管理系統源碼