第一版本

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js

.eslintrc.js

@@ -0,0 +1,31 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'semi': ['error', 'always'],
+    'space-before-function-paren': 'off'
+  }
+}

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

.project

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>houtaixiangmu</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1539239485050</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

README.md

@@ -0,0 +1,21 @@
+# 信用修复平台
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,106 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+const webpack = require('webpack')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app:['babel-polyfill','./src/main.js']
+  },
+  externals: {
+    vue: 'Vue',
+    axios: 'axios',
+    'vue-router': 'VueRouter',
+    'element-ui': 'ELEMENT',
+    // "QPlayer": "QPlayer"
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery"
+    })
+  ],
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'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 UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const 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
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // 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: 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 vendor 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 (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

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,161 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target: "http://192.168.1.199:18083/",
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        },
+        "secure": false,
+
+      }
+    },
+
+    // Various Dev Server settings
+    // host: "0.0.0.0", // can be overwritten by process.env.HOST
+    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}
+// 'use strict'
+// // Template version: 1.3.1
+// // see http://vuejs-templates.github.io/webpack for documentation.
+
+// const path = require('path')
+
+// module.exports = {
+//   dev: {
+
+//     // Paths
+//     assetsSubDirectory: 'static',
+//     assetsPublicPath: '/',
+//     proxyTable: {},
+
+//     // Various Dev Server settings
+//     host: 'localhost', // can be overwritten by process.env.HOST
+//     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+//     autoOpenBrowser: false,
+//     errorOverlay: true,
+//     notifyOnErrors: true,
+//     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+//     // Use Eslint Loader?
+//     // If true, your code will be linted during bundling and
+//     // linting errors and warnings will be shown in the console.
+//     useEslint: true,
+//     // If true, eslint errors and warnings will also be shown in the error overlay
+//     // in the browser.
+//     showEslintErrorsInOverlay: false,
+
+//     /**
+//      * Source Maps
+//      */
+
+//     // https://webpack.js.org/configuration/devtool/#development
+//     devtool: 'cheap-module-eval-source-map',
+
+//     // If you have problems debugging vue-files in devtools,
+//     // set this to false - it *may* help
+//     // https://vue-loader.vuejs.org/en/options.html#cachebusting
+//     cacheBusting: true,
+
+//     cssSourceMap: true
+//   },
+
+//   build: {
+//     // Template for index.html
+//     index: path.resolve(__dirname, '../dist/index.html'),
+
+//     // Paths
+//     assetsRoot: path.resolve(__dirname, '../dist'),
+//     assetsSubDirectory: 'static',
+//     assetsPublicPath: '/',
+
+//     /**
+//      * Source Maps
+//      */
+
+//     productionSourceMap: true,
+//     // https://webpack.js.org/configuration/devtool/#production
+//     devtool: '#source-map',
+
+//     // Gzip off by default as many popular static hosts such as
+//     // Surge or Netlify already gzip all static assets for you.
+//     // Before setting to `true`, make sure to:
+//     // npm install --save-dev compression-webpack-plugin
+//     productionGzip: false,
+//     productionGzipExtensions: ['js', 'css'],
+
+//     // Run the build command with an extra argument to
+//     // View the bundle analyzer report after build finishes:
+//     // `npm run build --report`
+//     // Set to `true` or `false` to always turn it on or off
+//     bundleAnalyzerReport: process.env.npm_config_report
+//   }
+// }

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
+    <!-- <meta content="width=device-width,user-scalable=no" name="viewport"> -->
+    <title>医疗后台</title>
+    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
+    <style>
+      #app {
+        max-width: 1500px;
+        min-width: 300px;
+        margin: 0 auto;
+      }
+    </style>
+
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <!-- <script src="https://sdk-release.qnsdk.com/qiniu-web-player-1.2.0.js"></script> -->
+    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
+    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
+    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
+    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,80 @@
+{
+  "name": "houtaiyiliaoguanli",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "xiaomin <xiaomin@163.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "lintfix": "eslint --ext .js,.vue src --fix",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "element-ui": "^2.8.2",
+    "moment": "^2.24.0",
+    "quill": "^1.3.7",
+    "vue": "^2.5.2",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.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",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.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"
+  ]
+}

src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+};
+</script>
+
+<style>
+  #app{
+    height: 100%;
+  }
+</style>

src/assets/css/index.css

@@ -0,0 +1,30 @@
+body,html {
+  background-color: #fff;
+  height: 100%;
+  min-width: 1250px;
+  padding: 0;
+  margin: 0 auto;
+  width: 100%;
+}
+h1,h2,h3,h4,h5,h6,p,ul,li {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+}
+ul li{
+  list-style: none;
+  box-sizing:border-box;
+}
+div {
+   box-sizing:border-box;
+}
+i {
+  font-style:normal;
+}
+
+
+
+
+

src/components/MyBreadcrumb.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-breadcrumb separator-class="el-icon-arrow-right">
+    <el-breadcrumb-item >您的位置</el-breadcrumb-item>
+    <el-breadcrumb-item> {{level1}} </el-breadcrumb-item>
+    <el-breadcrumb-item> {{level2}} </el-breadcrumb-item>
+    <el-breadcrumb-item v-if="flag"> {{level3}} </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script type="text/javascript">
+export default{
+  name: 'MyBreadcrumb',
+  props: ['level1', 'level2', 'level3','flag'],
+}
+</script>
+
+<style type="text/css">
+
+.el-breadcrumb__item:last-child .el-breadcrumb__inner {
+  color: #0e90ff;
+}
+</style>
+

src/main.js

@@ -0,0 +1,44 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue';
+import App from './App';
+import router from './router';
+import ElementUI from 'element-ui';
+import moment from 'moment';
+import 'element-ui/lib/theme-chalk/index.css';
+import '@/assets/css/index.css';
+import '@/assets/css/font-awesome.min.css';
+// import axios from 'axios';
+import myaxios from '@/plugins/MyAxios';
+import MyBreadcrumb from '@/components/MyBreadcrumb';
+import 'babel-polyfill';
+// import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
+// import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
+// //import 'quill/dist/quill.core.css'
+// //import 'quill/dist/quill.bubble.css'
+// import * as Quill from 'quill';
+import VueQuillEditor from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+Vue.use(VueQuillEditor)
+
+Vue.use(ElementUI);
+Vue.use(myaxios);
+Vue.component(MyBreadcrumb.name, MyBreadcrumb);
+
+Vue.filter('fmtDate', (value, formatString) => {
+  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
+return moment(value).format(formatString);
+});
+
+Vue.config.productionTip = false;
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+});

src/plugins/MyAxios.js

@@ -0,0 +1,44 @@
+import axios from 'axios';
+// import { MessageBox } from 'element-ui';
+const MyAxios = {};
+MyAxios.install = function(Vue) {
+  axios.defaults.baseURL = '/api';
+  // axios.defaults.baseURL = 'http://222.35.31.66:18080/';
+  // axios.defaults.headers.common['app_id'] = 'RGZYQD'
+  axios.interceptors.request.use(function (config) {
+    // Do something before request is sent
+    if(config.url.toLocaleLowerCase() !== 'login') {
+
+      const token = sessionStorage.getItem('token');
+
+      config.headers.Authorization = 'Bearer ' + token;
+
+      // config.headers['Basic'] = 'dGVzdDoxMjM0NTY='
+    }
+    return config;
+  }, function (error) {
+    // Do something with request error
+    return Promise.reject(error);
+  });
+
+  // Add a response interceptor
+  axios.interceptors.response.use(function (response) {
+    // Do something with response data
+    return response;
+  }, function (error) {
+    // Do something with response error
+    if(error.response.status == 403) {
+      // MessageBox.alert('登录信息超时，请重新登录！','登录超时', {
+      //   confirmButtonText: '跳转登录页面',
+      //   callback: action => {
+          // window.location.href = '/errorone';
+      //   }
+      // })
+    }
+    return Promise.reject(error);
+  });
+
+  Vue.prototype.$http = axios;
+}
+
+export default MyAxios;

src/quill-config.js

@@ -0,0 +1,30 @@
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+  ['blockquote', 'code-block'],
+
+  [{'header': 1}, {'header': 2}],               // custom button values
+  [{'list': 'ordered'}, {'list': 'bullet'}],
+  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
+  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
+  [{'direction': 'rtl'}],                         // text direction
+
+  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
+  [{'header': [1, 2, 3, 4, 5, 6, false]}],
+
+  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
+  [{'font': []}],
+  [{'align': []}],
+  ['link', 'image', 'video'],
+  ['clean']                                         // remove formatting button
+]
+
+export default {
+    placeholder: '',
+    theme: 'snow',  // 主题
+    modules: {
+        toolbar: {
+            container: toolbarOptions,  // 工具栏选项
+            // handlers: handlers  // 事件重写
+        }
+    }
+};

