小草精品视频,国产视频ww,狠痕2021最新版

1、使用技術(shù)與開(kāi)源項(xiàng)目

后端： java、springboot、mybatis、mybatis-plus
前端： vue

開(kāi)源項(xiàng)目	名稱	源碼	演示地址	文檔地址
CRUD框架	d2-crud-plus	github	演示地址	文檔地址
管理系統(tǒng)腳手架	d2-admin	github	演示地址	文檔地址
基礎(chǔ)UI組件	element-ui	github	演示地址	文檔地址

2、最終成果預(yù)覽

登錄界面

權(quán)限資源管理

角色管理

用戶管理

3、準(zhǔn)備工作

安裝git
安裝nodejs
安裝java
開(kāi)發(fā)工具：idea、或vscode等

4、前端框架

1、搭建 d2-crud-plus 與 d2-admin 整合的啟動(dòng)項(xiàng)目

根據(jù)d2-crud-plus的文檔

d2-crud-plus與d2-admin的啟動(dòng)項(xiàng)目

打開(kāi)cmd，執(zhí)行如下命令

# 克隆代碼
git clone  https://github.com/greper/d2-crud-plus-with-d2admin-starter
# 進(jìn)入項(xiàng)目目錄
cd d2-crud-plus-with-d2admin-starter
# 安裝依賴
npm install

啟動(dòng)項(xiàng)目看看效果

npm run dev

啟動(dòng)成功后，一個(gè)基本的前端管理框架就搭建好了，接下來(lái)我們對(duì)接后臺(tái)和集成權(quán)限管理模塊

成功后自動(dòng)打開(kāi)瀏覽器

5、加入權(quán)限模塊

根據(jù)d2-crud-plus的文檔權(quán)限管理章節(jié)一步一步照著做

1、復(fù)制權(quán)限模塊代碼到我們的starter項(xiàng)目中

d2-crud-plus-example里面帶有權(quán)限模塊，在/src/business/modules目錄下，我們?nèi)?fù)制過(guò)來(lái)
先clone d2-crud-plus的代碼下來(lái)

git clone  https://github.com/greper/d2-crud-plus

進(jìn)入 .\d2-crud-plus\packages\d2-crud-plus-example\src\business\modules 目錄
把permission和usersphere兩個(gè)目錄復(fù)制到d2-crud-plus-with-d2admin-starter項(xiàng)目中的/src/business/modules目錄下

2、在starter項(xiàng)目中的.env文件里配置VUE_APP_PM_ENABLED = true

3、安裝permission模塊

// 在main.js中加入
import '@/business/modules/permission' // 加載permission

在/src/store/modules/d2admin/modules/account.js中加入以下代碼
用于注銷(xiāo)時(shí)清空權(quán)限信息

    logout ({ commit, dispatch }, { confirm = false } = {}) {
      /**
       * @description 注銷(xiāo)
       */
      async function logout () {
        // 刪除cookie
        util.cookies.remove('token')
        util.cookies.remove('uuid')
        // 清空 vuex 用戶信息
        await dispatch('d2admin/user/set', {}, { root: true })

        // 注銷(xiāo)登錄時(shí)清空permission信息，↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓增加這一行↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
        commit('permission/clear', true, { root: true })

        // 跳轉(zhuǎn)路由
        router.push({ name: 'login' })
      }

登錄請(qǐng)求由模擬改為請(qǐng)求真實(shí)后端

  SYS_USER_LOGIN (data = {}) {
    // 模擬數(shù)據(jù)
    mock
      .onAny('/login')
      .reply(config => {
        const user = find(users, tools.parse(config.data))
        return user
          ? tools.responseSuccess(assign({}, user, { token: faker.random.uuid() }))
          : tools.responseError({}, '賬號(hào)或密碼不正確')
      })
    // 接口請(qǐng)求
    return requestForMock({
      url: '/login',
      method: 'post',
      data
    })
  }

修改為如下

 SYS_USER_LOGIN (data = {}) {
    // 登錄請(qǐng)求真實(shí)后端
    return request({
      url: '/login',   // 真實(shí)的后端地址 /api/login
      method: 'post',
      data
    })
  }

配置本地代理
解決本地開(kāi)發(fā)時(shí)請(qǐng)求后臺(tái)接口的跨域問(wèn)題
在vue.config.js中添加如下配置

module.exports = {
  publicPath,
  lintOnSave: true,
  devServer: {
    publicPath, // 和 publicPath 保持一致
    disableHostCheck: process.env.NODE_ENV === 'development', // 關(guān)閉 host check，方便使用 ngrok 之類(lèi)的內(nèi)網(wǎng)轉(zhuǎn)發(fā)工具
    //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓配置如下代理↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    proxy: {
      '/api': { // 請(qǐng)求/api/時(shí)代理到http://localhost:7070/api這個(gè)地址上去
        target: 'http://localhost:7070',
        ws: true
      }
    }
  }
}

