搭建一个简单的cms前端框架 - Go语言中文社区

搭建一个简单的cms前端框架


明确一点,我们的公司的项目是要求前后端分离

当然首选是node这块,警告node很多强大的功能,自己了解的不深,不过慢慢学习中

好了,接下来讲一下我的后端项目的前端部分的搭建过程

1、技术选型:这套框架是搭建给后台人员用的,所以尽量去贴合他们的需要,我选用还是比较老的技术方法: node+require+bootstrap+ jquery+fis(webpack)+ jquery.template模板渲染

2、项目结构:

(1)首先用node的框架express搭建一个基础的node环境,相关链接:http://www.jb51.net/article/110033.htm

(2)我利用node的路由的配置来展示页面,并于一个模块一个文件夹的形式来建立文件目录(这个看看是否需要改进,可以一个路由文件,控制一个模块的路由,改进点

(3)然后在view里面放着html,在public里面放着css+image+js静态文件(其实js中有三个文件夹:app,lib,plugins,其中app是放在某一个html对于的js,lib是放置公用的js以及配置文件等等,plugins是用来放引入的第三方插件)

(4)基于以上说明,大致的目录结构如下图:


基于上面,我还有几点说明注意:

(1)在搭建项目的时候,注意路由配置,以及引入的css,js的相对路径的编写,注意不要出现错误,以及我用的bootstrap的版本bootstrap-3.3.7-dist,这些都可能出现问题

(2)大家肯定好奇的lib里面的东西,我主要是分三种:一个公用的js文件,譬如common.js这个是项目中经常用的一些公用的方法,这个需要靠项目累积起来的,第二个是配置文件:有config文件,这个是配置require的基本的配置以及依赖关系,一个是serverUrl.js这个文件是用来配置项目中所有请求的接口(开发环境,测试环境,生产环境),第三个是引入一些基本的文件,像require.js和jquery.js以及模板文件,如下图


由于是后台管理系统,大致的页面布局是两列布局,左边是导航,右边是对应的表单操作

这里index.html是写主页面,里面是iframe嵌入的子页面

那么里面的子页面大致分为以下几种:

(1)表单查询(输入框,选择下拉,时间选择框 + 查询按钮)

(2)表格(展示的信息 + 操作(根据用户权限),有新增,编辑,删除,上架,下架,查看等等)

(3)分页(分页,以及一页显示几条数据等等)

(4)表单提交(一般是从列表页点进去来的,里面有输入框,选择框,富文本编辑框,提交按钮,发布按钮,取消按钮)

(5)弹框(如果点击删除按钮,弹出提示框等,以及上架下架提醒)

(6)下拉树(z-tree)

以上大概是这些东西,具体根据业务去开发

如果开发好了,需要打包部署到开发,测试,正式环境去

这个时候用到是fis的打包压缩工具,打包压缩好之后就可以直接去部署了,然后用Nginx做代理,访问页面


以上是我2天的成果,对于node这块的东西,还要继续学习,同时这里的node路由的部分还需要改进,并且打包压缩这块还需要多熟悉,现在对整体的项目认识有了比较好的认识!



版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_24930743/article/details/79161960
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-16 23:14:03
  • 阅读 ( 341 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