update: 实现图书修改功能

wj-vue/src/components/home/UpdateCard.vue

@@ -6,6 +6,12 @@
     </div>
     <div class="block">
       <el-timeline>
+        <el-timeline-item timestamp="2019/4/5" placement="top">
+          <el-card>
+            <h4>实现图书修改功能</h4>
+            <p>Evan 提交于 2019/4/5 22:52</p>
+          </el-card>
+        </el-timeline-item>
         <el-timeline-item timestamp="2019/4/4" placement="top">
           <el-card>
             <h4>实现图书删除功能</h4>
@@ -30,12 +36,6 @@
             <p>Evan 提交于 2019/4/1 09:19</p>
           </el-card>
         </el-timeline-item>
-        <el-timeline-item timestamp="2019/3/31" placement="top">
-          <el-card>
-            <h4>更新 README.md</h4>
-            <p>Evan 提交于 2019/3/31 09:19</p>
-          </el-card>
-        </el-timeline-item>
       </el-timeline>
     </div>
   </el-card>

wj-vue/src/components/library/AddButton.vue → wj-vue/src/components/library/AddOrUpdateButton.vue

@@ -43,27 +43,23 @@
       return {
         dialogFormVisible: false,
         form: {
-          name: '',
+          id: '',
+          title: '',
           author: '',
           date: '',
           press: '',
           cover: '',
-          abs: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
+          abs: ''
         },
         formLabelWidth: '120px'
       }
     },
-    mounted: {
-    },
     methods: {
       onSubmit () {
         console.log('submit!')
         this.$axios
           .post('/library', {
+            id: this.form.id,
             cover: this.form.cover,
             title: this.form.title,
             author: this.form.author,

wj-vue/src/components/library/Books.vue

@@ -21,10 +21,8 @@
       <p slot="content" style="width: 300px" class="abstract">{{item.abs}}</p>
       <el-card style="width: 135px;margin-bottom: 20px;height: 233px;float: left;margin-right: 15px" class="book"
                bodyStyle="padding:10px" shadow="hover">
-        <div class="cover">
-          <a href="">
-            <img :src="item.cover" alt="">
-          </a>
+        <div class="cover" @click="editBook(item)">
+          <img :src="item.cover" alt="封面">
         </div>
         <div class="info">
           <div class="title">
@@ -35,16 +33,15 @@
         <div class="author">{{item.author}}</div>
       </el-card>
     </el-tooltip>
-    <add-button @onSubmit="loadBooks()"></add-button>
+    <add-or-update-button @onSubmit="loadBooks()" ref="add"></add-or-update-button>
   </div>
 </template>
 
 <script>
-  import AddButton from './AddButton'
-
+  import AddOrUpdateButton from './AddOrUpdateButton'
   export default {
     name: 'BookCard',
-    components: {AddButton},
+    components: {AddOrUpdateButton},
     mounted: function () {
       this.loadBooks()
     },
@@ -81,6 +78,18 @@
           })
         })
         // alert(id)
+      },
+      editBook (item) {
+        this.$refs.add.dialogFormVisible = true
+        this.$refs.add.form = {
+          id: item.id,
+          cover: item.cover,
+          title: item.title,
+          author: item.author,
+          date: item.date,
+          press: item.press,
+          abs: item.abs
+        }
       }
     },
     data: function () {
@@ -99,6 +108,7 @@
     height: 172px;
     margin-bottom: 7px;
     overflow: hidden;
+    cursor: pointer;
   }
 
   img {

wj-vue/src/components/library/subject/Subject.vue

-<template>
-  <div id="book-bg">
-  <div class="subject">
-    <el-card style="margin-top: 30px;width: 680px">
-    <el-row>
-      <h1>且在人间</h1>
-    </el-row>
-    <el-row>
-        <div class="content">
-              <div class="cover">
-                <a href="">
-                  <img src="../../../assets/img/books/s29958602.jpg" alt="">
-                </a>
-              </div>
-              <div class="info">
-                <span>作者：<a href="" style="text-decoration: none;color: blue">余秀华</a></span><br>
-                <span>出版社：湖南文艺出版社</span><br>
-                <span>出版日期：2019-2-1</span><br>
-                <span>页数：248</span><br>
-                <span>装帧：精装</span><br>
-                <span>ISBN：9787540488949</span><br>
-              </div>
-        </div>
-    </el-row>
-      <el-button style="float: right; padding: 3px 0" type="text">修改</el-button>
-    <div class="abstract">
-      <h2><span>内容简介</span>&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·</h2>
-      <div class="intro">
-        <p>诗人余秀华中篇小说首次结集出版。
-
-          《且在人间》——以余秀华为生活原型，讲述一个残疾女人悲苦倔强、向死而生的故事。
-
-          女主人公周玉生活在乡村，患有“脑瘫”，她几乎被所有人漠视，甚至被整个社会抛弃，但是她渴望被当成一个普通的健康人,而不是带着怜悯或不屑，她只要求平等。爱情的缺 失，家庭的不幸，生活的种种际遇让周玉用诗歌的方式把 情感抒发出来，最终她用诗歌创作出了一个文学的世界，得到了人们的认可。作者用平静的笔调书写残疾人的底层生活,将堆积在心底的黑暗与爱化作成长的养分,达到了一种真实而达观、勇敢而平静的生命境界。
-
-          ...</p>
-      </div>
-    </div>
-    </el-card>
-    <!--<div style="min-height:100px;"> </div>-->
-  </div>
-  </div>
-</template>
-
-<style scoped>
-  #book-bg {
-    width: 100%;
-    height: 700px;
-    position: absolute;
-    /*background: url("../../../assets/img/bg/bg2.jpg") no-repeat;*/
-    /*background-size: cover;*/
-    /*background-position: center;*/
-    /*margin: 0;*/
-  }
-  .subject{
-    /*min-width: 500px;*/
-    /*实现把主体内容放在页面的中间偏左位置*/
-    position: absolute;
-    left:20%;
-    top: 5%;
-    margin-left: -60px;
-  }
-
-  .cover {
-    width: 135px;
-    height: 200px;
-    margin-bottom: 20px;
-    overflow: hidden;
-    float: left;
-  }
-
-  img {
-    width: 135px;
-    height: 200px;
-    /*margin: 0 auto;*/
-  }
-
-  h1 {
-    font-size: 26px;
-    font-weight: bold;
-    color: #494949;
-    line-height: 1.1;
-    padding: 15px 0 0 0;
-    float: left;
-  }
-
-  .info {
-    text-align: left;
-    font: 14px Arial, Helvetica, sans-serif;
-    line-height: 150%;
-    color: #666666;
-    float: left;
-    margin-left: 15px;
-   }
-
-  .abstract {
-    text-align: left;
-    margin-left: 10px;
-  }
-
-  h2 {
-    font-size: 16px;
-    color: #007722;
-    line-height: 150%;
-  }
-
-  .intro {
-    width: 600px;
-  }
-</style>