src/router/index.js

@@ -0,0 +1,69 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+const Login = () => import('@/views/Login');
+const Home = () => import('@/views/Home');
+// 首页
+const Main = () => import('@/views/main/main');
+//导航管理部分
+const Navigation = () => import('@/views/navigation/navigation');
+//图片管理部分
+const Photo = () => import('@/views/photo/photo');
+//新闻管理部分
+const Journalism = () => import('@/views/journalism/journalism');
+//友情链接管理部分
+const Friendship = () => import('@/views/friendship/friendship');
+
+const Zhanshi = () => import('@/views/zhanshi/zhanshi');
+
+import { Message } from 'element-ui';
+
+Vue.use(Router);
+
+const router = new Router({
+  routes: [
+    {name: 'Login', path: '/login', component: Login},
+    {name: 'Home',
+      path: '/',
+      component: Home,
+      redirect: '/main',
+      children:[
+        //首页
+        {name: 'Main', path: '/main',component: Main},
+        // 用户中心部分
+        {name: 'Navigation', path: '/navigation', component: Navigation},
+        //图片管理部分
+        {name: 'Photo', path: '/photo', component: Photo},
+        //新闻管理部分
+        {name: 'Journalism', path: '/journalism', component: Journalism},
+        //友情链接管理部分
+        {name: 'Friendship', path: '/friendship', component: Friendship},
+        {name: 'Zhanshi', path: '/zhanshi', component: Zhanshi},
+
+      ]
+    }
+  ]
+});
+
+router.beforeEach((to, from, next) => {
+  // console.log(to);
+  // console.log(from);
+  // next();
+  // 如果是登录的时候不判断token ，不是登录才判断token
+  // console.log(to);
+  if (to.name && to.name.toLocaleLowerCase() !== 'login') {
+    // 判断token
+    const token = sessionStorage.getItem('token');
+    if (!token) {
+      // 没有token,跳转到登录页面
+      // this.$router.push('/login')
+      router.push('/login');
+      // 提示
+      // this.$message.warning('请先登录');
+      Message.warning('请先登录');
+      return;
+    }
+  }
+  next();
+});
+
+export default router;

