Open source task management tool built with Vue.js 2.4.2, Spring Boot 2, and MySQL 5.7+
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
mvn install
to build both the front-end and the back-endmvn test
to run the tests of the back-end and the front-endmvn spring-boot:run
to start the back-endnpm run serve
inside the front-end
directory to start the front-endjava -jar target/app-0.0.1-SNAPSHOT.jar
to start the bundled applicationWhen 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
The version of the development tool is as follows. node v10.23.1 + vue/cli v4.5.11
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.
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
npm run serve in front-end folder
above sea level test
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.
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
mvn install
Clean the existing build and build (recommended) mvn clean install
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.
=> 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
=> Solve the dependency of junit in pom.xml as follows junit junit 4.12 test
Author: mir2lsky
Source Code: https://github.com/mir2lsky/skyweb.vuejs.spring-boot.mysql
#vue #vuejs #javascript