Merge pull request #74 from flipped-aurora/gin-vue-admin_v2_dev

Gin vue admin v2 dev

README-zh_CN.md

@@ -99,7 +99,7 @@ go list (go mod tidy)
 go build
 ```
 
-### 2.3 生成swagger自动化API文档
+### 2.3 swagger自动化API文档
 
 #### 2.3.1 安装 swagger
 
@@ -130,30 +130,6 @@ swag init
 ````
 执行上面的命令后，server目录下会出现docs文件夹，登录http://localhost:8888/swagger/index.html，即可查看swagger文档
 
-### 2.4 docker镜像
-
-感谢 [@chenlinzhong](https://github.com/chenlinzhong)提供的docker镜像.
-```  
-# 启动容器
-docker run -itd --net=host --name=go_container shareclz/go_node /bin/bash;
-
-# 进入容器
-docker exec -it go_container /bin/bash;
-git clone https://github.com/piexlmax/gin-vue-admin.git /data1/www/htdocs/go/admin;
-
-# 启动前端
-cd /data1/www/htdocs/go/admin/QMPlusVuePage;
-cnpm i ;
-npm run serve;
-
-# 修改数据库配置
-vi /data1/www/htdocs/go/admin/QMPlusServer/static/dbconfig/config.json;
-
-# 启动后端
-cd /data1/www/htdocs/go/admin/QMPlusServer;z
-go run main.go;
-```
-  
 
 ## 3. 技术选型
 
@@ -166,7 +142,9 @@ go run main.go;
 - 日志：使用`go-logging`实现日志记录。
 
 
-## 4. 项目目录
+## 4. 项目架构
+
+![架构图](./docs/gin-vue-admin.png)
 
 ```
     ├─server  	     （后端文件夹）
@@ -226,55 +204,38 @@ go run main.go;
 - [ ] 工作流，任务交接功能开发
 - [ ] 单独前端使用模式以及数据模拟
 
