可喜可贺,作为一个专业摸爬滚打的前端程序猿来说,第一次实现用`NodeJS`+`MySQL`数据库开发接口,手动撒花撒花。
本项目学习为主,没有采用express、koa等框架进行,所以在整个项目层次和处理繁琐一些,整个项目层级抽离,仁者见仁智者见智吧。
* 采用技术栈:NodeJs + [MySQL](https://www.kancloud.cn/vvmily_king/vvmily/2331779) + Git
* ~~部署上线:pm2 + nginx~~
* Github地址:https://github.com/wwmingly/vvmily-node
### 1、前置条件
*****
* 拉取项目
git clone https://github.com/wwmingly/vvmily-node.git
* 安装依赖
```
cd ./vvmily-node
npm install
```
* 数据库([环境搭建](https://www.kancloud.cn/vvmily_king/vvmily/2331779)),对应两表 bloglist和 users以及对应的字段 key,练习数据库表结构和数据(一般不这么干!!!)已导出存放在`mysql-table`文件中,需要可自行导入
![](https://img.kancloud.cn/56/74/5674cb6216e83c18afab4a8d07ee2ada_277x491.png)
*****
* 启动数据库,更多命令请点击 [这里](https://www.kancloud.cn/vvmily_king/vvmily/2331779) 查看
```
net start mysql // 启动
mysql -u root -p // 登录
```
* 启动项目
```
npm run dev
npm run devmon // 热更新
```
* 等你启动,看到下图,项目搭建算是大功告成
![](https://img.kancloud.cn/c2/07/c207fe688ef220a11b7ad2c47e8f93cc_628x288.png)
* 项目接口测试,采用 Postman
### 2、项目学习
*****
* 项目模块的拆分,形成单一的功能性文件,这不是我们所追求的么,如下每个文件对应的处理逻辑:
![](https://img.kancloud.cn/47/d2/47d2b99d7d5fb5868b65d9fb8ec25473_445x593.png)
* 项目层级关系,每个层级只处理单一的逻辑,在我看来,学习每个技术时,首先明白数据如何一步步传递的,最终串联起来,即可算进入使用阶段,至于原理那么,需要更多的深入了,不多说,看图:
![](https://img.kancloud.cn/b2/55/b2550bcb7b581caaf733945b4cadb983_814x340.png)
至此,剩下的就是每一步代码实现了,可自行拉去查看。
### 3、登录检验
*****
* 登录还是离不开cookie,既然是学习为主,我们可以在`req.headers.cookie`中获取得到,并处理一下
注:每次请求都需要验证cookie
![](https://img.kancloud.cn/05/0e/050ed16eb4b615d23f7b2084db47599d_459x265.png)
* cookie在登录成功时,设置
```
// httpOnly: 不允许客户端修改
// expires 过期时间(GMT格式)
res.setHeader("Set-Cookie",`username=${username}; path=/; httpOnly; expires=${getCookieExpires()}`);
```
```
const getCookieExpires = () => {
const d = newDate();
d.setTime(d.getTime() +1*60*60*1000);// 一个小时
return d.toGMTString();
};
```
* 经过上面两个步骤,在其他接口验证处理时即可通过`req.cookie.username`等字段判断是否已经登录
* 当接口请求时,可更新`cookie`过期时间`expires`。
以上,基本可以实现登录验证,但是是否发现存在(信息安全)问题?
直接存放username在cookie中,是否存在隐患呢,接下来我们要解决这个问题
### session
*****
首页观察`cookie`的`userId`属性在`session`中是否为真,假则生成一个随机数,真表示已经已经登录
```
let userId = req.cookie.userid;
if (userId) {
needSetCookie = false; // 后面用于是否需要登录验证的接口
if (!SESSION_DATA[userId]) {
SESSION_DATA[userId] = {};
}
}else{
needSetCookie = true;
userId = `${Date.now()}_${Math.random()}`; // 随机数
SESSION_DATA[userId] = {};
}
req.session = SESSION_DATA;
```
完成以上步骤,即可在各个请求前通过`req.session.xxx`判断了,每次请求完成,更新`cookie`时间哦![](https://img.kancloud.cn/9d/b9/9db932e26a234f0e9ecc1421b9837c33_820x150.png)
最后,我们定义的`cookie`,`session`等,都会占用内存,如果访问量起来了,是否可以支撑呢?是否可以考虑`redis`等方式解决呢,后面作为一个扩展吧。
- 首页
- 2021年
- 基础知识
- 同源策略
- 跨域
- css
- less
- scss
- reset
- 超出文本显示省略号
- 默认滚动条
- 清除浮动
- line-height与vertical-align
- box-sizing
- 动画
- 布局
- JavaScript
- 设计模式
- 深浅拷贝
- 排序
- canvas
- 防抖节流
- 获取屏幕/可视区域宽高
- 正则
- 重绘重排
- rem换算
- 手写算法
- apply、call和bind原理与实现
- this的理解-普通函数、箭头函数
- node
- nodejs
- express
- koa
- egg
- 基于nodeJS的全栈项目
- 小程序
- 常见问题
- ec-canvas之横竖屏切换重绘
- 公众号后台基本配置
- 小程序发布协议更新
- 小程序引入iconfont字体
- Uni-app
- 环境搭建
- 项目搭建
- 数据库
- MySQL数据库安装
- 数据库图形化界面常用命令行
- cmd命令行操作数据库
- Redis安装
- APP
- 控制缩放meta
- GIT
- 常用命令
- vsCode
- 常用插件
- Ajax
- axios-services
- 文章
- 如何让代码更加优雅
- 虚拟滚动
- 网站收藏
- 防抖节流之定时器清除问题
- 号称破解全网会员的脚本
- 资料笔记
- 资料笔记2
- 公司面试题
- 服务器相关
- 前端自动化部署-jenkins
- nginx.conf配置
- https添加证书
- shell基本命令
- 微型ssh-deploy前端部署插件
- webpack
- 深入理解loader
- 深入理解plugin
- webpack注意事项
- vite和webpack区别
- React
- react+antd搭建
- Vue
- vue-cli
- vue.config.js
- 面板分割左右拖动
- vvmily-admin-template
- v-if与v-for那个优先级高?
- 下载excel
- 导入excel
- Echart-China-Map
- vue-xlsx(解析excel)
- 给elementUI的el-table添加骨架
- cdn引入配置
- Vue2.x之defineProperty应用
- 彻底弄懂diff算法的key作用
- 复制模板内容
- 表格操作按钮太多
- element常用组件二次封装
- Vue3.x
- Vue3快速上手(第一天)
- Vue3.x快速上手(第二天)
- Vue3.x快速上手(第三天)
- vue3+element-plus搭建项目
- vue3
- 脚手架
- vvmily-cli
- TS
- ts笔记
- common
- Date
- utils
- axios封装
- 2022年
- HTML
- CSS基础
- JavaScript 基础
- 前端框架Vue
- 计算机网络
- 浏览器相关
- 性能优化
- js手写代码
- 前端安全
- 前端算法
- 前端构建与编译
- 操作系统
- Node.js
- 一些开放问题、智力题