Morioh
Login
Asmait Ermias

Asmait Ermias

3 years ago

Web Application for Task Management Tool

TaskAgile

Open source task management tool built with Vue.js 2.4.2, Spring Boot 2, and MySQL 5.7+

Development environment

Back-end

  • Spring-boot v2.0.4.RELEASE
  • MySQL 5.7+

Front-end

  • node v10.23.1
  • Vue.js 2 + vue / cli v4.5.11
  • The environment setting part has too many contents and is organized in a separate document.

Creating a back-end framework with Spring Initializer

git

  1. First, log on to github.com and create a new repository with New Repository.
  • Repository name: skyweb.vuejs.spring-boot.mysql
  • set to public
  1. Right-click the project folder and run git bash with git bash here. When a bash window is created, execute the following command to save it to the repository.
  1. After the initial push, you can process as follows in the source control tab of vsc, not git bash or github Destop
  • add stage
  • commit: comment input possible
  • push: The first push was authenticated, but the second push can be pushed without authentication.

Local development

Create src/main/resources/application-dev.properties with the following settings to override the settings in application.properties.

spring.datasource.url=jdbc:mysql://localhost:3306/task_agile?useSSL=false
spring.datasource.username=<your username>
spring.datasource.password=<your password>

In the case of windows, the following items need to be added to the system environment variable to set the active profile to application-dev.properties spring_profiles_active: For dev unix/rinux, write export spring_profiles_active=dev to the bash profile

Commands

  • Use mvn install to build both the front-end and the back-end
  • Use mvn test to run the tests of the back-end and the front-end
  • Use mvn spring-boot:run to start the back-end
  • Use npm run serve inside the front-end directory to start the front-end
  • Use java -jar target/app-0.0.1-SNAPSHOT.jar to start the bundled application

Troubleshooting

  • When creating with Spring Initializer, an error occurred when creating with java 11 => When I changed the Java Version to 8 in the pom.xml, I saw that it runs normally.

  • java.sql.SQLException: The server time zone value ‘占쏙옙占싼민깍옙 표占쌔쏙옙’ is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the ‘serverTimezone’ configuration property) to use a more specific time zone value if you want to utilize time zone support. => mysql용 database 연결 정보에 serverTimezone=UTC 를 아래와 같이 추가한다. spring.datasource.url=jdbc:mysql://localhost:3306/task_agile?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC

Creating a front-end framework with Vue-Cli

Development environment

The version of the development tool is as follows. node v10.23.1 + vue/cli v4.5.11

  • If the node and vue/cli versions are too different, it becomes a problem. In particular, in the case of nightwatch for e2e testing, it is linked with webdriver and chromedriver is linked with the latest Chrome browser, so chromedriver should also be used up to date. This is because the Chrome browser automatically updates. In other words, in order to test e2e with the Chrome browser, the Chrome browser version is the standard, and the versions of the rest of the development tools are combined.

And during development, the Chrome browser should disable automatic updates. If possible, it is a good idea to configure the development environment on the virtual PC.

Installation instruction

vue-cli install npm install -g @vue/cli

Creating a front-end skeleton in the front-end folder with vue-cli In the installation option, when installing sass, I was worried between dart-Sasss and node-Sass, but I chose ode-Sass. I looked up and found that dart-Sass has more strength in cross-platform, but it is said that node-Sass is more used these days in the swordsaw process. Because it develops so rapidly anyway, it seems better to follow the trend.

vue create front-end

Run front-end APP

npm run serve in front-end folder

Commands

  • npm run serve : front-end App execute
  • npm run build : front-end App build
  • npm run test:unit : front-end App unit test
  • npm run test:e2e : front-end App e2e test
  • npm run lint : front-end App lint
  • npm run test : front-end App unit and e2e test" npm run test는 npm test로 실행가능

test(unit/e23 test)

above sea level test

Troubleshooting

Phenomenon 1: In the state of node version 8.12.0, npm version 6.4.1, a front-end skeleton was created with vue-cli, but an error occurred in the chromdriver plugin. err! Failed at the chromedriver@87.0.5 install script handling: The same error occurs even if the npm version is upgraded.I tried alternating the sass version with dart-saas and node-sass, but the same error. Among other logs, the plugin requires node 10 or higher. There is also a message saying that chromdriver is the latest, but the node version is too old to cause an error => Install nvm that can manage multiple node versions while completely deleting and reinstalling the existing node 8.12.0 and then node Install the highest version of 10, 10.23.1 => Yarn installation => After vue/cli installation, vue create front-end is executed to complete the installation successfully.

