用Node+VueCli+ElemenetUI+MongoDB教你開發綜合性教程網站,包括後臺管理系統

時間  2019-11-06
標籤 node+vuecli+elemenetui+mongodb node vuecli elemenetui mongodb 開發 綜合性 教程 網站 包括 後臺 管理 系統 欄目 MongoDB 简体版
原文   原文鏈接

運用Node手摸手教你寫一個教程網站(遵循響應式)，包括前臺內容和後臺管理系統，整合Express框架和Mongodb數據庫服務器開發；教你用Vue.JS，ElementUI和iViewUI寫出超漂亮的頁面javascript

本項目是做者原創, 轉載前請留言或聯繫做者!!! css

若是對你有幫助,請賞個star,謝謝哦~ github地址html

技術棧前端

  • 後端： Express + Mongodb + passport-jwt + jsonwebtoken等等vue

  • 前端： Vue.JS + ElementUI + iViewUI + Axios等等html5

測試環境java

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

功能介紹ios

  • 學習網站上的知識
  • 搜索功能
  • 留言功能
  • 查看視頻功能
  • 欣賞歌曲
  • 文章管理
  • 每日簽到
  • 購買課程訂單管理
  • 後臺管理
  • 等等.......

項目設計git

-- 後臺基本架構
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,謝謝哦~ github地址

交流

若是你們有興趣，歡迎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地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程