这是我们小组简单 web 服务与客户端开发实战。
我们的本次目标为:复制 https://swapi.co/ 网站
我们实现了:
$ go get -u github.com/DalaoBringMeFly/BringMeFlyServer
或者进入项目地址,将文件放入自己的 Go 工作空间。
# 进入 BringMeFlyServer 文件
$ go run main.go
获得提示
Now server is running on port 5656
$ curl -g 'http://localhost:5656/graphql?query={film(id:1){title}}'
{"data":{"film":{"title":"Return of the Jedi"}}}
成功得到返回的数据~
此时,服务器已经成功运行,我们不要关闭终端,我们将要开始前端的安装配置。
git clone https://github.com/DalaoBringMeFly/BringMeFlyWeb
进入项目地址,下载文件,把文件放的合适的位置。
# 进入 BringMeFlyWeb 文件
$ cd BringMeFlyWeb
$ npm install
通过 npm 下载安装项目所需要的 node_modules
(黑洞) 。
# 使用开发模式运行
# 这时候会热加载,所有修改可以立刻得到
# localhost:8080
$ npm run dev
进入浏览器,打开 localhost:8080

完成!
此时,前后端都已经跑了起来。
基于 Go、boltdb、graphql
film 👇
type Film struct {
Producer string `json:"producer"`
Title string `json:"title"`
EpisodeID int `json:"episode_id"`
OpeningCrawl string `json:"opening_crawl"`
Director string `json:"director"`
CharacterURLs []int `json:"characters"`
PlanetURLs []int `json:"planets"`
StarshipURLs []int `json:"starships"`
VehicleURLs []int `json:"vehicles"`
SpeciesURLs []int `json:"species"`
Created string `json:"created"`
Edited string `json:"edited"`
ReleaseData string `json:"release_date"`
}
person 👇
type Person struct {
Name string `json:"name"`
Height string `json:"height"`
Mass string `json:"mass"`
HairColor string `json:"hair_color"`
SkinColor string `json:"skin_color"`
EyeColor string `json:"eye_color"`
BirthYear string `json:"birth_year"`
Gender string `json:"gender"`
Homeworld int `json:"homeworld"`
Created string `json:"created"`
Edited string `json:"edited"`
}
planet 👇
type Planet struct {
Name string `json:"name"`
RotationPeriod string `json:"rotation_period"`
OrbitalPeriod string `json:"orbital_period"`
Diameter string `json:"diameter"`
Climate string `json:"climate"`
Gravity string `json:"gravity"`
Terrain string `json:"terrain"`
SurfaceWater string `json:"surface_water"`
Population string `json:"population"`
Created string `json:"created"`
Edited string `json:"edited"`
}
species 👇
type Species struct {
Name string `json:"name"`
Classification string `json:"classification"`
Designation string `json:"designation"`
AverageHeight string `json:"average_height"`
SkinColors string `json:"skin_colors"`
HairColors string `json:"hair_colors"`
EyeColors string `json:"eye_colors"`
AverageLifespan string `json:"average_lifespan"`
Homeworld int `json:"homeworld"`
Language string `json:"language"`
PeopleURLs []int `json:"people"`
Created string `json:"created"`
Edited string `json:"edited"`
}
starship 👇
type Starship struct {
HyperdriveRating string `json:"hyperdrive_rating"`
MGLT string `json:"MGLT"`
StarshipClass string `json:"starship_class"`
PilotURLs []int `json:"pilots"`
}
vehicle 👇
type Vehicle struct {
VehicleClass string `json:"vehicle_class"`
PilotURLs []int `json:"pilots"`
}
你可以遵循着 GraphQL 的风格来请求所需要的信息。
例如:
$ curl -g 'http://localhost:5656/graphql?query={film(id:1){title}}'
{"data":{"film":{"title":"Return of the Jedi"}}}
基于 Vue、Babel、eslint
查询页面

关于页面

介绍页面

Key | Value | Part |
---|---|---|
Zophyr | ![]() ![]() ![]() |
|
hongzicong | ![]() ![]() |
|
HzYoung | ![]() ![]() |
|
huangjundashuaige | ![]() ![]() ![]() |
|
EmilyBlues | ![]() ![]() ![]() |
|
CurryYuan | ![]() ![]() ![]() |
|
yezo13 | ![]() ![]() ![]() |