后臺管控系統架子structure-admin，包含vue前端和thinkjs后端

hosition 發布于2019-08-23 13:49 / 2104人閱讀

摘要：為此框架提供了模型功能，方便操作數據庫。請求攔截統一處理所有的請求和響應的，通過配置為頭部增加字段，其內容為，通過配置，當后端接口返回未授權，讓用戶重新登錄。

之前寫過一篇vue初始化項目，構建vuex的后臺管理項目架子，這個structure-admin-web所擁有的功能

接下來，針對structure-admin-web的不足，進行了補充，開發了具有登陸的structure-admin項目，

技術站：主要是node+vue+redis+mysql+es6

歡迎訪問structure-admin源碼：structure-admin

同步更新到sau交流學習社區：https://www.mwcxs.top/page/42...

接下來：

一、后端服務nodejs，thinjs的redis配置，操作數據庫

二、前端vue+vuex全局路由守衛，axios請求攔截

三、項目啟動必讀

一、后端服務nodejs，thinjs的redis配置，操作數據庫

我使用的是thinkjs3，一個nodejs的框架。

1、首先介紹登陸的控制

邏輯：

（1）已經登陸的，直接根據的路由跳到相應頁面；

（2）已經登陸的，不能跳到登陸頁面，跳到首頁；

（3）沒有登陸的，輸入url必須跳到登陸頁；

（4）退出系統的，必須回到登陸頁，狀態是未登錄

1.1 thinkjs的redis的配置文件adapter.js

exports.session = {

type: "redis",
common: {
    cookie: {
        name: "thinkjs",
        keys: ["werwer", "werwer"],
        signed: true
    }
},
redis: {
    handle: redisSession,
    host: "127.0.0.1",
    port: 6379,
    password: "a123456"
}

};
設置的由redis的服務地址host，端口，以及redis的密碼，redis的搭建和配置，參考安裝window下的redis，redis可視化管理工具（Redis Desktop Manager）安裝，基礎使用，實例化項目這篇文章。

1.2 在每一次前端請求的路由的時候，都會去redis服務器中去取userInfo的信息

如果為空，返回前端data為空，前端在路由過濾中，跳到登陸頁，如果有值就正常返回。

async __before() {

    let user = await this.session("userInfo");
    if(user) {
        this.user = user;
    } else {
        this.user = "";
    }
}

這個在nodejs的控制器controller里，在每一次前端的請求發送到后端的時候，都會去redis的取userInfo的值，

let user = await this.session("userInfo");

這個userInfo的值也是自己在登陸的時候，把登陸成功之后的個人信息加入到redis服務中

1.3 在登陸成功的時候講個人信息加到redis服務中

