简介:小邹个人站点:http://www.itzoujie.com/不懂后端的前端不是一个大前端,不懂后端的前端会大大限制你的发展空间,所以小邹在网上找了一篇不错的文章来分享给大伙,这里说一下,小邹的个人站点技术栈是(node+express ...
小邹个人站点:http://www.itzoujie.com/ 不懂后端的前端不是一个大前端,不懂后端的前端会大大限制你的发展空间,所以小邹在网上找了一篇不错的文章来分享给大伙,这里说一下,小邹的个人站点技术栈是(node+express+vue+mysql),跟这篇文章的技术栈略有不同,当然站点里面涉及的组件库和小程序等,小邹这里就不一一说了。好了,下面直接开始分享: 技术栈Vue + vuex + element-ui + webpack + nodeJs + koa2 + mongodb 目录结构讲解说明:
build 文件讲解 说明:
code 文件1.admin - 后台管理界面源码 src - 代码区域:
2.client - web端界面源码 跟后台管理界面的结构基本一样。 3.server - 服务端源码 说明:
其他文件
后台管理开发中用的一些依赖模块
components 这个文件夹一般放入常用的组件, 比如 Loading组件等等。 views 所有模块页面。 store vuex 用来统一管理公用属性, 和统一管理接口。 登陆 登陆是采用 jsonwebtoken方案 来实现整个流程的。 1. jwt.sign(payload,secretOrPrivateKey,[options,callback]) 生成TOKEN 2. jwt.verify(token,secretOrPublicKey,[options,callback]) 验证TOKEN 3.获取用户的账号密码。 4.通过 jwt.sign 方法来生成token: 5.每次请求数据的时候通过 jwt.verify 检测token的合法性 jwt.verify(token,secret)。 权限 通过不同的权限来动态修改路由表。 通过 vue的 钩子函数 beforeEach 来控制并展示哪些路由, 以及判断是否需要登陆。 通过调用 getUserInfo方法传入 token 获取用户信息, 后台直接解析 token 获取里面的信息返回给前台。 通过调用 setRoutes方法 动态生成路由。 axios 请求封装,统一对请求进行管理 面包屑 / 标签路径
上面介绍了几个主要以及必备的后台管理功能,其余的功能模块 按照需求增加就好 前台前台展示的页面跟后台管理界面差不多, 也是用vue+webpack搭建,基本的结构都差不多。 server端权限 主要是通过 jsonwebtoken 的verify方法检测 cookie 里面的 token 验证它的合法性。 日志是采用 log4js 来进行管理的, log4js 算 nodeJs 常用的日志处理模块,用起来额也比较简单。 log4js 的日志分为九个等级,各个级别的名字和权重如下: 1.图。 2.设置 Logger 实例的类型 logger=log4js.getLogger("cheese")。 3.通过 Appender 来控制文件的 名字、路径、类型 。 4.配置到 log4js.configure。 5.便可通过 logger 上的打印方法 来输出日志了 logger.info(JSON.stringify(currTime:当前时间为${Date.now()}s ))。 定制书写规范(API)设计思路 当应用程序启动时候,读取指定目录下的 js 文件,以文件名作为属性名,挂载在实例 app 上,然后把文件中的接口函数,扩展到文件对象上。 读取出来的便是以下形式: app.controller.admin.other.markdown_upload_img 便能读取到 markdown_upload_img 方法。 在把该形式的方法赋值过去就行: router.post("/markdown_upload_img",app.controller.admin.other.markdown_upload_img) 通过 mongoose 链接 mongodb 封装返回的send函数 通过 koa-static 管理静态文件入口注意事项: 1. cnpm run server 启动服务器 //没装cnpm的使用npm命令 2.启动时,记得启动mongodb数据库,账号密码 可以在 server/config.js 文件下进行配置 3. db.createUser({user:"cd",pwd:"123456",roles:[{role:"readWrite",db:"test"}]})(mongodb 注册用户) 4. cnpm run dev:admin 启动后台管理界面 5.登录后台管理界面录制数据 6.登录后台管理时需要在数据库 创建 users 集合注册一个账号进行登录 7. cnpm run dev:client 启动前台页面 本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。 |