-## 7. 更新日志
-
-|  日期   | 日志  |
-|  :---:  | --- |
-|2020/01/07| 角色增加数据资源功能 增加数据资源关联返回 演示环境代码已同步 开启了多点登录拦截 可能会被其他人挤掉 |
-|2020/01/13| 增加了配置管理功能 此功能不发表至测试环境 待保护机制以及服务重启机制发开完成后才会发表值测试环境 请自行clone且导入sql体验 |
-|2020/02/21| 修改了casbin的自定义鉴权方法，使其完全支持RESTFUL的/:params以及?query= 的接口模式 |
-|2020/03/17| 增加了验证码功能 使用了 [@dchest/captcha](https://github.com/dchest/captcha)库 |
-|2020/03/30| 代码生成器开发完成 表单生成器开发完成 使用了[@form-generator](https://github.com/JakHuang/form-generator) 库 |
-|2020/04/01| 增加前端历史页签功能，增加（修改）条件查询示例，前端背景色调修改为白色。（如不需要此功能可以在`web/src/view/layout/index.vue`中屏蔽`HistoryComponent`背景色调，为本页260行&.el-main中的`background`属性） |
-|2020/04/04| 启动2.x版本，项目文档规范化，日志功能改造，方法增加英文注释 |
-|2020/04/24|1.增加了角色拷贝功能（目前只支持单角色拷贝）<br>2.增加了首页音频播放器示例 增加了 dotolist工具<br>3.增加了docker支持<br>4.修复了部分total返回0的bug<br>5.修复了首页会发送一次无用404请求的bug<br>6.修复了swagger不能携带token的bug<br>7.修复菜单展示下级只有一个隐藏菜单时候的交互错误<br>8.修复了config从前端控制变化时候导致yaml内部的key名称错误的bug<br>9.数据库添加拷贝角色相关api和权限|
-
-## 8. 团队博客
+## 7. 知识库 
+## 7.1 团队博客
 
-> https://blog.henrongyi.top
+> https://www.yuque.com/flipped-aurora
 >
 >内有前端框架教学视频。如果觉得项目对您有所帮助可以添加我的个人微信:shouzi_1994，欢迎您提出宝贵的需求。
 
-## 9. 教学视频
-
-### 9.1 环境搭建
+## 7.2 教学视频
 
+（1）环境搭建
 > Bilibili：https://www.bilibili.com/video/BV1Fg4y187Bw/ (v1.0版本视频，v2.0操作相同目录不同)
     
-### 9.2 模板使用
-
+（2）模板使用
 > Bilibili：https://www.bilibili.com/video/BV16K4y1r7BD/ (v1.0版本视频，v2.0操作相同目录不同)
 
-### 9.3 golang基础教学视频录制中...
-
-> 地址：https://space.bilibili.com/322210472/channel/detail?cid=108884
-
-## 10. 联系方式
+（3）golang基础教学视频录制中...
+> https://space.bilibili.com/322210472/channel/detail?cid=108884
 
+## 8. 联系方式
+### 8.1 技术群
 | QQ群 |  
 |  :---:  |
 | <img src="http://qmplusimg.henrongyi.top/qq.jpg" width="180"/> |
 
+### QQ交流群：622360840
+### 微信交流群：可以添加上面任意一位开发者，备注"加入gin-vue-admin交流群"
+
+### 8.2 项目组成员
 | 蒋 | 尹 | 严 | 杜 | 印 | 宋 |
 |  :---:  |  :---: | :---: | :---:  |  :---: | :---: |
 | <img width="150" src="http://qmplusimg.henrongyi.top/qrjjz.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qryx.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qryr.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qrdjl.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qrygl.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qrsong.png"> |
 
-### - QQ交流群：622360840
-### - 微信交流群：可以添加上面任意一位开发者，备注"加入gin-vue-admin交流群"
-
-
-## 11. 开发者列表
-
 |  昵称   | 项目职务  | 姓  |
 |  ----  | ----  | ----  |
 | [@piexlmax](https://github.com/piexlmax)  | 项目发起者 | 蒋 |
@@ -284,6 +245,6 @@ go run main.go;
 | [@krank666](https://github.com/krank666)  | 前端开发 | 尹 |
 | [@chen-chen-up](https://github.com/chen-chen-up)  | 新手开发 | 宋 |
 
-## 12. 捐赠
+## 9. 捐赠
 
 如果你觉得这个项目对你有帮助，你可以请作者喝饮料 :tropical_drink:

README.md

@@ -131,29 +131,6 @@ swag init
 ````
 After executing the above command，`docs` will show in `server/`，then open your browser, jump into `http://localhost:8888/swagger/index.html` to see the swagger APIs.
 
-### 2.4 Docker image
-
-Thanks [@chenlinzhong](https://github.com/chenlinzhong) for providing docker image.
-```  
-# start docker
-docker run -itd --net=host --name=go_container shareclz/go_node /bin/bash;
-
-# come into docker 
-docker exec -it go_container /bin/bash;
-git clone https://github.com/piexlmax/gin-vue-admin.git /data1/www/htdocs/go/admin;
-
-# run web
-cd /data1/www/htdocs/go/admin/QMPlusVuePage;
-cnpm i ;
-npm run serve;
-
-# update db config
-vi /data1/www/htdocs/go/admin/QMPlusServer/static/dbconfig/config.json;
-
-# run server
-cd /data1/www/htdocs/go/admin/QMPlusServer;z
-go run main.go;
-```
 
 ## 3. Technical selection
 
@@ -165,7 +142,9 @@ go run main.go;
 - Config: using `fsnotify` and `viper` to implement `yaml` config file。
 - Log: using `go-logging` record logs。
 
-## 4. Project layout
+## 4. Project Architecture
+
+![Architecture diagram](./docs/gin-vue-admin.png)
 
 ```
     ├─server  	     （backend）
@@ -226,57 +205,40 @@ backend code file: model\dnModel\api.go
 - [ ] workflow, task transfer function
 - [ ] frontend independent mode, mock
 
-## 7. Changelog
-
-|  Date   | Log  |
-|  :---:  | --- |
-|2020/01/07| Added data resource function to Role, added the return of data resource association, the demo code was synchronized, and the multi-point login interception has been turned on, which may prevent being crowded out by others |
-|2020/01/13| Added configuration management function. This function is not published to the test environment. The test environment will not be published until the protection mechanism and the service restart mechanism are released. Please clone and import the sql scripts into your own database |
-|2020/02/21| Modified `casbin` custom authentication method to fully support `/:params and?Query=` interface modes in RESTful API |
-|2020/03/17| Added verification code function with [@dchest/captcha](https://github.com/dchest/captcha) |
-|2020/03/30| Code generator implementation, form generator implementation with[@form-generator](https://github.com/JakHuang/form-generator)  |
-|2020/04/01| Add frontend history tab function, add (modify) condition query example, and change the frontend background to white. (If you don't need this feature, you can change `background` in `&.el-main` to shield background color of `HistoryComponent`, which is located at line 260 of the code `web/src/view/layout/index.vue`) |
-|2020/04/04| Starting version 2.x, standardize the project documentation, reconstructing the log function, and adding English comments to all methods |
+## 7. Knowledge base
 
-## 8. Team blog
+### 7.1 Team blog
 
-> https://blog.henrongyi.top
+> https://www.yuque.com/flipped-aurora
 >
->
-There are video courses about frontend framework in our blo. If you think the project is helpful to you, you can add my personal WeChat:shouzi_1994，your comments is welcomed。
-
-## 9. Video courses
+>There are video courses about frontend framework in our blo. If you think the project is helpful to you, you can add my personal WeChat:shouzi_1994，your comments is welcomed。
 
-### 9.1 Development environment course
+### 7.2 Video courses
 
+(1) Development environment course
 > Bilibili：https://www.bilibili.com/video/BV1Fg4y187Bw/    (coming soon)
     
-### 9.2 Template course
-
+(2) Template course
 > Bilibili：https://www.bilibili.com/video/BV1Fg4y187Bw/    (coming soon)
 
-### 9.3 Golang basic course (coming soon)
-
-> URL: https://space.bilibili.com/322210472/channel/detail?cid=108884
+(3) Golang basic course (coming soon)
 
-## 10. Contacts
+> https://space.bilibili.com/322210472/channel/detail?cid=108884
 
+## 8. Contacts
+### 8.1 Groups
 | QQ group |  
 |  :---:  |
 | <img src="http://qmplusimg.henrongyi.top/qq.jpg" width="180"/> |
+### QQ group: 622360840
 
+### Wechat group: add anyone above, comment "加入gin-vue-admin交流群"
 
+### 8.2 Team members
 | Jiang | Yin | Yan | Du | Yin | Song |
 |  :---:  |  :---: | :---: | :---:  |  :---: | :---: |
 | <img width="150" src="http://qmplusimg.henrongyi.top/qrjjz.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qryx.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qryr.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qrdjl.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qrygl.png"> | <img width="150" src="http://qmplusimg.henrongyi.top/qrsong.png"> |
 
-### QQ group: 622360840
-
-### Wechat group: add anyone above, comment "加入gin-vue-admin交流群"
-
-
-## 11. Developers
-
 |  Nick name   | Project position  | First name  |
 |  ----  | ----  | ----  |
 | [@piexlmax](https://github.com/piexlmax)  | Project sponsor | Jiang |
@@ -286,7 +248,7 @@ There are video courses about frontend framework in our blo. If you think the pr
 | [@krank666](https://github.com/krank666)  | Frontend developer | Yin |
 | [@chen-chen-up](https://github.com/chen-chen-up)  | Novice developer | Song |
 
-## 12. Donate
+## 9. Donate
 
 If you find this project useful, you can buy author a glass of juice :tropical_drink:
 

server/Dockerfile

-FROM golang:alpine as builder
-RUN apk add --update --no-cache yarn make g++
+FROM centos:7.6.1810
 
-ENV GOPROXY=https://goproxy.cn,https://goproxy.io,direct \
-    GO111MODULE=on \
-    CGO_ENABLED=1
-WORKDIR /go/src/gin-vue-admin
-RUN go env -w GOPROXY=https://goproxy.cn,https://goproxy.io,direct
-COPY . .
-RUN go env && go list && go build -v -a -ldflags "-extldflags \"-static\" " -o gvadmin .
+# 设置go mod proxy 国内代理
+# 设置golang path
+ENV GOPROXY=https://goproxy.io GOPATH=/gopath PATH="${PATH}:/usr/local/go/bin"
+# 定义使用的Golang 版本
+ARG GO_VERSION=1.13.3
 
-WORKDIR /app
-COPY --from=builder /go/src/gin-vue-admin/gvadmin .
-COPY --from=builder /go/src/gin-vue-admin/db.db .
-COPY --from=builder /go/src/gin-vue-admin/config.yaml .
-COPY --from=builder /go/src/gin-vue-admin/resource ./resource
+# 安装 golang 1.13.3
+RUN yum install -y wget && \
+    wget "https://dl.google.com/go/go$GO_VERSION.linux-amd64.tar.gz" && \
+    rm -rf /usr/local/go && \
+    tar -C /usr/local -xzf "go$GO_VERSION.linux-amd64.tar.gz" && \
+    rm -rf *.tar.gz && \
+    go version && go env;
 
-EXPOSE 8888
+WORKDIR $GOPATH
+COPY . ginvue
+
+RUN cd ginvue && go build -o app;
 
-CMD ["gvadmin/app"]
+COPY ./config.yaml $GOPATH/ginvue/
+
+EXPOSE 8888
 
+CMD ["ginvue/app"]

web/package.json

@@ -27,7 +27,8 @@
         "vue-router": "^3.1.3",
         "vuescroll": "^4.14.4",
         "vuex": "^3.1.1",
-        "vuex-persist": "^2.1.0"
+        "vuex-persist": "^2.1.0",
+        "timeline-vuejs": "1.1.1"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.11.0",

web/src/api/github.js

+import axios from "axios";
+import { Loading } from "element-ui";
+
+let loadingInstance;
+let service = axios.create();
+
+service.interceptors.request.use((config) => {
+    loadingInstance = Loading.service({ fullscreen: true });
+    return config;
+});
+
+service.interceptors.response.use((resp) => {
+    loadingInstance.close();
+    return resp;
+}, (error) => {
+    loadingInstance.close();
+    return error;
+});
+
+export function Commits(page) {
+    return service({
+        url: "https://api.github.com/repos/flipped-aurora/gin-vue-admin/commits?page=" +
+            page,
+        method: "get",
+    });
+}
+
+export function Members() {
+    return service({
+        url: "https://api.github.com/orgs/FLIPPED-AURORA/members",
+        method: "get",
+    });
+}
\ No newline at end of file

web/src/main.js

@@ -14,6 +14,9 @@ import vueParticleLine from 'vue-particle-line'
 import 'vue-particle-line/dist/vue-particle-line.css'
 Vue.use(vueParticleLine)
 
+// time line css
+import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'
+
 // 富文本插件
 import VueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'

web/src/view/layout/aside/historyComponent/history.vue

@@ -38,7 +38,7 @@ export default {
            const obj = {}
            obj.name = route.name
            obj.meta = route.meta
-        this.historys.push(obj)
+           this.historys.push(obj)
        }
            this.activeValue = this.$route.name
         },

web/src/view/layout/aside/index.vue

@@ -2,7 +2,7 @@
   <div>
     <el-scrollbar style="height:calc(100vh)">
       <el-menu
-        :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+        class="el-menu-vertical"
         :collapse="isCollapse"
         :collapse-transition="true"
         :default-active="active"

web/src/view/layout/index.vue

@@ -7,6 +7,8 @@
       </el-aside>
       <!-- 分块滑动功能 -->
       <el-main class="main-cont main-right">
+        <transition mode="out-in" name="el-fade-in-linear">
+          <div class="topfix" :style="{width: `calc(100% - ${isCollapse?'54px':'220px'})`}">
         <el-header class="header-cont">
           <div @click="totalCollapse" class="menu-total">
             <i class="el-icon-s-unfold" v-if="isCollapse"></i>
@@ -37,7 +39,26 @@
                 <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-            <el-dialog
+ 
+          </div>
+        </el-header>
+        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+        <!--
+        :to="{ path: item.path }" 暂时注释不用-->
+        <HistoryComponent />
+        </div>
+        </transition>
+        <transition mode="out-in" name="el-fade-in-linear">
+          <keep-alive>
+            <router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
+          </keep-alive>
+        </transition>
+        <transition mode="out-in" name="el-fade-in-linear">
+            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
+        </transition>
+      </el-main>
+    </el-container>
+               <el-dialog
               title="修改密码"
               :visible.sync="showPassword"
               @close="clearPassword"
@@ -59,23 +80,6 @@
                 <el-button type="primary" @click="savePassword">确 定</el-button>
               </div>
             </el-dialog>
-          </div>
-
-        </el-header>
-        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-        <!--
-        :to="{ path: item.path }" 暂时注释不用-->
-        <HistoryComponent />
-        <transition mode="out-in" name="el-fade-in-linear">
-          <keep-alive>
-            <router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
-          </keep-alive>
-        </transition>
-        <transition mode="out-in" name="el-fade-in-linear">
-            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
-        </transition>
-      </el-main>
-    </el-container>
   </el-container>
 </template>
 
@@ -221,8 +225,15 @@ $mainHight: 100vh;
 .dropdown-group {
   min-width: 100px;
 }
+.topfix{
+  position:fixed;
+  top:0;
+  box-sizing: border-box;
+  z-index: 999;
+}
 .admin-box{
   background-color: rgb(255,255,255);
+  margin-top: 100px;
 }
 .el-scrollbar__wrap {
   padding-bottom: 17px;
@@ -260,7 +271,6 @@ $mainHight: 100vh;
     }
     .router-history{
       background: #fff;
-      margin-top: 1px;
       padding: 0 6px;
     }
     &.el-main {

web/src/view/test/index.vue

 <template>
-    <div>
-        动态路由测试
-    </div>
+  <div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <div slot="header">gin-vue-admin</div>
+          <div>
+            <el-row>
+              <el-col :span="8" :offset="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="org-img dom-center"
+                    src="@/assets/logo.png"
+                    alt="gin-vue-admin"
+                  />
+                </a>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="dom-center"
+                    src="https://img.shields.io/github/watchers/flipped-aurora/gin-vue-admin.svg?label=Watch"
+                    alt=""
+                  />
+                </a>
+              </el-col>
+              <el-col :span="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="dom-center"
+                    src="https://img.shields.io/github/stars/flipped-aurora/gin-vue-admin.svg?style=social"
+                    alt=""/></a
+              ></el-col>
+              <el-col :span="8">
+                <a href="https://github.com/flipped-aurora/gin-vue-admin">
+                  <img
+                    class="dom-center"
+                    src="https://img.shields.io/github/forks/flipped-aurora/gin-vue-admin.svg?label=Fork"
+                    alt=""/></a
+              ></el-col>
+            </el-row>
+          </div>
+        </el-card>
+        <el-card style="margin-top: 20px">
+          <div slot="header">flipped-aurora团队</div>
+          <div>
+            <el-row>
+              <el-col :span="8" :offset="8">
+                <a href="https://github.com/flipped-aurora">
+                  <img
+                    class="org-img dom-center"
+                    src="@/assets/flipped-aurora.png"
+                    alt="flipped-aurora"
+                  />
+                </a>
+              </el-col>
+            </el-row>
+            <el-row style="margin-left: 40px" :gutter="20">
+              <template v-for="(item, index) in members">
+                <el-col :span="8" :key="index">
+                  <a :href="item.html_url">
+                    <img class="avatar-img" :src="item.avatar_url" />
+                    <a class="author-name" style="">{{ item.login }}</a>
+                  </a>
+                </el-col>
+              </template>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <div slot="header">
+            提交记录
+          </div>
+          <div>
+            <Timeline
+              :timeline-items="dataTimeline"
+              :message-when-no-items="messageWhenNoItems"
+              :uniqueTimeline="true"
+              :unique-year="true"
+              :show-day-and-month="true"
+              order="desc"
+              dateLocale="zh-CN"
+            />
+          </div>
+          <el-button class="load-more" @click="loadMore" type="text"
+            >Load more</el-button
+          >
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
+import { Commits, Members } from "@/api/github";
+import Timeline from "timeline-vuejs";
 export default {
-    name:"Test"
-    
-}
+  name: "Test",
+  components: {
+    Timeline,
+  },
+  data() {
+    return {
+      messageWhenNoItems: "There arent commits",
+      members: [],
+      dataTimeline: [],
+      page: 0,
+    };
+  },
+  created() {
+    this.loadCommits();
+    this.loadMembers();
+  },
+  methods: {
+    loadMore() {
+      this.page++;
+      this.loadCommits();
+    },
+    loadCommits() {
+      Commits(this.page).then(({ data }) => {
+        data.forEach((element) => {
+          if (element.commit.message) {
+            this.dataTimeline.push({
+              from: new Date(element.commit.author.date),
+              title: element.commit.author.name,
+              showDayAndMonth: true,
+              description: `<a style="color: #26191b" href="${element.html_url}">${element.commit.message}</a>`,
+            });
+          }
+        });
+      });
+    },
+    loadMembers() {
+      Members().then(({ data }) => {
+        this.members = data;
+        this.members.sort();
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>
+.load-more {
+  margin-left: 120px;
+}
 
-</style>
\ No newline at end of file
+.avatar-img {
+  float: left;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  margin-top: 15px;
+}
+
+.org-img {
+  height: 150px;
+  width: 150px;
+}
+
+.author-name {
+  float: left;
+  line-height: 65px !important;
+  margin-left: 10px;
+  color: darkblue;
+  line-height: 100px;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+}
+
+.dom-center {
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+</style>