重新啟動(dòng)項(xiàng)目
由于我們還沒(méi)有啟動(dòng)后端服務(wù)，所以登錄等接口都不可用

# ctrl+c 關(guān)閉，然后重新啟動(dòng)
npm run dev

6、啟動(dòng)后端

配套后端開(kāi)源項(xiàng)目地址：d2-crud-plus-server

1.1.1 克隆項(xiàng)目

git clone https://github.com/greper/d2-crud-plus-server.git

在idea中打開(kāi)該項(xiàng)目【注意：需要安裝lombok插件】

1.1.2 創(chuàng)建數(shù)據(jù)庫(kù)

創(chuàng)建數(shù)據(jù)庫(kù)`d2p_pm`
server啟動(dòng)后會(huì)自動(dòng)創(chuàng)建表

1.1.3修改數(shù)據(jù)庫(kù)連接配置

# ./api-service/src/main/resources/application.xml
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/d2p_pm?characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true

1.1.4 啟動(dòng)api-server

右鍵 com\veryreader\d2p\api\ApiServerApplication.java
點(diǎn)擊RUN

7、打開(kāi)瀏覽器看看效果

http://localhost:8080
登錄之后就可以看到權(quán)限管理模塊了

image.png

8、開(kāi)發(fā)一個(gè)CRUD功能

下面將體驗(yàn)一下急速開(kāi)發(fā)CRUD

建表

-- ----------------------------
-- 商品分類(lèi)表
-- ----------------------------
CREATE TABLE `shop_category` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL COMMENT '分類(lèi)名稱',
  `code` varchar(255) DEFAULT NULL COMMENT '分類(lèi)代碼',
  `icon` varchar(50) DEFAULT NULL COMMENT '分類(lèi)圖標(biāo)',
  `disabled` tinyint(1) DEFAULT NULL COMMENT '是否啟用',
  `del_flag` tinyint(1) NOT NULL DEFAULT '0',
  `create_time` datetime NOT NULL COMMENT '創(chuàng)建時(shí)間',
  `update_time` datetime NOT NULL COMMENT '更新時(shí)間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COMMENT='商品分類(lèi)';

根據(jù)表生成代碼
code-generator工程的CodeGeneratorApplicationTests 中添加

@Test
    void shop() {
        GenerateRequest request = GenerateRequest.builder()
                .moduleName("shop") //模塊名
                .tableName("shop_category") //表名，可以傳多個(gè)
                .parentPackage("com.veryreader.d2p.api.modules") //包名
                .tablePrefix("shop") //表前綴
                .apiUrlPrefix("") 
                .logicDeleteField("del_flag") //邏輯刪除字段名
                .superControllerClass("com.veryreader.d2p.api.modules.base.controller.AbstractCrudController")
                .build();
        request.addFill("create_time", FieldFill.INSERT); //要自動(dòng)填充的字段
        request.addFill("update_time",FieldFill.INSERT_UPDATE);//要自動(dòng)填充和更新的字段
        generateService.generate(request);  //開(kāi)始生成
    }

右鍵運(yùn)行此單元測(cè)試

將在code-generagor/.generated 中生成如下代碼：

image.png

將這些代碼復(fù)制到相應(yīng)的工程目錄下，菜單的sql去數(shù)據(jù)庫(kù)中執(zhí)行一下

重啟后端服務(wù)
重啟starter 前端工程
給管理員分配權(quán)限

image.png

修改一下菜單結(jié)構(gòu)，將商城管理放到單獨(dú)的頂部菜單去

image.png

重新登錄
就可以看到商品分類(lèi)管理菜單啦

image.png

現(xiàn)在的字段目前還都是el-input，一些不必要編輯的字段也出來(lái)了，我們接下來(lái)再修改修改。。。

image.png

