article

src/main/java/com/izouma/jiashanxia/domain/Article.java

@@ -0,0 +1,21 @@
+package com.izouma.jiashanxia.domain;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.persistence.Column;
+import javax.persistence.Entity;
+
+@Data
+@Entity
+@AllArgsConstructor
+@NoArgsConstructor
+@Builder
+public class Article extends BaseEntity {
+    private String name;
+
+    @Column(columnDefinition = "text")
+    private String content;
+}

src/main/java/com/izouma/jiashanxia/repo/ArticleRepo.java

@@ -0,0 +1,19 @@
+package com.izouma.jiashanxia.repo;
+
+import com.izouma.jiashanxia.domain.Article;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+
+import javax.transaction.Transactional;
+import java.util.Optional;
+
+public interface ArticleRepo extends JpaRepository<Article, Long>, JpaSpecificationExecutor<Article> {
+    @Query("update Article t set t.del = true where t.id = ?1")
+    @Modifying
+    @Transactional
+    void softDelete(Long id);
+
+    Optional<Article> findFirstByName(String name);
+}

src/main/java/com/izouma/jiashanxia/service/ArticleService.java

@@ -0,0 +1,20 @@
+package com.izouma.jiashanxia.service;
+
+import com.izouma.jiashanxia.domain.Article;
+import com.izouma.jiashanxia.dto.PageQuery;
+import com.izouma.jiashanxia.repo.ArticleRepo;
+import com.izouma.jiashanxia.utils.JpaUtils;
+import lombok.AllArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.stereotype.Service;
+
+@Service
+@AllArgsConstructor
+public class ArticleService {
+
+    private ArticleRepo articleRepo;
+
+    public Page<Article> all(PageQuery pageQuery) {
+        return articleRepo.findAll(JpaUtils.toSpecification(pageQuery, Article.class), JpaUtils.toPageRequest(pageQuery));
+    }
+}

src/main/java/com/izouma/jiashanxia/web/ArticleController.java

@@ -0,0 +1,65 @@
+package com.izouma.jiashanxia.web;
+import com.izouma.jiashanxia.domain.Article;
+import com.izouma.jiashanxia.service.ArticleService;
+import com.izouma.jiashanxia.dto.PageQuery;
+import com.izouma.jiashanxia.exception.BusinessException;
+import com.izouma.jiashanxia.repo.ArticleRepo;
+import com.izouma.jiashanxia.utils.ObjUtils;
+import com.izouma.jiashanxia.utils.excel.ExcelUtils;
+import lombok.AllArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.util.List;
+
+@RestController
+@RequestMapping("/article")
+@AllArgsConstructor
+public class ArticleController extends BaseController {
+    private ArticleService articleService;
+    private ArticleRepo articleRepo;
+
+    //@PreAuthorize("hasRole('ADMIN')")
+    @PostMapping("/save")
+    public Article save(@RequestBody Article record) {
+        if (record.getId() != null) {
+            Article orig = articleRepo.findById(record.getId()).orElseThrow(new BusinessException("无记录"));
+            ObjUtils.merge(orig, record);
+            return articleRepo.save(orig);
+        }
+        return articleRepo.save(record);
+    }
+
+
+    //@PreAuthorize("hasRole('ADMIN')")
+    @PostMapping("/all")
+    public Page<Article> all(@RequestBody PageQuery pageQuery) {
+        return articleService.all(pageQuery);
+    }
+
+    @GetMapping("/get/{id}")
+    public Article get(@PathVariable Long id) {
+        return articleRepo.findById(id).orElseThrow(new BusinessException("无记录"));
+    }
+
+    @GetMapping("/getByName/{name}")
+    public Article get(@PathVariable String name) {
+        return articleRepo.findFirstByName(name).orElseThrow(new BusinessException("无记录"));
+    }
+
+    @PostMapping("/del/{id}")
+    public void del(@PathVariable Long id) {
+        articleRepo.softDelete(id);
+    }
+
+    @GetMapping("/excel")
+    @ResponseBody
+    public void excel(HttpServletResponse response, PageQuery pageQuery) throws IOException {
+        List<Article> data = all(pageQuery).getContent();
+        ExcelUtils.export(response, data);
+    }
+}
+

src/main/resources/genjson/Article.json

