目录
- 环境搭建
- 后端
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;
到此为止，数据库建立完毕.
