后臺管控系統(tǒng)架子structure-admin，包含vue前端和thinkjs后端

hosition 發(fā)布于2019-08-23 13:49 / 2106人閱讀

摘要：為此框架提供了模型功能，方便操作數(shù)據(jù)庫。請求攔截統(tǒng)一處理所有的請求和響應(yīng)的，通過配置為頭部增加字段，其內(nèi)容為，通過配置，當(dāng)后端接口返回未授權(quán)，讓用戶重新登錄。

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

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

技術(shù)站：主要是node+vue+redis+mysql+es6

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

同步更新到sau交流學(xué)習(xí)社區(qū)：https://www.mwcxs.top/page/42...

接下來：

一、后端服務(wù)nodejs，thinjs的redis配置，操作數(shù)據(jù)庫

二、前端vue+vuex全局路由守衛(wèi)，axios請求攔截

三、項目啟動必讀

一、后端服務(wù)nodejs，thinjs的redis配置，操作數(shù)據(jù)庫

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

1、首先介紹登陸的控制

邏輯：

（1）已經(jīng)登陸的，直接根據(jù)的路由跳到相應(yīng)頁面；

（2）已經(jīng)登陸的，不能跳到登陸頁面，跳到首頁；

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

（4）退出系統(tǒng)的，必須回到登陸頁，狀態(tài)是未登錄

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"
}

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

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

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

async __before() {

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

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

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

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

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

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 請求中經(jīng)常通過 session 來維持會話的，框架通過 think-session 和 Adapter 來支持 session 功能。

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

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

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

3、數(shù)據(jù)庫的配置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的語句的操作日志打出來，這樣便于我們在開發(fā)的時候的調(diào)試和修改bug

4、操作數(shù)據(jù)庫

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

Mysql 的 Adapter 為 think-model-mysql，底層基于 mysql 庫實現(xiàn)，使用連接池的方式連接數(shù)據(jù)庫，默認連接數(shù)為 1。

拿登陸的接口來說明：this.model說明使用封裝好的model，find是查找單條數(shù)據(jù)，在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 操作，下面來一一介紹。

查詢數(shù)據(jù)

模型提供了多種方法來查詢數(shù)據(jù)，如:

find 查詢單條數(shù)據(jù)
select 查詢多條數(shù)據(jù)
count 查詢總條數(shù)
countSelect 分頁查詢數(shù)據(jù)
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 設(shè)置查詢緩存
添加數(shù)據(jù)
模型提供了下列的方法來添加數(shù)據(jù)：

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

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

delete 刪除數(shù)據(jù)
用項目的代碼舉栗子：

（1）查詢單條數(shù)據(jù)，用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的數(shù)據(jù)表

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

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

（3）查詢表中的具體的列數(shù)據(jù)，用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()，返回的數(shù)據(jù)是對象

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是總條數(shù)，currentPage為當(dāng)前頁，data是數(shù)據(jù)的數(shù)組，pageSize為每一頁展示幾條，totalPages為總共有多少頁）

（5）排序，倒序（desc）和正序(asc)，用order("參數(shù)1 asc,參數(shù)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
              });

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

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

二、前端vue+vuex全局路由守衛(wèi)，axios請求攔截

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

1、全局路由守衛(wèi)

全局路由守衛(wèi)是每一次都會判斷是否登陸（也就是判斷redis服務(wù)中是否有值）。已經(jīng)登陸（后端返回的用戶權(quán)限信息），則判斷當(dāng)前要跳轉(zhuǎn)的路由，用戶是否有權(quán)限訪問，可以考慮在用戶登陸之后將用戶權(quán)限把路由過濾一遍生成菜單，菜單保存到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();
  }
});

根據(jù)這個key來判斷是否有權(quán)限，取得是路由中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請求攔截

統(tǒng)一處理所有的http請求和響應(yīng)的，通過配置http request interceptors為http頭部增加Authorization字段，其內(nèi)容為Token，通過配置http response interceptors，當(dāng)后端接口返回401 Unauthorized（未授權(quán)），讓用戶重新登錄。

