用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配置文件

<br/>

項目測試介紹

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加密

<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.

• juejin@wsm's juejin
• GitHub@1046224544
• Segmentfault@wsm

如果對你有幫助,請賞個star,謝謝哦~ github地址