当前位置：首页 > Web前端 > CSS

基于阿里egg框架搭建博客（六）-浏览并发布文章

时间：2023-03-31 02:10:02 CSS

相关文章基于阿里egg框架搭建博客（一）-开发准备基于阿里egg框架搭建博客（二）-HelloWorld基于阿里egg框架搭建博客（三）——注册登录基于阿里egg框架搭建博客（四）——权限控制基于阿里egg框架搭建博客（五）——顶部导航栏搭建基于阿里egg框架的博客(6)-浏览、发布文章构建基于阿里egg框架的博客(7)-编辑文章githttps://github.com/ZzzSimon/e...点赞如果你喜欢它！文本浏览和发布文章只是简单的对文章表的读/写操作。文章表设计字段描述名称解释id主键idtitle文章标题url文章访问路径detail文章内容作者，对应用户名不可见是否保密，保密不在文章列表中显示create_time文章首次发表时间update_time最后修改时间文章的sql脚本DROPTABLEIFEXISTS`article`;CREATETABLE`article`(`id`varchar(20)NOTNULL,`title`varchar(255)NOTNULL,`url`varchar(255)NOTNULL,`detail`varchar(4096)NOTNULL,`author`varchar(255)NOTNULL,`invisible`int(1)NOTNULLDEFAULT'0',`create_time`datetimeNOTNULL,`update_time`datetimeNOTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8;页面设计浏览文章发布文章功能设计浏览文章点击文章标题查看文章详细内容发布文章输入文章标题选择是否保密，如果保密则将不显示在文章列表中保存文章支持markdownmarkdown支持对于前端md编辑器，我们选择了Editor.md。官方文档：http://pandao.github.io/edito...前端代码浏览文章list.tpl文章列表我们创建app/view/article/list.tpl文件：{%extends"parent.tpl"%}{%blockhead%}文章列表{%endblock%}{%blockcontent%}{%foriteminlist%}

{{item.title}}: {{item.author}}最后更新于{{helper.formatTime(item.update_time)}}

{%endfor%}{%endblock%}detail.tplarticledetails我们创建app/view/article/detail.tpl文件：{%extends"parent.tpl"%}{%blockhead%}{{article.title}}{%endblock%}{%块内容%}

{{article.title}}{{article.author}}最后更新于{{helper.formatTime(article.update_time)}}

{{article.detail}}

{%endblock%}{%blockscript%}{%endblock%}这里需要注意一点：md的内容首先经过模板，在一个隐藏的div中渲染后，由editormd动态渲染。发布文章article.tpl发布文章我们创建app/view/article/article.tpl文件：{%extends"parent.tpl"%}{%blockhead%}MarkdownEditor{%endblock%}{%块内容%

文章标题：机密（勾选后，不会在文章列表中显示）

保存

{%endblock%}{%blockscript%}{%endblock%}这里需要注意一点：ajax默认不重定向，所以保存成功后，我们需要返回文章的访问url，在回调函数中重定向后端代码ArticleController我们创建app/controller/article.js文件：constController=require('egg').Controller;classArticleControllerextendsController{asynclist(){constctx=this.ctx;constarticleList=awaitctx.service.article.list();awaitctx.render('article/list.tpl',{list:articleList});}asyncdetail(){constctx=this.ctx;constqueryRes=awaitctx.service.article.detail(ctx.params.id);ctx.logger.info(queryRes);awaitctx.render('article/detail.tpl',{article:queryRes[0]});}}module.exports=ArticleController;EditController我们创建app\controller\edit.js文件：constController=require('egg').Controller;constfs=require('mz/fs');classEditControllerextendsController{asynceditHtm(){awaitthis.ctx.render('article/edit.tpl');}asyncsave(){constctx=this.ctx;constarticle=ctx.request.body.article;article.id=ctx.helper.uuid();article.url='/article/'+article.id+'.htm';article.author=ctx.session.user.username;constnowTime=newDate();article.create_time=nowTime;article.update_time=nowTime;constresult=awaitctx.service.article.save(文章);if(result){ctx.body={flag:'1',msg:'保存成功',url:article.url}}else{ctx.body={flag:'0',msg:'保存失败'}}}asyncuploadPic(){const{ctx}=this;常量文件=ctx.request.files[0];letfilenameNew=ctx.helper.uuid()+'.'+file.filename.split('.').pop();letfilepathNew=this.config.baseDir+'\\app\\public\\mdPic\\'+filenameNew;//把临时文件切到一个新目录并等待fs.rename(file.filepath,filepathNew);//按照editormd要求的格式返回ctx.body={success:1,//0表示上传失败;1表示上传成功message:"Uploadsucceeded",url:filepathNew.split(this.config.baseDir+'\\app')[1]//上传成功才返回}}}module.exports=EditController;这里需要注意一点：uoloadPic方法主要用于md编辑器上传图片ArticleService我们创建app/service/article.js文件：constService=require('egg').Service;classArticleServiceextendsService{asynclist(){constsql="SELECTurl,title,author,update_timeFROMarticleWHEREinvisible=0";constlist=awaitthis.app.mysql.query(sql);返回列表；}asyncdetail(id=1){constsql="SELECTtitle,detail,author,update_timeFROMarticleWHEREid=？";returnawaitthis.app.mysql.query(sql,[id])}异步保存(article={}){constres=awaitthis.app.mysql.insert('article',article);返回res.affectedRows===1;}}module.exports=ArticleService;router.js让我们向app/router.js添加一些东西：htm',controller.article.detail);router.get('/articleList.htm',controller.article.list);router.post('/edit/save',controller.edit.save);router.post('/edit/uploadPic',controller.edit.uploadPic);如果最后觉得有用，请转给作者一个喜欢！谢谢你！

上一篇：分享一个csstrick实现正方形四个角设置小正方形的方法

下一篇：前端框架Vue（九）——如何在vue中管理单个文件中的公共css和js方法，并全局调用

基于阿里egg框架搭建博客（六）-浏览并发布文章相关文章

最新推荐

猜你喜欢