springboot+vue前後端免費開源

一直奮鬥的程式猿發表於2020-05-16

序言

詳細梳理一下安裝流程，功能說明，開發規範等。

後端專案結構？
如何從零搭建環境開發？
如何打包部署？
接入開發及規範
專案地址
小結

後端專案結構

shop-server 依賴以下專案

https://github.com/cuteJ/ot-server-parent （統一版本外掛管理）

https://github.com/cuteJ/ot-server-commons （公共基礎類）

https://github.com/cuteJ/ot-boot-starter （自定義Spring boot starter）

https://github.com/cuteJ/ot-mybatis-generator （定製生成器）

所依賴的專案安裝包位置：https://maven.pkg.github.com/cuteJ/ot-server-parent

依賴繼承關係如下：

如何從零搭建環境開發

這一節為零基礎搭建，經驗開發人員可直接跳過！！！！

安裝環境

下載對應平臺JDK1.8 Download

# 執行以下命令，顯示版本資訊，安裝完畢。
➜  ~ java -version
java version "1.8.0_151"
Java(TM) SE Runtime Environment (build 1.8.0_151-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.151-b12, mixed mode)

#如果提示找不到對應命令新增
➜  ~ vim .bash_profile
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk版本/Contents/Home
export PATH=$PATH:$M2_HOME/bin

下載Maven Download

# 多個PATH變數用冒號分割
➜  ~ vim .bash_profile
export M2_HOME=/Users/lixingping/soft/apache-maven-3.5.2
export PATH=$PATH:$M2_HOME/bin

# 執行以下命令，顯示版本資訊，安裝完畢。
➜  ~ mvn -v
Apache Maven 3.5.2 (138edd61fd100ec658bfa2d307c43b76940a5d7d; 2017-10-18T15:58:13+08:00)
Maven home: /data/apache-maven-3.5.2
Java version: 1.8.0_151, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_151.jdk/Contents/Home/jre
Default locale: zh_CN, platform encoding: UTF-8
OS name: "mac os x", version: "10.14.6", arch: "x86_64", family: "mac"

配置Maven settings.xml

settings.xml 有兩個目錄

～/.m2 使用者級配置（如果該目錄下面無檔案則新建）
$M2_HOME/conf 全域性配置

在settings.xml 檔案新增以下內容：

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <servers>
    <server>
      <id>github</id>
      <username>cuteJ</username>
      <password>b5bbc403f1b807e64a606bb98af0ab60f5302e67</password>
    </server>
  </servers>
  <mirrors>
    <mirror>
      <id>nexus</id>
      <mirrorOf>central</mirrorOf>
      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
    </mirror>
  </mirrors>
  <profiles>

    <profile>
      <id>github</id>
      <repositories>
        <repository>
          <id>github</id>
          <name>GitHub OWNER Apache Maven Packages</name>
          <url>https://maven.pkg.github.com/cuteJ/ot-server-parent</url>
          <releases>
            <enabled>true</enabled>
          </releases>
          <snapshots>
            <enabled>true</enabled>
          </snapshots>
        </repository>
      </repositories>
    </profile>
  </profiles>

  <activeProfiles>
    <activeProfile>github</activeProfile>
  </activeProfiles>
</settings>

Git Download

全域性配置

git config --global user.name <your name>
git config --global user.email <your_email@example.com>

建議配置

crlf

# windows系統
git config --global core.autocrlf true
# mac系統
git config --global core.autocrlf input
git config credential.helper store

開發工具 intellij idea
資料庫(選擇相應平臺安裝安裝) Mysql

安裝NodeJs Download

# 顯示版本則安裝成功
➜  ~ npm -v
5.6.0

啟動專案

下載前後端專案

git clone https://github.com/cuteJ/shop-server.git

建立資料庫並初始化資料

# 專案install 目錄下兩個檔案
shop-server/install/sql
								---- db.sql // 建立資料庫和使用者
								---- data.sql // 專案表結構和初始化資料

啟動後端專案(maven.pkg.github.com下載有點慢，請有心理準備?)

➜  ~ cd shop-server
➜  ~ mvn clean install
➜  ~ cd shop-server-mgt
➜  ~ mvn spring-boot:run

安裝啟動前端

git clone https://github.com/cuteJ/shop-web-mgt.git
cd shop-web-mgt
npm install --registry=https://registry.npm.taobao.org
npm run dev

如何打包部署

後端 shop-server

cd shop-server
mvn clean package
# 拷貝到執行目錄
shop-server/shop-server-mgt/shop-server-mgt.jar

啟動指令碼（shop-server/install/shell/execute.sh）

#!/bin/bash -

# 資料庫配置
#export MYSQL_URL=127.0.0.1:3306
#export MYSQL_USER=cuteJ_shop
#export MYSQL_PASSWORD=cuteJ_shop123

