• 首页
        • 更多产品

          客户为中心的产品管理工具

          专业的软件研发项目管理工具

          简单易用的团队知识库管理

          可量化的研发效能度量工具

          测试用例维护与计划执行

          以团队为中心的协作沟通

          研发工作流自动化工具

          账号认证与安全管理工具

          Why PingCode
          为什么选择 PingCode ?

          6000+企业信赖之选,为研发团队降本增效

        • 行业解决方案
          先进制造(即将上线)
        • 解决方案1
        • 解决方案2
  • Jira替代方案
目录

网站后台管理系统如何开发

网站后台管理系统的开发包括:1.技术栈;2.环境配置;3.数据库设计;4.后端实现业务接口。其中,前端有Vue.js、Element-UI 、 BootStrap、Lin-CMS-Vue后端有SpringBoot、SpringMVC、Mybatis-plus、Swagger。数据库是MySQL。

一、网站后台管理系统的开发

1.技术栈

前端有Vue.js、Element-UI 、 BootStrap、Lin-CMS-Vue后端有SpringBoot、SpringMVC、Mybatis-plus、Swagger。数据库是MySQL。

2.环境配置

下载Lin-CMS-Vue和Lin-CMS-SpringBoot开源框架,下载好后开始配置环境:

前端安装node.js就可以了(安装的node.js自带了npm前端包管理工具);

装好后打开cmd命令行工具,cd 进入到前端项目路径下lin-cms-vue,然后输入npm install,回自动安装依赖包。

然后cmd命令行工具,cd 进入到前端项目路径下,输入npm run serve启动服务。

打开后台管理系统首页地址: http://localhost:8080/,导入数据库,打开navicat数据库可视化工具(需要提前下载),新建数据库名lin-cms,导入打包好的sql文件,sql在Lin-cms-spring-boot/src/main/resources/schema中。

后端只需要有IDEA编译器,然后打开后端项目lin-cms-spring-boot,整个文件夹拖到编译器就可以,右击pom.xml,找到maven,点击Reimport导入依赖包。maven就相当于后端管理依赖包的工具。类比npm就是前端包管理工具。

3.数据库设计

以酒店管理系统为例子:

旅客(编号、身份证号、预定时间、离店时间、姓名、性别、年龄、实际入住时间)

房间(编号、类别、名称、价格、状态)

订单(编号、关联旅客ID、关联客房ID、总金额)

员工(权限类别)

4.后端实现业务接口

使用:SpringBoot、Mybatis、SpringMVC

MVC:模型层、控制层、视图层

模型层对应数据库实体DO,也就是一张数据表有什么字段,那么这个模型的对象就要有对应的属性。对应model文件夹。另外有VO对应想展示给用户的对象(比如一个DO的某个属性可以不展示给对象)、DTO作为数据更新或创建时候的对象。

控制层对应请求、响应的处理,对应Controller文件夹;业务逻辑处理对应Service文件夹;数据处理对应mapper文件夹。

视图层View,前后端分离后应该就不需要了。

延伸阅读:

二、框架推荐

Vue

轻巧、高性能、可组件化的MVVM框架,前端三大框架之一(React、Vue、Angular),中文文档完善上手简单(Vue国内公司用的比较多,React国际上用的较多),当然除了Vue框架本身,还可以配合使用其他组件,比如vuex,vue-router、axios、Vue-Cli脚手架等组件(Vue全家桶)

Element-UI

基于 Vue.js的UI组件库(其他的UI库还有iview等),布局、表单、表格等常用控件基本都能满足

ECharts

使用 JavaScript 实现的开源可视化库,各种折线图、柱状图、路径图等酷炫的制图应有尽有(数据分析展示必备)

一站式研发项目管理平台 PingCode

一站式研发项目管理平台 PingCode

支持敏捷\瀑布、知识库、迭代计划&跟踪、需求、缺陷、测试管理,同时满足非研发团队的流程规划、项目管理和在线办公需要。

相关文章