珠峰培训，专注前端

一、项目介绍

本项目是书城项目，该项目共分为以下功能模块：

  1. 首页
    • banner图
    • 获取热门图书
  2. 列表页
    • 展示列表
    • 删除和收藏
    • 点击图书进入详情页
  3. 收藏
    • 列表
    • 删除收藏
  4. 新增
    • 新增图书

二、技术方案

  • 前端：vue + vue-router + less + vue-cli + axios + vue-awesome-swiper
  • 后端：express

三、项目结构以及git仓库

QQ图片20190801204817.png

四、入口文件及功能组件

1. main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. import VueAwesomeSwiper from 'vue-awesome-swiper'
  6. import 'swiper/dist/css/swiper.css'
  8. Vue.config.productionTip = false
  10. Vue.use(VueAwesomeSwiper)
  12. new Vue({
  13.   router,
  14.   store,
  15.   render: h => h(App)
  16. }).$mount('#app')

2. App.vue

  1. <template>
  2.   <div id="app">
  4.     <Tab></Tab>
  5.     <router-view/>
  6.   </div>
  7. </template>
  9. <script>
  10. // App.vue 这个组件不会销毁
  11. import Tab from '@/components/base/Tab.vue'
  12. export default {
  13.   name: 'App',
  14.   components: {
  15.     Tab
  16.   }
  17. }
  18. </script>
  20. <style>
  21.   /*如果是公共样式，最好写在 App.vue 中*/
  22.   * {
  23.     margin: 0;
  24.     padding: 0;
  25.   }
  27.   ul li {
  28.     list-style: none;
  29.   }
  30.   a {
  31.     text-decoration: none;
  32.   }
  34.   .content {
  35.     position: absolute;
  36.     top: 40px;
  37.     width: 100%;
  38.     bottom: 50px;
  39.   }
  40. </style>

3. router.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Home from './views/Home.vue'
  4. import Collect from './views/Collect.vue'
  5. import Add from './views/Add.vue'
  7. Vue.use(Router)
  9. export default new Router({
  10.   routes: [
  11.     {
  12.       path: '/',
  13.       name: 'home',
  14.       component: Home,
  15.       alias: '/home'
  16.     },
  17.     {
  18.       path: '/list',
  19.       component: () => import('./views/List.vue')
  20.     },
  21.     {
  22.       name: 'detail',
  23.       path: '/detail/:id',
  24.       component: () => import('./views/Detail.vue')
  25.     },
  26.     {
  27.       path: '/collect',
  28.       component: Collect
  29.     },
  30.     {
  31.       name: 'add',
  32.       path: '/add',
  33.       component: Add
  34.     }
  35.   ]
  36. })

4. Tab.vue 组件

  1. <template>
  2.   <div class="footer">
  3.     <router-link to="/home">
  4.       <i class="iconfont icon-home"></i>
  5.       <span>首页</span>
  6.     </router-link>
  7.     <router-link to="/list">
  8.       <i class="iconfont icon-chazhaobiaodanliebiao"></i>
  9.       <span>列表</span>
  10.     </router-link>
  11.     <router-link to="/collect">
  12.       <i class="iconfont icon-shoucang"></i>
  13.       <span>收藏</span>
  14.     </router-link>
  15.     <router-link to="/add">
  16.       <i class="iconfont icon-tianjia-xue"></i>
  17.       <span>添加</span>
  18.     </router-link>
  20.   </div>
  21. </template>
  23. <style scoped lang="less">
  24.   .footer {
  25.     position: fixed;
  26.     width: 100%;
  27.     bottom: 0;
  28.     display: flex;
  29.     border-top: 1px solid #ccc;
  30.     background: #fff;
  31.     z-index: 100;
  33.     a {
  34.       display: flex;
  35.       flex: 1; /* 每个a标签占相同的比例 */
  36.       flex-direction: column;
  37.       font-size: 18px;
  38.       align-items: center;
  39.       color: yellowgreen;
  40.     }
  41.     .router-link-active {
  42.       color: red;
  43.     }
  44.   }
  45. </style>

