#🌐 Project 22 - An online portfolio to showcase capstone projects.

**Java, Spring Boot, Mysql, Vue, Bootstrap, Jquery** *This is a full-stack project with a separation of front-end and back-end architecture. It uses to showcase capstone students’ work & skills.*

---

Project Management tool

---

##Clone or download

$ git clone https://github.com/uoa-compsci399-s2-2022/showcase.git

Usage

Prerequirements

---

• Java 11 (Install tutorial for CentOS7)
• Mysql>=5.6(Install tutorial for CentOS7)
• Nginx>=1.19(Install tutorial for CentOS7)

Client-side(Frontend) usage(PORT: 80)

Configure a new website after you install Nginx. (Tutorial). Edit your website .conf and add the following code under the server section. Change the IP to your server's IP address.

	location /user {
        proxy_pass http://your IP:8080;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location /project {
        proxy_pass http://your IP:8080;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

It should be look like this.

server
{
    listen 80;
	...
	...
	
	location /user {
        proxy_pass http://1.1.1.1:8080;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location /project {
        proxy_pass http://1.1.1.1:8080;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Restart or reload the Nginx. Copy the contents of the frontend folder to your website folder.

---

Server-side(Backend) usage(PORT: 8080)

---

Run sqlscript.sql in the backend folder in MySQL(Tutorial)

Find your java 11 installed path.

sudo update-alternatives --config java

It should shows like this

There are 2 programs which provide 'java'.

  Selection    Command
-----------------------------------------------
*+ 1           /usr/java/jdk1.8.0_121/jre/bin/java
   2           java-11-openjdk.x86_64 (/usr/lib/jvm/java-11-openjdk-11.0.16.1.1-1.el7_9.x86_64/bin/java)

Enter to keep the current selection[+], or type selection number: 

Replace the JAVAPATH with the path you got in the previous step and replace the WARFILE_PATH with the path where the project's code is stored. Change "IP", "Port", "http://Your domain", "Username" and "Password" as your MySQL server setting in the previous step. Change the "Your domain" to the domain you set in Nginx.

sudo -u root nohup /usr/lib/jvm/java-11-openjdk-11.0.16.1.1-1.el7_9.x86_64/bin/java -jar project.war --server.port=8080 --spring.datasource.url=jdbc:mysql://IP:Port/project?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8 --spring.datasource.username=Username --spring.datasource.password=Password --setting.websiteDomain = "http://Your domain">> /tmp/V73XES10G1.log 2>&1 &

If you disconnect the SSH the backend may stop, you can use Screen to make it keep running.

---

If you want to compile it yourself edit the application.properties in the project folder.

./backend/src/main/resources

spring.datasource.url=jdbc:mysql://IP:Port/project?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8
spring.datasource.username=Username
spring.datasource.password=Password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.naming.physical-strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

mybatis.type-aliases-package=com.eureka.domain
mybatis.configuration.map-underscore-to-camel-case=true

spring.servlet.multipart.max-file-size=30MB
spring.servlet.multipart.max-request-size=30MB
spring.mvc.pathmatch.matching-strategy=ant_path_matcher

setting.websiteDomain = "http://Your domain"

Change "IP", "Port", "http://Your domain", "Username" and "Password" as your MySQL server setting in the previous step. Change the "Your domain" to the domain you set in Nginx.

After that you are good to go, the default administrator account is admin and password is test123 You can log in from http://YourDomain/login.html

---

DEMO Website

---

api.crya.me

---

Future Plan

---

There are lots of function that we can add to this project, such as the management page for Administrator and teacher respectively, the platform that can connect students and their intended employers and so on. So we may add some more useful functions in the future.

---

Dependencies and Tools (tech-stacks)

---

Client-side
jQuery: ^3.6.1
Bootstrap: ^3.4.1
Vue.js: ^3.2.41
wangEditor: ^V5
Sweetalert2:^11.5.2
Axios: ^1.13
Bootstrap-Table: ^1.21.1
html5shiv.js: ^3.7.3
respond.js 1.4.2

Server-side:

• Frameworks:

​ springboot 2.7.4

​ mybatis 2.2.2

• Database:

​ Mysql 8.0.31

• Build Tool:

  Maven : pom.xml