wj-vue/src/router/index.js

@@ -6,7 +6,6 @@ import Editor from '@/components/jotter/Editor'
 import LibraryIndex from '@/components/library/LibraryIndex'
 import Login from '@/components/Login'
 import Home from '@/components/Home'
-import Subject from '@/components/library/subject/Subject'
 
 Vue.use(Router)
 
@@ -20,7 +19,6 @@ export default new Router({
       component: Login
     },
     {
-      // 表面是appindex，实际上是先访问了home然后跳转的。
       // home页面并不需要被访问，只是作为其它组件的父组件
       path: '/home',
       name: 'Home',
@@ -46,11 +44,6 @@ export default new Router({
           path: '/library',
           name: 'Library',
           component: LibraryIndex
-        },
-        {
-          path: '/library/subject',
-          name: 'Subject',
-          component: Subject
         }
       ]
     },

wj/src/main/java/com/gm/wj/controller/LibraryController.java

@@ -22,8 +22,8 @@ public class LibraryController {
 
     @CrossOrigin
     @PostMapping(value = "/api/library")
-    public Book add(@RequestBody Book book) throws Exception {
-        bookService.add(book);
+    public Book addOrUpdate(@RequestBody Book book) throws Exception {
+        bookService.addOrUpdate(book);
         return book;
     }
 

wj/src/main/java/com/gm/wj/service/BookService.java

@@ -18,7 +18,7 @@ public class BookService {
         return bookDAO.findAll(sort);
     }
 
-    public void add(Book book) {
+    public void addOrUpdate(Book book) {
         bookDAO.save(book);
     }
 

wj/src/main/resources/static/index.html

-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>白卷 - White Jotter</title><link href=/static/css/app.a23d4adcc63c3f13864170b6dc3a1d0e.css rel=stylesheet></head><body style="background: #f6f6f6"><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.578a67f45ff71504b68d.js></script><script type=text/javascript src=/static/js/app.073480a1c08d20dc611b.js></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>白卷 - White Jotter</title><link href=/static/css/app.68abdb5a43f1b9c7b3f5c37e1448dcdd.css rel=stylesheet></head><body style="background: #f6f6f6"><div id=app></div><script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.578a67f45ff71504b68d.js></script><script type=text/javascript src=/static/js/app.82dc2acfe0ea0348caed.js></script></body></html>
\ No newline at end of file

wj/src/main/resources/static/static/js/manifest.2ae2e69a05c33dfc65f8.js.map

-{"version":3,"sources":["webpack:///webpack/bootstrap 4c118a982729e776c515"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 4c118a982729e776c515"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///webpack/bootstrap f0e734e7c8fd8b93008d"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,IAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.2ae2e69a05c33dfc65f8.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap f0e734e7c8fd8b93008d"],"sourceRoot":""}
\ No newline at end of file