5. MyHeader.vue 组件

  1. <template>
  2.   <div class="header">
  3.     <slot></slot>
  4.     <i class="iconfont icon-fanhui" v-if="back" @click="goBack"></i>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  10.   data () {
  11.     return {}
  12.   },
  13.   props: ['back'],
  14.   methods: {
  15.     goBack () {
  16.       this.$router.go(-1)
  17.     }
  18.   }
  19. }
  20. </script>
  22. <style scoped>
  23.   .header {
  24.     position: fixed;
  25.     width: 100%;
  26.     background: #afd9ee;
  27.     text-align: center;
  28.     height: 40px;
  29.     line-height: 40px;
  30.     font-size: 20px;
  31.     z-index: 100;
  32.   }
  34.   .icon-fanhui {
  35.     position: absolute;
  36.     left: 10px;
  37.   }
  38. </style>

5. Swiper.vue 组件

  1. <template>
  2.   <swiper :options="swiperOption">
  3.     <!---->
  4.     <swiper-slide v-for="(item, index) in sliders" :key="index">
  5.       <img :src="item" alt="">
  6.     </swiper-slide>
  7.     <div class="swiper-pagination" slot="pagination"></div>
  8.   </swiper>
  9. </template>
  11. <script>
  12. import { swiper, swiperSlide } from 'vue-awesome-swiper'
  13. export default {
  14.   data () {
  15.     return {
  16.       swiperOption: {
  17.         autoplay: 3000,
  18.         pagination: '.swiper-pagination',
  19.         loop: true
  20.       }
  21.     }
  22.   },
  23.   props: ['sliders'],
  24.   components: {
  25.     swiper,
  26.     swiperSlide
  27.   }
  28. }
  29. </script>
  31. <style scoped>
  32.   img {
  33.     width: 100%;
  34.   }
  35. </style>

五、页面组件

  • 首页截图

1.png

1. Home.vue

  1. <template>
  2.   <div>
  3.     <MyHeader>首页</MyHeader>
  4.     <div class="content">
  5.       <!--内容区域-->
  6.       <Swiper :sliders="sliders"></Swiper>
  7.       <div class="container">
  8.         <h2>热门图书</h2>
  9.         <ul>
  10.           <li v-for="(item, index) in hotBooks" :key="index">
  11.             <img :src="item.bookCover" alt="">
  12.             <b>{{item.bookName}}</b>
  13.           </li>
  14.         </ul>
  15.       </div>
  16.     </div>
  17.   </div>
  18. </template>
  20. <script>
  21. // @ is an alias to /src
  22. import MyHeader from '@/components/base/MyHeader.vue'
  23. import Swiper from '@/components/base/Swiper.vue'
  25. import { getSlider, getHot } from '../api/home'
  27. export default {
  28.   name: 'home',
  29.   data () {
  30.     return {
  31.       hotBooks: [],
  32.       sliders: []
  33.     }
  34.   },
  35.   async created () {
  36.     this.sliders = await getSlider()
  37.     this.hotBooks = await getHot()
  38.     // this.slide()
  39.     // this.getHotBook()
  40.   },
  41.   methods: {
  42.     async slide () {
  43.       this.sliders = await getSlider()
  44.     },
  45.     async getHotBook () {
  46.       this.hotBooks = await getHot()
  47.     }
  48.   },
  49.   components: {
  50.     MyHeader,
  51.     Swiper
  52.   }
  53. }
  54. </script>
  56. <style scoped lang="less">
  57.   .container {
  58.     box-sizing: border-box;
  59.     overflow-x: hidden;
  61.     h2 {
  62.       padding-left: 30px;
  63.     }
  65.     ul li {
  66.       float: left;
  67.       margin: 20px 0;
  68.       width: 50%;
  70.       img {
  71.         display: block;
  72.       }
  73.       b {
  74.         display: block;
  75.         padding-left: 20px;
  76.       }
  77.     }
  78.   }
  79. </style>

2. List.vue 列表页

