前言
对于一些不长变的前端项目中,如个人博客、公司官网,可能技术选型为SSG
框架会相对比之前的CSR
会更好些,也会更快,最近研究了下Gatsby框架,感觉不错,就简单写了一个用其访问MySQL数据库,并显示到页面的一个dome记录下学习心得
步骤
1、安装Gatsby-cli脚手架
npm install -g gatsby-cli
2、通过Gatsby-cli脚手架新建一个项目
gatsby new gatsby-site
其中gatsby-site
是项目名称,自己随便取
3、进入项目根目录并下载MySQL插件
cd gatsby-site && npm install gatsby-source-mysql
4、修改Gatsby配置文件(gatsby-config.js),添加插件
{
resolve: `gatsby-source-mysql`,
options: {
connectionDetails: {
host: 'localhost',
user: 'root',
password: 'root',
database: 'gatsby'
},
queries: [
{
statement: 'SELECT * FROM goods',
idFieldName: 'id',
name: 'goods', // 这个不是表名,别搞混了
}
]
}
},
5、打开src/pages/index.js文件,修改代码
当然我这里用了一个mantine的组件库,只是为了好看而已,其中你可能会需要了解graphql语法
import * as React from "react"
import { graphql } from "gatsby"
import { Table } from '@mantine/core';
import Layout from "../components/layout"
import Seo from "../components/seo"
const IndexPage = ({ data }) => {
return (
<Layout>
<Seo title="Home" />
<Table striped >
<thead>
<tr>
<th>id</th>
<th>价格</th>
<th>地点</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
{data.allMysqlGoods.edges.map(({ node }) =>
(<tr key={node.mysqlId}>
<td>{node.mysqlId}</td>
<td>{node.price}</td>
<td>{node.place}</td>
<td>{node.push_time}</td>
</tr>)
)
}
</tbody>
</Table>
</Layout>
)
}
/* 这是graphql语法,其实在项目启动,构建的过程中,Gatsby会去通过插件加上
我们之前加的配置文件,去连接你的MySQL,然后查询出结果,然后再通过graphql
语法去筛选出mysql插件查出的结果,因为还有模板里面会含有其他插件,如
`gatsby-plugin-sharp`、`gatsby-plugin-image`等等,它们查出来的结果是
它们的,mysql插件查出来的是mysql的查询结果
*/
export const query = graphql`{
allMysqlGoods {
edges {
node {
id
name
place
price
push_time
mysqlId
}
}
}
}
`
export default IndexPage
这是我的gatsby数据库
以及goods
表
6、启动项目
npm run develop 或者 gatsby develop
访问默认端口8000,查看效果
总结与反思
问:为什么要学这个呢?难道之前的vue
或者react
写的项目用axios
请求数据,再显示到页面上面达不到上面的效果吗?
答:首先学这个并不是为了新技术而学它,没啥用,不明白它的价值,学了也是白学,还不如躺平;
其次按照以前写一个spa
应用,大概流程就是axios发请求到后端
-> 后端收到请求,连接mysql
-> 查询出结果,响应给前端
-> 前端收到数据
-> 通过框架的diff算法,得出html,渲染到页面上
;
但是你想过一个问题没有,上面的流程当中,在请求发出去开始,到框架帮你把数据解析成html,渲染到页面上结束,这个中间的过程,你的页面是不是还没有数据?是不是相当于是空白?如果这个空白太长,作为一个用户而言,他也许不知道要经历上面那个过程,他只知道 “你这个网站好慢啊,我点了查询,怎么半天不出来数据啊”,那作为开发者你就只能通过loading
动画,或者骨架屏
之类的东西来告知:用户网站正在请求数据,请耐心等待…
所以才会有SSG(Static Site Generation)静态站点生成,而Gatsby
就是该框架的其中之一技术,也就是我在项目构建的时候就去连接数据库,或者请求其他资源、数据,然后将这些数据放进一个json文件
,再直接读这个json文件,把对应的html放在页面上,而用户去访问这个页面的时候,其实就是一个具有完整数据的html了,所以会很快,用户都不用等其他js文件加载或者执行了,就可以看到页面了,就不会有空白页面了
当然也并不是那么完美,肯定是有缺点,比如说对于频繁的数据交互,那这个显然是不好的方案,因为项目构建完了之后,那个json文件
就是死的了,是静态的,而解析出的html
就是读这个json文件
里的数据,假如过了一秒数据就变了,那此时页面就还是旧数据,就会误导用户了,又只能重新构建来获取新的数据了是吧。