SpringBoot仿制极简图床练习--前端

前后端分离开发，此文章为仿制极简图床的前端代码，不足之处，行内样式未抽离，待修正。

目录结构

image.png

• Album.vue

<template>
    <div>
      <main role="main">
        <div style="height: 46px;background: #101010">
          <div class="d-flex ">
            <a href="#" class="navbar-brand d-flex align-items-center">
              <b-navbar-brand href="#" style="color: white;margin-left: 16px;font-size: 18px;">极简图床</b-navbar-brand>
            </a>
            <a class="navbar-brand d-flex align-items-center" style="font-size: 15px;margin-left: 14px;color: gray">首页</a>
            <a class="navbar-brand d-flex align-items-center"
               style="font-size: 15px;margin-left: 14px;color: white">我的上传</a>
            <a class="navbar-brand d-flex align-items-center"
               style="font-size: 15px;margin-left: 14px;color: gray">Chrome插件</a>
            <div class="navbar-brand d-flex align-items-center" style="margin-left: 820px">
              <img src="http://p88kzenjw.bkt.clouddn.com/data.png" style="width:17px;height: 16px; ">
              <a class="navbar-brand d-flex align-items-center" style="font-size: 15px;margin-left: 14px;color: lightgrey">七牛云</a>
              <a class="navbar-brand d-flex align-items-center" style="font-size: 14px;margin-left: 14px;color: gray">1156939681@qq.com</a>
              <img src="http://p88kzenjw.bkt.clouddn.com/set.png" style="width: 17px;height: 16px">
            </div>
          </div>


          <div class="navbar-brand d-flex align-items-center" style="background:white;height: 52px;padding-left: 190px;">
            <div class="navbar-brand d-flex align-items-center">
              <img src="http://p88kzenjw.bkt.clouddn.com/left_arrow.png" style="width: 13px;height: 12px">
              <a style="font-size: 13px;margin-left: 4px;color: gray">返回</a>
            </div>
            <div class="navbar-brand d-flex align-items-center">
              <img src="http://p88kzenjw.bkt.clouddn.com/shangchuan.png" style="width: 18px;height: 18px">
              <a style="font-size: 13px;margin-left: 4px;color: gray">上传</a>
            </div>
            <div class="navbar-brand d-flex align-items-center">
              <a style="font-size: 13px;margin-left: 4px;color: gray">操作</a>
              <img src="http://p88kzenjw.bkt.clouddn.com/next.png" style="width: 14px;height: 14px;margin-left: 4px;margin-top: 2px;">

            </div>
          </div>
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4" v-for="album in albums" :key="album.id">
                <div class="card mb-4 box-shadow">
                  <img class="card-img-top" :src="album.albumCover"/>
                  <div class="card-body">
                    <p class="card-text">{{album.albumTitle}}</p >
                    <div class="d-flex justify-content-between align-items-center">
                      <div class="btn-group">
                        <!--<button type="button" class="btn btn-sm btn-outline-secondary">查看</button>-->
                        <button type="button" class="btn btn-sm btn-outline-secondary"> <router-link :to="{ path:'/Picture',query:{id:album.id}}">查看</router-link></button>
                      </div>
                      <small class="text-muted">{{album.pictureList.length}}</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </main>
    </div>
</template>

<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'jquery/dist/jquery.min'
  import 'bootstrap/dist/js/bootstrap.min'

    export default {
      name: "Album",
      data: () => {
        return{
          albums : []
        }
      },
      created(){
        this.$http
          .get('http://localhost:8080/album/all')
          .then((res) => {
            this.albums = res.data;
          })
      }
    }
</script>

<style scoped>

</style>

• picture.vue

