[server] bookdetail tags and summary by split [page] tag for badage and show summary desc

README.md

@@ -67,9 +67,9 @@ npm run dev
 
 Mysql 基本语法
 
-`create  database 数据库名;`    创建数据库
-`show tables; `                查看数据库所有表
-`desc   表名；`           查看数据表
-`alter table books add column count int default 0;`    在books表中添加count  int类型 默认0；
-`select title, count from books; `   查看books表部分数据
-`show create table books;`     查看创建books用了哪些语句
+* `create  database 数据库名;`    创建数据库
+* `show tables; `                查看数据库所有表
+* `desc   表名；`           查看数据表
+* `alter table books add column count int default 0;`    在books表中添加count  int类型 默认0；
+* `select title, count from books; `   查看books表部分数据
+* `show create table books;`     查看创建books用了哪些语句

server/controllers/bookdetail.js

@@ -11,6 +11,8 @@ module.exports = async (ctx) => {
   // console.log(detail)
   const info = JSON.parse(detail.user_info)
   ctx.state.data = Object.assign({}, detail, {
+    tags: detail.tags.split(','),
+    summary: detail.summary.split('\n'),
     user_info: {
       name: info.nickName,
       image: info.avatarUrl

src/components/BookInfo.vue

@@ -33,6 +33,13 @@
           {{info.price}}
         </div>
       </div>
+      <!-- 标签和详情 -->
+      <div class="tags">
+        <div class="badge" :key="tag" v-for="tag in info.tags" >{{tag}}</div>
+      </div>
+      <div class="summary">
+        <p :key="i" v-for="(sum, i) in info.summary">{{sum}}</p>
+      </div>
   </div>
 </template>
 <script>
@@ -51,6 +58,22 @@ export default {
 </script>
 <style lang="scss">
 .bookinfo {
+  .summary {
+    padding: 0 15px;
+    margin-top: 10px;
+    p {
+      text-indent: 2em;
+      font-size: 14px;
+    }
+  }
+  .badge {
+    display: inline-block;
+    margin: 5px;
+    padding: 5px;
+    border-radius: 10px;
+    border: 1px solid #EA5A49;
+    color: #EA5A49;
+  }
   font-size: 14px;
   .right {
     float: right;