修改字段類(lèi)型
修改shop/category/crud.js

 {
        title: 'ID',
        key: 'id',
        width: 100,
        form: {
          disabled: true //ID字段不參與編輯 ，
        },
        sortable: true
      },
    ...
    {
        title: '分類(lèi)名稱',
        key: 'name',
        sortable: true,
        form: {
          rules: [{ required: true, message: '分類(lèi)名稱不能為空' }] // 非空校驗(yàn)
        }
      },
      {
        title: '分類(lèi)圖標(biāo)',
        key: 'icon',
        type: 'icon-selector', // 這里改成 icon-selector 類(lèi)型
        sortable: true
      },
      {
        title: '是否啟用',
        key: 'disabled',
        dict: {
          data: [
            { value: true, label: '啟用' },
            { value: false, label: '禁用' }
          ]
        },
        type: 'dict-switch', // 這里改成 switch 類(lèi)型
        sortable: true
      }
...
//  delFlag字段刪掉
// 創(chuàng)建時(shí)間和更新時(shí)間，都配置 form:{disabled:true}

看看修改后的最終效果

修改后的效果

image.png

還可以改成行編輯模式
修改shop/category/crud.js

rowHandle: {
      edit: {
        show: false //對(duì)話框編輯按鈕不顯示
      },
      lineEdit: { //顯示行編輯按鈕
        show: true,
        disabled: () => {
          return !vm.hasPermissions('shop:shopCategory:edit')
        }
      }
    },
    options: {
      lineEdit: { validation: true }, //開(kāi)啟行編輯表單校驗(yàn)
    },

修改shop/category/index.vue

<template>
//將click的addRow 方法改成 lineEditAdd() ↓ ↓ ↓ ↓ ↓ ↓ ↓
 <el-button v-permission="'shop:shopCategory:add'" size="small" type="primary" @click="lineEditAdd()"><i class="el-icon-plus"/> 新增</el-button>
</template>
<script>
export default{
    addRequest (row) {
      return api.AddObj(row).then(ret => { //改成返回{row}，要帶上id
        row.id = ret.data
        return { row: row }
      })
    },
    updateRequest (row) {
      return api.UpdateObj(row).then(ret => { // 改成返回 {row}
        return { row }
      })
    },
}
</script>

保存即可查看行編輯效果

image.png

總結(jié)

d2-admin作為管理后臺(tái)腳手架還是很美觀大氣的
d2-crud-plus 開(kāi)發(fā)CRUD真是太舒服了，趕緊star起來(lái)

d2-crud-plus git : https://github.com/greper/d2-crud-plus
d2-crud-plus 示例: http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/
d2-crud-plus 文檔: http://greper.gitee.io/d2-crud-plus/

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

如何從零開(kāi)始搭建一套后臺(tái)管理系統(tǒng)（帶權(quán)限管理）

如何從零開(kāi)始搭建一套后臺(tái)管理系統(tǒng)（帶權(quán)限管理）

1、使用技術(shù)與開(kāi)源項(xiàng)目

2、最終成果預(yù)覽

3、準(zhǔn)備工作

4、前端框架

1、搭建 d2-crud-plus 與 d2-admin 整合的啟動(dòng)項(xiàng)目

5、加入權(quán)限模塊

6、啟動(dòng)后端

1.1.1 克隆項(xiàng)目

1.1.2 創(chuàng)建數(shù)據(jù)庫(kù)

1.1.3修改數(shù)據(jù)庫(kù)連接配置

1.1.4 啟動(dòng)api-server

7、打開(kāi)瀏覽器看看效果

8、開(kāi)發(fā)一個(gè)CRUD功能

總結(jié)

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

如何從零開(kāi)始搭建一套后臺(tái)管理系統(tǒng)（帶權(quán)限管理）

1、使用技術(shù)與開(kāi)源項(xiàng)目

2、最終成果預(yù)覽

3、準(zhǔn)備工作

4、前端框架

1、搭建 d2-crud-plus 與 d2-admin 整合的啟動(dòng)項(xiàng)目

5、加入權(quán)限模塊

6、啟動(dòng)后端

1.1.1 克隆項(xiàng)目

1.1.2 創(chuàng)建數(shù)據(jù)庫(kù)

1.1.3修改數(shù)據(jù)庫(kù)連接配置

1.1.4 啟動(dòng)api-server

7、打開(kāi)瀏覽器看看效果

8、 開(kāi)發(fā)一個(gè)CRUD功能

總結(jié)

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、使用技術(shù)與開(kāi)源項(xiàng)目

2、最終成果預(yù)覽

4、前端框架

5、加入權(quán)限模塊

6、啟動(dòng)后端

7、打開(kāi)瀏覽器看看效果

8、開(kāi)發(fā)一個(gè)CRUD功能