src/views/Home.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="home">
+    <el-container class="container">
+      <el-header class="header" style="height: 80px;">
+        <div>
+          <div class="logo">
+            <!-- <img src="../assets/image/logo.jpg"> -->
+            <h3>医疗后台管理</h3>
+          </div>
+
+          <div class="message">
+            <!-- <div class="theUser"><span class="el-icon-user-solid"></span>{{name}}</div> -->
+            <!-- <div class="theUser"><span class="el-icon-s-custom" style="font-size: 18px;"></span></div> -->
+            <div class="theUser" @click="Logout"><span class="el-icon-s-unfold"></span>退出登录</div>
+          </div>
+        </div>
+      </el-header>
+
+      <el-main class="main" style="">
+        <div style="overflow: hidden;">
+          <div class="leftNav">
+            <template>
+              <el-menu
+                :default-active="$route.path"
+                unique-opened
+                router
+                background-color="#64b8fb"
+                active-text-color="#ffd04b"
+                style="height: 100%">
+                <el-menu-item index="/main">
+                  <i class="el-icon-s-tools"></i>
+                  <span slot="title">首页</span>
+                </el-menu-item>
+                <el-submenu
+                  v-for="item in menus"
+                  :key="item.id"
+                  :index="item.id + ''">
+                  <template slot="title">
+                    <i class="el-icon-s-tools" style="font-size: 14px color: #fff;"></i>
+                    <span>{{ item.authName }}</span>
+                  </template>
+                  <el-menu-item
+                    v-for="item1 in item.children"
+                    :key="item1.id"
+                    :index="'/' + item1.path">
+                    <i class="el-icon-search" style="font-size: 14px color: #fff;"></i>
+                    {{ item1.authName }}
+                  </el-menu-item>
+                </el-submenu>
+              </el-menu>
+            </template>
+          </div>
+
+          <div class="rightNav">
+            <router-view></router-view>
+          </div>
+        </div>
+
+      </el-main>
+    </el-container>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menus: [
+          {
+          id:1,
+          authName:"导航管理",
+          children:[
+            {
+              id:1,
+              path:"navigation",
+              authName:"导航列表"
+            },
+
+          ]
+        },
+        {
+          id:2,
+          authName:"图片管理",
+          children:[
+            {
+              id:1,
+              path:"photo",
+              authName:"图片列表"
+            },
+          ]
+        },
+        {
+          id:3,
+          authName:"新闻管理",
+          children:[
+            {
+              id:1,
+              path:"journalism",
+              authName:"新闻列表"
+            }
+          ]
+        },
+        {
+          id:4,
+          authName:"友情链接管理",
+          children:[
+            {
+              id:1,
+              path:"friendship",
+              authName:"友情链接列表"
+            },
+          ]
+        },
+        {
+          id:6,
+          authName:"内容管理",
+          children:[
+            {
+              id:1,
+              path:"zhanshi",
+              authName:"内容列表"
+            },
+          ]
+        },
+
+      ],
+
+    };
+  },
+  components: {
+
+  },
+  created() {
+     // 判断是否登录，token
+    var token = sessionStorage.getItem('token');
+    if (!token) {
+      // 提示
+      this.$message.warning('请先登录');
+      // 没有token，跳转到登录页面
+      this.$router.push('/login');
+    }
+
+  },
+  mounted () {
+
+  },
+  methods: {
+    // 退出登录
+    Logout() {
+      // 提示退出成功
+      this.$message.success('退出成功');
+      // 1 清除token
+      sessionStorage.clear();
+      // 2 跳转到登录页面
+      this.$router.push('/login');
+    },
+
+  }
+};
+</script>
+
+<style>
+.home {
+  height: 100%;
+  width: 100%;
+}
+.home .container {
+  height: 100%;
+  background: -webkit-linear-gradient(top, #289dfa , #fff);
+  background: -o-linear-gradient(bottom, #289dfa , #fff);
+  background: -moz-linear-gradient(bottom, #289dfa, #fff);
+  background: linear-gradient(to bottom, #289dfa , #fff);
+}
+.home .header {
+  height: 130px;
+}
+.home .header > div {
+  overflow: hidden;
+}
+.home .header .logo {
+  float: left;
+  margin-top: 15px;
+  margin-left: 20px;
+}
+.home .header img {
+  height: 40px;
+  width: 40px;
+}
+.home .header h3 {
+  display: inline-block;
+  font-size: 30px;
+  color: #fff;
+  margin-left: 10px;
+}
+.home .header .message {
+  float: right;
+  margin-top: 24px;
+  margin-right: 35px;
+  background-color: #d3e7f9;
+  overflow: hidden;
+}
+.home .header .message .theUser {
+  float: left;
+  height: 40px;
+  line-height: 40px;
+  width: 100px;
+  font-size: 16px;
+  text-align: center;
+  cursor:pointer;
+}
+.home .main {
+  margin: 20px;
+  background-color: #fff;
+}
+.home .el-menu {
+  border: 0;
+}
+.home .el-submenu__title i{
+  color: #fff;
+  font-size: 16px;
+}
+.home .el-menu-item  {
+  color: #fff;
+  font-size: 16px;
+}
+.home .el-menu-item i{
+  color: #fff;
+  font-size: 16px;
+}
+.home .el-menu  span {
+  font-size: 16px;
+}
+.home .main .leftNav {
+  width: 18%;
+  float: left;
+}
+.home .main .rightNav {
+  margin-left: 2%;
+  width: 80%;
+  float: left;
+}
+.el-message  {
+  font-size: 35px !important;
+}
+.el-submenu__title {
+  color: #fff !important;
+}
+</style>
+
+

src/views/Login.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="login-wrap">
+    <div>
+      <h1>医疗后台管理</h1>
+    </div>
+    <div class="login">
+      <div class="record">
+        <span class="one">登录</span><span class="two">LOGIN</span>
+      </div>
+      <el-form
+        class="login-from"
+        label-position="top"
+        label-width="80px"
+        :model="fromDataone">
+        <el-form-item>
+          <el-input v-model="fromDataone.username" placeholder="输入用户名"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input @keyup.enter.native="handleLogin" type="password" v-model="fromDataone.password"  placeholder="输入密码"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleLogin" type="primary">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  data() {
+    return {
+      fromDataone: {
+        "username": '',
+        "password": '',
+      },
+      checked: false,
+    };
+  },
+  methods: {
+    async handleLogin () {
+      // 将数据转换为formData形式
+      const formData = new FormData();
+      formData.append('username', this.fromDataone.username);
+      formData.append('password', this.fromDataone.password);
+      const response = await this.$http.post(`login`, formData);
+      if (response.data.code === 200) {
+        this.$message.success('登录成功');
+        // 将tocken取到
+        const token = document.cookie;
+        // console.log(token)
+        // 将tocken保存到sessionStorage中
+        sessionStorage.setItem('token', response.data.responseData.token);
+
+        this.$router.push('/main');
+      } else {
+        this.$message.error('登录失败');
+      }
+    },
+  }
+};
+</script>
+
+<style>
+.login-wrap{
+  background-color: #f6f6f6;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.login-wrap h1 {
+  text-align: center;
+  /*color: #5885f7;*/
+  font-size: 70px;
+  margin-top: 80px;
+}
+.login-wrap .login{
+  width: 400px;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 35px;
+  margin: 50px auto;
+}
+.login-wrap .record {
+  font-size: 5px;
+  margin-bottom: 10px;
+}
+.login-wrap .record span:nth-child(1) {
+  /*color: #5885f7;*/
+  font-size: 25px;
+}
+.login-wrap .record span:nth-child(2) {
+  /*color: #b1bcc7;*/
+  font-size: 10px;
+  margin-left: 5px;
+}
+.login-wrap .el-form-item{
+  margin-bottom: 25px;
+}
+.login-wrap .code {
+  width: 70%;
+}
+.login-wrap .validation {
+  border: 1px solid #dddddd;
+  font-size: 6px;
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+  width: 28%;
+  text-align: center;
+  margin-left: 1px;
+  cursor: pointer;
+  color: #b1bcc7;
+}
+.login-wrap .el-button--primary {
+  width: 100%;
+  background: -webkit-linear-gradient(left, #000000 , #ffffff);
+  background: -o-linear-gradient(right, #000000 , #ffffff);
+  background: -moz-linear-gradient(right, #000000, #ffffff);
+  background: linear-gradient(to right, #000000 , #ffffff);
+ /* background-color: #5885f7;*/
+  border-color: #000000;
+}
+.el-message  {
+  font-size: 35px !important;
+}
+</style>
+
+
+

src/views/friendship/friendship.vue

@@ -0,0 +1,470 @@
+<template>
+  <div class="friendship">
+    <!-- 头部细节部分 -->
+      <div class="title">
+        <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-input  placeholder="用户名称" class="input-demo" v-model="username"></el-input>
+              <el-input  placeholder="公司名称" class="input-demo" v-model="company"></el-input>
+              <el-input  placeholder="appKey" class="input-demo" v-model="appKey"></el-input>
+            </div>
+          </el-col>
+        </el-row>
+
+         <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-button type="success" style="margin-left: 1%;" @click="queryLook">查询</el-button>
+              <el-button type="success" style="margin-left: 1%;" @click="addUserList = true">添加</el-button>
+            </div>
+          </el-col>
+        </el-row>
+
+      </div>
+    <!-- 头部细节部分结束 -->
+    <!-- 表格部分 -->
+      <template>
+        <el-table
+          v-loading="loading"
+          ref="multipleTable"
+          :data="usertable"
+          border
+          tooltip-effect="dark">
+          <el-table-column
+            label="链接名称"
+            prop="name"
+            show-overflow-tooltip>
+          </el-table-column>
+           <el-table-column
+            prop="url"
+            label="链接指向"
+            show-overflow-tooltip>
+          </el-table-column>
+           <el-table-column
+            prop="photoUrl"
+            label="链接图片"
+            show-overflow-tooltip>
+          </el-table-column>
+
+          <!-- <el-table-column
+            label="状态"
+            show-overflow-tooltip>
+             <template slot-scope="scope">
+              <span v-if="scope.row.status == 1">正常</span>
+              <span v-else-if="scope.row.status == 2" style="color: red">锁定</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column
+            label="操作"
+            width="200">
+            <template slot-scope="scope" show-overflow-tooltip>
+              <span style="cursor:pointer;" @click="openChange(scope.row)">修改</span>
+              <span style="margin-left: 10px; cursor:pointer; color:red;" @click="Delete(scope.row.id)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+    <!-- 分页 -->
+      <div class="block">
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="current"
+        :page-sizes="[6, 8, 10]"
+        :page-size="pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+        </el-pagination>
+      </div>
+
+    <!-- 新增链接 -->
+      <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="addUserList">
+        <div class="tou">链接--添加</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          :rules="rules"
+          ref="ruleForm"
+          :model="formList">
+
+          <el-form-item label="链接名称">
+            <el-input v-model="formList.name" auto-complete="off" placeholder="请输入链接名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="链接指向">
+            <el-input v-model="formList.url" auto-complete="off" placeholder="请输入链接指向"></el-input>
+          </el-form-item>
+
+          <el-form-item label="链接图片">
+            <el-upload
+            class="anniu"
+            ref="upload"
+            action="http://192.168.1.199:18083/app/link"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-change="handleSuccess"
+            :auto-upload="false">
+            <el-button slot="trigger" size="small" type="primary">链接图片</el-button>
+            </el-upload>
+          </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="addUserList = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="addData('ruleForm')">新 增</el-button>
+        </div>
+      </el-dialog>
+    <!-- 修改链接 -->
+      <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="changeUser">
+        <div class="tou">链接--修改</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          :rules="rules"
+          ref="ruleForm"
+          :model="formList">
+
+          <el-form-item label="链接名称">
+            <el-input v-model="formList.name" auto-complete="off" placeholder="请输入链接名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="链接指向">
+            <el-input v-model="formList.url" auto-complete="off" placeholder="请输入链接指向"></el-input>
+          </el-form-item>
+
+           <el-form-item label="链接状态">
+            <el-select v-model="formList.status" placeholder="链接状态" style="width: 100%">
+              <el-option
+                v-for="item in optionone"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="链接图片">
+            <el-upload
+              ref='upload'
+              action="http://192.168.1.199:18083/app/link"
+              list-type="picture-card"
+              :on-preview="handlePreviewOne"
+              :on-remove="handleRemoveOne"
+              :on-change="handleSuccessOne"
+              :auto-upload="false">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <img style="width: 150px; height: 150px;" :src= "dialogImageUrl" alt="">
+          </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="changeUser = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="changeData">修 改</el-button>
+        </div>
+      </el-dialog>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+import axios from 'axios';
+export default{
+  data() {
+    return {
+      // loading: true,
+      username: '',
+      company: '',
+      appKey: '',
+      usertable: [],
+      roleList: [],
+      formList: {
+        "id": "",
+        "name": "",
+        "url": "",
+        "status": "",
+        "photo": "",
+      },
+      formChangeList: {
+        "id": "",
+        "name": "",
+        "url": "",
+        "status": "",
+        "photo": "",
+      },
+      optionone: [{
+          value: '1',
+          label: '启用'
+        }, {
+          value: '2',
+          label: '停用'
+      }],
+      optiontwo: [],
+      current: 1,
+      pagesize: 10,
+      // 总共有多少条数据
+      total: 0,
+      addUserList: false,
+      changeUser: false,
+      dialogImageUrl: ''
+    }
+  },
+  created() {
+    this.loadData();
+    // this.loadRole();
+  },
+  methods: {
+    // 列表展示
+    async loadData() {
+      const response = await this.$http.get(`app/page/links?&current=${this.current}&size=${this.pagesize}`);
+      if (response.data.code === 1) {
+        this.loading = false;
+        this.usertable = response.data.responseData.records;
+        this.total = response.data.responseData.total;
+      }
+    },
+
+    //查询
+    // async queryLook() {
+    //   const response = await this.$http.get(`app/page/users?&current=${this.current}&size=${this.pagesize}&appKey=${this.appKey}&username=${this.username}&company=${this.company}`);
+    //   if (response.data.code === 1) {
+    //     this.loading = false;
+    //     this.usertable = response.data.responseData.records;
+    //     this.total = response.data.responseData.total;
+    //   }
+    // },
+    // 新增链接
+    addData(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if(valid) {
+            const formData = new FormData();
+            formData.append('photo', this.formList.photo);
+            formData.append('name', this.formList.name);
+            formData.append('url', this.formList.url);
+            const response = await this.$http.post(`app/link`, formData);
+            if(response.data.code === 1) {
+              this.loadData();
+              this.addUserList = false;
+              this.$message({
+                type: 'success',
+                message: '添加链接成功'
+              });
+            }else {
+              this.$message({
+                type: 'error',
+                message: '添加链接失败'
+              });
+            }
+        }else {
+          this.$message.error('请查看是否有选项未填写或填错项');
+          return false;
+        }
+      })
+    },
+    // 打开修改并赋予信息
+    openChange(user) {
+      this.changeUser = true;
+      this.formList.id = user.id;
+      this.formList.name = user.name;
+      this.formList.url = user.url;
+      this.formList.photo= user.photoUrl;
+      this.formChangeList.name = user.name;
+      this.formChangeList.url = user.url;
+      this.formChangeList.photo = user.photoUrl;
+      this.formChangeList.status = user.status;
+      // console.log(user)
+      this.dialogImageUrl = user.photoUrl;
+      if(user.status == 1) {
+        this.formList.status = '启用'
+      }
+      if(user.status == 2) {
+        this.formList.status = '停用'
+      }
+      if(user.status == 1) {
+        this.formChangeList.status = '启用'
+      }
+      if(user.status == 2) {
+        this.formChangeList.status = '停用'
+      }
+
+    },
+    // 修改链接
+    async changeData() {
+      const formData = new FormData();
+      formData.append('id', this.formList.id);
+      if(this.formList.name == this.formChangeList.name) {
+        console.log(1)
+      }else{
+         formData.append('name', this.formList.name);
+      };
+      if(this.formList.status == this.formChangeList.status) {
+        console.log(1)
+      }else{
+         formData.append('status', this.formList.status);
+      };
+      if(this.formList.photo == this.formChangeList.photo) {
+        console.log(1)
+      }else{
+         formData.append('photo', this.formList.photo);
+      };
+      if(this.formList.url == this.formChangeList.url) {
+        console.log(1)
+      }else{
+         formData.append('url', this.formList.url);
+      };
+      const response = await this.$http.put(`app/link`, formData);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changeUser = false;
+        this.$message({
+          type: 'success',
+          message: '修改链接成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '修改链接失败'
+        });
+      }
+    },
+     // 点击删除按钮
+    Delete(id) {
+      this.$confirm('是否删除该用户', '提示' ,{
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          const response = await this.$http.put(`app/link/${id}`);
+          if(response.data.code === 1) {
+            this.loadData();
+            this.$message({
+              type: 'success',
+              message: '删除链接成功'
+            });
+          }else {
+            this.$message({
+              type: 'error',
+              message: '删除链接失败'
+            });
+          }
+        }).catch(() => {
+           this.$message({ type: 'info', message: '已取消删除'});
+      });
+    },
+
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleSuccess (a) {
+      this.formList.photo = a.raw;
+    },
+
+    // handleRemoveOne(file, fileList) {
+    //   console.log(file, fileList);
+    // },
+
+    // handlePreviewOne(file) {
+    //   console.log(file);
+    // },
+    // handleSuccessOne (a) {
+    //   this.formList.photo = a.raw;
+    // },
+
+    // 清空表单数据
+    handleEditDialogClose() {
+      for (var key in this.formList) {
+        this.formList[key] = '';
+      };
+      this.$refs.upload.clearFiles();
+    },
+    // 分页方法
+    handleSizeChange(val) {
+      this.pagesize = val;
+      if(this.username !== '' || this.company !== '' || this.appKey !== '') {
+        this.queryLook();
+      }else{
+        this.loadData();
+      };
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.current = val;
+      if(this.username !== '' || this.company !== '' || this.appKey !== '') {
+        this.queryLook();
+      }else{
+        this.loadData();
+      };
+      console.log(`当前页: ${val}`);
+    },
+
+  }
+};
+</script>
+
+<style>
+.friendship {
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+}
+.friendship .title {
+  font-size: 5px;
+  margin-bottom: 20px;
+}
+.friendship .top {
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.friendship .text {
+  display: inline-block;
+  color: #000;
+  font-size: 16px ;
+  margin-left: 1%;
+}
+.friendship .input-demo {
+  display: inline-block;
+  width: 20%;
+  margin-left: 1%;
+}
+.friendship .block {
+  font-size: 5px;
+  text-align: center;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+.friendship .el-dialog {
+  width: 60%;
+}
+.friendship .el-dialog__header, .el-dialog__body {
+  padding: 0 20px;
+}
+.friendship .tou {
+  font-size: 20px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 15px;
+}
+.friendship .line {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 2px;
+  background-color: #d9d9d9;
+}
+.friendship .xinxi {
+  text-align: center;
+  margin: 15px auto;
+  font-size: 18px;
+}
+</style>

src/views/journalism/journalism.vue

@@ -0,0 +1,690 @@
+<template>
+  <div class="journalism">
+    <!-- 头部细节部分 -->
+      <div class="title">
+        <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-input  placeholder="用户名称" class="input-demo" v-model="username"></el-input>
+              <el-input  placeholder="公司名称" class="input-demo" v-model="company"></el-input>
+              <el-input  placeholder="appKey" class="input-demo" v-model="appKey"></el-input>
+            </div>
+          </el-col>
+        </el-row>
+
+         <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-button type="success" style="margin-left: 1%;" @click="queryLook">查询</el-button>
+              <el-button type="success" style="margin-left: 1%;" @click="addUserList = true">添加</el-button>
+            </div>
+          </el-col>
+        </el-row>
+
+      </div>
+    <!-- 头部细节部分结束 -->
+    <!-- 表格部分 -->
+      <template>
+        <el-table
+          v-loading="loading"
+          ref="multipleTable"
+          :data="usertable"
+          border
+          tooltip-effect="dark">
+          <el-table-column
+            label="新闻标题"
+            prop="title"
+            show-overflow-tooltip>
+          </el-table-column>
+           <el-table-column
+            prop="newsAbstract"
+            label="新闻摘要"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            label="创建时间"
+            show-overflow-tooltip>
+            <template slot-scope="scope" show-overflow-tooltip>
+              <span>{{scope.row.createTime | fmtDate}}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column
+            label="状态"
+            show-overflow-tooltip>
+             <template slot-scope="scope">
+              <span v-if="scope.row.status == 1">正常</span>
+              <span v-else-if="scope.row.status == 2" style="color: red">锁定</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column
+            label="操作"
+            width="200">
+            <template slot-scope="scope" show-overflow-tooltip>
+              <span style="cursor:pointer;" @click="openChange(scope.row)">修改</span>
+              <span style="margin-left: 10px; cursor:pointer; color: red;" @click="Delete(scope.row.id)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+    <!-- 分页 -->
+      <div class="block">
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="current"
+        :page-sizes="[6, 8, 10]"
+        :page-size="pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+        </el-pagination>
+      </div>
+
+    <!-- 新增新闻 -->
+      <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="addUserList"
+        style="font-size: 0px;">
+        <div class="tou">新闻--添加</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          :rules="rules"
+          ref="ruleForm"
+          :model="formList">
+
+            <el-form-item label="新闻标题" prop="title">
+              <el-input v-model="formList.title" auto-complete="off" placeholder="请输入新闻标题"></el-input>
+            </el-form-item>
+
+            <el-form-item label="新闻摘要" prop="newsAbstract">
+              <el-input v-model="formList.newsAbstract" auto-complete="off" placeholder="请输入新闻摘要"></el-input>
+            </el-form-item>
+
+            <el-form-item label="新闻封面" prop="photoId">
+              <el-upload
+              class="anniu"
+              ref="upload"
+              action="http://192.168.1.199:18083/newsmess/save_news"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :on-change="handleSuccess"
+              :auto-upload="false">
+              <el-button slot="trigger" size="small" type="primary">选取封面</el-button>
+              </el-upload>
+            </el-form-item>
+
+            <el-form-item label="导航分类">
+              <el-tree
+                :data="menuList"
+                show-checkbox
+                default-expand-all
+                check-strictly
+                node-key="id"
+                ref="tree"
+                highlight-current
+                :default-checked-keys="haveRight"
+                :props="defaultProps"
+                style="font-size: 0px;">
+              </el-tree>
+            </el-form-item>
+
+            <el-form-item label="新闻内容" prop="content">
+             <template>
+               <!-- 图片上传组件辅助 -->
+              <el-upload
+                class="avatar-uploader"
+                :action="serverUrl"
+                name="photo"
+                :headers="header"
+                :show-file-list="false"
+                :on-success="uploadSuccess"
+                :on-error="uploadError"
+                :before-upload="beforeUpload">
+              </el-upload>
+              <!-- 富文本编辑器组件 -->
+              <el-row v-loading="quillUpdateImg">
+                <quill-editor
+                        v-model="detailContent"
+                        ref="myQuillEditor"
+                        :options="editorOption"
+                        @change="onEditorChange($event)"
+                        @ready="onEditorReady($event)">
+                </quill-editor>
+               </el-row>
+             </template>
+            </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="addUserList = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="addData('ruleForm')">新 增</el-button>
+        </div>
+      </el-dialog>
+    <!-- 修改新闻 -->
+      <!-- <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="changeUser"
+        style="font-size: 0px;">
+        <div class="tou">用户--修改</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          :model="formChangeList">
+
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="formChangeList.password" auto-complete="off" placeholder="请输入密码"></el-input>
+          </el-form-item>
+
+          <el-form-item label="公司名称" prop="company">
+            <el-input v-model="formChangeList.company" auto-complete="off" placeholder="请输入公司名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="联系人" prop="contactName">
+            <el-input v-model="formChangeList.contactName" auto-complete="off" placeholder="请输入密码"></el-input>
+          </el-form-item>
+
+          <el-form-item label="手机号" prop="telephone">
+            <el-input v-model="formChangeList.telephone" auto-complete="off" placeholder="请输入手机号"></el-input>
+          </el-form-item>
+
+          <el-form-item label="单价" prop="price">
+            <el-input v-model="formChangeList.price" auto-complete="off" placeholder="请输入单价"></el-input>
+          </el-form-item>
+
+          <el-form-item label="用户状态">
+            <el-select v-model="formChangeList.status" placeholder="用户状态" style="width: 100%">
+              <el-option
+                v-for="item in optionone"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="changeUser = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="changeData">修 改</el-button>
+        </div>
+      </el-dialog> -->
+  </div>
+</template>
+
+<script type="text/javascript">
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+  ['blockquote', 'code-block'],
+
+  [{'header': 1}, {'header': 2}],               // custom button values
+  [{'list': 'ordered'}, {'list': 'bullet'}],
+  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
+  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
+  [{'direction': 'rtl'}],                         // text direction
+
+  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
+  [{'header': [1, 2, 3, 4, 5, 6, false]}],
+
+  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
+  [{'font': []}],
+  [{'align': []}],
+  ['link', 'image', 'video'],
+  ['clean']                                         // remove formatting button
+]
+export default {
+      data() {
+        return {
+          usertable: [],
+          formList: {
+            "urlList": [],
+            "title": "",
+            "newsAbstract": "",
+            "photo": "",
+            "navigationBarId": "1",
+            "content": "",
+          },
+          editorOption: {},
+          defaultProps: {
+            children: 'children',
+            label: 'label'
+          },
+          menuList: [{
+              id: 1,
+              label: '一级 1',
+              children: [{
+                id: 4,
+                label: '二级 1-1',
+                children: [{
+                  id: 9,
+                  label: '三级 1-1-1'
+                }, {
+                  id: 10,
+                  label: '三级 1-1-2'
+                }]
+              }]
+            }, {
+              id: 2,
+              label: '一级 2',
+              children: [{
+                id: 5,
+                label: '二级 2-1'
+              }, {
+                id: 6,
+                label: '二级 2-2'
+              }]
+            }, {
+              id: 3,
+              label: '一级 3',
+              children: [{
+                id: 7,
+                label: '二级 3-1'
+              }, {
+                id: 8,
+                label: '二级 3-2'
+              }]
+          }],
+          haveRight:[],
+          // formChangeList: {
+          //   "id": "",
+          //   "password": "",
+          //   "company": "",
+          //   "contactName": "",
+          //   "telephone": "",
+          //   "price": "",
+          //   "status": ""
+          // },
+
+          optionone: [{
+              value: '1',
+              label: '正常'
+            }, {
+              value: '2',
+              label: '锁定'
+          }],
+          current: 1,
+          pagesize: 10,
+          // 总共有多少条数据
+          total: 0,
+          addUserList: false,
+          changeUser: false,
+          photo: '',
+          quillUpdateImg: false,
+          // serverUrl: '',
+          serverUrl: 'http://localhost:8088/api/app/upload',  // 这里写你要上传的图片服务器地址
+          header: {Authorization: 'Bearer ' + sessionStorage.token},  //有的图片服务器要求请求头需要有token之类的参数，写在这里
+          detailContent: '', // 富文本内容
+          editorOption: {
+            placeholder: '',
+            theme: 'snow',  // or 'bubble'
+            modules: {
+              toolbar: {
+                container: toolbarOptions,  // 工具栏
+                //   handlers: {
+                //   'image': function (value) {
+                //     if (value) {
+                //       alert(1)
+                //     } else {
+                //       this.quill.format('image', false);
+                //     }
+                //   }
+                // }
+                handlers: {
+                  'image': function (value) {
+                    if (value) {
+                    // 触发input框选择图片文件
+                       document.querySelector('.avatar-uploader input').click()
+                      } else {
+                       this.quill.format('image', false);
+                     }
+                  }
+                }
+              }
+            }
+          }
+      }
+  },
+
+  created() {
+    this.loadData();
+  },
+  methods: {
+    // 列表展示
+    async loadData() {
+      const response = await this.$http.get(`app/page/newsArticle?&current=${this.current}&size=${this.pagesize}`);
+      if (response.data.code === 1) {
+        this.loading = false;
+        this.usertable = response.data.responseData.records;
+        // console.log(response.data.responseData);
+        this.total = response.data.responseData.total;
+      }
+    },
+    //查询
+    // async queryLook() {
+    //   const response = await this.$http.get(`app/page/newsArticle?&current=${this.current}&size=${this.pagesize}&appKey=${this.appKey}&username=${this.username}&company=${this.company}`);
+    //   if (response.data.code === 1) {
+    //     this.loading = false;
+    //     this.usertable = response.data.responseData.records;
+    //     this.total = response.data.responseData.total;
+    //   }
+    // },
+    // 新增新闻
+    addData(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if(valid) {
+            const formData = new FormData();
+            formData.append('photo', this.formList.photo);
+            formData.append('title', this.formList.title);
+            formData.append('newsAbstract', this.formList.newsAbstract);
+            formData.append('navigationBarId', this.formList.navigationBarId);
+            formData.append('content', this.formList.content);
+            formData.append('urlList', this.formList.urlList);
+            const response = await this.$http.post(`app/newsArticle`, formData);
+            if(response.data.code === 1) {
+              this.loadData();
+              this.addUserList = false;
+              this.$message({
+                type: 'success',
+                message: '添加新闻成功'
+              });
+            }else {
+              this.$message({
+                type: 'error',
+                message: '添加新闻失败'
+              });
+            }
+        }else {
+          this.$message.error('请查看是否有选项未填写或填错项');
+          return false;
+        }
+      })
+    },
+
+    // 富文本图片上传前
+    beforeUpload() {
+      // 显示loading动画
+      this.quillUpdateImg = true;
+    },
+    uploadSuccess(res, file) {
+        // res为图片服务器返回的数据
+        // 获取富文本组件实例
+        let quill = this.$refs.myQuillEditor.quill;
+        // console.log(quill)
+        // 如果上传成功
+        if (res.code == 1) {
+            // 获取光标所在位置
+            let length = quill.getSelection().index;
+            // console.log(length)
+            // 插入图片  res.info为服务器返回的图片地址
+            quill.insertEmbed(length, 'image', res.responseData);
+            // alert(res.responseData)
+            this.formList.urlList.push(res.responseData);
+            console.log(this.formList.urlList);
+            // 调整光标到最后
+            quill.setSelection(length + 1);
+        } else {
+            this.$message.error('图片插入失败');
+        }
+        // loading动画消失
+        this.quillUpdateImg = false;
+    },
+    // 富文本图片上传失败
+    uploadError() {
+      // loading动画消失
+      this.quillUpdateImg = false;
+      this.$message.error('图片插入失败');
+    },
+    // 新增新闻内容
+    onEditorReady(editor) { // 准备编辑器
+    },
+    onEditorBlur(){}, // 失去焦点事件
+    onEditorFocus(){}, // 获得焦点事件
+    onEditorChange(event){
+      this.formList.content = event.html;
+      console.log(this.formList.content)
+    }, // 内容改变事件
+
+
+    // 打开修改并赋予信息
+    openChange(user) {
+      this.changeUser = true;
+      this.formChangeList.id = user.id;
+      this.formChangeList.password = user.password;
+      this.formChangeList.company = user.company;
+      this.formChangeList.contactName = user.contactName;
+      this.formChangeList.telephone = user.telephone;
+      this.formChangeList.price = user.price;
+      // this.formChangeList.status = user.status;
+    },
+    // 修改用户
+    async changeData() {
+      const response = await this.$http.put(`app/user`, this.formChangeList);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changeUser = false;
+        this.$message({
+          type: 'success',
+          message: '修改成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '修改失败'
+        });
+      }
+    },
+     // 点击删除按钮
+    Delete(id) {
+      this.$confirm('是否删除该用户', '提示' ,{
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          const response = await this.$http.put(`app/newsArticle/${id}`);
+          if(response.data.code === 1) {
+            this.loadData();
+            this.$message({
+              type: 'success',
+              message: '删除成功'
+            });
+          }else {
+            this.$message({
+              type: 'error',
+              message: '删除失败'
+            });
+          }
+        }).catch(() => {
+           this.$message({ type: 'info', message: '已取消删除'});
+      });
+    },
+
+    // 打开修改状态弹框
+    openisLock(user) {
+      this.changelocks = true;
+      this.formStateList.id = user.id;
+    },
+    // 修改用户状态
+    async changeLock() {
+      const response = await this.$http.put(`app/user`, this.formStateList);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changelocks = false;
+        this.$message({
+          type: 'success',
+          message: '修改成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '修改失败'
+        });
+      }
+    },
+    //打开用户添加角色
+    openRole(id) {
+      this.changeRole= true;
+      this.formRoList.userId = id;
+      // console.log(this.formRoleList.userId);
+    },
+    //用户添加角色
+    async userAddRole() {
+      const response = await this.$http.post(`app/userRolePermission`, this.formRoList);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changeRole = false;
+        this.$message({
+          type: 'success',
+          message: '添加成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '添加失败'
+        });
+      }
+    },
+    // 充值打开弹框
+    openMoney(id) {
+      this.changeMoney = true;
+      this.formMoneyList.userId = id + '';
+    },
+    //充值
+    async userChangeMoney() {
+      const response = await this.$http.post(`app/recharge`, this.formMoneyList);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changeMoney = false;
+        this.$message({
+          type: 'success',
+          message: '充值成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '充值失败'
+        });
+      }
+    },
+
+     // 上传图片功能
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleSuccess (a) {
+      this.formList.photo = a.raw;
+    },
+
+    // 清空表单数据
+    handleEditDialogClose() {
+      for (var key in this.formList) {
+        this.formList[key] = '';
+      };
+      this.formList.urlList = [];
+
+      this.formList.content = '';
+      // this.$refs.myQuillEditor.quill = '';
+
+      // this.$refs.myQuillEditor.html = '';
+
+      // this.$refs.myQuillEditor = '';
+
+      // for (var key in this.formChangeList) {
+      //   this.formChangeList[key] = '';
+      // };
+      // for (var key in this.formStateList) {
+      //   this.formStateList[key] = '';
+      // };
+      // for (var key in formRoleList) {
+      //   formRoleList[key] = '';
+      // };
+      // for (var key in formMoneyList) {
+      //   formMoneyList[key] = '';
+      // };
+
+    },
+    // 分页方法
+    handleSizeChange(val) {
+      this.pagesize = val;
+      if(this.username !== '' || this.company !== '' || this.appKey !== '') {
+        this.queryLook();
+      }else{
+        this.loadData();
+      };
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.current = val;
+      if(this.username !== '' || this.company !== '' || this.appKey !== '') {
+        this.queryLook();
+      }else{
+        this.loadData();
+      };
+      console.log(`当前页: ${val}`);
+    },
+
+  }
+};
+</script>
+
+<style>
+.journalism {
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+}
+.journalism .title {
+  font-size: 5px;
+  margin-bottom: 20px;
+}
+.journalism .top {
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.journalism .text {
+  display: inline-block;
+  color: #000;
+  font-size: 16px ;
+  margin-left: 1%;
+}
+.journalism .input-demo {
+  display: inline-block;
+  width: 20%;
+  margin-left: 1%;
+}
+.journalism .block {
+  font-size: 5px;
+  text-align: center;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+.journalism .el-dialog {
+  width: 60%;
+}
+.journalism .el-dialog__header, .el-dialog__body {
+  padding: 0 20px;
+}
+.journalism .tou {
+  font-size: 20px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 15px;
+}
+.journalism .line {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 2px;
+  background-color: #d9d9d9;
+}
+.journalism .xinxi {
+  text-align: center;
+  margin: 15px auto;
+  font-size: 18px;
+}
+</style>
+

src/views/main/main.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="main">
+    <div class="main_img">
+      <img src="@/assets/image/main.jpg">
+    </div>
+  </div>
+</template>
+
+<script>
+export default{
+  data() {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style>
+.main .main_img {
+  height: 100%;
+  width: 100%;
+}
+.main .main_img img {
+  margin-left: 20%;
+  margin-top: 15%;
+}
+</style>

src/views/navigation/navigation.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="navigation">
+    <!-- 头部细节部分 -->
+    <div class="title">
+        <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-button type="success" style="margin-left: 1%;" @click="addNew">新增</el-button>
+              <el-button type="success" style="margin-left: 1%;" @click="openChange">修改</el-button>
+              <el-button type="success" style="margin-left: 1%;" @click="DeleteMenu">删除</el-button>
+            </div>
+          </el-col>
+        </el-row>
+    </div>
+
+    <!-- 头部细节部分结束 -->
+    <el-row>
+      <el-col :span="24">
+        <div class="grid-content bg-purple-dark">
+          <el-tree
+            v-loading="loading"
+            :data="menuList"
+            show-checkbox
+            default-expand-all
+            check-strictly
+            node-key="id"
+            ref="tree"
+            highlight-current
+            @check="handleCheckChange"
+            :props="defaultProps">
+          </el-tree>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 新增菜单 -->
+    <el-dialog
+      @close="handleEditDialogClose"
+      :visible.sync="addUserList">
+      <div class="tou">导航--添加</div>
+      <div class="line"></div>
+      <el-form
+        label-position="right"
+        label-width="100px"
+        :model="formMenuList">
+        <el-form-item label="导航名称">
+          <el-input v-model.string="formMenuList.name" auto-complete="off" placeholder="请输入导航名称"></el-input>
+        </el-form-item>
+
+        <el-form-item label="父级id">
+          <el-input v-model.string="formMenuList.parentId" auto-complete="off" placeholder="请输入父级节点id"></el-input>
+        </el-form-item>
+
+        <el-form-item label="导航级数">
+          <el-input v-model.string="formMenuList.level" auto-complete="off" placeholder="请输入导航级数"></el-input>
+        </el-form-item>
+
+        <el-form-item label="路由路径">
+          <el-input v-model.string="formMenuList.goPageUrl" auto-complete="off" placeholder="请输入路由路径"></el-input>
+        </el-form-item>
+
+        <el-form-item label="是否首页展示">
+          <el-select v-model="formMenuList.homePageFlag" placeholder="是否首页展示" style="width: 100%">
+            <el-option
+              v-for="item in option"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="菜单排序">
+            <el-input v-model="formMenuList.homePageOrder" auto-complete="off" placeholder="请输入菜单排序"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addUserList = false" type="info">取 消</el-button>
+        <el-button type="primary" @click="addData">新 增</el-button>
+      </div>
+    </el-dialog>
+    <!-- 修改菜单 -->
+    <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="changeUser">
+        <div class="tou">导航--修改</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="100px"
+          :model="formMenuchangeList">
+          <el-form-item label="导航名称">
+            <el-input v-model.string="formMenuchangeList.name" auto-complete="off" placeholder="请输入导航名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="本级导航id">
+            <el-input v-model.string="formMenuchangeList.id" auto-complete="off" placeholder="  请输入父级节点id"></el-input>
+          </el-form-item>
+
+          <el-form-item label="路由路径">
+            <el-input v-model.string="formMenuchangeList.goPageUrl" auto-complete="off" placeholder="请输入路由路径"></el-input>
+          </el-form-item>
+
+          <el-form-item label="是否首页展示">
+            <el-select v-model="formMenuchangeList.homePageFlag" placeholder="是否首页展示" style="width:   100%">
+              <el-option
+                v-for="item in option"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="菜单排序">
+              <el-input v-model="formMenuchangeList.homePageOrder" auto-complete="off" placeholder="请输入菜单排序"></el-input>
+          </el-form-item>
+        </el-form>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="changeUser = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="changeData">修 改</el-button>
+        </div>
+      </el-dialog>
+  </div>
+
+</template>
+
+<script type="text/javascript">
+export default{
+  data() {
+    return {
+      // loading: true,
+      option: [{
+          value: '1',
+          label: '首页不展示'
+        }, {
+          value: '2',
+          label: '首页展示'
+        }],
+      formMenuList: {
+        "name": "",
+        "parentId": "",
+        "level": "",
+        "goPageUrl": "",
+        "homePageFlag": "",
+        "homePageOrder": ""
+      },
+      formMenuchangeList: {
+        "id": "",
+        "name": "",
+        "goPageUrl": "",
+        "homePageFlag": "",
+        "homePageOrder": ""
+      },
+      menuList: [],
+      dataList: '',
+      addUserList: false,
+      changeUser: false,
+      defaultProps: {
+        children: 'childList',
+        label: 'name'
+      },
+    }
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    async loadData() {
+      const response = await this.$http.get(`app/menu`);
+      if (response.data.code === 1) {
+        // console.log(response.data.responseData)
+        this.menuList = response.data.responseData;
+        this.loading = false;
+      }
+    },
+    // 选择中的时候获取当前Id
+    handleCheckChange(data, checked, indeterminate) {
+      this.dataList = data;
+    },
+    // 增加菜单
+    addNew() {
+      this.addUserList = true;
+      this.formMenuList.parentId = this.dataList.id;
+    },
+    // 新增导航
+    async addData() {
+      const formData = new FormData();
+      formData.append('name', this.formMenuList.name);
+      formData.append('parentId', this.formMenuList.parentId);
+      formData.append('level', this.formMenuList.level);
+      formData.append('goPageUrl', this.formMenuList.goPageUrl);
+      formData.append('homePageFlag', this.formMenuList.homePageFlag);
+      formData.append('homePageOrder', this.formMenuList.homePageOrder);
+      const response = await this.$http.post(`app/menu`,formData);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.addUserList = false;
+        this.$message({
+          type: 'success',
+          message: '添加新闻成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '添加新闻失败'
+        });
+      }
+    },
+
+    // 修改前判断
+    openChange() {
+      if(this.dataList == '') {
+        this.$message.error('请选择要修改的单条数据');
+        this.changeUser = false;
+        return;
+      };
+      if(this.dataList.homePageFlag == 1) {
+        this.formMenuchangeList.homePageFlag = '首页不展示'
+      };
+      if(this.dataList.homePageFlag == 2) {
+        this.formMenuchangeList.homePageFlag = '首页展示'
+      };
+      this.changeUser = true;
+      this.formMenuchangeList.id = this.dataList.id;
+      this.formMenuchangeList.name = this.dataList.name;
+      this.formMenuchangeList.goPageUrl = this.dataList.goPageUrl;
+      // this.formMenuchangeList.homePageFlag = this.dataList.homePageFlag;
+      this.formMenuchangeList.homePageOrder = this.dataList.homePageOrder;
+    },
+    // 修改导航
+    async changeData () {
+      const formData = new FormData();
+      formData.append('name', this.formMenuchangeList.name);
+      formData.append('id', this.formMenuchangeList.id);
+      formData.append('goPageUrl', this.formMenuchangeList.goPageUrl);
+      formData.append('homePageFlag', this.formMenuchangeList.homePageFlag);
+      formData.append('homePageOrder', this.formMenuchangeList.homePageOrder);
+      const response = await this.$http.put(`app/menu`,formData);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changeMenuList = false;
+        this.$message({
+          type: 'success',
+          message: '修改成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '修改失败'
+        });
+      }
+    },
+    // 删除导航
+    DeleteMenu() {
+      if(this.dataList == '') {
+        this.$message.error('请选择要删除的单条数据');
+        return;
+      }
+      this.formMenuchangeList.menuId = this.dataList.id;
+      this.$confirm('是否删除该分类', '提示' ,{
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          const response = await this.$http.put(`app/menu/${this.formMenuchangeList.menuId}`);
+          if(response.data.code === 1) {
+            this.loadData();
+            this.dataList = '';
+            this.$message({
+              type: 'success',
+              message: '删除成功'
+            });
+          }else {
+            this.$message({
+              type: 'error',
+              message: '删除失败'
+            });
+          }
+        }).catch(() => {
+           this.$message({ type: 'info', message: '已取消删除'});
+      });
+    },
+
+    // 清空表单数据
+    handleEditDialogClose() {
+
+      for (var key in this.formMenuchangeList) {
+        this.formMenuchangeList[key] = '';
+      }
+      for (var key in this.formMenuList) {
+          this.formMenuList[key] = "";
+      }
+      this.$refs.tree.setCheckedKeys([]);
+      this.dataList = '';
+    },
+  }
+};
+</script>
+
+<style>
+.navigation {
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+}
+.navigation .title {
+  font-size: 5px;
+  margin-bottom: 20px;
+}
+.navigation .top {
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.navigation .text {
+  display: inline-block;
+  color: #000;
+  font-size: 16px ;
+  margin-left: 1%;
+}
+.navigation .input-demo {
+  display: inline-block;
+  width: 20%;
+  margin-left: 1%;
+}
+.navigation .block {
+  font-size: 5px;
+  text-align: center;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+.navigation .el-dialog {
+  width: 60%;
+}
+.navigation .el-dialog__header, .el-dialog__body {
+  padding: 0 20px;
+}
+.navigation .tou {
+  font-size: 20px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 15px;
+}
+.navigation .line {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 2px;
+  background-color: #d9d9d9;
+}
+.navigation .xinxi {
+  text-align: center;
+  margin: 15px auto;
+  font-size: 18px;
+}
+</style>

src/views/photo/photo.vue

@@ -0,0 +1,433 @@
+<template>
+  <div class="photo">
+    <!-- 头部细节部分 -->
+      <div class="title">
+        <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-input  placeholder="图片名称" class="input-demo" v-model="name"></el-input>
+              <el-button type="success" style="margin-left: 1%;" @click="queryLook">查询</el-button>
+              <el-button type="success" style="margin-left: 1%;" @click="addUserList = true">添加</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    <!-- 头部细节部分结束 -->
+    <!-- 表格部分 -->
+      <template>
+        <el-table
+          v-loading="loading"
+          ref="multipleTable"
+          :data="usertable"
+          border
+          tooltip-effect="dark">
+          <el-table-column
+            label="图片名称"
+            prop="name"
+            show-overflow-tooltip>
+          </el-table-column>
+
+           <el-table-column
+            prop="url"
+            label="图片地址"
+            show-overflow-tooltip>
+          </el-table-column>
+
+          <el-table-column
+            prop="goPageUrl"
+            label="图片导航"
+            show-overflow-tooltip>
+          </el-table-column>
+
+          <el-table-column
+            label="图片类型"
+            show-overflow-tooltip>
+             <template slot-scope="scope">
+              <span v-if="scope.row.type == 1">首页大图</span>
+              <span v-else-if="scope.row.type == 2">首页腰封图</span>
+              <span v-else-if="scope.row.type == 3">新闻图片</span>
+              <span v-else-if="scope.row.type == 4">友情链接图片</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="200">
+            <template slot-scope="scope" show-overflow-tooltip>
+              <span style="cursor:pointer;" @click="openChange(scope.row)">修改</span>
+              <span style="margin-left: 10px; cursor:pointer; color: red;" @click="Delete(scope.row.id)">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+    <!-- 分页 -->
+      <div class="block">
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="current"
+        :page-sizes="[6, 8, 10]"
+        :page-size="pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+        </el-pagination>
+      </div>
+
+    <!-- 新增图片 -->
+      <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="addUserList"
+        style="font-size: 0px;">
+        <div class="tou">图片--添加</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          :rules="rules"
+          ref="ruleForm"
+          :model="formList">
+          <el-form-item label="图片名称" prop="name">
+            <el-input v-model="formList.name" auto-complete="off" placeholder="请输入图片名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="图片导航" prop="goPageUrl">
+            <el-input v-model="formList.goPageUrl" auto-complete="off" placeholder="请输入图片导航"></el-input>
+          </el-form-item>
+
+          <el-form-item label="图片类型">
+            <el-select v-model="formList.type" placeholder="图片类型" style="width: 100%">
+              <el-option
+                v-for="item in optionone"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="上传图片" prop="file">
+          <el-upload
+            ref='upload'
+            action="http://192.168.1.199:18083/app/photo"
+            list-type="picture-card"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-change="handleSuccess"
+            :auto-upload="false">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="addUserList = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="addData('ruleForm')">新 增</el-button>
+        </div>
+      </el-dialog>
+    <!-- 修改图片 -->
+      <el-dialog
+        @close="handleEditDialogClose"
+        :visible.sync="changeUser"
+        style="font-size: 0px;">
+        <div class="tou">图片--修改</div>
+        <div class="line"></div>
+        <el-form
+          label-position="right"
+          label-width="80px"
+          :model="formChangeList">
+          <el-form-item label="图片名称" prop="name">
+            <el-input v-model="formList.name" auto-complete="off" placeholder="请输入图片名称"></el-input>
+          </el-form-item>
+
+          <el-form-item label="图片导航" prop="goPageUrl">
+            <el-input v-model="formList.goPageUrl" auto-complete="off" placeholder="请输入图片导航"></el-input>
+          </el-form-item>
+
+          <el-form-item label="图片类型">
+            <el-select v-model="formList.type" placeholder="图片类型" style="width: 100%">
+              <el-option
+                v-for="item in optionone"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="上传图片" prop="file">
+            <el-upload
+              ref='upload'
+              action="http://192.168.1.199:18083/app/photo"
+              list-type="picture-card"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :on-change="handleSuccess"
+              :auto-upload="false">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <img style="width: 150px; height: 150px;" :src="'http://back.jkcredit.com/showImg?imgUrl=' + dialogImageUrl" alt="">
+          </el-form-item> -->
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="changeUser = false" type="info">取 消</el-button>
+          <el-button type="primary" @click="changeData">修 改</el-button>
+        </div>
+      </el-dialog>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+export default{
+  data() {
+    return {
+      // loading: true,
+      name: '',
+      typeValue: '',
+      usertable: [],
+      formList: {
+        "name": "",
+        "type": "",
+        "photo": "",
+        "goPageUrl": "",
+        "id": ""
+      },
+      optionone: [{
+          value: '1',
+          label: '首页大图'
+        }, {
+          value: '2',
+          label: '首页腰封图'
+      }, {
+          value: '3',
+          label: '新闻图片'
+      }, {
+          value: '4',
+          label: '友情链接图片'
+      }],
+      dialogImageUrl: '',
+      current: 1,
+      pagesize: 10,
+      // 总共有多少条数据
+      total: 0,
+      addUserList: false,
+      changeUser: false,
+    }
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    // 列表展示
+    async loadData() {
+      const response = await this.$http.get(`app/page/photos?&current=${this.current}&size=${this.pagesize}`);
+      if (response.data.code === 1) {
+        this.loading = false;
+        this.usertable = response.data.responseData.records;
+        this.total = response.data.responseData.total;
+      }
+    },
+    //单条查询
+    async queryLook() {
+      const response = await this.$http.get(`app/page/photos?&current=${this.current}&size=${this.pagesize}&name=${this.name}`);
+      if (response.data.code === 1) {
+        this.loading = false;
+        this.usertable = response.data.responseData.records;
+        this.total = response.data.responseData.total;
+      }
+    },
+    // 新增图片
+    addData(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if(valid) {
+            const formData = new FormData();
+            formData.append('photo', this.formList.photo);
+            formData.append('name', this.formList.name);
+            formData.append('type', this.formList.type);
+            formData.append('goPageUrl', this.formList.goPageUrl);
+            const response = await this.$http.post(`app/photo`, formData);
+            if(response.data.code === 1) {
+              this.loadData();
+              this.addUserList = false;
+              this.$message({
+                type: 'success',
+                message: '添加图片成功'
+              });
+            }else {
+              this.$message({
+                type: 'error',
+                message: '添加图片失败'
+              });
+            }
+        }else {
+          this.$message.error('请查看是否有选项未填写或填错项');
+          return false;
+        }
+      })
+    },
+    // 打开修改并赋予信息
+    openChange(user) {
+      this.changeUser = true;
+      this.formList.id = user.id;
+      this.formList.name = user.name;
+      this.formList.goPageUrl = user.goPageUrl;
+      if(user.type == 1) {
+        this.formList.type = '首页大图'
+      }
+      if(user.type == 2) {
+        this.formList.type = '首页腰封图'
+      }
+      if(user.type == 3) {
+        this.formList.type = '新闻图片'
+      }
+      if(user.type == 4) {
+        this.formList.type = '友情链接图片'
+      }
+    },
+    // 修改用户
+    async changeData() {
+      const formData = new FormData();
+      formData.append('id', this.formList.id);
+      formData.append('name', this.formList.name);
+      formData.append('type', this.formList.type);
+      formData.append('goPageUrl', this.formList.goPageUrl);
+      const response = await this.$http.put(`app/photo`, formData);
+      if(response.data.code === 1) {
+        this.loadData();
+        this.changeUser = false;
+        this.$message({
+          type: 'success',
+          message: '修改图片成功'
+        });
+      }else {
+        this.$message({
+          type: 'error',
+          message: '修改图片失败'
+        });
+      }
+    },
+     // 点击删除按钮
+    Delete(id) {
+      this.$confirm('是否删除该图片', '提示' ,{
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          const response = await this.$http.put(`app/photo/${id}`);
+          if(response.data.code === 1) {
+            this.loadData();
+            this.$message({
+              type: 'success',
+              message: '删除成功'
+            });
+          }else {
+            this.$message({
+              type: 'error',
+              message: '删除失败'
+            });
+          }
+        }).catch(() => {
+           this.$message({ type: 'info', message: '已取消删除'});
+      });
+    },
+
+
+    // 清空表单数据
+    handleEditDialogClose() {
+      for (var key in this.formList) {
+        this.formList[key] = '';
+      };
+      //清除图片缓存
+      this.$refs.upload.clearFiles();
+
+    },
+    // 上传图片功能
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleSuccess (a) {
+      this.formList.photo = a.raw;
+    },
+    // 分页方法
+    handleSizeChange(val) {
+      this.pagesize = val;
+      if(this.name !== '') {
+        this.queryLook();
+      }else{
+        this.loadData();
+      };
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.current = val;
+      if(this.name !== '') {
+        this.queryLook();
+      }else{
+        this.loadData();
+      };
+      console.log(`当前页: ${val}`);
+    },
+
+  }
+};
+</script>
+
+<style>
+.photo {
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+}
+.photo .title {
+  font-size: 5px;
+  margin-bottom: 20px;
+}
+.photo .top {
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.photo .text {
+  display: inline-block;
+  color: #000;
+  font-size: 16px ;
+  margin-left: 1%;
+}
+.photo .input-demo {
+  display: inline-block;
+  width: 20%;
+  margin-left: 1%;
+}
+.photo .block {
+  font-size: 5px;
+  text-align: center;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+.photo .el-dialog {
+  width: 60%;
+}
+.photo .el-dialog__header, .el-dialog__body {
+  padding: 0 20px;
+}
+.photo .tou {
+  font-size: 20px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 15px;
+}
+.photo .line {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 2px;
+  background-color: #d9d9d9;
+}
+.photo .xinxi {
+  text-align: center;
+  margin: 15px auto;
+  font-size: 18px;
+}
+</style>

src/views/zhanshi/zhanshi.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="zhanshi">
+    <h1 style="font-size: 30px;margin: 0 auto; color:orange;">{{this.formData.title}}</h1>
+    <div style="font-size: 20px;" v-html="this.formData.content">
+      {{this.formData.content}}
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  data() {
+    return {
+       id: 8,
+       formData: {}
+    };
+  },
+  created() {
+    this.loadData();
+  },
+  methods: {
+    async loadData() {
+      const response = await this.$http.get(`app/newsArticle/5`);
+      if (response.data.code === 1) {
+        this.loading = false;
+        // console.log(response.data)
+        this.formData = response.data.responseData;
+        // console.log(response.data.responseData);
+      }
+    },
+
+  }
+};
+</script>
+
+<style type="text/css">
+
+</style>