目錄

1. 環境搭建
2. 后端
   2.1 數據庫設計
   2.2 SpringBoot + Mybatis
   2.3 SpringBoot+RestfulAPI
3. 前端
   3.1 VueJS 2.0 + Webpack工程介紹
   3.2 Admin-LTE介紹及使用
   3.3 VueJS一些基礎知識
   3.4 項目中用到的和VueJS的開源組件

前言

都說設計Web最核心的是要把數據庫設計好。確實是這樣。
這里以自己的做的為例，用其中兩個簡單表作為示例。

需要使用到的工具

• InteIliJ Idea：這個IDE甚至集成了寫SQL語句和Database鏈接的功能。
• Navicat： 如果你還是想使用專門的數據庫軟件，也需要這個。

表設計。

啥都先不說，線上表設計圖：

這里都是根據公司的數據庫設計規范來做的設計。

**1，測試報告表 report **
：測試報告主索引表，列出基本信息

2，分類統計表 summary

轉為SQL語句

通過上述的2個表，我們可以將之變成SQL語句了

USE xxxx;
DROP TABLE IF EXISTS report;
DROP TABLE IF EXISTS summary;
CREATE TABLE report (
  id          INT                    AUTO_INCREMENT,
  create_time TIMESTAMP,
  modify_time TIMESTAMP    NULL DEFAULT NULL,
  report_name VARCHAR(100) NOT NULL  DEFAULT '20170517_V101提測',
  is_valid    TINYINT      NOT NULL  DEFAULT 0,
  operator    INT          NOT NULL  DEFAULT 1,
  environment INT          NOT NULL  DEFAULT 1,
  --        version tinyint     not null DEFAULT 1,
  PRIMARY KEY (id),
  FOREIGN KEY operator_index(operator) REFERENCES users (id),
  FOREIGN KEY env_index(environment) REFERENCES env (id)
);

CREATE TABLE summary (
  id            INT                 AUTO_INCREMENT,
  create_time TIMESTAMP,
  modify_time TIMESTAMP NULL DEFAULT NULL,
  report_id   INT       NOT NULL  DEFAULT 1,
  is_contextual TINYINT NOT NULL    DEFAULT 0,
  case_num      INT     NOT NULL    DEFAULT 1000,
  case_passed   INT     NOT NULL    DEFAULT 800,
  PRIMARY KEY (id),
  FOREIGN KEY report_id_index(report_id) REFERENCES report (id)
);

這里十分建議在IDEA中寫SQL語句，可以幫助我們檢查語法和執行錯誤。
如下圖所示

IDEA SQL

建立Mysql實例

用我自己的Mac作為本地數據庫的服務器。進行如下：

# 通過Brew安裝mysql
? brew install mysql
? cat my.cnf
# The MySQL database server configuration file.
#
# You can copy this to one of:
# - "/etc/mysql/my.cnf" to set global options,
# - "~/.my.cnf" to set user-specific options.
#
# One can use all long options that the program supports.
# Run program with --help to get a list of available options and with
# --print-defaults to see which it would actually understand and use.
#
# For explanations see
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html

# This will be passed to all mysql clients
# It has been reported that passwords should be enclosed with
# ticks/quotes escpecially if they contain "#" chars...
# Remember to edit /etc/mysql/debian.cnf when changing
# the socket location.
[client]
port        = 3306
#socket     = /var/run/mysqld/mysqld.sock

# Here is entries for some specific programs
# The following values assume you have at least 32M ram

# This was formally known as [safe_mysqld]. Both versions
# are currently parsed.
[mysqld_safe]
#socket     = /var/run/mysqld/mysqld.sock
#nice       = 0

[mysqld]
#
# * Basic Settings
#

#
# * IMPORTANT
#   If you make changes to these settings and your system uses
#   apparmor, you may also need to also adjust
#   /etc/apparmor.d/usr.sbin.mysqld.
#

#user       = mysql
#socket     = /var/run/mysqld/mysqld.sock
port        = 3306
#basedir    = /usr
datadir    = /usr/local/var/mysql
#tmpdir     = /tmp
skip-external-locking
#
# Instead of skip-networking the default is now to listen only on
# localhost which is more compatible and is not less secure.
#bind-address        = 127.0.0.1
#
# * Fine Tuning
#
#key_buffer          = 16M
max_allowed_packet  = 16M
thread_stack        = 192K
thread_cache_size   = 8
# This replaces the startup script and checks MyISAM tables if needed
# the first time they are touched
#myisam-recover         = BACKUP
#max_connections       = 100
#table_cache           = 64
#thread_concurrency    = 10
#
# * Query Cache Configuration
#
query_cache_limit   = 1M
query_cache_size    = 16M
#
# * Logging and Replication
#
# Both location gets rotated by the cronjob.
# Be aware that this log type is a performance killer.
# As of 5.1 you can enable the log at runtime!
#general_log_file        = /var/log/mysql/mysql.log
#general_log             = 1

log_error                = /usr/local/var/mysql/XiaoleideMacBook-Pro.local.err

# Here you can see queries with especially long duration
#log_slow_queries   = /var/log/mysql/mysql-slow.log
#long_query_time = 2
#log-queries-not-using-indexes
#
# The following can be used as easy to replay backup logs or
# for replication.
# note: if you are setting up a replication slave, see
#       README.Debian about other settings you may need
#       to change.
#server-id          = 1
#log_bin            = /var/log/mysql/mysql-bin.log
expire_logs_days    = 10
max_binlog_size     = 100M
#binlog_do_db       = include_database_name
#binlog_ignore_db   = include_database_name
#
# * InnoDB
#
# InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/.
# Read the manual for more InnoDB related options. There are many!
#
# * Security Features
#
# Read the manual, too, if you want chroot!
# chroot = /var/lib/mysql/
#
# For generating SSL certificates I recommend the OpenSSL GUI "tinyca".
#
# ssl-ca=/etc/mysql/cacert.pem
# ssl-cert=/etc/mysql/server-cert.pem
# ssl-key=/etc/mysql/server-key.pem

# Query Caching
query-cache-type = 1

# Default to InnoDB
default-storage-engine=innodb

[mysqldump]
quick
quote-names
max_allowed_packet  = 16M

[mysql]
#no-auto-rehash # faster start of mysql but no tab completition

這里最關鍵的一個是要注釋掉bind-address，其余的配置可以通過注釋自己學習。但是使用默認的即可

bind-address = 127.0.0.1

可以參考：mysql-tutorial

隨后啟動Mysql

? mysql.server -h
Usage: mysql.server  {start|stop|restart|reload|force-reload|status}  [ MySQL server options ]
? mysql.server start

然后通過Navicat或者IDEA的Database連接，運行SQL語句即可
結果如下：
Navicat:

Navicat

IDEA:

IDEA

這里有個需要注意的，既然我們bind-address不是localhost，那么意味著別的人可以訪問了。但是Mysql還需要添加白名單才可以。添加的步驟如下：
在mysql終端，一條命令：

mysql> GRANT SELECT ON *.* TO root@10.10.10.10 IDENTIFIED BY '123456' WITH GRANT OPTION;

到此為止，數據庫建立完畢.

源碼

Git Hub Demo