VUE个人博客day1——数据库建表、创建目录结构、样式

梦里梦外; 2022-08-31 11:23 17阅读 0赞

# VUE个人博客day1——数据库建表、创建目录结构 #

## 数据库建表 ##

step 1 、创建一个新的连接  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]  
step2、新建数据库  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]  
step3、建立表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 6]

## 创建目录结构 ##

先在github或者gitee上新建一个仓库，建好后拉下来，然后创建目录结构。  
这是我创建好的目录结构  
![在这里插入图片描述][82326a97ce1b4585af418e9248b24e46.png]  
然后在初始化`npm init`，  
index.js  
要先`npm install express -s`

var express = require('express');
    var app = new express();
    // 设置静态代码的位置
    app.use(express.static('./page/'))
    
    app.listen(12306,function(){ 
        console.log('服务已启动')
    })

然后在终端中输入node index.js  
![在这里插入图片描述][619172cdf15c41758700b90ca765955e.png]

## 样式 ##

样式布局暂时先不写笔记了，我会上传到我的gitee中去，这里先放我的gitee路径  
https://gitee.com/liu-qingxia/personal-blog

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20220829/913ed8cbd83447d18d6493c7a221a8ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]: /images/20220829/b9921bd8437c41f58f91d4ee98b52ce9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 2]: /images/20220829/34d62df55fee4bda8a8fa068b7f9d548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 3]: /images/20220829/8e757775a24c4cc0b45b6cdcb54526b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 4]: /images/20220829/d77d0f50a8fd451cb7a0d6783349795f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 5]: /images/20220829/febee7394f9a40589af25fbce4a5a676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 6]: /images/20220829/6fff6d17c95946419c1a9378abdec3bf.png
[82326a97ce1b4585af418e9248b24e46.png]: /images/20220829/bf40816364704bcbb19e1997a7695941.png
[619172cdf15c41758700b90ca765955e.png]: /images/20220829/856ff76972c94ebe92047ece3f3784bd.png