![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/vuejs-logo-300x180.png\"){kind=logo}
<\/p>\n<\/p>\n
\u6700\u8fd1\u6d41\u884c\u308a\u306e vue.js \u3092 Spring boot \u3068\u7d44\u307f\u5408\u308f\u305b\u3066Web\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n
\u53c2\u8003\u3057\u305f\u30b5\u30a4\u30c8\u306f\u3053\u3061\u3089\u3002<\/p>\n
\u226b [Full-stack] Spring Boot + Vue.js: CRUD example<\/a><\/p>\n \u53c2\u8003\u306b\u3057\u305f\u30b5\u30a4\u30c8\u3067\u306f Tutorial \u3092\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u306b\u3057\u3066\u307e\u3059\u304c\u3001\u3053\u3053\u3067\u306f Book \u3092\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u3068\u3059\u308b bookshelf \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n \u307e\u305a\u306f\u3001Spring boot\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304b\u3089\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u30d5\u30a1\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u300c\u65b0\u898fSpring\u30b9\u30bf\u30fc\u30bf\u30fc\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u300d\u3092\u9078\u629e\u3057\u3066\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u4f9d\u5b58\u95a2\u4fc2\u306f\u3001Spring Data JPA \u3068 H2 Database \u3068 Spring Web \u3092\u9078\u629e\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n \u4f9d\u5b58\u3057\u3066\u3044\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u81ea\u52d5\u7684\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u308b\u307e\u3067\u3001\u3057\u3070\u3089\u304f\u5f85\u3061\u307e\u3059\u3002<\/p>\n \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30fb\u30a8\u30af\u30b9\u30d7\u30ed\u30fc\u30e9\u30fc\u306e\u8868\u793a\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u5316\u3057\u305f\u3089\u6e96\u5099\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n src\/main\/resources \u306b\u3042\u308b application.properties \u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u3001H2\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3092\u3057\u307e\u3059\u3002<\/p>\n \u65b0\u898f-\u30af\u30e9\u30b9\u3067Book\u30af\u30e9\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u6b21\u306b\u30ea\u30dd\u30b8\u30c8\u30ea\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n \u65b0\u898f-\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u3067BookRepository\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u65b0\u898f-\u30af\u30e9\u30b9\u3067BookController\u30af\u30e9\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u6b21\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092 vue.js \u3067\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n \u53c2\u8003\u30b5\u30a4\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067 vue \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308c\u3068\u8a00\u3063\u3066\u307e\u3059\u3002<\/p>\n \u3053\u308c\u306f\u3001vue CLI \u3060\u305d\u3046\u3067\u3059\u3002 \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u305f\u304b\u3001\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n \u5927\u4e08\u592b\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n vue\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002 \u306a\u3093\u304b\u3001\u6012\u3089\u308c\u305f\u611f\u3058\u3067\u3059\u3002<\/p>\n \u63d0\u793a\u3055\u308c\u305f\u3075\u305f\u3064\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n \u6c17\u3092\u53d6\u308a\u76f4\u3057\u3066\u3082\u3046\u4e00\u5ea6create\u3057\u307e\u3059\u3002<\/p>\n \u4f55\u304b\u9078\u629e\u3057\u308d\u3063\u3066\u8a00\u308f\u308c\u3066\u307e\u3059\u306e\u3067\u3001\u3068\u308a\u3042\u3048\u305a\u3001\u305d\u306e\u307e\u307e\u3067Enter\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n Eclipse\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u69cb\u6210\u3067\u4f5c\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n Spring boot \u4e0a\u3067 Vue \u3092\u52d5\u304b\u3059\u306b\u306f\u3001vue \u3092\u30d3\u30eb\u30c9\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3089\u3057\u3044\u3067\u3059\u3002 [json] \u30d3\u30eb\u30c9\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n \u306a\u3093\u304b\u3001\u3044\u3063\u3071\u3044 Warning \u304c\u51fa\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002 node.js \u3092 latest \u3067\u306f\u306a\u304f stable \u306b\u5909\u3048\u3066\u307f\u307e\u3059\u3002<\/p>\n \u30d3\u30eb\u30c9\u3057\u306a\u304a\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n \u4eca\u5ea6\u306f\u3001Warning\u306a\u3069\u51fa\u306a\u3044\u3067\u3001\u6b63\u5e38\u306b\u30d3\u30eb\u30c9\u3067\u304d\u305f\u3088\u3046\u3067\u3059\u3002 \u52d5\u304d\u307e\u3057\u305f\uff01<\/p>\n \u52d5\u3044\u305f\u3068\u3053\u308d\u3067\u3001\u6b21\u306f\u53c2\u8003\u30b5\u30a4\u30c8\u306b\u5408\u308f\u305b\u305f\u611f\u3058\u3067\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n \u53c2\u8003\u30b5\u30a4\u30c8\u3067\u306f\u3001\u5510\u7a81\u306b\u3001\u6b21\u306e\u3088\u3046\u306b\u66f8\u304b\u308c\u3066\u307e\u3059\u3002<\/p>\n After the process is done. We create new folders and files like the following tree:<\/p><\/blockquote>\n \u3044\u304d\u306a\u308a\u3001AddTutorial.vue\u30fbTutorial.vue\u30fbTutorialList.vue\u30fbTutorialDataService.js \u306e4\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u73fe\u3057\u307e\u3059\u3002 \u3050\u3050\u3063\u3066\u307f\u305f\u3089\u3001Github\u306b\u305d\u308c\u3063\u307d\u3044\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u304c\u51fa\u3066\u307e\u3057\u305f\u306e\u3067\u3001\u305d\u3061\u3089\u3092\u53c2\u8003\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \u226b Github – danielcgithub\/vue-getting-started<\/a><\/p>\n AddBook.vue<\/p>\n Book.vue<\/p>\n BookList.vue<\/p>\n BookDataService.js<\/p>\n \u3068\u308a\u3042\u3048\u305a\u3001Vue Router \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u307f\u305f\u3044\u3067\u3059\u3002 \u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u306f\u3001SPA\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u3068\u66f8\u304b\u308c\u3066\u307e\u3059\u306e\u3067\u3001SPA\u3067\u306a\u3051\u308c\u3070\u4e0d\u8981\u306a\u306e\u304b\u3082\uff1f vjs\/src \u306b\u3001router.js \u3092\u4f5c\u308c\u3070\u3044\u3044\u3088\u3046\u3067\u3059\u3002<\/p>\n main.js \u306b\u4f5c\u6210\u3057\u305f router \u3092\u8ffd\u52a0\u3059\u308c\u3070\u3044\u3044\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n \u53c2\u8003\u30b5\u30a4\u30c8\u3067\u306f\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3092\u8ffd\u52a0\u3057\u3066\u307e\u3059\u304c\u3001\u3053\u3053\u3067\u306f\u7701\u7565\u3057\u307e\u3059\u3002 axios\u306f\u3001HTTP\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3060\u305d\u3046\u3067\u3059\u3002<\/p>\nSpring boot\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n
![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/eclipse-create-project-300x166.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/eclipse-create-project-dependency-300x223.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/eclipse-project-explorer-300x245.png\")
<\/p>\n\r\nspring.datasource.url=jdbc:h2:mem:testdb\r\nspring.datasource.driverClassName=org.h2.Driver\r\nspring.datasource.username=sa\r\nspring.datasource.password=\r\nspring.jpa.show-sql=true\r\nspring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect\r\nspring.jpa.hibernate.ddl-auto=update\r\nspring.h2.console.enabled=true\r\n<\/pre>\n
Book\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n
\r\npackage jp.bookshelf;\r\n\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\nimport javax.persistence.GeneratedValue;\r\nimport javax.persistence.GenerationType;\r\nimport javax.persistence.Id;\r\n\r\n@Entity\r\npublic class Book {\r\n\t@Id\r\n\t@GeneratedValue(strategy = GenerationType.AUTO)\r\n\tprivate long id;\r\n\t\r\n\t@Column\r\n\tprivate String title;\r\n\t\r\n\t@Column\r\n\tprivate String author;\r\n\r\n\tpublic long getId() {\r\n\t\treturn id;\r\n\t}\r\n\r\n\tpublic void setId(long id) {\r\n\t\tthis.id = id;\r\n\t}\r\n\r\n\tpublic String getTitle() {\r\n\t\treturn title;\r\n\t}\r\n\r\n\tpublic void setTitle(String title) {\r\n\t\tthis.title = title;\r\n\t}\r\n\r\n\tpublic String getAuthor() {\r\n\t\treturn author;\r\n\t}\r\n\r\n\tpublic void setAuthor(String author) {\r\n\t\tthis.author = author;\r\n\t}\r\n}\r\n<\/pre>\nBookRepository\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n
\n\u62e1\u5f35\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u3067 JpaRepository\r\npackage jp.bookshelf;\r\n\r\nimport java.util.List;\r\n\r\nimport org.springframework.data.jpa.repository.JpaRepository;\r\n\r\npublic interface BookRepository extends JpaRepository<Book, Long> {\r\n\tList<Book> findByTitle(String title);\r\n\tList<Book> findByAuthor(String author);\r\n}\r\n<\/pre>\nBookController\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n
\r\npackage jp.bookshelf;\r\n\r\nimport java.util.List;\r\n\r\nimport org.springframework.beans.factory.annotation.Autowired;\r\nimport org.springframework.http.HttpStatus;\r\nimport org.springframework.http.ResponseEntity;\r\nimport org.springframework.web.bind.annotation.DeleteMapping;\r\nimport org.springframework.web.bind.annotation.GetMapping;\r\nimport org.springframework.web.bind.annotation.PathVariable;\r\nimport org.springframework.web.bind.annotation.PostMapping;\r\nimport org.springframework.web.bind.annotation.RequestBody;\r\nimport org.springframework.web.bind.annotation.RequestMapping;\r\nimport org.springframework.web.bind.annotation.RequestParam;\r\nimport org.springframework.web.bind.annotation.RestController;\r\n\r\n@CrossOrigin(origins = "http:\/\/localhost:8081")\r\n@RestController\r\n@RequestMapping("\/api")\r\npublic class BookController {\r\n\t@Autowired\r\n\tBookRepository bookRepository;\r\n\t\r\n\t@GetMapping("\/books")\r\n\tpublic ResponseEntity<List<Book>> getBooks(@RequestParam(required = false) String title) {\r\n\t\tList<Book> list = bookRepository.findByTitle(title);\r\n\t\treturn new ResponseEntity<List<Book>>(list, HttpStatus.OK);\r\n\t}\r\n\t\r\n\t@GetMapping("\/books\/{id}")\r\n\tpublic ResponseEntity<Book> getBookById(@PathVariable("id") Long id) {\r\n\t\tOptional<Book> data = bookRepository.findById(id);\r\n\t\tif (data.isPresent()) {\r\n\t\t\treturn new ResponseEntity<Book>(data.get(), HttpStatus.OK);\r\n\t\t}\r\n\t\treturn new ResponseEntity<Book>(HttpStatus.NOT_FOUND);\r\n\t}\r\n\r\n\t@PostMapping("\/books")\r\n\tpublic ResponseEntity<Book> createBook(@RequestBody Book book) {\r\n\t\tBook b = bookRepository.saveAndFlush(book);\r\n\t\treturn new ResponseEntity<Book>(b, HttpStatus.OK);\r\n\t}\r\n\t\r\n\t@PutMapping("\/books\/{id}")\r\n\tpublic ResponseEntity<Book> updateBook(@RequestBody Book book) {\r\n\t\tbook = bookRepository.saveAndFlush(book);\r\n\t\treturn new ResponseEntity<Book>(book, HttpStatus.OK);\r\n\t}\r\n\t\r\n\t@DeleteMapping("\/books")\r\n\tpublic ResponseEntity<HttpStatus> deleteBook(@PathVariable("id") long id) {\r\n\t\tbookRepository.deleteById(id);\r\n\t\treturn new ResponseEntity<HttpStatus>(HttpStatus.OK);\r\n\t}\r\n}\r\n<\/pre>\n\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092 vue.js \u3067\u4f5c\u6210\u3059\u308b<\/h2>\n
\r\n% vue create vue-js-client-crud\r\n<\/pre>\n
\n\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3088\u3046\u3067\u3059\u3002<\/p>\n\r\n% npm install -g vue-cli\r\nnpm WARN deprecated har-validator@5.1.5: this library is no longer supported\r\nnpm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https:\/\/v8.dev\/blog\/math-random for details.\r\nnpm WARN deprecated request@2.88.2: request has been deprecated, see https:\/\/github.com\/request\/request\/issues\/3142\r\nnpm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)\r\nnpm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue\/cli\r\n\r\nadded 245 packages, and audited 246 packages in 18s\r\n\r\n10 packages are looking for funding\r\n run `npm fund` for details\r\n\r\n4 moderate severity vulnerabilities\r\n\r\nTo address all issues (including breaking changes), run:\r\n npm audit fix --force\r\n\r\nRun `npm audit` for details.\r\nnpm notice\r\nnpm notice New minor version of npm available! 8.3.1 -> 8.4.1\r\nnpm notice Changelog: https:\/\/github.com\/npm\/cli\/releases\/tag\/v8.4.1\r\nnpm notice Run npm install -g npm@8.4.1 to update!\r\nnpm notice\r\n<\/pre>\n
\r\n% vue --version\r\n2.9.6\r\n<\/pre>\n
\nSpring boot \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u76f4\u4e0b\u306b vjs \u3068\u3044\u3046\u540d\u524d\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\r\n% vue create vjs\r\n\r\n vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.\r\n You may want to run the following to upgrade to Vue CLI 3:\r\n\r\n npm uninstall -g vue-cli\r\n npm install -g @vue\/cli\r\n<\/pre>\n
\r\n% npm uninstall -g vue-cli\r\n\r\nremoved 245 packages, and audited 1 package in 2s\r\n\r\nfound 0 vulnerabilities\r\n% npm install -g @vue\/cli\r\nnpm WARN deprecated har-validator@5.1.5: this library is no longer supported\r\nnpm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https:\/\/v8.dev\/blog\/math-random for details.\r\nnpm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https:\/\/v8.dev\/blog\/math-random for details.\r\nnpm WARN deprecated urix@0.1.0: Please see https:\/\/github.com\/lydell\/urix#deprecated\r\nnpm WARN deprecated source-map-url@0.4.1: See https:\/\/github.com\/lydell\/source-map-url#deprecated\r\nnpm WARN deprecated request@2.88.2: request has been deprecated, see https:\/\/github.com\/request\/request\/issues\/3142\r\nnpm WARN deprecated resolve-url@0.2.1: https:\/\/github.com\/lydell\/resolve-url#deprecated\r\nnpm WARN deprecated source-map-resolve@0.5.3: See https:\/\/github.com\/lydell\/source-map-resolve#deprecated\r\nnpm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https:\/\/www.apollographql.com\/docs\/apollo-server\/migration\/#tracing for details\r\nnpm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https:\/\/www.apollographql.com\/docs\/apollo-server\/integrations\/plugins\/\r\nnpm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https:\/\/www.apollographql.com\/docs\/apollo-server\/migration\/#cachecontrol for details.\r\nnpm WARN deprecated @hapi\/topo@3.1.6: This version has been deprecated and is no longer supported or maintained\r\nnpm WARN deprecated @hapi\/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained\r\nnpm WARN deprecated @hapi\/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained\r\nnpm WARN deprecated @hapi\/address@2.1.4: Moved to 'npm install @sideway\/address'\r\nnpm WARN deprecated @hapi\/joi@15.1.1: Switch to 'npm install joi'\r\nnpm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\\nAnd it will no longer receive updates.\\nWe recommend you to migrate to scoped packages such as @graphql-tools\/schema, @graphql-tools\/utils and etc.\\nCheck out https:\/\/www.graphql-tools.com to learn what package you should use instead\r\n\r\nadded 945 packages, and audited 946 packages in 1m\r\n\r\n68 packages are looking for funding\r\n run `npm fund` for details\r\n\r\n13 vulnerabilities (6 moderate, 7 high)\r\n\r\nSome issues need review, and may require choosing\r\na different dependency.\r\n\r\nRun `npm audit` for details.\r\n<\/pre>\n
\r\n% vue create vjs\r\nVue CLI v4.5.15\r\n? Please pick a preset: (Use arrow keys)\r\n\u276f Default ([Vue 2] babel, eslint)\r\n Default (Vue 3) ([Vue 3] babel, eslint)\r\n Manually select features\r\n<\/pre>\n
\r\nVue CLI v4.5.15\r\n? Please pick a preset: Default ([Vue 2] babel, eslint)\r\n\r\n\r\nVue CLI v4.5.15\r\n\u2728 Creating project in \/Users\/satoshis\/Documents\/workspace\/bookshelf\/vjs.\r\n\ud83d\uddc3 Initializing git repository...\r\n\u2699\ufe0f Installing CLI plugins. This might take a while...\r\n\r\n\r\nadded 1285 packages, and audited 1286 packages in 1m\r\n\r\n86 packages are looking for funding\r\n run `npm fund` for details\r\n\r\n70 vulnerabilities (2 low, 57 moderate, 11 high)\r\n\r\nTo address issues that do not require attention, run:\r\n npm audit fix\r\n\r\nTo address all issues (including breaking changes), run:\r\n npm audit fix --force\r\n\r\nRun `npm audit` for details.\r\n\ud83d\ude80 Invoking generators...\r\n\ud83d\udce6 Installing additional dependencies...\r\n\r\n\r\nadded 55 packages, and audited 1341 packages in 5s\r\n\r\n91 packages are looking for funding\r\n run `npm fund` for details\r\n\r\n72 vulnerabilities (2 low, 59 moderate, 11 high)\r\n\r\nTo address issues that do not require attention, run:\r\n npm audit fix\r\n\r\nTo address all issues (including breaking changes), run:\r\n npm audit fix --force\r\n\r\nRun `npm audit` for details.\r\n\u2693 Running completion hooks...\r\n\r\n\ud83d\udcc4 Generating README.md...\r\n\r\n\ud83c\udf89 Successfully created project vjs.\r\n\ud83d\udc49 Get started with the following commands:\r\n\r\n $ cd vjs\r\n $ npm run serve\r\n<\/pre>\n
![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/eclipse-vjs-300x256.png\")
<\/p>\nSpring boot \u4e0a\u3067\u52d5\u304b\u3057\u3066\u307f\u308b<\/h2>\n
\n\u305f\u3060\u3057\u3001\u30d3\u30eb\u30c9\u3057\u305f JavaScript \u30d5\u30a1\u30a4\u30eb\u3092 Spring boot \u3067\u52d5\u304b\u3059\u305f\u3081\u306b\u306f\u3001src\/main\/resources\/static \u306b\u914d\u7f6e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\npackage.json \u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
\n{
\n “name”: “web”,
\n “version”: “0.1.0”,
\n “private”: true,
\n “scripts”: {
\n “serve”: “vue-cli-service serve”,
\n “build”: “vue-cli-service build –dest ..\/src\/main\/resources\/static\/”,
\n “lint”: “vue-cli-service lint”
\n },
\n[\/json]<\/p>\n\r\n% npm run build\r\n\r\n> vjs@0.1.0 build \/Users\/satoshis\/Documents\/workspace\/bookshelf\/vjs\r\n> vue-cli-service build --dest ..\/src\/main\/resources\/static\/\r\n\r\n\r\n\u2827 Building for production...\r\n\r\n WARNING Compiled with 17 warnings 19:40:46\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'computed' was not found in 'vue'\r\n\r\n warning in .\/src\/router.js\r\n\r\n"export 'default' (imported as 'Router') was not found in 'vue-router'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'defineComponent' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'getCurrentInstance' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'h' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'inject' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'nextTick' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'onActivated' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'onDeactivated' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'onUnmounted' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'provide' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'reactive' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'ref' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'shallowRef' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'unref' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'watch' was not found in 'vue'\r\n\r\n warning in ..\/node_modules\/vue-router\/dist\/vue-router.esm-bundler.js\r\n\r\n"export 'watchEffect' was not found in 'vue'\r\n\r\n File Size Gzipped\r\n\r\n ..\/src\/main\/resources\/static\/js\/chunk-vendors.0a90606c.js 100.24 KiB 35.94 KiB\r\n ..\/src\/main\/resources\/static\/js\/chunk-a020b95a.5f445348.js 23.58 KiB 8.18 KiB\r\n ..\/src\/main\/resources\/static\/js\/app.3b3d464e.js 3.62 KiB 1.73 KiB\r\n ..\/src\/main\/resources\/static\/js\/chunk-2d21767c.356128dc.js 2.12 KiB 0.82 KiB\r\n ..\/src\/main\/resources\/static\/js\/chunk-2d0ba6fb.906a32b7.js 1.89 KiB 0.85 KiB\r\n ..\/src\/main\/resources\/static\/js\/chunk-2d0bd7a8.7172d8bc.js 1.68 KiB 0.73 KiB\r\n ..\/src\/main\/resources\/static\/css\/app.d40fc157.css 0.16 KiB 0.14 KiB\r\n\r\n Images and other types of assets omitted.\r\n\r\n DONE Build complete. The ..\/src\/main\/resources\/static directory is ready to be deployed.\r\n INFO Check out deployment instructions at https:\/\/cli.vuejs.org\/guide\/deployment.html\r\n<\/pre>\n
\n\u3050\u3050\u3063\u3066\u307f\u308b\u3068\u3001node.js \u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u3088\u308d\u3057\u304f\u306a\u3044\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n\r\n% nodebrew install-binary stable\r\nFetching: https:\/\/nodejs.org\/dist\/v16.13.2\/node-v16.13.2-darwin-x64.tar.gz\r\n############################################################################################################################## 100.0%\r\nInstalled successfully\r\n% nodebrew ls\r\nv16.13.2\r\nv17.4.0\r\n\r\ncurrent: v17.4.0\r\n% nodebrew use 16.13.2\r\nuse v16.13.2\r\n<\/pre>\n
\r\n% npm run build\r\n\r\n> web@0.1.0 build\r\n> vue-cli-service build\r\n\r\n\r\n\u2819 Building for production...\r\n\r\n DONE Compiled successfully in 2214ms 23:51:49\r\n\r\n File Size Gzipped\r\n\r\n dist\/js\/chunk-vendors.e4229be5.js 95.12 KiB 34.05 KiB\r\n dist\/js\/app.6a32d4e9.js 4.58 KiB 1.63 KiB\r\n dist\/css\/app.fb0c6e1c.css 0.33 KiB 0.23 KiB\r\n\r\n Images and other types of assets omitted.\r\n\r\n DONE Build complete. The dist directory is ready to be deployed.\r\n INFO Check out deployment instructions at https:\/\/cli.vuejs.org\/guide\/deployment.html\r\n<\/pre>\n
\nSpring boot \u3092\u8d77\u52d5\u3057\u3066\u30a2\u30af\u30bb\u30b9\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-hello-247x300.png\")
<\/p>\n\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n
\n\u3057\u304b\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u306b\u3064\u3044\u3066\u306f\u307e\u3063\u305f\u304f\u89e6\u308c\u3089\u308c\u3066\u306a\u3044\u306e\u3067\u3059\u3002<\/p>\n\r\n<template>\r\n\t<div class="submit-form">\r\n\t\t<div v-if="!submitted">\r\n\t\t\t<div class="form-group">\r\n\t\t\t\t<label for="title">Title<\/label>\r\n\t\t\t\t<input type="text" name="title" class="form-control"\r\n\t\t\t\t\tid="title" required v-model="book.title"\r\n\t\t\t\t\/>\r\n\t\t\t<\/div>\r\n\t\t\t<div class="form-group">\r\n\t\t\t\t<label for="author">Author<\/label>\r\n\t\t\t\t<input type="text" name="author" class="form-control"\r\n\t\t\t\t\tid="author" required v-model="book.author"\r\n\t\t\t\t\/>\r\n\t\t\t<\/div>\r\n\t\t\t<button @click="saveBook" class="btn btn-success">Submit<\/button>\r\n\t\t<\/div>\r\n\t\t<div v-else>\r\n\t\t\t<p>Submit successed!<\/p>\r\n\t\t\t<button class="btn btn-success" @click="newBook">Add<\/button>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport BookDataService from "..\/services\/BookDataService";\r\n\r\nexport default {\r\n\tname: "add-book",\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tbook: {\r\n\t\t\t\tid: null,\r\n\t\t\t\ttitle: "",\r\n\t\t\t\tauthor: ""\r\n\t\t\t},\r\n\t\t\tsubmitted: false\r\n\t\t};\r\n\t},\r\n\tmethods: {\r\n\t\tsaveBook() {\r\n\t\t\tvar data = {\r\n\t\t\t\ttitle: this.book.title,\r\n\t\t\t\tauthor: this.book.author\r\n\t\t\t};\r\n\t\t\tBookDataService.create(data)\r\n\t\t\t.then(response => {\r\n\t\t\t\tthis.book.id = response.data.id;\r\n\r\n\t\t\t})\r\n\t\t\t.catch(e => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t});\r\n\t\t},\r\n\r\n\t\tnewBook() {\r\n\t\t\tthis.submitted = false;\r\n\t\t\tthis.book = {}\r\n\t\t}\r\n\t}\r\n};\r\n<\/script>\r\n<\/pre>\n\r\n<template>\r\n\t<div v-if="currentBook" class="edit-form">\r\n\t\t<h4>Book<\/h4>\r\n\t\t<form>\r\n\t\t\t<div class="form-group">\r\n\t\t\t\t<label for="title">Title<\/label>\r\n\t\t\t\t<input type="text" class="form-control" id="title" v-model="currentBook.title"\/>\r\n\t\t\t<\/div>\r\n\t\t\t<div class="form-group">\r\n\t\t\t\t<label for="author">Author<\/label>\r\n\t\t\t\t<input type="text" class="form-control" id="author" v-model="currentBook.author" \/>\r\n\t\t\t<\/div>\r\n\t\t<\/form>\r\n\t\t<button class="badge badge-primary mr-2" @click="deleteBook">Delete<\/button>\r\n\t\t<button type="submit" class="badge badge-success" @click="updateBook">Update<\/button>\r\n\t\t<p>{{ message }}<\/p>\r\n\t<\/div>\r\n\t<div v-else>\r\n\t\t<br \/>\r\n\t\t<p>Click Book<\/p>\r\n\t<\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport BookDataService from "..\/services\/BookDataService";\r\n\r\nexport default {\r\n\tname: "book",\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tcurrentBook: null,\r\n\t\t\tmessage: ''\r\n\t\t};\r\n\t},\r\n\tmethods: {\r\n\t\tgetBook(id) {\r\n\t\t\tBookDataService.get(id)\r\n\t\t\t.then(response => {\r\n\t\t\t\tthis.currentBook = response.data;\r\n\t\t\t\tconsole.log(response.data);\r\n\t\t\t})\r\n\t\t\t.catch(e => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t});\r\n\t\t},\r\n\r\n\t\tupdateBook() {\r\n\t\t\tBookDataService.update(this.currentBook.id, this.currentBook)\r\n\t\t\t.then(response => {\r\n\t\t\t\tconsole.log(response.data);\r\n\t\t\t\tthis.message = 'The book updated.';\r\n\t\t\t})\r\n\t\t\t.catch(e => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t});\r\n\t\t},\r\n\r\n\t\tdeleteBook() {\r\n\t\t\tBookDataService.delete(this.currentBook.id)\r\n\t\t\t.then(response => {\r\n\t\t\t\tconsole.log(response.data);\r\n\t\t\t\tthis.$router.push({ name: "books" });\r\n\t\t\t})\r\n\t\t\t.catch(e => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t});\r\n\t\t}\r\n\t},\r\n\tmounted() {\r\n\t\tthis.message = '';\r\n\t\tthis.getBook(this.$route.params.id);\r\n\t}\r\n};\r\n<\/script>\r\n<\/pre>\n\r\n<template>\r\n\t<div class="list row">\r\n\t\t<div class="col-md-8">\r\n\t\t\t<input type="text" class="form-control" placeholder="Search by title" v-model="title" \/>\r\n\t\t\t<div class="input-group-append">\r\n\t\t\t\t<button class="btn btn-outline-secondary" type="button" @click="searchTitle">Search<\/button>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t<div class="col-md-6">\r\n\t\t\t<h4>Book List<\/h4>\r\n\t\t\t<ul class="list-group">\r\n\t\t\t\t<li class="list-group-item" :class="{ active: index == currentIndex }"\r\n\t\t\t\t\tv-for="(book, index) in books" :key="index"\r\n\t\t\t\t\t@click="setActiveBook(book, index)">{{ book.title }}\r\n\t\t\t\t<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\t\t<div class="col-md-6">\r\n\t\t\t<div v-if="currentBook">\r\n\t\t\t\t<h4>Book<\/h4>\r\n\t\t\t\t<div>{{ currentBook.title }}<\/div>\r\n\t\t\t\t<div>{{ currentBook.author }}<\/div>\r\n\t\t\t\t<a class="badge badge-warning" :href="'\/books' + currentBook.id">Edit<\/a>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport BookDataService from "..\/services\/BookDataService";\r\n\r\nexport default {\r\n\tname: "books-list",\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tbooks: [],\r\n\t\t\tcurrentBook: null,\r\n\t\t\tcurrentIndex: -1,\r\n\t\t\ttitle: ""\r\n\t\t};\r\n\t},\r\n\tmethods: {\r\n\t\tretrieveBooks() {\r\n\t\t\tBookDataService.getAll()\r\n\t\t\t.then(response => {\r\n\t\t\t\tthis.books = response.data;\r\n\t\t\t\tconsole.log(response.data);\r\n\t\t\t})\r\n\t\t\t.catch(e => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t});\r\n\t\t},\r\n\r\n\t\tsetActiveBook(book, index) {\r\n\t\t\tthis.currentBook = book;\r\n\t\t\tthis.currentIndex = index;\r\n\t\t},\r\n\r\n\t\tsearchTitle() {\r\n\t\t\tBookDataService.findByTitle(this.title)\r\n\t\t\t.then(response => {\r\n\t\t\t\tthis.books = response.data;\r\n\t\t\t\tconsole.log(response.data);\r\n\t\t\t})\r\n\t\t\t.catch(e => {\r\n\t\t\t\tconsole.log(e);\r\n\t\t\t});\r\n\t\t}\r\n\t},\r\n\tmounted() {\r\n\t\tthis.retrieveBooks();\r\n\t}\r\n}\r\n<\/script>\r\n<\/pre>\n\r\nimport http from "..\/http-common";\r\n\r\nclass BookDataService {\r\n\tgetAll() {\r\n\t\treturn http.get("\/books");\r\n\t}\r\n\r\n\tget(id) {\r\n\t\treturn http.get(`\/books\/${id}`);\r\n\t}\r\n\r\n\tcreate(data) {\r\n\t\treturn http.post("\/books", data);\r\n\t}\r\n\r\n\tupdate(id, data) {\r\n\t\treturn http.put(`\/books\/${id}`, data);\r\n\t}\r\n\r\n\tdelete(id) {\r\n\t\treturn http.delete(`\/books\/${id}`);\r\n\t}\r\n\r\n\tfindByTitle(title) {\r\n\t\treturn http.get(`\/books?title=${title}`);\r\n\t}\r\n}\r\n\r\nexport default new BookDataService();\r\n<\/pre>\nVue Router \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h2>\n
\n\u8a73\u3057\u304f\u306f\u8abf\u3079\u3066\u306a\u3044\u3093\u3067\u3059\u304c\u3001\u305d\u3046\u3089\u3057\u3044\u3067\u3059\u3002
\n\u307e\u3042\u3001\u3068\u308a\u3042\u3048\u305a\u306f\u52d5\u304b\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u5c02\u5ff5\u3057\u3066\u3001\u3042\u3068\u3067\u8abf\u3079\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\n\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u3067\u3059\u304c\u3001\u53c2\u8003\u30b5\u30a4\u30c8\u3067\u3082\u4f7f\u308f\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u3042\u307e\u308a\u8003\u3048\u305a\u306b\u4f7f\u3046\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n\r\n% npm install vue-router\r\n\r\nadded 23 packages, and audited 24 packages in 6s\r\n\r\n1 package is looking for funding\r\n run `npm fund` for details\r\n\r\nfound 0 vulnerabilities\r\n<\/pre>\n
router.js\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n
\r\nimport Vue from "vue";\r\nimport Router from "vue-router";\r\nVue.use(Router);\r\nexport default new Router({\r\n mode: "history",\r\n routes: [\r\n {\r\n path: "\/",\r\n alias: "\/books",\r\n name: "books",\r\n component: () => import(".\/components\/BooksList")\r\n },\r\n {\r\n path: "\/books\/:id",\r\n name: "book-details",\r\n component: () => import(".\/components\/Book")\r\n },\r\n {\r\n path: "\/add",\r\n name: "add",\r\n component: () => import(".\/components\/AddBook")\r\n }\r\n ]\r\n});\r\n<\/pre>\nmain.js \u3092\u5909\u66f4\u3059\u308b<\/h2>\n
\r\nimport Vue from 'vue'\r\nimport App from '.\/App.vue'\r\nimport router from '.\/router'\r\n\r\nVue.config.productionTip = false\r\n\r\nnew Vue({\r\n router,\r\n render: h => h(App),\r\n}).$mount('#app')\r\n<\/pre>\nApp.vue \u3092\u5909\u66f4\u3059\u308b<\/h2>\n
\nHelloWorld\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3084style\u306f\u3001\u3068\u308a\u3042\u3048\u305a\u6b8b\u3057\u305f\u307e\u307e\u306b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\r\n<template>\r\n <div id="app">\r\n <img alt="Vue logo" src=".\/assets\/logo.png">\r\n <HelloWorld msg="Welcome to Your Vue.js App"\/>\r\n <div class="container mt-3">\r\n <router-view \/>\r\n <\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport HelloWorld from '.\/components\/HelloWorld.vue'\r\n\r\nexport default {\r\n name: 'App',\r\n components: {\r\n HelloWorld\r\n }\r\n}\r\n<\/script>\r\n\r\n<style>\r\n#app {\r\n font-family: Avenir, Helvetica, Arial, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n text-align: center;\r\n color: #2c3e50;\r\n margin-top: 60px;\r\n}\r\n<\/style>\r\n<\/pre>\naxios\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h2>\n
![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-226x300.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-1-300x122.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-2-300x128.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-3-300x196.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-4-300x207.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-5-300x171.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-6-300x191.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-7-300x246.png\")
<\/p>\n![\"\"](\"https:\/\/software.satoshis.jp\/wp-content\/uploads\/2022\/02\/springboot-vue-bookshelf-8-300x203.png\")
<\/p>\n