2.png

  1. <template>
  2.   <div class="wrapper">
  3.     <MyHeader :back="true">列表页</MyHeader>
  4.     <div class="content">
  5.       <ul class="container">
  6.         <router-link v-for="(book, index) in allBooks"
  7.                      :key="index"
  8.                      :to="{name: 'detail', params: {id: book.bookId}}" tag="li">
  9.           <img :src="book.bookCover" alt="">
  10.           <div class="right">
  11.             <h3>{{book.bookName}}</h3>
  12.             <p>{{book.bookInfo}}</p>
  13.             <p class="rice">{{book.bookPrice}}</p>
  14.             <button class="btn" @click.stop="remove(book.bookId)">删除</button>
  15.             <button class="btn" @click.stop="collect(book)">收藏</button>
  16.           </div>
  17.         </router-link>
  18.       </ul>
  19.     </div>
  20.   </div>
  21. </template>
  23. <script>
  24. import MyHeader from '@/components/base/MyHeader.vue'
  25. import { getAll, deleteBook, collectBook } from '../api/list'
  27. export default {
  28.   name: 'List',
  29.   data () {
  30.     return {
  31.       allBooks: []
  32.     }
  33.   },
  34.   created () {
  35.     this.getAllBooks()
  36.   },
  37.   methods: {
  38.     async getAllBooks () {
  39.       this.allBooks = await getAll()
  40.     },
  41.     async remove (id) {
  42.       await deleteBook(id)
  43.       this.getAllBooks()
  44.     },
  45.     async collect (data) {
  46.       await collectBook(data)
  47.     }
  48.   },
  49.   components: {
  50.     MyHeader
  51.   }
  52. }
  53. </script>
  55. <style scoped lang="less">
  56.   .container {
  57.     margin-bottom: 50px;
  58.     li {
  59.       padding: 10px;
  60.       font-size: 16px;
  62.       img {
  63.         width: 160px;
  64.       }
  66.       .right {
  67.         padding-top: 30px;
  68.         width: 180px;
  69.         float: right;
  70.       }
  71.       .price {
  72.         color: red;
  73.         font-size: 30px;
  74.       }
  76.       .btn {
  77.         width: 60px;
  78.         height: 30px;
  79.         background: red;
  80.         color: #fff;
  81.         font-size: 18px;
  82.         border: none;
  83.         border-radius: 5px;
  84.         &:nth-of-type(1) {
  85.           margin-right: 5px;
  86.         }
  87.       }
  88.     }
  89.   }
  90. </style>

3. 详情页 Detail.vue

3.png

  1. <template>
  2.   <div>
  3.     <MyHeader :back="true"></MyHeader>
  4.     <div class="content container">
  5.       <ul>
  6.         <li>
  7.           <label>书名</label>
  8.           <input type="text" v-model="book.bookName">
  9.         </li>
  10.         <li>
  11.           <label>信息</label>
  12.           <input type="text" v-model="book.bookInfo">
  13.         </li>
  14.         <li>
  15.           <label>价格</label>
  16.           <input type="text" v-model="book.bookPrice">
  17.         </li>
  18.       </ul>
  19.       <button @click="updateBook">确认修改</button>
  20.     </div>
  21.   </div>
  22. </template>
  24. <script>
  25. import MyHeader from '../components/base/MyHeader.vue'
  26. import { getOne, update } from '../api/detail'
  28. export default {
  29.   components: {
  30.     MyHeader
  31.   },
  32.   name: 'Detail',
  33.   data () {
  34.     return {
  35.       book: {}
  36.     }
  37.   },
  38.   created () {
  39.     let { id } = this.$route.params
  40.     this.getBook(id)
  41.   },
  42.   methods: {
  43.     async getBook (id) {
  44.       this.book = await getOne(id)
  45.       this.book.bookId = id
  46.     },
  47.     async updateBook () {
  48.       await update(this.book)
  49.       this.$router.go(-1)
  50.     }
  51.   }
  52. }
  53. </script>
  55. <style scoped lang="less">
  56.   .container {
  57.     width: 100%;
  58.     padding: 20px;
  59.     position: fixed;
  60.     top: 40px;
  61.     left: 0;
  62.     right: 0;
  63.     bottom: 0;
  64.     height: 100%;
  65.     background: #fff;
  66.     z-index: 101;
  68.     li {
  69.       height: 100px;
  71.       label {
  72.         display: block;
  73.         font-size: 25px;
  74.         font-weight: bold;
  75.         margin-bottom: 10px;
  76.       }
  78.       input {
  79.         display: block;
  80.         width: 300px;
  81.         height: 40px;
  82.         padding-left: 10px;
  83.         margin-left: 5px;
  84.       }
  85.     }
  87.     button {
  88.       display: block;
  89.       width: 100px;
  90.       height: 40px;
  91.       text-align: center;
  92.       line-height: 40px;
  93.       background: red;
  94.       color: #fff;
  95.       font-size: 20px;
  96.       border-radius: 4px;
  97.       border: none;
  98.     }
  99.   }
  100. </style>

4. Collect.vue 收藏夹