@@ -0,0 +1 @@
+{"tableName":"Article","className":"Article","remark":"文章编辑","genTable":true,"genClass":true,"genList":true,"genForm":true,"genRouter":true,"javaPath":"/Users/drew/Projects/Java/jiashanxia/src/main/java/com/izouma/jiashanxia","viewPath":"/Users/drew/Projects/Java/jiashanxia/src/main/vue/src/views","routerPath":"/Users/drew/Projects/Java/jiashanxia/src/main/vue/src","resourcesPath":"/Users/drew/Projects/Java/jiashanxia/src/main/resources","dataBaseType":"Mysql","fields":[{"name":"name","modelName":"name","remark":"名称","showInList":true,"showInForm":true,"formType":"singleLineText"},{"name":"content","modelName":"content","remark":"内容","showInList":true,"showInForm":true,"formType":"richText"}],"readTable":false,"dataSourceCode":"dataSource","genJson":"","subtables":[],"update":false,"basePackage":"com.izouma.jiashanxia","tablePackage":"com.izouma.jiashanxia.domain.Article"}

src/main/vue/src/components/RichText.vue

@@ -44,7 +44,7 @@ export default {
                 statusbar: false,
                 height: 400,
                 toolbar:
-                    'undo redo | styleselect bold italic strikethrough forecolor backcolor  | image media link blockquote visualblocks insert | formatselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview fullscreen code help',
+                    'undo redo | styleselect | fontsizeselect bold italic strikethrough forecolor backcolor  | image media link blockquote visualblocks insert | formatselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview fullscreen code help',
                 plugins: [
                     'advlist autolink lists link image charmap print preview anchor textcolor',
                     'searchreplace visualblocks code fullscreen',
@@ -65,7 +65,10 @@ export default {
                 },
                 init_instance_callback: editor => {
                     this.editor = editor;
-                }
+                },
+                image_class_list: [{ title: '默认', value: 'rich-text-img-default' }],
+                fontsize_formats:
+                    '10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 25pt 26pt 27pt 28pt 29pt 30pt 31pt 32pt 33pt 34pt 35pt 36pt 37pt 38pt 39pt'
             },
             editor: null,
             content: ''

src/main/vue/src/router.js

@@ -258,6 +258,22 @@ const router = new Router({
                     meta: {
                         title: '团队信息'
                     }
+                },
+                {
+                    path: '/articleEdit',
+                    name: 'ArticleEdit',
+                    component: () => import(/* webpackChunkName: "articleEdit" */ '@/views/ArticleEdit.vue'),
+                    meta: {
+                        title: '文章编辑编辑'
+                    }
+                },
+                {
+                    path: '/articleList',
+                    name: 'ArticleList',
+                    component: () => import(/* webpackChunkName: "articleList" */ '@/views/ArticleList.vue'),
+                    meta: {
+                        title: '文章编辑'
+                    }
                 }
                 /**INSERT_LOCATION**/
             ]

src/main/vue/src/views/ArticleEdit.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="edit-view">
+        <el-form
+            :model="formData"
+            :rules="rules"
+            ref="form"
+            label-width="52px"
+            label-position="right"
+            size="small"
+            style="max-width: 500px;"
+        >
+            <el-form-item prop="name" label="名称">
+                <el-input v-model="formData.name" :disabled="!!formData.id"></el-input>
+            </el-form-item>
+            <el-form-item prop="content" label="内容" style="width:800px">
+                <rich-text v-model="formData.content"></rich-text>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+                <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>
+                <el-button @click="$router.go(-1)">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ArticleEdit',
+    created() {
+        if (this.$route.query.id) {
+            this.$http
+                .get('article/get/' + this.$route.query.id)
+                .then(res => {
+                    this.formData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {}
+        };
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            this.saving = true;
+            this.$http
+                .post('/article/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/article/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/views/ArticleList.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="list-view">
+        <div class="filters-container">
+            <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button>
+            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
+            <el-button
+                @click="download"
+                type="primary"
+                icon="el-icon-download"
+                :loading="downloading"
+                class="filter-item"
+                >导出EXCEL
+            </el-button>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="id" label="ID" width="100"> </el-table-column>
+            <el-table-column prop="name" label="名称"> </el-table-column>
+            <el-table-column prop="content" label="内容"> </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+
+export default {
+    name: 'ArticleList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/article/all',
+            downloading: false
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        beforeGetData() {
+            return { search: this.search };
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/articleEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/articleEdit',
+                query: {
+                    id: row.id
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/article/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/article/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>