使用thinkjs+vue+vuex全棧開發--週報企業管理系統weekly

saucxs發表於2018-11-30

weekly週報系統

週報系統主要是node+vue+redis+mysql+es6,一個企業管理系統,企業員工彙報每週工作情況,以及完成情況,各級負責人可以檢視和提醒相應未寫週報人員。
,後端完全使用nodeJS,資料庫使用mysql,基於nodejs的thinkjs框架搭建的,如果喜歡nodeJS寫的後端,支援大前端,支援全棧開發,請請starfork專案。

同步到sau交流學習社群:www.mwcxs.top/page/461

系統演示地址為:週報線上地址
(公司負責人)賬號:testadmin,密碼:123456
(部門經理)賬號:test,密碼:123456
(成員)賬號:teststaff,密碼:123456

    如有使用問題請留言。

    公告:

    1.不要刪除預設的賬號,以及相關東西
    2.自己可以新建賬號來測試,玩耍
    3.每一個公司(組織機構)都是獨立,每一個部門是獨立,互不干擾
    4.如果有商務要求,可以對接我,郵箱:saucxs@163.com,新建自己公司(組織機構)統一管理。

      功能點:

      1、所有人週報提交修改;
      2、所有人週報自身週報歷史檢視;
      3、部門經理檢視部門週報填寫情況,增改部門人員;
      4、總監(或公司擁有者)檢視和修改所有人的週報填寫情況,增刪改公司人員,增改公司部門;
      5、管理員許可權,增刪改公司總監,增刪改部門人員,增刪改公司部門,檢視和編輯所有所有的週報,以及所有所有周報填寫情況;

        一、技術棧

        ThinkJS( Node端框架) 官方網站
        Vue.js(客戶端雙向資料繫結框架) 官方網站

          二、版本功能

          [x] Element UI

          [x] 登入/登出

          [x] 個人中心

          [x] 修改使用者資訊

          [x] 修改密碼

          [x] mysql

          [x] 寫週報

          [x] 個人歷史週報

          [x] 部門人員管理

          [x] 部門週報情況

          [x] 公司的部門新建,修改,刪除

              2018.09.18

              完成基本版本的功能

                2018.09.20部門經理許可權優化

                左側增加首頁

                部門人員管理增加查詢,可根據使用者名稱,工號,公司名,部門名稱,查詢部門成員

                  2018.10.12

                  優化許可權管理


                    三、系統截圖

                    3.1 登入頁

                    image

                    3.2 成員頁面

                    image

                    3.3 部門經理頁面

                    image

                    3.4 總監頁面

                    image

                    3.5 管理員頁面

                    image

                    四、本地執行程式

                    1、首先你的環境是nodejs,不會安裝配置參考:nodejs安裝和環境配置(Windows)

                    2、clone下來專案

                    git clone https://github.com/saucxs/weekly.git
                    複製程式碼

                    3、分別針對前端vue的weekly-web的資料夾和node後端weekly-node,安裝相應依賴

                    npm install
                    複製程式碼

                    4、安裝redis(可以考慮安裝RedisDesktopManager)

                    參考:安裝window下的redis,redis視覺化管理工具(Redis Desktop Manager)安裝,基礎使用,例項化專案

                    5、安裝mysql,這個就不贅述

                    6、修改nodejs的後端的配置檔案adapter.js,config.js這兩個檔案中

                    adapter.js
                    
                    exports.cache = {
                        type: 'redis',
                        common: {
                            timeout: 24 * 60 * 60 * 1000 // millisecond
                        },
                        redis: {
                            handle: redisCache,
                            host: '127.0.0.1',
                            port: 6379,
                            password: 'a123456'  //redis安裝時候設定的祕密
                        }
                    };
                    //
                    //
                    exports.model = {
                      type: 'mysql',
                      common: {
                        logConnect: true,
                        logSql: true,
                        logger: msg => think.logger.info(msg)
                      },
                      mysql: {
                        handle: mysql,
                        database: 'weekly',
                        prefix: 'week_',
                        encoding: 'utf8',
                        host: '127.0.0.1',   //本地資料庫
                        port: '3306',     //資料庫埠
                        user: 'root',    //資料庫的使用者名稱
                        password: '123456',    //資料庫該使用者名稱的密碼
                        dateStrings: true
                      }
                    };
                    複製程式碼

                    7、分別對前後端分離的專案啟動

                    (1)前端vue的weekly-web的啟動

                    npm run dev
                    複製程式碼

                    (2)和node後端weekly-node的啟動

                    npm start
                    複製程式碼


                    相關文章