Phenomenon 2: As the version of nightwatch goes up, I am concerned that there will be a problem because the version is different when writing the test code, so when I set the node version to 8.12 and vue/cli to 3.0.1 according to the sample example in the book, a chromedriver error occurred in e2e test In the middle, I left node 10.23.1 on the sample front-end of the existing book and ran only vue/cli by downgrading to 3.0.1 and running it, a unit test error occurred. Report, delete package-lock.json and reinstall, the error disappears

Action: The e2e test error is caused by chromedriver. Node 8.12 and nitchwatch, chromdriver, and chrome browsers are connected, and chromedrvier, which is crucially matched with node 8.12, does not match the latest version of chrome browser. The method is the version of the chrome browser. It is downgrading to 74, but it is a burden because it is the main browser. Another method is to use safari. It is not a method of simply modifying the configuration file at the package.json or project root level, but the nightwatch and vue cli inside the node-module. -plugin-e2e-nightwatch-related settings are connected, so even if possible, it takes time to go through a cumbersome procedure such as taking a safari version, but it is dismissed because it is a problem in terms of reinstallation and simplicity. Eventually, the initial start was due to the possibility of future problems related to the e2e test.If you think about it again, the basic test processing mechanism will not change even if the version is upgraded. I thought it would be better to study nightwatch to solve the problem even if a problem occurs.

Conclusion: The node version, vue/cli version, and chromedriver version must match to some extent. If the nodel version is too old, there is a problem with the combination.

Connecting the back-end and front-end

Build with one command

  • Another reason for using maven to control npm is that Maven supports a variety of built-in phases that can be effectively utilized throughout the entire build life cycle, since the integrated build front end is placed in a subfolder of the backend.

  • Integrated build using the following plug-in in pom.xml Exec Maven Plugin: Execute npm command Maven Resource Plugin: Copy front-end resources Spring Boot Maven Plugin: Start and terminate Spring Boot App Maven Clean Plugin: Affect build Remove jul resources, ex) remove previously built resources

Integrated build execution

mvn install

Clean the existing build and build (recommended) mvn clean install

Important changes

While proceeding with the form and verification related content, a difference from the book was found because the spring boot version of the currently working app is 2.4.2, so it is better to solve the problem while proceeding to the latest version, which is the version of the existing sample example, 2.0.4. Although it is a direction, I decided that it would be better to implement it quickly than to waste time in the middle.

In the process of downgrading to 2.0.4, the following error occurred and I was wandering for a while.

spring-boot-starter-parent관련 모듈을 다운로드 하는 과정에서 발생한 오류  
Could not find artifact org.springframework.boot:spring-boot-starter-parent:pom:2.0.2 in central (https://repo.maven.apache.org/maven2) and 'parent.relativePath' points at no local POM @ line 19, column 10

The reason is that the version name was not accurately described as 2.0.4.RELEAASE. 2.0.4.RELEASE The previous 2.4.2 version was unexpected because there was no RELEASE behind it. (I ran it with the existing sample app and saw that it is downloaded normally and found it in the process of comparing pom.xml.) The error in TaskAgileApplicationTests.java is an error because the test package of the corresponding version is different.

troubleshooting

  • Error Resolutions 1 and 2 are errors that occur when using spring-boot-starter-parent 2.4.2 version.
  1. When creating a validation related test class, the following message is displayed stating that the javax.validation package could not be found The import javax.validation cannot be resolved

=> An error occurs when trying to use import javax.validation in spring 2.3 or higher.

In versions less than spring 2.3, Web-starter imported Validation-starter as follows, but spring boot -> web -> validation spring version 2.3 or higher does not import any more. When creating the initial project, you must set validation dependency or add dependency to pom.xml.

org.springframework.boot spring-boot-starter-validation

  1. Error because the package org.junit.before for using @Before in unit tests could not be found

=> Solve the dependency of junit in pom.xml as follows junit junit 4.12 test

Download Details:

Author: mir2lsky

Source Code: https://github.com/mir2lsky/skyweb.vuejs.spring-boot.mysql

#vue #vuejs #javascript

Web Application for Task Management Tool
3.55 GEEK