# 應用配置
#export SERVER_PORT=8300
#export SERVER_CONTEXT_PATH=/shop
# 管理後臺Session超時時間（單位秒）
#export SERVER_SESSION_TIMEOUT=1800
# 服務異常響應形式：always: 返回全部的堆疊資訊（一般在debug,開發測試環境使用）never:返回友好提示
#export SERVER_ERROR_MODE=always
# 跨域配置，也可以在nginx 配置
#export APP_CORS_ORIGIN: http://localhost:9527

#Jwt C端API 認證配置
#export JWT_HEADER=Authorization
#export JWT_SECRET=abkfdsfooi0934
# token失效時間（單位秒）
#export JWT_EXPIRATION=86400

# oss 可選（aliyun|huawei）
#export APP_OSS_KEY=xxx
#export APP_OSS_SECRET=xxx
#export APP_OSS_ENDPOINT=xxx
#export APP_OSS_URL=xxx
#export APP_OSS_BUCKET=xxx

# Linux 路徑
MS_HOME=/data/cuteJ/server
MS_JAR=shop-server-mgt.jar #
APP_NAME=shop-server-mgt #
JAVA_OPTS="-Dspring.profiles.active=prod -Xms1g -Xmx4g -XX:MaxMetaspaceSize=256m -XX:+UseG1GC";

MS_PID=`ps fax|grep java|grep "${MS_JAR}"|awk '{print $1}'`
export MS_PID;

# Function: start
start() {
  pid=${MS_PID}
  if [ -n "${pid}" ]; then {
    echo "${APP_NAME} Service is already running (pid: ${pid})";
  }
  else {
    # Start screener ms
    echo "Starting ${APP_NAME} service";
    cd ${MS_HOME}
    nohup java ${JAVA_OPTS} -jar ./${MS_JAR} > /dev/null 2>&1 &
  } fi;
  # return 0;
}

# Function: stop
stop() {
  pid=${MS_PID}
  if [ -n "${pid}" ]; then {
    echo -ne "Stopping service module";
    kill -15 ${pid}
    sleep 5
    pid=`ps fax|grep java|grep "${MS_JAR}"|awk '{print $1}'`
    if [ ${pid} ]; then {
      echo 'Kill Process!'
      kill -9 ${pid}
    }
    else {
      echo "${APP_NAME} stop success."
    } fi;
  }
  else {
      echo "${APP_NAME} service is not running";
  } fi;

  #return 0;
}

# Main Code

case $1 in
  start)
    start;
    ;;
  stop)
    stop;
    ;;
  restart)
    stop;
    sleep 1;
    start;
    ;;
  status)
    pid=${MS_PID}
    if [ "${pid}" ]; then {
      echo "${APP_NAME} service is running with pid: ${pid}";
    }
    else {
      echo "${APP_NAME} service is not running";
    } fi;
    ;;
esac

exit 0;

./execute.sh start # 啟動應用
./execute.sh stop # 停止應用
./execute.sh status # 檢視應用狀態

前端 shop-web-mgt

安裝 nginx Download

#配置
server {
    listen              80;
    server_name         www.xxxx.com;

    proxy_set_header Host $host;
    proxy_set_header x-auth-token $http_x_auth_token;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Authorization $http_authorization;
    proxy_pass_header  Authorization;

     location / {
         # shop-web-mgt 打包後 dist檔案
         root   /www/shop-web-mgt;                                                                                                                                                                                                                                                                                                      add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
         index  index.html index.htm;
     }

     location /shop/ {
       proxy_set_header             Host $host;
       proxy_set_header             Cookie $http_cookie;
       proxy_set_header             Referer $http_referer;
       proxy_set_header             X-Real-IP $remote_addr;
       proxy_set_header             X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass_header            Server;
       proxy_http_version 1.1;
       proxy_set_header Connection "";
       proxy_pass              http://127.0.0.1:8300/shop/;
       #expires                 0;
  }
}

# 配置介面地址
shop-web-mgt/config/prod.env.js
npm run build:prod
# 拷貝 dist 目錄下的檔案到nginx下面

接入開發及規範

後端
- 基礎資料初始化
  
  檔案目錄
```
 shop-server-mgt/com.onlythinking.shop.init
 	DicsInitializer (常量初始化)
 	ApisInitializer (常量初始化) 
 	MenusInitializer (選單初始化) 
 	AdminInitializer (管理員初始化) 
  GrantInitializer (管理員授權) 
  DBMetaInitializer (資料庫表結構資料) 
```
  執行初始化（注意：會刪除之前的資料）
