<石家庄学习经历> - 黑马程序员技术交流社区

[Java] 纯文本查看 复制代码

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')



const env = process.env.NODE_ENV === 'testing'

  ? require('../config/test.env')

  : require('../config/prod.env')



const webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].[chunkhash].js'),

    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

  },

  plugins: [

    // http://vuejs.github.io/vue-loader/en/workflow/production.html

    new webpack.DefinePlugin({

      'process.env': env

    }),

    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

    new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false

      },

      sourceMap: config.build.productionSourceMap,

      parallel: true

    }),

    // extract css into its own file

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].[contenthash].css'),

      // set the following option to `true` if you want to extract CSS from

      // codesplit chunks into this main css file as well.

      // This will result in *all* of your app's CSS being loaded upfront.

      allChunks: false,

    }),

    // Compress extracted CSS. We are using this plugin so that possible

    // duplicated CSS from different components can be deduped.

    new OptimizeCSSPlugin({

      cssProcessorOptions: config.build.productionSourceMap

      ? { safe: true, map: { inline: false } }

      : { safe: true }

    }),

    // generate dist index.html with correct asset hash for caching.

    // you can customize output by editing /index.html

    // see https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: process.env.NODE_ENV === 'testing'

        ? 'index.html'

        : config.build.index,

      template: 'index.html',

      inject: true,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

        // more options:

        // https://github.com/kangax/html-minifier#options-quick-reference

      },

      // necessary to consistently work with multiple chunks via CommonsChunkPlugin

      chunksSortMode: 'dependency'

    }),

    // keep module.id stable when vender modules does not change

    new webpack.HashedModuleIdsPlugin(),

    // enable scope hoisting

    new webpack.optimize.ModuleConcatenationPlugin(),

    // split vendor js into its own file

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      minChunks: function (module) {

        // any required modules inside node_modules are extracted to vendor

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        )

      }

    }),

    // extract webpack runtime and module manifest to its own file in order to

    // prevent vendor hash from being updated whenever app bundle is updated

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    // This instance extracts shared chunks from code splitted chunks and bundles them

    // in a separate chunk, similar to the vendor chunk

    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk

    new webpack.optimize.CommonsChunkPlugin({

      name: 'app',

      async: 'vendor-async',

      children: true,

      minChunks: 3

    }),



    // copy custom static assets

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../static'),

        to: config.build.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

})



if (config.build.productionGzip) {

  const CompressionWebpackPlugin = require('compression-webpack-plugin')



  webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

      asset: '[path].gz[query]',

      algorithm: 'gzip',

      test: new RegExp(

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240,

      minRatio: 0.8

    })

  )

}



if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  webpackConfig.plugins.push(new BundleAnalyzerPlugin())

}



module.exports = webpackConfig

[Java] 纯文本查看 复制代码

<template>

  <div>

      <!--查询表单-->

      <el-form :model="params">

        <el-select v-model="params.siteId" placeholder="请选择站点">

          <el-option

            v-for="item in siteList"

            :key="item.siteId"

            :label="item.siteName"

            :value="item.siteId">

          </el-option>

        </el-select>

        <el-button type="primary" v-on:click="query" size="small">查询</el-button>

        <router-link class="mui-tab-item" :to="{path:'/cms/page/add/',query:{

          page: this.params.page,

          siteId: this.params.siteId}}">

          <el-button  type="primary" size="small">新增页面</el-button>

        </router-link>

      </el-form>

      <!--列表-->

      <el-table :data="list" highlight-current-row v-loading="listLoading" style="width: 100%;">

        <el-table-column type="index" width="60">

        </el-table-column>

        <el-table-column prop="pageName" label="页面名称" width="120">

        </el-table-column>

        <el-table-column prop="pageAliase" label="别名" width="120">

        </el-table-column>

        <el-table-column prop="pageType" label="类型（静态、动态）" width="150">

        </el-table-column>

        <el-table-column prop="pageWebPath" label="访问路径" width="250">

        </el-table-column>

        <el-table-column prop="pagePhysicalPath" label="物理路径" width="250">

        </el-table-column>

        <el-table-column prop="pageCreateTime" label="创建时间" width="180" :formatter="formatCreatetime">

        </el-table-column>

        <el-table-column label="编辑" width="80">

          <template slot-scope="scope">



            <el-button

              size="small"type="primary"

              @click="edit(scope.row.pageId)">编辑

            </el-button>

          </template>

        </el-table-column>

        <el-table-column label="删除" width="80">

          <template slot-scope="scope">



            <el-button

              size="mini"

              type="danger"

              @click="del(scope.$index, scope.row)">删除

            </el-button>

          </template>

        </el-table-column>

        <el-table-column label="静态化" width="80">

          <template slot-scope="scope">

            <el-button

              size="small" type="primary" plain @click="generateHtml(scope.row.pageId)">静态化

            </el-button>

          </template>

        </el-table-column>

        <el-table-column label="发布" width="80">

          <template slot-scope="scope">

            <el-button

              size="small" type="primary" plain @click="postPage(scope.row.pageId)">发布

            </el-button>

          </template>

        </el-table-column>

      </el-table>

    <!--分页-->

    <el-col :span="24" class="toolbar">



      <el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="this.params.size"

                     :total="total" :current-page="this.params.page"

                     style="float:right;">

      </el-pagination>

    </el-col>

  </div>

