servletでvue-router historyモード&フロントエンド構成レコードを使用

10775 ワード

プログラミングメモ

ディレクトリ構造

- dist // webpack       
| - bundle.js
  - // ...woff,ttf,svg 
- static //         
- WEB-INF
  - lib
  - web.xml
- index.jsp //

index.jsp

"utf-8" %>
<html>
<head>
    <title>title>
    <meta charset="UTF-8">
head>
<body>



<script src="./dist/bundle.js">script>
body>
html>

web.xml


<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <error-page>
        <error-code>404error-code>
        <location>/index.jsplocation>
    error-page>
    <servlet-mapping>
        <servlet-name>defaultservlet-name>
        <url-pattern>/dist/*url-pattern>
    servlet-mapping>
    <servlet-mapping>
        <servlet-name>defaultservlet-name>
        <url-pattern>/static/*url-pattern>
    servlet-mapping>
web-app>

ピット/ソリューション
リソース使用/ ./からのはのアドレスでまり、127.0.0.1:8080/foo/barにアクセスするとのは127.0.0.1:8080/foo/dist/bundle.jsをしてファイルがつからず、のリソースは /にされ、のはルートディレクトリをとしてされ、つまり127.0.0.1/からまり、どのでも127.0.0.1:8080/dist/bundle.jsにする.
フロントエンド
package.json

{
  "name": "shop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js",
    "build": "webpack",
    "buildp": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "eslint": "^4.7.1",
    "eslint-config-airbnb-base": "^12.0.0",
    "eslint-plugin-import": "^2.7.0",
    "file-loader": "^0.11.2",
    "jquery": "^1.12.4",
    "style-loader": "^0.18.2",
    "vue": "^2.4.4",
    "vue-loader": "^13.0.5",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0"
  }
}

.eslintrc.json

{
  "extends": "airbnb-base",
  "rules": {
    "no-console": "off"
  }
}

.babelrc

{
  "presets": ['env']
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    publicPath: '/dist/',
    path: path.resolve(__dirname, '../web/dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: ['env'] },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js',
    },
  },
};

SQL Serverはトリガを使用して重複する列を削除します(Delete duplicate rows using cursor in SQL Server)

PythonのFlaskで画像データをreturnし、HTMLのcanvas要素へ描写する