// 開發(fā)環(huán)境調(diào)試用戶信息
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) {
      //   登陸成功的回調(diào)地址
      return data;
    } else {
      return data;
    }
  },
  error => ({
    code: -1,
    msg: "網(wǎng)絡(luò)異常"
  })
);

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

// 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、首先你的環(huán)境是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，安裝相應(yīng)依賴

npm install

4、安裝redis（可以考慮安裝RedisDesktopManager）

參考：安裝window下的redis，redis可視化管理工具（Redis Desktop Manager）安裝，基礎(chǔ)使用，實例化項目

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安裝時候設(shè)置的秘密
    }
};
//
//
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",   //本地數(shù)據(jù)庫
    port: "3306",　　　　　//數(shù)據(jù)庫端口
    user: "root",    //數(shù)據(jù)庫的用戶名
    password: "123456",    //數(shù)據(jù)庫該用戶名的密碼
    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、該架子搭的周報企業(yè)管理系統(tǒng)

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

（公司負責(zé)人）賬號：testadmin，密碼：123456
（部門經(jīng)理）賬號：test，密碼：123456
（成員）賬號：teststaff，密碼：123456

云服務(wù)器 GPU云服務(wù)器后端和前端前端和后端后端和前端開發(fā) 網(wǎng)站前端和后端

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99602.html

發(fā)表評論

登陸后可評論

0條評論

hosition

男|高級講師

我要關(guān)注我要私信

TA的文章

聯(lián)合健康中心遭勒索軟件攻擊 Vice Society團伙泄露其敏感數(shù)據(jù)

閱讀 949·2021-09-27 13:36
DIY桌面機械臂__FOC電機驅(qū)動

閱讀 905·2021-09-08 09:35
NameCheap域名轉(zhuǎn)入優(yōu)惠：.COM域名轉(zhuǎn)入僅需 $5.98，免費Whois隱藏

閱讀 1075·2021-08-12 13:25
前端每日實戰(zhàn)：152# 視頻演示如何用純 CSS 創(chuàng)作一個圓點錯覺效果

閱讀 1447·2019-08-29 16:52
前端每日實戰(zhàn)：5# 視頻演示如何用 CSS 創(chuàng)作一個立體滑動 toggle 交互控件

閱讀 2915·2019-08-29 15:12
ios設(shè)備觸發(fā)虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

閱讀 2736·2019-08-29 14:17
ES6數(shù)組方法使用心得以及一些數(shù)組操作整理

閱讀 2622·2019-08-26 13:57
什么是虛擬DOM？

閱讀 1021·2019-08-26 13:51

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

后臺管控系統(tǒng)架子structure-admin，包含vue前端和thinkjs后端

相關(guān)文章

Vue+thinkJs博客網(wǎng)站（一）之vue多頁面應(yīng)用的webpack3配置

Vue+thinkJs博客網(wǎng)站（一）之vue多頁面應(yīng)用的webpack3配置

**使用 vue + thinkjs 開發(fā)博客程序記錄**

發(fā)表評論

0條評論

hosition

男|高級講師

TA的文章

聯(lián)合健康中心遭勒索軟件攻擊 Vice Society團伙泄露其敏感數(shù)據(jù)

DIY桌面機械臂__FOC電機驅(qū)動

NameCheap域名轉(zhuǎn)入優(yōu)惠：.COM域名轉(zhuǎn)入僅需 $5.98，免費Whois隱藏

前端每日實戰(zhàn)：152# 視頻演示如何用純 CSS 創(chuàng)作一個圓點錯覺效果

前端每日實戰(zhàn)：5# 視頻演示如何用 CSS 創(chuàng)作一個立體滑動 toggle 交互控件

ios設(shè)備觸發(fā)虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

ES6數(shù)組方法使用心得以及一些數(shù)組操作整理

什么是虛擬DOM？

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

后臺管控系統(tǒng)架子structure-admin，包含vue前端和thinkjs后端

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！