</template>

<script>

  import * as cmsApi from '../api/cms'

  import utilApi from '@/common/utils';

  export default{

    data(){

      return {

        params:{

          page:1,//页码

          size:2,//每页显示个数

          siteId:''//站点id

        },

        listLoading:false,

        list:[],

        total:0,



        siteList:[]//站点列表

      }

    },

    methods:{

      formatCreatetime(row, column){

        var createTime = new Date(row.pageCreateTime);

        if (createTime) {

          return utilApi.formatDate(createTime, 'yyyy-MM-dd hh:mm:ss');

        }

      },

      generateHtml (id) {

//        console.log(id)

        this.$router.push({ path: '/cms/page/html/'+id, query:{

          page: this.params.page,

          siteId: this.params.siteId}})

      },

      postPage (id) {

        this.$confirm('确认发布该页面吗?', '提示', {

        }).then(() => {

          this.listLoading = true;

          cmsApi.page_postPage(id).then((res) => {

            if(res.success){

              console.log('发布页面id='+id);

              this.listLoading = false;

              this.$message.success('发布成功，请稍后查看结果');

            }else{

              this.$message.error('发布失败');

            }

          });

        }).catch(() => {



        });

      },

      edit(pageId){

        this.$router.push({ path: '/cms/page/edit/'+pageId,query:{

          page: this.params.page,

          siteId: this.params.siteId}})

      },

      //删除

      del (index, row) {

        this.$confirm('确认删除该记录吗?', '提示', {

          type: 'warning'

        }).then(() => {

          this.listLoading = true;

          let pageId = row.pageId;

          cmsApi.page_del(pageId).then((res) => {

            this.listLoading = false;

            if(res.success){

              this.$message.success("删除成功")

              this.query();

            }else{

              this.$message.error('删除失败');

            }



          });

        }).catch(() => {



        });

      },

      changePage(page){

        this.params.page = page;

        this.query()

      },

      query(){

        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{

          console.log(res)

          this.total = res.queryResult.total

          this.list = res.queryResult.list

        })

      }

    },

    created(){

        //存储 请求参数

      /*if(this.$route.query.page){

       this.params.page = Number.parseInt(this.$route.query.page)

       }*/

      this.params.page = Number.parseInt(this.$route.query.page||1);

      this.params.siteId = this.$route.query.siteId||'';

    },

    mounted() {

      //默认查询页面

      this.query()

      //初始化站点列表

      this.siteList = [

        {

          siteId:'5a751fab6abb5044e0d19ea1',

          siteName:'门户主站'

        },

        {

          siteId:'102',

          siteName:'测试站'

        }

      ]

    }

  }

</script>

<style>



</style>

[Java] 纯文本查看 复制代码

<template>

  <el-row class="container">

    <p-head></p-head>

    <el-col :span="24" class="main">

      <aside :class="collapsed?'menu-collapsed':'menu-expanded'">

        <!--导航菜单-->

        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose"

                 @select="handleselect"

                 unique-opened router v-show="!collapsed" background-color="#EFEFF4">

          <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">

            <el-submenu :index="index+''" v-if="!item.leaf">

              <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>

              <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">

                {{child.name}}

              </el-menu-item>

            </el-submenu>

            <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i

              :class="item.iconCls"></i>{{item.children[0].name}}

            </el-menu-item>

          </template>

        </el-menu>

        <!--导航菜单-折叠后-->

        <ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">

          <li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">

            <template v-if="!item.leaf">

              <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)"

                   @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>

              <ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)"

                  @mouseout="showMenu(index,false)">

                <li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item"

                    style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''"

                    @click="$menu.push(child.path)">{{child.name}}

                </li>

              </ul>

            </template>

            <template v-else>

          <li class="el-submenu">

            <div class="el-submenu__title el-menu-item"

                 style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;"

                 :class="$route.path==item.children[0].path?'is-active':''" @click="$menu.push(item.children[0].path)">

              <i :class="item.iconCls"></i></div>

          </li>