4.png

  1. <template>
  2.   <div>
  3.     <MyHeader :back="true">收藏页</MyHeader>
  4.     <div class="content">
  5.       <ul class="container">
  6.         <li v-for="(book, index) in allBooks" :key="index">
  7.           <img :src="book.bookCover" alt="">
  8.           <div class="right">
  9.             <h3>
  10.               {{book.bookName}}
  11.             </h3>
  12.             <p>
  13.               {{book.bookInfo}}
  14.             </p>
  15.             <p class="price">{{book.bookPrice}}</p>
  16.             <button class="btn" @click="remove(book.bookId)">删除</button>
  17.           </div>
  18.         </li>
  19.       </ul>
  20.     </div>
  21.   </div>
  22. </template>
  24. <script>
  25. import MyHeader from '../components/base/MyHeader.vue'
  26. import { getCollect, rmCollect } from '../api/collect'
  28. export default {
  29.   name: 'Collect',
  30.   data () {
  31.     return {
  32.       allBooks: []
  33.     }
  34.   },
  35.   created () {
  36.     this.getCollect()
  37.   },
  38.   methods: {
  39.     async getCollect () {
  40.       this.allBooks = await getCollect()
  41.     },
  42.     async remove (id) {
  43.       await rmCollect(id)
  44.       this.getCollect()
  45.     }
  46.   },
  47.   components: {
  48.     MyHeader
  49.   }
  50. }
  51. </script>
  53. <style scoped lang="less">
  54.   .container {
  55.     margin-bottom: 50px;
  56.     li {
  57.       padding: 10px;
  58.       font-size: 16px;
  60.       img {
  61.         width: 160px;
  62.       }
  63.       .right {
  64.         float: right;
  65.         width: 180px;
  66.       }
  67.       .price {
  68.         color: red;
  69.         font-size: 30px;
  70.       }
  71.       .btn {
  72.         width: 60px;
  73.         height: 30px;
  74.         background: red;
  75.         color: #fff;
  76.         border: none;
  77.         border-radius: 5px;
  78.       }
  79.     }
  80.   }
  81. </style>

5. Add.vue 新增页面

5.png

  1. <template>
  2.   <div>
  3.     <MyHeader>添加页</MyHeader>
  4.     <div class="content container">
  5.       <ul>
  6.         <li>
  7.           <label>书名</label>
  8.           <input type="text" v-model="book.bookName">
  9.         </li>
  10.         <li>
  11.           <label>信息</label>
  12.           <input type="text" v-model="book.bookInfo">
  13.         </li>
  14.         <li>
  15.           <label>价格</label>
  16.           <input type="text" v-model="book.bookPrice">
  17.         </li>
  18.         <li>
  19.           <label>封面</label>
  20.           <input type="text" v-model="book.bookCover">
  21.         </li>
  22.       </ul>
  23.       <button @click="add" class="btn">新增</button>
  24.     </div>
  25.   </div>
  26. </template>
  28. <script>
  29. import MyHeader from '../components/base/MyHeader.vue'
  30. import { addBook } from '../api/add.js'
  32. export default {
  33.   name: 'Add',
  34.   data () {
  35.     return {
  36.       book: {}
  37.     }
  38.   },
  39.   methods: {
  40.     async add () {
  41.       await addBook(this.book)
  42.       this.$router.push('/list')
  43.     }
  44.   },
  45.   components: {
  46.     MyHeader
  47.   }
  48. }
  49. </script>
  51. <style scoped lang="less">
  52.   .container {
  53.     width: 100%;
  54.     padding: 20px;
  55.     position: fixed;
  56.     top: 40px;
  57.     left: 0;
  58.     right: 0;
  59.     bottom: 50px;
  60.     height: 100%;
  61.     z-index: 10;
  63.     li {
  64.       height: 100px;
  66.       label {
  67.         display: block;
  68.         font-size: 25px;
  69.         font-weight: bold;
  70.         margin-bottom: 10px;
  71.       }
  73.       input {
  74.         display: block;
  75.         width: 300px;
  76.         height: 40px;
  77.         padding-left: 10px;
  78.         margin-left: 5px;
  79.       }
  80.     }
  81.     button {
  82.       width: 100px;
  83.       height: 40px;
  84.       display: block;
  85.       text-align: center;
  86.       line-height: 40px;
  87.       background: red;
  88.       color: #fff;
  89.       font-size: 20px;
  90.       border: none;
  91.       border-radius: 5px;
  92.     }
  93.   }
  94. </style>

