目錄
- 環境搭建
- 后端
2.1 數據庫設計
2.2 SpringBoot + Mybatis
2.3 SpringBoot+RestfulAPI - 前端
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 **
:測試報告主索引表,列出基本信息
字段 | 數據類型 | 可空 | 描述 | Example/備注 |
---|---|---|---|---|
id | int | 主鍵 | report id | auto increment |
create_time | timestamp | 非空 | 記錄創建時間 | 2017-05-17 11:39:27.3383 |
modify_time | timestamp | 可空 | 記錄更新時間 | |
report_name | varchar(100) | 非空 | report的名字,一般是時間+說明 | 20170517_V101提測 |
is_valid | TINYINT | 非空 | 執行完畢標志位,為0時數據不完整,前端不展示 | 1 |
operator | int | 非空 | Foreign Key: user表的id。啟動測試的人,為user表中id前期無用戶管理可為默認值 | 1 |
environment | int | 非空 | Foreign Key: environment表的id。測試環境/線上環境等,用來管理url | 2 |
version | int | 非空 | @Todo, 如果需要版本控制,需要外鍵關聯 | 1 |
2,分類統計表 summary
字段 | 數據類型 | 可空 | 描述 | Example/備注 |
---|---|---|---|---|
id | int | 主鍵 | report id | auto increment |
create_time | timestamp | 非空 | 記錄創建時間 | 2017-05-17 11:39:27.3383 |
modify_time | timestamp | 可空 | 記錄更新時間 | |
report_id | int | 非空 | Foreign Key; report表的id | 1 |
is_contextual | TINYINT | 非空 | 標簽,1(true)0(false) | 1 |
case_num | int | 非空 | 執行用例數 | 500 |
case_passed | int | 非空 | 通過用例數 | 400 |
轉為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;
到此為止,數據庫建立完畢.