</template>

</li>

</ul>

</aside>

<section class="content-container">

  <div class="grid-content bg-purple-light">

    <el-col :span="24" class="breadcrumb-container">

      <strong class="title">{{$route.name}}</strong>

      <el-breadcrumb separator="/" class="breadcrumb-inner">



      </el-breadcrumb>

    </el-col>

    <el-col :span="24" class="content-wrapper">

      <transition name="fade" mode="out-in">

        <router-view></router-view>

      </transition>

    </el-col>

  </div>

</section>

</el-col>

</el-row>

</template>



<script>

  import PHead from '@/base/components/head.vue';

  import utilApi from '../../../common/utils';

  export default {

    components:{

      PHead

    },

    data() {

      return {

        collapsed: false,

        sysUserName: '',

        sysUserAvatar: '/static/images/small.jpg',

        form: {

          name: '',

          region: '',

          date1: '',

          date2: '',

          delivery: false,

          type: [],

          resource: '',

          desc: ''

        }

      }

    },

    methods: {

      onSubmit() {

        console.log('submit!');

      },

      handleopen() {

        //console.log('handleopen');

      },

      handleclose() {

        //console.log('handleclose');

      },

      handleselect: function (a, b) {

      },

      //折叠导航栏

      collapse: function () {

        this.collapsed = !this.collapsed;

      },

      showMenu(i, status){

        this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';

      }



    },

    created() {

console.log(this.$router.options.routes)

    }

  }



</script>



<style scoped lang="scss">

  @import '~scss_vars';



  .container {

    position: absolute;

    top: 0px;

    bottom: 0px;

    width: 100%;

    .header {

      height: 60px;

      line-height: 60px;

      background: $color-primary;

      color: #fff;

      .userinfo {

        text-align: right;

        padding-right: 35px;

        float: right;

        .userinfo-inner {

          cursor: pointer;

          color: #fff;

          img {

            width: 40px;

            height: 40px;

            border-radius: 20px;

            margin: 10px 0px 10px 10px;

            float: right;

          }

        }

      }

      .logo {

        //width:230px;

        height: 60px;

        font-size: 22px;

        padding-left: 20px;

        padding-right: 20px;

        border-color: rgba(238, 241, 146, 0.3);

        border-right-width: 1px;

        border-right-style: solid;

        img {

          width: 40px;

          float: left;

          margin: 10px 10px 10px 18px;

        }

        .txt {

          color: #fff;

        }

      }

      .logo-width {

        width: 250px;

      }

      .logo-collapse-width {

        width: 60px

      }

      .tools {

        padding: 0px 23px;

        width: 14px;

        height: 60px;

        line-height: 60px;

        cursor: pointer;

      }

    }

    .main {

      display: flex;

      // background: #324057;

      position: absolute;

      top: 60px;

      bottom: 0px;

      overflow: hidden;

      aside {

        flex: 0 0 230px;

        width: 230px;

        // position: absolute;

        // top: 0px;

        // bottom: 0px;

        .el-menu {

          height: 100%;

        }

        .collapsed {

          width: 60px;

          .item {

            position: relative;

          }

          .submenu {

            position: absolute;

            top: 0px;

            left: 60px;

            z-index: 99999;

            height: auto;

            display: none;

          }



        }

      }

      .menu-collapsed {

        flex: 0 0 60px;

        width: 60px;

      }

      .menu-expanded {

        flex: 0 0 230px;

        width: 230px;

      }

      .content-container {

        background: #fff;

        flex: 1;

        // position: absolute;

        // right: 0px;

        // top: 0px;

        // bottom: 0px;

        // left: 230px;

        overflow-y: scroll;

        padding: 20px;

        .breadcrumb-container {

          //margin-bottom: 15px;

          .title {

            width: 200px;

            float: left;

            color: #475669;

          }

          .breadcrumb-inner {

            float: right;

          }

        }

        .content-wrapper {

          background-color: #fff;

          box-sizing: border-box;

        }

      }

    }

  }

</style>