六、服务端代码

  1. let express = require('express');
  2. let bodyParser = require('body-parser');
  3. let fs = require('fs');
  5. let slides = require('./database/sliders');
  6. let bookData = './database/book.json';
  7. let collectData = './database/collect.json';
  8. let jdb = (dir) => JSON.parse(fs.readFileSync(dir, 'utf8'));
  11. let app = express();
  13. app.use(express.static(__dirname + '/static'));
  14. app.use(bodyParser.json());
  16. // 首页
  17. app.get('/api/sliders', (req, res) => {
  18.     res.send(slides);
  19. });
  21. // 获取热门图书
  22. app.get('/api/hot', (req, res) => {
  23.     // 从数组中最后四个
  24.     let con = jdb(bookData, 'utf8');
  25.     let data = con.slice(-4);
  26.     res.send(data);
  27. });
  30. // 获取所有图书
  31. app.get('/api/books', (req, res) => {
  32.     let con = jdb(bookData);
  33.     res.send(con);
  34. });
  36. app.get('/api/collect', (req, res) => {
  37.     let con = jdb(collectData);
  38.     res.send(con)
  39. });
  42. // 删除书
  43. app.get('/api/delete', (req, res) => {
  44.     let { id } = req.query;
  45.     let con = jdb(bookData);
  46.     con = con.filter(item => +item.bookId !== +id);
  47.     fs.writeFileSync(bookData, JSON.stringify(con), 'utf8');
  48.     res.send({
  49.         code: 0,
  50.         data: null,
  51.         msg: 'ok'
  52.     });
  53. });
  55. // 获取指定的id的图书
  56. app.get('/api/getOne', (req, res) => {
  57.     let { id } = req.query;
  59.     let con = jdb(bookData);
  60.     let byId = con.find(item => +item.bookId === +id);
  61.     if (byId) {
  62.         res.send(byId)
  63.     } else {
  64.         res.send({
  65.             code: 1,
  66.             data: null,
  67.             msg: 'id不存在'
  68.         })
  69.     }
  70. });
  72. // 修改图书信息
  74. app.post('/api/update', (req, res) => {
  75.     let { bookId }= req.body;
  76.     let con = jdb(bookData);
  77.     let index = con.findIndex(item => +item.bookId === +bookId);
  78.     con[index] = req.body;
  80.     console.log(con[index]);
  81.     fs.writeFileSync(bookData, JSON.stringify(con), 'utf8');
  82.     res.send({
  83.         code: 0,
  84.         data: null,
  85.         msg: 'ok'
  86.     });
  88. });
  90. // 新增
  91. app.post('/api/add', (req, res) => {
  92.     let con = jdb(bookData);
  93.     let data = req.body;
  94.     data.bookId = con.length ? +con[con.length - 1].bookId + 1 : 1;
  95.     con.push(data);
  96.     fs.writeFileSync(bookData, JSON.stringify(con), 'utf8');
  97.     res.send({
  98.         code: 0,
  99.         data: null,
  100.         msg: 'ok'
  101.     })
  102. });
  104. // 收藏
  105. app.post('/api/collect', (req, res) => {
  106.     let con = jdb(collectData);
  107.     let data = req.body;
  108.     con.push(data);
  109.     fs.writeFileSync(collectData, JSON.stringify(con), 'utf8');
  110.     res.send({
  111.         code: 0,
  112.         data: null,
  113.         msg: 'ok'
  114.     })
  115. });
  117. app.get('/api/rmCollect', (req, res) => {
  118.     let con = jdb(collectData);
  119.     let { id } = req.query;
  120.     con = con.filter(item => +item.bookId !== +id);
  121.     fs.writeFileSync(collectData, JSON.stringify(con), 'utf8');
  122.     res.send({
  123.         code: 0,
  124.         data: null,
  125.         msg: 'ok'
  126.     })
  127. });
  129. app.listen(8090, () => console.log('port 8000 is on'));

七、vue.config.js

  1. module.exports = {
  2.   outputDir: '../book-server/static',
  3.   devServer: {
  4.     open: true,
  5.     proxy: {
  6.       '/api': {
  7.         target: 'http://localhost:8090',
  8.         changeOrigin: true,
  9.         secure: false
  10.       }
  11.     }
  12.   }
  13. };

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】