```
mvn -Pdev spring:boot
curl http://127.0.0.1:8300/shop/api/insecure/re_init
```
- Mybatis 生成實體Mapper
  
  https://github.com/cuteJ/ot-mybatis-generator （可根據自身專案情況定製生成器）
  
  目錄 shop-server-api
  
  配置如下檔案 generatorConfig.properties，generatorConfig.xml
```
mvn -Pgenerator clean install
```
- API文件的生成
```
mvn -PapiDcos clean install
```
  定製化內容可在以下目錄
  
  shop-server-mgt/src/docs/asciidoc 新增adoc檔案
  
  生成Html和PDF兩種格式文件
  
  生成截圖：

Swagger

線上Html

Pdf格式

> [Swagger](https://www.zzhjshop.com/shop_test/swagger-ui.html)
>
> [線上文件](https://cutej.github.io/shop-server/index.html)
>
> [線上文件（pdf）](http://shop-mgt.zzhjshop.com/pdf/index.pdf)

響應異常處理

專案統一響應式異常為com.onlythinking.commons.exception.RespondedException

errorCode用法：如Token失效，介面校驗約束異常等。

國際化處理

原則上除程式碼註釋外專案裡面不應該有中文

國際化檔案目錄：shop-server-mgt/src/main/resources/i18n

// 方式一    
private final MessageSource messageSource;
String message = messageSource.getMessage("mgt.entity.null", null)
// 異常類
if (StringUtils.isBlank(msg)) {
   throw RespondedException.argumentInvalid("{mgt.entity.null}");
}

介面URL規範

//（因為‘shop-server-app’和'shop-server-mgt'合併為一個應用啟動，為了方便許可權控制新增了/app字首作為區分| 根據情況也可以拆分為兩個應用）
/{content-path}/api/app/ //（h5,小程式請求介面）
/{content-path}/api/     //（管理後臺介面）

com.onlythinking.commons.config.annotation.@ApiRest //說明

// 如下：
@Slf4j
@RequiredArgsConstructor(onConstructor = @__(@Autowired))
@Api(tags = "使用者登入")
@ApiRest(serviceId = "app", value = "/auth/{appNo}/{maType}")
public class MaAuthController {

// controller 的拼接路徑為
/${content-path}/api/${serviceId}/${value}

許可權的處理

shop-server-app

// H5，小程式請求介面採用jwt 具體檢視：com.onlythinking.shop.app.core.security.JwtAuthorizationTokenFilter

shop-server-mgt

管理端採用Shiro框架

// RequiresPermissions value 規則 (module:domain:action)
@ApiOperation("系統角色新增")
@RequiresPermissions(value = "sys:role:save")
@PostMapping(value = "/role/save")
public RespondedBody sysRoleSave(@RequestBody OtSysRole dto) {
	infraSystemService.saveOrUpdateSysRole(dto);
  return RespondedBody.successful();
}

定時任務的開發

com.onlythinking.shop.mgt.system.jobs 建立任務

package com.onlythinking.shop.mgt.system.jobs;
/**
 * <p> The describe </p>
 *
 * @author Li Xingping
 */
@Slf4j
@DisallowConcurrentExecution
public class HelloWordJob implements Job {

    @Override
    public void execute(JobExecutionContext context) {
        String instanceId = context.getMergedJobDataMap().getString("instanceId");
        log.info("Job [{}] running ", instanceId);
        log.info("Hello world");

        if (new Random().nextInt(20) % 2 == 0) {
            throw RespondedException.argumentInvalid("執行任務引數錯誤");
        }
    }
}

後臺系統=》定時任務建立模版和觸發器啟動例項

前端

目錄結構

src -- 原始碼目錄
├── api -- API
├── assets -- 圖片資原始檔
├── components -- 通用元件
├── directive -- vue指令
├── filters -- 過濾器
├── lang -- 國際化配置
├── icons -- svg檔案
├── router -- 路由配置
├── store -- vuex狀態管理
├── styles -- 全域性css樣式
├── utils -- 工具類
└── views -- 頁面元件
    ├── app -- 應用管理（小程式）
    ├── dashboard -- 首頁
    ├── errorPage -- 錯誤頁面
    ├── layout -- 佈局頁面
    ├── login -- 登入頁
    ├── profile -- 個人配置
    ├── svg-icons -- 圖示
    ├── system -- 系統管理
        ├── components -- 頁面級別元件
        ├── sysApiListManager -- 介面列表
        ├── sysAuthorityManager -- 介面許可權
        ├── sysDicManager -- 常量管理
        ├── sysJobManager -- 定時任務
        ├── sysJobRunLogManager -- 定時任務日誌
        ├── sysMenuManager -- 選單管理
        ├── sysMetadataManager -- 資料字典
        ├── sysOptLogManager -- 操作日誌
        ├── sysRegionManager -- 地區管理
        ├── sysRoleManager -- 角色管理
        ├── sysUserManager -- 系統使用者管理
    ├── user -- C端使用者管理
        ├── userLoginManager -- C端使用者列表

常量值的處理

常量值比如：性別，狀態為了適配國際化和特殊字元處理制定一套對映表。

常量值

前端使用：

<template>         
<!--元件使用-->
 <sys-code
  v-if="cacheData.codes"
  :cache-options="cacheData['codes']"
   :type-code="'1000'"
   :selected.sync="ok"
 />
 <!--過濾器使用-->
 <span v-if="cacheData.statusMap">{{ scope.row.status | statusFilter(cacheData.statusMap['1000'])}}</span>

</template>
	import SysCode from '@/components/SysCode'
  import {cacheData} from '@/utils/cache'
  export default {
    name: 'demo',
    components: {
      SysCode
    },
    data() {
      return {
        cacheData: {},
      }
    },
    mounted() {
      cacheData(this.cacheData, '1000').then(() => {
      })
    }
  }

專案地址

如有需要使用其它語言實現後端，可以參考下面API文件實現對應介面即可。

Swagger

線上文件

專案地址

https://github.com/cuteJ/shop-server 後端

https://github.com/cuteJ/shop-web-mgt 前端

演示地址：

因為專案託管在github上面且第一次載入檔案較多，所有開啟會比較慢

http://shop-web-mgt.onlythinking.com

小結

專案剛起步，由於個人能力精力有限，專案裡的紕漏和不足歡迎?大家指出和交流。開源不易，有了大家的支援和鼓勵才能更好的走下去。

前、後端常用的免費api集合
2023-09-22
後端API
前後端專案開發常用，含免費次數的API介面
2024-02-02
後端API
開源=免費？
2020-09-30
SpringBoot+Vue前後端分離及互動
2020-12-07
Spring BootVue後端
SpringBoot+Vue前後端分離系統搭建
2020-10-11
Spring BootVue後端
開源不是免費的
2016-07-06
開源是免費的，維護也是免費的
2014-11-28
EacooPHP框架【開源、免費、好用】
2019-05-11
OOPPHP框架
開源免費的建站系統
2021-09-09
10款免費開源PHP框架
2017-08-04
PHP框架
開源≠免費常見開源協議介紹
2021-12-20
協議
開源無廣告的bt客戶端：BiglyBT中文免費版
2020-09-01
客戶端
SpringBoot+vue 前後端的分離專案筆記 [一] 專案搭建
2020-05-15
Spring BootVue後端筆記
超詳細！4小時開發一個SpringBoot+vue前後端分離部落格專案！！
2020-05-29
Spring BootVue後端
前端、後端開發者常用到的免費API整理
2023-10-12
前端後端API
淺談前後端路由與前後端渲染
2018-03-28
後端路由
開源 SpringBoot+vueJs 前後端管理系統模版
2020-05-17
Spring BootVueJS後端
前後端開發流程總結
2019-07-17
後端
開源免費介面管理平臺eoLinker AMS 開源版3.1.5同步線上版！免費增加大量功能！
2017-12-07
開源/免費/強大的移動端觸控滑動外掛—Swiper
2017-11-27
開源精神就意味著免費嗎？
2019-01-08
開源免費繪畫軟體 - Krita for Mac
2020-09-23
Mac
免費開源Blazor線上Ico轉換工具
2022-02-25
Blazor
GitHub 上 10 款免費開源 Windows 工具
2016-10-16
GithubWindows
免費開源網站系統有哪些
2017-11-23
網站
ThinkSWN開源社群問答系統免費開源歡迎使用
2019-05-11
Fecbbc多商戶正式開源免費，BSD開源協議
2021-06-05
協議
推薦一款前後端分離的學習專案-基於springboot+vue
2018-08-10
後端Spring BootVue
SpringBoot+Vue前後端分離，使用SpringSecurity完美處理許可權問題(一)
2018-02-02
Spring BootVue後端Gse
SpringBoot+Vue前後端分離，使用SpringSecurity完美處理許可權問題(六)
2018-01-18
Spring BootVue後端Gse
免費資源網站
2020-12-13
網站
開源等於免費嗎？真相在這裡
2020-07-21
Laravel Markdown Blog 免費開源 Laravel 部落格
2019-04-07
Laravel
免費開源的速度測試軟體：openspeedtest
2022-11-21
免費好用的開源威脅狩獵工具!
2023-05-06
一個免費開源專業的CRM――openCRX
2005-02-13
Github上的7款免費開源軟體
2024-03-31
Github
Vue+Spring Boot 前後端分離的商城專案開源啦！
2020-08-13
VueSpring Boot後端

springboot+vue前後端免費開源

序言

後端專案結構

如何從零搭建環境開發

安裝環境

啟動專案

如何打包部署

接入開發及規範

後端

前端

專案地址

小結

相關文章