async loginAction() {

    let {username, password} = this.post();try {
        let user = await this.model("user").where({
            username,
        }).find();
        if(user.password && user.password == password) {
            // login success
            await this.session("userInfo",{username, userId:user.id});
            return this.success("登陸成功");
        } else {
            return this.fail("用戶名或密碼錯誤")
        }
    }
    catch(e) {
        console.log(e);
        return this.fail("登錄失敗")
    }

這個就是將個人信息加入到redis中

await this.session("userInfo",{username, userId:user.id});

WEB 請求中經常通過 session 來維持會話的，框架通過 think-session 和 Adapter 來支持 session 功能。

2、介紹登出（退出）的控制

 async logoutAction() {
        try {
            await this.session(null);
            return this.success("登出成功");
        } catch(e) {
            return this.fail(`登出失敗${e}`)
        }
    }

這個就是前端發的請求登出，直接將redis的置空，根據前端路由跳轉到登陸頁，這時候redis的服務中沒有值，就不會跳轉到其他頁面

3、數據庫的配置adapter.js

exports.model = {
  type: "mysql",
  common: {
    logConnect: true,
    logSql: true,
    logger: msg => think.logger.info(msg)
  },
  mysql: {
    handle: mysql,
    database: "example",
    prefix: "example_",
    encoding: "utf8",
    host: "127.0.0.1",
    port: "3306",
    user: "root",
    password: "123456",
    dateStrings: true
  }
};

common部分是配置是否將sql的語句的操作日志打出來，這樣便于我們在開發的時候的調試和修改bug

4、操作數據庫

項目開發中，經常需要操作數據庫（如：增刪改查等功能），手工拼寫 SQL 語句非常麻煩，同時還要注意 SQL 注入等安全問題。為此框架提供了模型功能，方便操作數據庫。

Mysql 的 Adapter 為 think-model-mysql，底層基于 mysql 庫實現，使用連接池的方式連接數據庫，默認連接數為 1。

拿登陸的接口來說明：this.model說明使用封裝好的model，find是查找單條數據，在user的這張表中查找username值為前端傳來的username的值，返回的值賦給user中。

async loginAction() {
        let {username, password} = this.post();
        try {
            let user = await this.model("user").where({
                username,
            }).find();
            if(user.password && user.password == password) {
                // login success
                await this.session("userInfo",{username, userId:user.id});
                return this.success("登陸成功");
            } else {
                return this.fail("用戶名或密碼錯誤")
            }
        }
        catch(e) {
            console.log(e);
            return this.fail("登錄失敗")
        }

think.Model 基類提供了豐富的方法進行 CRUD 操作，下面來一一介紹。

查詢數據

模型提供了多種方法來查詢數據，如:

find 查詢單條數據
select 查詢多條數據
count 查詢總條數
countSelect 分頁查詢數據
max 查詢字段的最大值
avg 查詢字段的平均值
min 查詢字段的最小值
sum 對字段值進行求和
getField 查詢指定字段的值
同時模型支持通過下面的方法指定 SQL 語句中的特定條件，如：

where 指定 SQL 語句中的 where 條件
limit / page 指定 SQL 語句中的 limit
field / fieldReverse 指定 SQL 語句中的 field
order 指定 SQL 語句中的 order
group 指定 SQL 語句中的 group
join 指定 SQL 語句中的 join
union 指定 SQL 語句中的 union
having 指定 SQL 語句中的 having
cache 設置查詢緩存
添加數據
模型提供了下列的方法來添加數據：

add 添加單條數據
thenAdd where 條件不存在時添加
addMany 添加多條數據
selectAdd 添加子查詢的結果數據
更新數據
模型提供了下列的方法來更新數據：

update 更新單條數據
updateMany 更新多條數據
thenUpdate 條件式更新
increment 字段增加值
decrement 字段減少值
刪除數據
模型提供了下列的方法來刪除數據：

delete 刪除數據
用項目的代碼舉栗子：

（1）查詢單條數據，用find()，條件為：工號（usernum）為180909，用戶名（username）為saucxs ，并且填寫時間（time）為這周的時間范圍的時間戳，返回的是對象object

 let weekly = await this.model("week").where({
     usernum: "180909", 
　　　username: "saucxs", 
　　　time: {">": startWeekStamp, "<": endWeekStamp}
 }).find();

解讀：model("week")的意思，取得是week的數據表

（2）查詢多條數據，用select(),條件：公司id（company_id）為data的數據，返回的是數組array

let department = await this.model("department").where({company_id: "data"}).select();

（3）查詢表中的具體的列數據，用field()

departmentMemberList = await this.model("user").field("id, company_id, company_name, department_id, department_name, email, role, role_name, username, usernum,telephone").where({
          company_id: this.user.company_id,
          role: {">=": this.user.role}
        }).find();

解讀：this.user.company_id取的是登陸用戶的公司id，{">=": this.user.role}為比登陸用戶的角色

（4）分頁查詢，用page(page, pagesize)和countSelect()，返回的數據是對象

departmentMemberList = await this.model("user").field("id, company_id, company_name, department_id, department_name, email, role, role_name, username, usernum,telephone").where({
          company_id: this.user.company_id,
          role: {">=": this.user.role}
        }).order("department_id asc , role asc").page(page, pagesize).countSelect();

解讀：返回的對象，如下圖所示：（count是總條數，currentPage為當前頁，data是數據的數組，pageSize為每一頁展示幾條，totalPages為總共有多少頁）

（5）排序，倒序（desc）和正序(asc)，用order("參數1 asc,參數2 desc”)

departmentMemberList = await this.model("user").field("id, company_id, company_name, department_id, department_name, email, role, role_name, username, usernum,telephone").where({
          company_id: this.user.company_id,
          role: {">=": this.user.role}
        }).order("department_id asc , role asc").page(page, pagesize).countSelect();

（6）刪除，用delete()，條件用where

await this.model("department").where({company_id, department_id}).delete();

（7）新增，用add()，沒有where

 await this.model("department").add({
          company_id: this.user.company_id, company_name: this.user.company_name, department_id, department_name
        });

（8）改，用update()，條件where

 await this.model("user").where({id}).update({
                usernum, username, telephone, role, role_name,email, company_id, company_name, department_id, department_name
              });

手動執行 SQL 語句
有時候模型包裝的方法不能滿足所有的情況，這時候需要手工指定 SQL 語句，可以通過下面的方法進行：

query 手寫 SQL 語句查詢
execute 手寫 SQL 語句執行
具體的可以參考thinkJS的官方文檔的數據操作這塊：https://thinkjs.org/zh-cn/doc...

二、前端vue+vuex全局路由守衛，axios請求攔截

剛才簡單的說了一下nodejs的后端啟動的服務，封裝的接口，而前端調用這個接口使用的是url是：模塊名/控制器名/方法名，這個可以在配置文件中修改定義的方法

1、全局路由守衛

全局路由守衛是每一次都會判斷是否登陸（也就是判斷redis服務中是否有值）。已經登陸（后端返回的用戶權限信息），則判斷當前要跳轉的路由，用戶是否有權限訪問，可以考慮在用戶登陸之后將用戶權限把路由過濾一遍生成菜單，菜單保存到vuex中。

/*路由處理*/
router.beforeEach((to, from, next) => {
  let menuId;
  let auditResult;
  let applicationVerifyFlag;
  let key = to.meta.key;
  if (key) {
    store.dispatch("getUserInfo", {}).then(response => {if(!response.data){
        if (to.path !== "/login") {
          return next("/login");
        }
        next();
      }else{
        if (to.path == "/login") {
          return next("/writeWeekly");
        }
        store.commit("USER_INFO", response.data);
        next();
      }
    });
  } else {
   next();
  }
});

根據這個key來判斷是否有權限，取得是路由中meta的key的值。

 routes: [
    {
      path: "/login",
      name: "login",
      meta: {
        key: "0"
      },
      component: login
    },
    {
      path: "/",
      name: "home",
      component: home,
      children: [{
        path: "/writeWeekly",
        name: "writeWeekly",
        meta: {
          key: "1"
        },
        component: writeWeekly
      }]
    }
  ]

2、axios請求攔截

統一處理所有的http請求和響應的，通過配置http request interceptors為http頭部增加Authorization字段，其內容為Token，通過配置http response interceptors，當后端接口返回401 Unauthorized（未授權），讓用戶重新登錄。

// 開發環境調試用戶信息
axios.interceptors.request.use(config => {
    if (process.env.NODE_ENV === "development") {
      config.headers["username"] = "189090909";
    }
    return config;
});

axios.interceptors.response.use(
  response => {
    let data = response.data;
    console.log(data, "data");
    if (!data.data) {
      //   登陸成功的回調地址
      return data;
    } else {
      return data;
    }
  },
  error => ({
    code: -1,
    msg: "網絡異常"
  })
);

對所有的請求進行了封裝。

// get請求配置
let getConfig = {
    url: "",
    baseURL: serveUrl,
    headers: {
    "X-Requested-With": "XMLHttpRequest"
  },
  paramsSerializer(params) {
    return Qs.stringify(params, {
      arrayFormat: "brackets"
    })
  },
  timeout: 5000
}

// post請求配置
let postConfig = {
    url: "",
    baseURL: serveUrl,
    headers: {
      "Content-Type": "application/json",
      "X-Requested-With": "XMLHttpRequest"
    },
    transformRequest: [function (data) {
      return JSON.stringify(data.params || {})
    }],
    timeout: 5000
}

export {
    serveUrl,
    getConfig,
    postConfig,
  }

三、項目啟動必讀

1、首先你的環境是nodejs，不會安裝配置參考：http://www.mwcxs.top/page/420...

2、clone下來項目

git clone https://github.com/saucxs/structure-admin.git

3、分別針對前端vue的structure-admin-web的文件夾和node后端structure-admin-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的structure-admin-web的啟動

npm run dev

(2)和node后端structure-admin-node的啟動

npm start

8、這樣就可以啟動

（1）登陸頁

（2）寫周報頁面

structure-admin架子線上地址：http://structure_admin.mwcxs.top
測試賬號：test，密碼：123456

9、該架子搭的周報企業管理系統

在PC端，歡迎訪問：http://weekly.mwcxs.top，

（公司負責人）賬號：testadmin，密碼：123456
（部門經理）賬號：test，密碼：123456
（成員）賬號：teststaff，密碼：123456

云服務器 GPU云服務器后端和前端前端和后端后端和前端開發網站前端和后端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99602.html

Vue+thinkJs博客網站（一）之vue多頁面應用的webpack3配置

摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態資源首先需要改的是入口文件，因為是多頁面應用，需要多個入口文件來保證打包成不同的。一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構建個人博客網站，頁面分為博客展示和后臺管理，主要目的是學習使用thinkJs。現在只完成了主要的博客增刪改功能，發現webpack的配置遇到了一些坑，這里先記錄下。項目目錄結構如下...

NickZhou 2019-08-23 15:28 評論0 收藏0
Vue+thinkJs博客網站（一）之vue多頁面應用的webpack3配置

摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態資源首先需要改的是入口文件，因為是多頁面應用，需要多個入口文件來保證打包成不同的。一.項目簡介 ? ? 本項目使用vue作為前端框架，thinkJs作為后端框架，構建個人博客網站，頁面分為博客展示和后臺管理，主要目的是學習使用thinkJs。現在只完成了主要的博客增刪改功能，發現webpack的配置遇到了一些坑，這里先記錄下。項目目錄結構如下...

dongxiawu 2019-08-02 14:21 評論0 收藏0
使用 vue + thinkjs 開發博客程序記錄

摘要：一入冬懶癌發作，給自己找點事干。之前博客程序寫過幾次，的寫過兩次，用寫過，隨著版本從升級到之前的博客程序也做過升級。這里主要記錄一下開發過程中遇到的問題和解決方法。后端使用守護進程即可。一入冬懶癌發作，給自己找點事干。之前博客程序寫過幾次，php 的寫過兩次，nodejs 用 ThinkJS 寫過，隨著 ThinkJS 版本從1.x 升級到 2.x 之前的博客程序也做過升級。但是因為...

Mike617 2019-08-01 18:18 評論0 收藏0