<template>
  <div>
    <div style="height: 46px;background: #101010">
      <div class="d-flex ">
        <a href="#" class="navbar-brand d-flex align-items-center">
          <b-navbar-brand href="#" style="color: white;margin-left: 16px;font-size: 18px;">极简图床</b-navbar-brand>
        </a>
        <a class="navbar-brand d-flex align-items-center" style="font-size: 15px;margin-left: 14px;color: gray">首页</a>
        <a class="navbar-brand d-flex align-items-center"
           style="font-size: 15px;margin-left: 14px;color: white">我的上传</a>
        <a class="navbar-brand d-flex align-items-center"
           style="font-size: 15px;margin-left: 14px;color: gray">Chrome插件</a>
        <div class="navbar-brand d-flex align-items-center" style="margin-left: 820px">
          <img src="http://p88kzenjw.bkt.clouddn.com/data.png" style="width:17px;height: 16px; ">
          <a class="navbar-brand d-flex align-items-center" style="font-size: 15px;margin-left: 14px;color: lightgrey">七牛云</a>
          <a class="navbar-brand d-flex align-items-center" style="font-size: 14px;margin-left: 14px;color: gray">1156939681@qq.com</a>
          <img src="http://p88kzenjw.bkt.clouddn.com/set.png" style="width: 17px;height: 16px">
        </div>
      </div>
    </div>


      <div class="navbar-brand d-flex align-items-center" style="background:white;height: 52px;padding-left: 190px;">
        <div class="navbar-brand d-flex align-items-center">
          <img src="http://p88kzenjw.bkt.clouddn.com/left_arrow.png" style="width: 13px;height: 12px">
          <a style="font-size: 13px;margin-left: 4px;color: gray">返回</a>
        </div>
        <div class="navbar-brand d-flex align-items-center">
          <img src="http://p88kzenjw.bkt.clouddn.com/shangchuan.png" style="width: 18px;height: 18px">
          <a style="font-size: 13px;margin-left: 4px;color: gray">上传</a>
        </div>
        <div class="navbar-brand d-flex align-items-center">
          <a style="font-size: 13px;margin-left: 4px;color: gray">操作</a>
          <img src="http://p88kzenjw.bkt.clouddn.com/next.png" style="width: 14px;height: 14px;margin-left: 4px;margin-top: 2px;">
        </div>
      </div>
    <main role="main">
      <section class="jumbotron text-center">
        <div class="container">
          <h1 class="jumbotron-heading">{{introduce.albumTitle}}</h1>
          <p class="lead text-muted">{{introduce.albumDescription}}</p >
          <p>
            <a href=" " class="btn btn-primary my-2">查看更多</a>
          </p >
        </div>
      </section>
      <div class="album py-5 bg-light">
        <div class="container">
          <div class="row">
            <div class="col-md-3" v-for="picture in pictures" :key="picture.id">
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" :src="picture.pictureLink"/>
                <div class="card-body" style="padding-bottom: 0px;padding-top: 0px;display: flex;margin-right: -20px">
                  <button type="button" class="btn btn-default btn-lg" disabled="disabled"
                          style="font-size: 12px ;width: 160px;margin-left:-20px;padding-top: 10px;background:white;color:black;border:1px solid lightgrey;overflow:hidden;
                          white-space:nowrap; text-overflow:ellipsis">{{picture.pictureLink}}</button>
                  <div style="border: 1px solid lightgrey;width: 40px;height: 40px;" >
                    <img src="https://olx7tg2rm.qnssl.com/18012720.529c81b/assets/images/clippy.svg" style="width: 14px;height: 14px;margin-left: 10px;margin-top: 8px;">
                  </div>

                  <div style="border: 1px solid lightgrey;width: 40px;height: 40px;" >
                    <img src="http://peojfj6k8.bkt.clouddn.com/delete1.png" style="width: 12px;height: 12px;margin-left: 10px;margin-top: 8px;">
                  </div>

                  <div style="border: 1px solid lightgrey;width: 40px;height: 40px;" >
                    <img src="http://peojfj6k8.bkt.clouddn.com/huojian.png" style="width: 14px;height: 14px;margin-left: 10px;margin-top: 8px;">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
   </div>

</template>

<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'jquery/dist/jquery.min'
  import 'bootstrap/dist/js/bootstrap.min'

    export default {
        name: "Picture.vue",

      data: () => {
        return{
          pictures : [],
          introduce : [] ,
        }
      },
      created(){
        this.id = this.$route.query.id;
        this.$http
          .get('http://localhost:8080/album/' + this.id)
          .then((res) => {
            this.pictures = res.data.pictureList;
            this.introduce = res.data;
          })
      }
    }
</script>

<style scoped>

</style>

• index.js

import Vue from 'vue'
import Router from 'vue-router'
import Album from '@/components/Album'
import Picture from '@/components/Picture'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Album',
      component: Album,
    },
    {
      path: '/:id',
      name: 'Picture',
      component:Picture
    }
 
  ]
})

• main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import jquery from 'jquery'
import bootstrap from 'bootstrap-vue'
import axios from 'axios'


Vue.config.productionTip = false
Vue.use(jquery)
Vue.use(bootstrap)
Vue.prototype.$http= axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "”gongjiancool <13984767@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0-rc.11",
    "jquery": "^3.3.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

实现效果

相册页面.png

点击首页相册的详情可以进入相册内部查看完整的相册信息

详情页.png