使用 vue + thinkjs 开发博客程序记录
一入冬懒癌发作,给自己找点事干。之前博客程序写过几次,php 的写过两次,nodejs 用 ThinkJS 写过,随着 ThinkJS 版本从1.x 升级到 2.x 之前的博客程序也做过升级。但是因为前面考虑搜索引擎抓取还是用传统的方式开发,没有做前后端分离。这次准备用 vue2.x 和 ThinkJS 3.X 重新写一次。这里主要记录一下开发过程中遇到的问题和解决方法。
地址 https://github.com/lscho/Thin...
尚未写完,持续更新中,后续更新发布在个人博客中:https://lscho.com/tech/vue-th...
设计方案
1.前后端分离
2.后端只提供接口
3.RESTful API
4.使用 jwt 身份认证
依赖
服务端
"dependencies": {"think-logger3": "^1.0.0","think-model": "^1.0.0","think-model-mysql": "^1.0.0","think-session": "^1.0.0","think-session-jwt": "^1.0.8","thinkjs": "^3.0.0"}
前端
"dependencies": {"axios": "^0.17.0","iview": "^2.5.1","mavon-editor": "^2.4.13","vue": "^2.5.2","vue-axios": "^2.0.2","vue-router": "^3.0.1","vuex": "^3.0.0","vuex-router-sync": "^5.0.0"}
结构
问题
jwt 身份认证
然后要处理前端部分,为每个请求附加上 token。这里我用的是 axios ,在请求拦截器中很方便的就可以加上。
let loadinginstace;
axios.interceptors.request.use(config => {if (localStorage.getItem('token')) { config.headers.Authorization = localStorage.getItem('token')} return config;
},error => {return error;
})
后端权限认证
async __before(action) {try {this.userInfo=await this.ctx.session('userInfo');} catch(err) {this.userInfo={};}if(this.resource!='token'&&this.ctx.method!='GET'&&think.isEmpty(this.userInfo)){this.ctx.status=401;return this.ctx.fail(-1,"请登录后操作");}}
这里遇到一个问题,就是当 token 为错误时,node-jsonwebtoken 会抛出一个异常,所以这里用了 try catch
捕获,可能有更好的解决办法,暂时放后面处理。
前端身份失效检测
为了安全起见,我们的 token 一般设置的都有效期,所以有两种情况需要我们进行处理.
beforeEnter:(to, from, next)=>{if(!localStorage.getItem('token')){next({ path: '/login' });}else{next();}}
2.token 超过有效期或者被篡改。这种需要后端检测之后才能知道该 token 是否有效。这里服务端检测失效之后会返回 401 状态码以便前端识别。
if(this.resource!='token'&&this.ctx.method!='GET'&&think.isEmpty(this.userInfo)){this.ctx.status=401;return this.ctx.fail(-1,"请登录后操作");}
我们在axios的请求响应拦截器中进行判断即可,因为 4XX 的状态码会抛出异常,所以代码如下
axios.interceptors.response.use(data => {//这里可以对成功的请求进行各种处理return data;
},error=>{if (error.response) {switch (error.response.status) {case 401:store.commit("clearToken");router.replace("/login");break;}}return Promise.reject(error.response.data)
})
markdown 编辑器及文件上传
markdown 编辑器用了 mavonEditor 配置很方便,不多说,主要说一下文件上传遇到的一个问题。
前端代码
<mavon-editor ref=md @imgAdd="imgAdd" class="editor" v-model="formItem.content"></mavon-editor>
imgAdd(pos, $file){var formdata = new FormData();formdata.append('image', $file); image.upload(formdata).then(res=>{if(res.errno==0&&res.data.url){this.$refs.md.$img2Url(pos, res.data.url);}}); }
const file = this.file('image');const extname=path.extname(file.name);//path.extname获取文件后缀名,可做控制const filename = path.basename(file.path);const basename=think.md5(filename)+extname;const savepath = '/upload/'+basename;const filepath = path.join(think.ROOT_PATH, "www"+savepath);think.mkdir(path.dirname(filepath));try{//跨盘符移动会抛出异常await rename(file.path, filepath);}catch(e){const readStream = fs.createReadStream(file.path);const writeStream = fs.createWriteStream(filepath);readStream.pipe(writeStream);}
2017-12-27 更新 在群里@阿特 大佬提到,可以对 payload
这个中间件设置指定临时目录为项目下的某个目录,这样就不存在跨盘``` { handle: 'payload', options: { uploadDir: path.join(think.ROOT_PATH, 'runtime/data') } } ```
这样就可以直接使用 rename 来操作了,关于跨盘 rename 的问题,在 https://github.com/nodejs/nod... 找到了原因,大意是操作系统限制 rename 仅仅是重命名路径引用地址,并没有将数据移动过去,重命名不能跨文件系统操作,所以如果跨文件系统操作需要先复制、然后删除旧数据
部署
因为前端路由使用 history 模式,所以要将请求转发至 index.html 入口页面处理,跟有些 mvc 框架单入口是一个概念。
# 请求转发至入口location / {try_files $uri $uri/ /index.html;}
然后还要处理一下后端请求部分,如果不是同一域名,就要解决跨域问题。这里前后端使用同一个域名,针对 api 请求做一下反向代理即可。
set $node_port 8360;location ~ ^/api/ {proxy_http_version 1.1;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-NginX-Proxy true;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_pass http://127.0.0.1:$node_port$request_uri;proxy_redirect off;}
转载于:https://www.cnblogs.com/lalalagq/p/9960315.html
使用 vue + thinkjs 开发博客程序记录相关推荐
- 使用 ThinkJS + Vue.js 开发博客系统
编者注:ThinkJS 作为一款 Node.js 高性能企业级 Web 框架,收到了越来越多的用户的喜爱.今天我们请来了 ThinkJS 用户 @lscho 同学为我们分享他基于 ThinkJS 开发 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录
基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录 转载于:https://github.com/Meowv/Blog 在开始之前,我们实现一个之前的遗留问题,这个 ...
- 微信小程序云开发博客系统源代码,让写博客像发朋友圈一样简单,含使用部署教程
博客就两种:一是随笔,记录自己的成长历程,二是有目的的发文,例如搬运各种网赚文,我想大部分朋友做博客的初衷都是有一块自己的心灵净土,于是催生了wxapp-blog这款小程序. 完整代码下载地址:微信小 ...
- 【翻译加转载】自己开发Blog博客程序:关于MetaWeblogAPI 的实现
前言 最近想自己做一个Blog程序玩一下,自己做的博客程序,当然要能够和各种博客的客户端要能够连接起来才行. 想要连接当然就是要按照标准来做,目前流行的API主要有: MetablogAPI (博客园 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五)
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五) 转载于:https://github.com/Meowv/Blog 上篇文章完成了文章详情页数据查询和清除缓存 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先
基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先 转载于:https://github.com/Meowv/Blog 本篇主要使用Entity Framework ...
- mpvue 微信小程序_使用Vue.js开发微信小程序:开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- Node项目实战开发-博客系统
Nodejs项目实战开发-博客系统(已完结) 个人博客系统 欢迎访问我的博客~ MaXiaoYu's Bolg 前言: 开发技术 技术 版本 Node ^14.3.0 ejs ^3.1.3 expre ...
- 基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
最新文章
- 【Groovy】Groovy 脚本调用 ( Groovy 脚本中的作用域 | 本地作用域 | 绑定作用域 )
- java之servlet
- numpy.dstack详解
- Spark 运行模式 standalong yarn
- VC网络通信API概览
- CORS——跨域请求那些事儿
- 一杯水怎么测试_一杯水就能鉴别翡翠真假的高招
- Leetcode之插入区间
- 小猴子下落nyoj63(一道可以直接写的好题)
- nod32 升级方法
- 基于php的大学学生宿舍网上报修管理系统
- 牛客练习赛47 D	DongDong坐飞机 (分层最短路)
- SparkSql-redis:将查询到的结果保存到redis中
- 天价高端茶礼是真文化还是智商税?
- 欧美著名大学视频课程(ZZ)
- 世界战争2HTML5小游戏,[娱乐][PCD]SkyWarsReloaded —— 天空战争小游戏全新归来![1.8-1.13.2]...
- (附源码)springboot+mysql+采用协同过滤算法的视频推荐系统的设计与实现 毕业设计261620
- C++ Poco库的PC编译和交叉编译
- 使用SWFUpload上传文件
- 数学建模计算机软件,[计算机软件及应用]数学建模培训.ppt
热门文章
- 杭电1254java实现(双bfs 优先队列)
- 解决Fedora 自己编译的内核不能运行Virtualbox的问题。
- mysql命令参数详解_详解Mysql命令大全(推荐)
- 计算机硬件基础大纲,计算机硬件技术基础大纲_.doc
- python类方法是什么_python类方法和普通方法区别是什么
- RIPv1 与 RIPv2 基础配置
- 【心塞】因为一个低级错误,生产数据库崩溃了将近半个小时
- 疲劳容器的定义_疲劳分析基础
- 国服被ban咋看_LOL国服十大神人霸哥
- 实习就参与“服务过亿用户的项目”,是什么体验?