wanna spring

Project introduction

Wanna Spring is a project that records personal information and uses front-end and back-end separation. The original intention of the project is that I want to record my every day in this information age. It is also a practical project to learn the separation of front-end and back-end. It is for everyone’s reference, study, and discussion. I am a novice. Please let me know if I am not good at writing. Please give me some advice.

Is it too difficult for a back-end student to write front-end?

development environment

1. JDK 1.8

2. Redis 4.0.11

3. MongoDB 4.0.0

4. IntelliJ IDEA 2018.2.6

5. Maven 3.5

6. Lombok Plugin

7. Node 10.10.0

8. Vue 2.9.6

9. Spring Boot 2.0.4.RELEASE

Technology selection

• Spring Boot + Spring + Spring MVC + Spring Data MongoDB + Swagger

• Redis+MongoDB

• Vue + JQuery + Bootstrap + Element UI + Axios + DayJS + Validator + JSCookie + VCharts

Main functions

• Income information, statistics of expenses and income (check the balance every day to achieve the purpose of saving expenses)

• Schedule information, a simple summary of each day

• To-do list, list the things you plan to do

• Work log, keep track of your daily clock-in data for commuting to and from get off work

Run the project

• rear end

  Just run the main class SpringBeeApplication

• front end

   cd /path/wanna-spring/spring-fee
  # 安装依赖
  npm install
  # 运行项目
  npm run dev

Run screenshot

Earnings record

expense report

Agenda record

To-do items

Deployment project

Install Pagoda Management Tool (recommended)

• To install the pagoda, please go to https://www.bt.cn/bbs/thread-19376-1-1.html

• After the installation is successful, enter the Pagoda management interface, enter software management, and then install Nginx , Redis , and MongoDB

Deploy backend services

1. Modify necessary configuration

   • Modify application.properties file

      # 去掉注释
     spring.profiles.active =prod

   • Modify application-prod.properties file

      # 下面的信息必须使用自己的，如果示例的邮箱发送邮件过于频繁，将会导致示例邮箱的邮件服务被关闭
     # 如何开通邮箱的第三方登录，请自行谷歌百度
     spring.mail.host =mail server host
     spring.mail.protocol =mail server protocol
     spring.mail.username =mail username
     spring.mail.password =mail password or key

   • Modify the config.json file according to the actual situation

2. Package deployment

    # 进入后端项目目录
   cd /path/wanna-spring/spring-bee
   # 打包
   mvn package -Dmaven.test.skip=true

   After packaging, upload the spring-bee-xxxjar file under the target directory to the server (it is recommended to create a new folder), and upload config.json to the same level directory.

3. run

    # 运行，防止BASH窗口关闭时进程挂掉
   setsid java -jar spring-bee.x.x.x.jar &
   # 关闭进程
   lsof -i:8023 # 查找运行的端口，会看到运行在此端口的进程的PID
   kill -9 PID # 强制关闭进程

4. Upgrade HTTPS

   Use the Pagoda tool to create a site

   

   Apply for a certificate and activate HTTPS

   

   Set up reverse proxy

   

Deploy front-end services

1. Modify api.js file

    // 修改成自己的主机
   const host = 'https://spring-api.yourdomain.com'

2. Pack

    # 进入前端项目目录
   cd /path/wanna-spring/spring-fee
   # 安装依赖
   npm install
   # 打包
   npm run build

3. Create a website with Pagoda

   

   Then compress the index.html & static files in the dist directory, upload them to the root directory of the website, and decompress them.

4. Upgrade HTTPS

   

write at the end

Everyone is welcome to communicate and learn together, participate in contributions, and report bugs. If you have good suggestions, you are welcome to make them. I am QQ735817834. If you think it is good, please give it a star to support it.